家里最好不要供佛财神

書名： jQuery從入門到精通（軟件開發視頻大講堂）
作者名：明日科技
本章字數： 1516字
更新時間： 2020-11-28 23:47:20

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 彈出的提示對話框

官术网_书友最值得收藏!

jQuery從入門到精通 （軟件開發視頻大講堂）

3.3 jQuery對象和DOM對象

3.3.1 jQuery對象和DOM對象簡介

3.3.2 jQuery對象和DOM對象的相互轉換

jQuery從入門到精通（軟件開發視頻大講堂）