Dom对象和jQuery包装集的区别和联系

1.Dom

对象


在传统的
javascript
开发中
,
我们都是首先获取
Dom
对象
,
比如
:

我们经常使用
document.getElementById
方法根据
id
获取单个
Dom
对象
,

或者使用
document.getElementsByTagName
方法根据
HTML
标签名称获取
Dom
对象集合
。

另外在事件函数中
,
可以通过在方法函数中使用
this
引用事件触发对象
(
但是在多播事件函数中
IE6
存在问题
),
或者使用
event
对象的
target(FF)
或
srcElement(iIE6)
获取到引发事件的
Dom
对象。

注意我们这里获取到的都是
Dom
对象
,
Dom
对象也有不同的类型比如
input, div, span
等
. Dom
对象只有有限的属性和方法

。

注意：this也是我们常见的Dom对象

2.jQuery

包装集


jQuery
包装集可以说是
Dom
对象的扩充
.
在
jQuery
的世界中将所有的对象
,
无论是一个还是一组
,
都封装成一个
jQuery
包装集
,
比如获取包含一个元素的
jQuery
包装集
:

var

jQueryObject=

$("#testDiv");

jQuery
包装集都是作为一个对象一起调用的
. jQuery
包装集拥有丰富的属性和方法
,
这些都是
jQuery
特有的
。

3.Dom

对象与

jQuery

对象的转换


(1) Dom

转

jQuery

包装集


如果要使用
jQuery
提供的函数
,

就要首先构造
jQuery
包装集
.

我们可以使用本文即将介绍的
jQuery
选择器直接构造
jQuery
包装集
,
比如
:

$("#testDiv");

上面语句构造的包装集只含有一个
id
是
testDiv
的元素
.

或者我们已经获取了一个
Dom
元素
,
比如
:

var

div=

document.getElementById("testDiv");

上面的代码中
div
是一个
Dom
元素
,

我们可以将
Dom
元素转换成
jQuery
包装集
:

var

domToJQueryObject=

$(div);

(2) jQuery

包装集转

Dom

对象


jQuery
包装集是一个集合
,
所以我们可以通过索引器访问其中的某一个元素
:

var

domObject=

$("#testDiv")[0];

注意
,
通过索引器返回的不再是
jQuery
包装集
,
而是一个
Dom
对象
!

jQuery
包装集的某些遍历方法
,
比如
each()
中
,

可以传递遍历函数
,
在遍历函数中的
this
也是
Dom
元素
,
比如
:

$("#testDiv").each(
function
() { alert(
this
) })

注意：这里的this是个Dom对象

如果我们要使用
jQuery
的方法操作
Dom
对象
,
怎么办
?

用上面介绍过的转换方法即可
:

$("#testDiv").each(
function
() { $(
this
).html("
修改内容
") })

注意：这里的
$(
this
)就变成jQuery包装集了，它就可以使用jQuery的各种方法了。