jquery对象和DOM对象的区别

最新推荐文章于 2019-10-25 16:05:17 发布

diejie3439

最新推荐文章于 2019-10-25 16:05:17 发布

阅读量162

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/CodingPerfectWorld/archive/2010/12/06/1897567.html

版权

第一次学习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的路子就轻松多了。

From：

http://hi.baidu.com/jiang_yy_jiang/blog/item/259439deb625ca5895ee3718.html

转载于:https://www.cnblogs.com/CodingPerfectWorld/archive/2010/12/06/1897567.html