jQuery系列第七章 jQuery框架DOM操做

時間 2019-11-05

標籤 jquery 系列第七框架 dom 欄目 JQuery 简体版

原文原文鏈接

第七章 jQuery框架的選擇器

jQuery框架繼承和優化了JavaScript訪問DOM對象的特性，咱們使用jQuery框架提供的api能夠更加方便的操做DOM對象。
html

7.1 建立DOM節點

使用JavaScript原生方式建立DOM節點並添加到頁面中的代碼示例：node

1 //01 建立DOM節點
2  var oDiv = document.createElement("div");
3  //02 設置DOM節點的內容
4  oDiv.innerText = "測試的DIV標籤";
5  //03 把節點添加到頁面中
6  document.body.appendChild(oDiv);

使用jQuery框架建立DOM節點並添加的代碼示例：jquery

1 //01 建立DOM節點
2  var oDom = $("<div></div>");
3  //02 設置DOM節點的內容
4  oDom.text("測試的div標籤");
5  //02 把DOM節點添加到頁面中
6  $("body").append(oDom);

更簡單的建立及添加方式：
$("body").append($("<div>我是測試的div標籤</div>"));api

說明app

【1】jQuery框架簡化了DOM操做，直接使用jQuery構造函數$()來建立標籤，在建立標籤的時候只須要把HTML字符串傳遞給函數，jQuery框架會根據參數的內容來建立標籤幷包裝成一個jQ實例對象返回。框架

【2】要明白jQuery框架的DOM操做自己是對JavaScript原生方式進行的封裝，因此相對原生的DOM操做而言效率更低。函數

7.2 插入DOM節點

jQuery框架中提供了多個插入DOM節點的方法，咱們能夠經過調用這些方法方便的實現節點的插入操做。測試

在JavaScript原生的DOM操做中，咱們一般使用appendChild和insertBefore方法來實現插入操做，下面的具體的代碼示例。優化

 1 <body>
 2 <div>我是div標籤1</div>
 3 <div>我是div標籤2</div>
 4 <script>
 5     //appendChild方法使用
 6     //01 建立p標籤
 7     var oP = document.createElement("p");
 8     oP.innerHTML = "我是p標籤";
 9     //02 獲取頁面中第一個div標籤
10     var oDiv1 = document.getElementsByTagName("div")[0];
11     //03 使用appendChild方法添加
12     //把p標籤插入到oDiv1標籤內容的後面
13     oDiv1.appendChild(oP);
14     //insertBefore方法使用
15     var oDiv2 = document.getElementsByTagName("div")[1];
16     //把p標籤插入到oDiv2標籤內容的前面
17     oDiv2.insertBefore(oP,oDiv2.firstChild);
18 </script>
19 </body>

jQuery框架中爲咱們提供了四個方法來提供對應的功能，它們分別是：
[1]append方法:向每一個匹配的元素內部追加內容。
[2]appendTo方法：把全部匹配的元素追加到另外一個指定的元素集合中，和append方法相反。
[3]prepend方法:向每一個匹配的元素內部前置內容。
[4]prependTo方法：把全部匹配的元素前置到另外一個指定的元素集合中，和append方法相反。spa

插入方法的代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jQuery框架/jquery-2.0.0.js"></script>
 7 </head>
 8 <body>
 9 <div class="cur">我是div1</div>
10 <div>我是div2</div>
11 <div>我是div3</div>
12 <ul>
13     <li>我是第1個li</li>
14     <li>我是第2個li</li>
15     <li>我是第3個li</li>
16     <li>我是第4個li</li>
17     <li>我是第5個li</li>
18 </ul>
19 <button>按鈕</button>
20 <script>
21     $(function () {
22         $("button").click(function () {
23             //appendTo:把頁面中全部的li標籤都插入到全部的div標籤內容的後面
24             //$("li").appendTo($("div"));
25             //append:把頁面中全部的div標籤都插入到全部的li標籤內容的後面
26             //$("li").append($("div"));
27             //prependTo:把頁面中全部的li標籤都插入到全部的div標籤內容的前面
28             //$("li").prependTo($("div"));
29             //prepend:把頁面中全部的div標籤都插入到全部的li標籤內容的前面
30             //$("li").prepend($("div"));
31         })
32     })
33 </script>
34 </body>
35 </html>

jQuery框架中還提供了多個外部插入內容的方法，它們分別是：
[1]after方法：在每一個匹配的元素以後插入內容。
[2]before方法：在每一個匹配的元素以前插入內容。
[3]insertAfter方法：把全部匹配的元素插入到另外一個指定的元素集合的後面。
[4]insertBefore方法：把全部匹配的元素插入到另外一個指定的元素集合的前面。

7.3 刪除DOM節點

JavaScript原生的DOM操做中可使用removeChild方法來刪除指定的節點以及其包含的全部子節點，並返回這些刪除的內容。

jQuery框架中定義了3個刪除內容的方法：它們分別是remove（）、empty（）和detach（）。

remove方法可以將匹配的元素從DOM中刪除。
empty方法用來清空元素包含的內容，該方法沒有參數。
detach方法可以將匹配的元素從DOM中分離出來。

注意

[1] 刪除和清空是兩個概念，清空操做執行後該標籤還存在。

[2] detach方法和remove方法差很少，但detach方法可以保存全部jQuery數據與被移走的元素相關聯，全部綁定在元素上的事件、附加的數據等都會保存下來。若是您在移走一個元素不久後，又須要將該元素從新插入DOM，那麼推薦使用detach方法。

7.4 複製和替換DOM節點

① 節點的複製

在JavaScript原生方式操做DOM節點時，可使用cloneNode方法來複制節點，具體的語法以下：

語法：nodeObject.cloneNode(include_all)
參數：

include_all參數自己爲布爾類型的值。

若是爲true，那麼將會複製原有的節點以及全部的子節點。
若是爲false，那麼牢牢複製節點自己。

jQuery框架中，使用clones方法來複制節點，具體的語法以下：

語法：jQ.clone（[widthDataAndEvents]，[deepWithDataAndEvents]）
參數：
clone方法的兩個參數都是可選的布爾值，若是不傳遞則默認所有爲false。

widthDataAndEvents參數表示是否複製該節點的事件處理數據。
deepWithDataAndEvents參數表示是否複製子元素的事件處理數據。

② 節點的替換

在原生的DOM操做中，可使用replaceChild方法來替換節點。
語法：nodeObject.replaceChild(new_node,old_node)
參數說明：new_node爲指定的新節點，old_node爲被替換的節點。若是替換成功，那麼會返回被替換的節點，若是替換失敗，那麼會返回null。

jQuery框架中定義了replaceWith和replaceAll方法來替換節點。

[1] replaceWith方法

語法：jQ.replaceWith（newContent）
說明：replaceWith方法可以將全部匹配的元素都替換成指定的HTML或者是DOM元素。
示例：$("p").replaceWith("<div>我是DIV標籤<div>")

[2] replaceAll方法

語法：jQ.replaceAll(selector)
說明：replaceAll方法和replaceWith是一對相反的操做。