简介DOM对象和jQuery对象

第一次学习jQuery，经常会搞不清楚哪些是jQuery对象、哪些是DOM对象，所以需要重点了解它们以及它们之间的关系。

1. DOM对象

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <h3>例子</h3> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li>苹果</li> <li>橘子</li> <li>菠萝</li> </ul> </body> </html>

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

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

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

（点击查看大图）图1-14 把网页元素表示为文档树

在这棵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.getElementById("id").html()也会报错，只能用document.getElementById("id").innerHTML语句。

特别注意：用#id作为选择符取得的是jQuery对象而并非document.getElementById("id")所得到的DOM对象，两者并不等价。关于"#"选择符的运用，我们将在下一章进行讲解。从学习jQuery一开始就应当树立正确的观念，认识jQuery对象和DOM对象之间的区别，一旦能够跨越这道坎，之后学习jQuery的路子就轻松多了。