<body>

         <h3>例子</h3>

         <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>

         <ul>

             <li id="apple">苹果</li>

             <li>橘子</li>

             <li>菠萝</li>

         </ul>

     </body>

可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点，这样得到的DOM元素就是DOM对象，DOM对象可以使用JavaScript中的方法，如下：

 var domObj = document.getElementsByTagName("h3")[0]; // 获得Dom对象

 var objHTML = domObj.innerHTML;　　//　　使用JavaScript中的属性——innerHTML

jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么可以使用jQuery里的方法。

alert($('#apple').html());

这段代码等同于：

alert(document.getElementById('apple').innerHTML);

1.在jQuery对象中无法使用DOM对象的任何方法，例如$('#id').innerHTML和$('#id').checked之类的写法都是错误的，可以用$('#id').html()和$('#id').attr("checked")之类的jQuery方法来代替。

2.DOM对象也不能使用jQuery里的方法，例如document.getElementById('apple').html()也会报错，只能用document.getElementById('apple').innerHTML语句。

3.用#id作为选择符取得的是jQuery对象而并非document.getElementById('id')所得到的DOM对象，两者并不等价。

jQuery不能使用DOM中的方法，但如果jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。

jQuery提供了两种方法将jQuery对象转换为DOM对象，即[index]和get（index）。

  1. jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象，jQuery代码如下：
var $cr = $("#cr");    //jQuery对象

var cr =$cr[0];    //DOM对象

alert(cr.checked)    //检测这个checkbox是否被选中
  1. 另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象，jQuery代码如下：
 var $cr = $("#cr");    //jQuery对象

 var cr =$cr.get(0);    //DOM对象

 alert(cr.checked)    //检测这个checkbox是否被选中

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，方法为$(DOM对象)，jQuery代码如下：

 var cr = document.getElementById("cr");    //DOM对象

 var $cr = $(cr);    //jQuery对象

 alert($cr.is(":checked"));    //jQuery方式判断

is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值。

jQuery基础学习2——DOM和jQuery对象的更多相关文章

  1. jquery基础学习之DOM篇（二）

    在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHT ...

  2. JQuery基础学习总结

    JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...

  3. 【总结整理】JQuery基础学习---DOM篇

    前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...

  4. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  5. jQuery 基础学习笔记总结（一）

    Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...

  6. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  7. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

  8. jQuery基础学习(一)—jQuery初识

    一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...

  9. 【总结整理】JQuery基础学习---动画

    jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...

随机推荐

  1. Huge CSV and XML Files in Python, Error: field larger than field limit (131072)

    Huge CSV and XML Files in Python January 22, 2009. Filed under python twitter facebook pinterest lin ...

  2. ASP.NET MVC 学习2、从Controller传递数据到View

      参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view 一,Control ...

  3. 玩转EasyUi弹出框

    这两天在搞EasyUi的弹出框,弹出框之前也搞过很多个版本,总是觉得不那么完美,刚好最近有时间,就往多处想了想,功能基本上达到我的预期,并且在开发过程中遇到很多小技巧,特撰文如下. 走起:在EasyU ...

  4. fiddler2抓包工具使用图文教程

    fiddler2抓包工具使用图文教程 三.fiddler实用功能使用说明: 1.fiddler捕获浏览器的会话: 能支持http代理的任意程序都能被fiddler捕获到,由于fiddler的运行机制就 ...

  5. Oracle数据文件管理

    1.数据文件概述 Oracle数据库的数据文件(扩展名为DBF的文件)是用于保存数据库中数据的文件,系统数据.数据字典数据.临时数据.索引数据.应用数据等都物理地存储在数据文件中.用户对数据库中数据的 ...

  6. 基于ffmpeg的简单音视频编解码的例子

    近日需要做一个视频转码服务器,对我这样一个在该领域的新手来说却是够我折腾一番,在别人的建议下开始研究开源ffmpeg项目,下面是在代码中看到的一 段例子代码,对我的学习非常有帮助.该例子代码包含音频的 ...

  7. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  8. 通过js检测到iframe，使父窗口重定向到index -----------？？？----------------------

    通过js检测到iframe,使父窗口重定向到index -----------???---------------------- 如果本身已将在iframe中,那么重定向的页面应该直接添加到父级ifr ...

  9. 【Android】以BaseAdapter做适配器的ListView及其性能优化

    适配器的Java类 package com.app.adapter; import org.json.JSONArray; import org.json.JSONObject; import and ...

  10. SQL Server 高性能写入的一些总结(转)

    1.1.1 摘要 在开发过程中,我们不时会遇到系统性能瓶颈问题,而引起这一问题原因可以很多,有可能是代码不够高效.有可能是硬件或网络问题,也有可能是数据库设计的问题. 本篇博文将针对一些常用的数据库性 ...