jQuery包装集和DOM对象

jQuery包装集和DOM对象是有区别的,jQuery包装集它一定是一个集合,是用jQuery的形式封装,不管它含有几个元素;而DOM对象一般是获取到的页面上某一个元素,比如说div、p等等,当然也可以获取一组DOM对象。

我们来看一个jQuery包装集:

$(‘#btn’) //这是一个jQuery包装集

上面的代码中虽然是以id的形式获取了一个包装集,并且它里面肯定只有一个元素,但是它也是一个集合。

我们来看一个DOM元素:

1
document.getElementById(‘btn’) //这是一个DOM元素

虽然上面两段代码都获得了id为btn的元素,但是他们两个的形式是不一样的。

对于jQuery我可以使用$(‘#btn’).html(),而对于DOM元素可以使用document.getElementById(‘btn’).innerHTML,这两句话在效果上是等同的。

jQuery包装集和DOM对象可以相互转换

在jQuery中提供了一些方法将jQuery包装集转换为DOM对象,比如说类似数组的下标方式,如下代码:

1
2
var btn=$(‘#btn’);
var dom=btn[0];

jQuery还提供了内置方法,来获得DOM对象,代码如下:

1
2
var btn=$(‘#btn’);
var dom=btn.get(0);

当然DOM对象也可以转换为jQuery包装集,其实也比较简单,就是用jQuery的符号$()把元素包装起来就可以了,代码如下:

1
2
var dom=document.getElementById(‘btn’);
var btnquery=$(dom);

再次强调jQuery包装集和DOM对象并并不是一回事,这个概念要分清楚,它们有各自的api,虽然有相似但均不相同。

相关推荐