您的位置：首页 > Web前端 > JQuery

jQuery对象和DOM对象的区别与联系

2014-02-23 21:05 429 查看

一、什么是DOM对象

所谓DOM，即Document Object Model（文档对象模型），每一个DOM都可以表示成一棵树，请看下面的代码，这是一个简单的网页基本结构。

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="gbk">
5     <title>Document</title>
6 </head>
7 <body>
8     <p>这是一个段落</p>
9     <div id="test">这是一个div</div>
10 </body>
11 </html>

在上面的这颗DOM树中，所有的标签（如p, div等）组成的节点都称为DOM元素节点。我们可以通过javascript中的getElementsByTagName或者getElementById来获取元素节点。通过这种方式得到的DOM元素就是DOM对象。DOM对象可以使用javascript中的方法和属性来进行操作，例如：

1 var oDiv = document.getElementBy("test");    //获取DOM对象
2 var oDivHtml = oDiv.innerHTML;            //获取div中的html内容

二、什么是jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么就可以使用jQuery里的任何方法。例如：（还是针对上面那段网页基本结构），我们可以使用：

1 $("#test").html();

来获取div中的html内容，这和上面通过DOM对象来获取div中的内容得到的最终结果是一样的。

但是需注意的是：在jQuery对象中无法使用任何DOM对象的方法。例如$("#test").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#test").html()和$("#id").attr("checked")之类的jQuery方法来代替。

当然，DOM对象也同样不能使用jQuery里的方法。例如document.getElementById(“id”).html()也会报错，只能用document.getElementByID(“id”).innerHTML语句。

三、jQuery对象和DOM对象的相互转换

1.DOM对象转换成jQuery对象

DOM对象转换成jQuery对象相对比较简单，这里放在前面说。对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。例如：

var oDom = document.getElementById("test2");    //DOM对象
var oJquery = $(oDom);        //转换成jQuery对象

转换后，可以任意使用jQuery中的方法。

2.jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法，但如果对jQuery所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。

jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get([index])。

（1）jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。例如：

1 var oCheckBox = $(".checkBox");        //jQuery对象
2 var oDomCheckBox = oCheckBox[0];    //DOM对象
3 alert(oDomCheckBox.checked);        //弹出checkbox是否被选中

（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。例如

1 var oCheckBox = $(".checkBox");        //jQuery对象
2 var oDomCheckBox = oCheckBox.get(0);    //DOM对象
3 alert(oDomCheckBox.checked);        //弹出checkbox是否被选中

通过以上几种方法，可以任意地相互转换jQuery对象和DOM对象。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom jquery 对象

相关文章推荐

新的分享

章节导航