jQuery 对象和 DOM 对象

Posted 2021-11-26 jwen1994

1.DOM 对象

DOM（Document Object Model，文档对象模型），每一份 DOM 都可以表示成一棵树。下面来构建一个非常基本的网页，网页代码如下：

//...省略其他代码
<h3></h3>
<p title="请选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
</ul>
//...省略其他代码

可以把上面的html结构描述为一棵DOM树，在这棵DOM树中，<h3>、<P>、<ul>以及<ul>的3个<li>子节点都是 DOM 元素节点。可以通过 javascript 中的 getElementsByTagName 或者 getElementById 来获取元素节点。像这样得到的 DOM 元素就是 DOM 对象。DOM 对象可以使用 JavaScript 中的方法，示例如下：

var domObj = document.getElementById("id");  //获取 DOM 对象
var objHTML = domObj.innerHTML;              //使用JavaScript中的属性——innerHTML

 

2.jQuery 对象

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

$("#foo").html()；//获取为 foo 的元素内的 html 代码。.html()是jQuery里的方法

这段代码等同于：

document.getElementById("foo").innerHTML;

在 jQuery 对象中无法使用 DOM 对象的任何方法。同样，DOM对象也不能使用 jQuery 里的方法。

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

 

3.jQuery 对象转成 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是否被选中了

2）另一种方法是 jQuery 本身提供的，通过 get(index) 方法得到相应的 DOM 对象。jQuery 代码如下：

var $cr = $("#cr");          // jQuery对象
var cr = $cr.get[0];         // DOM对象
alert( cr.checked );         // 检测这个checkbox是否被选中了

 

4.DOM 对象转成 jQuery 对象

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

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

转换后，可以任意使用 jQuery 中的方法。