3.3 jQuery对象和DOM对象

3.3.1 jQuery对象和DOM对象简介

刚开始学习jQuery，经常分不清楚哪些是jQuery对象，哪些是DOM对象，因此，了解jQuery对象和DOM对象以及它们之间的关系是非常必要的。

1.DOM对象

DOM是Document Object Model，即文档对象模型的缩写。DOM是以层次结构组织的节点或信息片段的集合，每一份DOM都可以表示成一棵树。下面构建一个基本的网页，网页代码如下：

图3.7 一个非常基本的网页

        <html>
        <head>
        <title>DOM对象</title>
        </head>
        <body>
        <h2>明日图书</h2>
        <p>《JavaScript从入门到精通》</p>
        </body>
        </html>

网页的初始化效果如图3.7所示。

可以把上面的HTML结构描述为一棵DOM树，如图3.8所示。

图3.8 把网页元素表示为DOM树

在这棵DOM树中，<h2>、<p>节点都是DOM元素的节点，可以使用JavaScript中的getElementById或getElementsByTagName来获取，得到的元素就是DOM对象。DOM对象可以使用JavaScript中的方法。例如：

        var domObject = document.getElementById("id");
        var html = domObject.innerHTML;

2.jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是独有的，可以使用jQuery里的方法。例如：

        $("#test").html();    //获取id为test的元素内的html代码

这段代码等同于：

        document.getElementById("test").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里面的方法。比如：$("#test").innerHTML、document.getElementById("test").html()之类的写法都是错误的。

注意

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

3.3.2 jQuery对象和DOM对象的相互转换

既然jQuery对象和DOM对象有区别也有联系，那么jQuery对象与DOM对象也可以相互转换。在两者转换之前首先约定好定义变量的风格。如果获取的是jQuery对象，那么我们在变量前面加上$，例如：

        var $obj = jQuery对象;

如果获取的是DOM对象，则与平时习惯的表示方法一样：

        var obj = DOM对象;

注意

为便于读者阅读，本书中的实例都会以这样的方式呈现。这样约定只是便于讲解与区分，在实际应用中并不规定。

1.jQuery对象转换成DOM对象

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

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

        var$mr=$("#mr");                         //jQuery对象
        var mr=$mr[0];                           //DOM对象
        alert(mr.value);                         //获取DOM元素的value的值并弹出

（2）jQuery本身也提供get(index)方法，可以得到相应的DOM对象。例如：

        var$mr=$("#mr");                         //jQuery对象
        var mr=$mr.get(0);                       //DOM对象
        alert(mr.value);                         //获取DOM元素的value的值并弹出

2.DOM对象转换成jQuery对象

对于一个DOM对象，只需要用$()把它包装起来，就可以得到一个jQuery对象了，即$(DOM对象)。例如：

        var mr=document.getElementById("mr");    //DOM对象
        var$mr=$(mr);                            //jQuery对象
        alert($(mr).val());                      //获取文本框的值并弹出

转换后，DOM对象就可以任意使用jQuery中的方法了。

通过以上方法，可以任意实现DOM对象和jQuery对象之间的转换。需要再次强调的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以使用DOM中的方法的。

下面举两个简单的例子来加深对DOM对象和jQuery对象相互转换的理解。

【例3.2】DOM对象转换为jQuery对象。（实例位置：光盘\TM\sl\3\2）

（1）创建一个名称为js的文件夹，并将jquery-1.11.1.min.js复制到该文件夹中。

（2）创建一个名称为index.html的文件，在该文件的<head>标记中引用jQuery库文件，关键代码如下：

        <script language="javascript" src="js/jquery-1.11.1.min.js"></script>

（3）编写jQuery代码，实现在页面载入完毕后，首先使用DOM对象的方法弹出p节点的内容，之后将DOM对象转换为jQuery对象，同样再弹出p节点的内容，具体代码如下：

        <script>
        $(document).ready(function(){
            var domObj = document.getElementById("testp");
            alert("使用DOM方法获取p节点的内容："+domObj.innerHTML);
            var $jqueryObj = $(domObj);
            alert("使用jQuery方法获取p节点的内容："+$jqueryObj.html());
        })
        </script>

运行index.html，将弹出如图3.9所示的提示对话框。

图3.9 弹出的提示对话框

【例3.3】jQuery对象转换为DOM对象。（实例位置：光盘\TM\sl\3\3）

（1）创建一个名称为js的文件夹，并将jquery-1.11.1.min.js复制到该文件夹中。

（2）创建一个名称为index.html的文件，在该文件的<head>标记中引用jQuery库文件，关键代码如下：

        <script language="javascript" src="js/jquery-1.11.1.min.js"></script>

（3）编写jQuery代码，实现在页面载入完毕后，首先获取2个jQuery对象，使用jQuery对象的方法分别弹出2个p节点的内容，之后分别使用[index]和get(index)的方法将jQuery对象转换为DOM对象，同样再弹出2次p节点的内容，具体代码如下：

        <script>
        $(document).ready(function(){
            var $jQueryObj = $("#testp");
            alert("使用jQuery方法获取第一个p节点的内容："+$jQueryObj.html());
            var $jQueryObj1 = $("#testp1");
            alert("使用jQuery方法获取第二个p节点的内容："+$jQueryObj1.html());
            var domObj = $jQueryObj[0];
            alert("使用DOM方法获取第一个p节点的内容："+domObj.innerHTML);
            var domObj1 = $jQueryObj1.get(0);
            alert("使用DOM方法获取第二个p节点的内容："+domObj1.innerHTML);
        })
        </script>

运行index.html，将弹出如图3.10所示的提示对话框。

图3.10 弹出的提示对话框

上一章目录下一章