Question

1.4.1　DOM对象和jQuery对象简介

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

1．DOM对象

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

初始化效果图如图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中的方法，示例如下：

2．jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。例如：

这段代码等同于：

在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对象，那么在变量前面加上$，例如：

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

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

1．jQuery对象转成DOM对象

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

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

（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。

jQuery代码如下：

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

jQuery代码如下：

2．DOM对象转成jQuery对象

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

jQuery代码如下：

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

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

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

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

1.4.3　实例研究

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

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

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

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

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

图1-16　初始效果

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

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

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

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

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

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

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

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