1.4 jQuery对象和DOM对象

1.4.1 DOM对象和jQuery对象简介

第一次学习jQuery，经常分辨不清哪些是jQuery对象、哪些是DOM对象，因此需要重点了解jQuery对象和DOM对象以及它们之间的关系。

1．DOM对象

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

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

初始化效果图如图1-13所示。

图1-13 一个非常基本的网页

可以把上面的HTML结构描述为一棵DOM树，如图1-14所示。

图1-14 把网页元素表示为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();  //获取id为foo的元素内的html代码。.html()是jQuery里的方法

这段代码等同于：

document.getElementById("foo").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr("checked")之类的jQuery方法来代替。同样，DOM对象也不能使用jQuery里的方法。例如document.get Element ById("id").html()也会报错，只能用document.getElementById("id").innerHTML语句。

注意：用#id 作为选择符取得的是 jQuery 对象而并非document.getElementById("id")所得到的DOM对象，两者并不等价。关于“#”选择符的运用，将在下一章进行讲解。从学习jQuery开始就应当树立正确的观念，分清jQuery对象和DOM对象之间的区别，之后学习jQuery就会轻松很多。

1.4.2 jQurey对象和DOM对象的相互转换

在讨论 jQurey 对象和DOM 对象的相互转换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前面加上$，例如：

var $variable = jQuery对象;

如果获取的是DOM对象，则定义如下：

var variable = DOM对象;

本书中的例子均会以这种方式呈现，以方便读者阅读。

1．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是否被选中了

2．DOM对象转成jQuery对象

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

jQuery代码如下：

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

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

通过以上方法，可以任意地相互转换jQuery对象和DOM对象。

最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法，但jQuery对象提供了一套更加完善的工具用于操作DOM，关于jQuery的DOM操作将在第3章进行详细讲解。

注意：平时用到的jQuery对象都是通过`$()`函数制造出来的，`$()`函数就是一个jQuery对象的制造工厂。

1.4.3 实例研究

下面举个简单的例子，来加深对jQuery对象和DOM对象的理解。

有些论坛在用户注册的时候，必须先要同意论坛的规章制度，才可以进行下一步操作。如图1-15是某个论坛的注册页面，用户必须选中页面下方的“同意并接受注册协议”复选框，否则不能提交。

编写一段简单的代码来实现这个功能。新建一个空白的页面，然后添加以下HTML代码：

[插图]

HTML代码初始效果如图1-16所示。

图1-15 某论坛注册的截图

然后编写JavaScript部分。前面讲过，没有特殊声明，jQuery库是默认导入的。

通过$("#cr")获取到复选框元素，然后通过判断复选框是否被选中，来执行下一步操作。

图1-16 初始效果

首先，用DOM方式来判断复选框是否被选中，代码如下：

$(document).ready(function () {//等待dom元素加载完毕
    var $cr = $("#cr");//jQuery对象
    var cr = $cr[0];//DOM对象，或者$cr.get(0)
    $cr.click(function () {
        if (cr.checked) {//DOM方式判断
            alert("感谢你的支持!你可以继续操作!");
        }
    })
})

实现上述代码后，选中“我已经阅读了上面制度”复选框，如图1-17所示。

图1-17 选中选项后的效果图

换一种方式，使用jQuery中的方法来判断选项是否被选中，代码如下：

$(document).ready(function () {//等待dom元素加载完毕
    var $cr = $("#cr");//jQuery对象
    $cr.click(function () {
        if ($cr.is(":checked")) {//jQuery方式判断
            alert("感谢你的支持!你可以继续操作！");
        }
    })
})

上面的例子简单地演示了DOM对象和jQuery对象的不同，但最终效果是一样的。

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