jQuery对象与DOM对象简介

2023-10-31 理论教育版权反馈

【摘要】：图1.12基本的网页对应网页代码如下：可以构建上面网页结构的DOM 树，如图1.13 所示。图1.13把网页元素表示为文档树在这棵DOM 树中，

、
、
以及
的3 个
子节点都是DOM 元素节点。可以通过JavaScript 中的getElementById()或者getElementsByTagName()得到DOM 元素，这样的DOM 元素也称之为DOM 对象。jQuery 对象就是通过jQuery 包装DOM 对象后产生的对象。比如$.innerHTML、$.checked 之类的写法都是错误的。

1.DOM 对象

文档对象模型(DOM，Document Object Model)，每一份DOM 都可以表示一棵树。构建一个基本的网页，如图1.12 所示。

pagenumber_ebook=31,pagenumber_book=15

图1.12　基本的网页

对应网页代码如下：

pagenumber_ebook=31,pagenumber_book=15

pagenumber_ebook=32,pagenumber_book=16

可以构建上面网页结构的DOM 树，如图1.13 所示。

pagenumber_ebook=32,pagenumber_book=16

图1.13　把网页元素表示为文档树

在这棵DOM 树中，<h3> 、<p>、<ul> 以及<ul>的3 个<li>子节点都是DOM 元素节点。可以通过JavaScript 中的getElementById()或者getElementsByTagName()得到DOM 元素，这样的DOM 元素也称之为DOM 对象。DOM 对象可以使用JavaScript 中的属性和方法来操作。(www.chuimin.cn)

2.jQuery 对象

那什么是jQuery 对象呢？jQuery 对象就是通过jQuery 包装DOM 对象后产生的对象。

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

pagenumber_ebook=32,pagenumber_book=16

这段代码等同于：

pagenumber_ebook=32,pagenumber_book=16

jQuery 对象将无法使用 DOM 对象的任何方法。比如$("#id").innerHTML、$("#id").checked 之类的写法都是错误的。同样，DOM 对象也不能使用jQuery 的里方法，如使用document.getElementById("id").html()也会报错，只能用document.getElementById("id").innerHTML。

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

jQuery对象与DOM对象简介

相关推荐