總結分享一些使用jQuery實現的DOM操作（收藏）

第01回：節點建立

1、建立元素節點

可以有幾種方式，後面會慢慢接觸。常見的就是直接把這個節點的結構通過HTML標記字串描述出來，通過 $() 函數處理，$("html結構")【相關推薦：】

$('<div></div>')

2、建立文位元組點

與建立元素節點類似，可以直接把文字內容一併描述

$('<div>我是文位元組點</div>')

3、建立屬性節點

與建立元素節點同樣的方式

$("<div id='test' class='box'>我是文位元組點</div>")

第02回：節點插入

1、.append() 、.appendTo() *

$(A).append(B);  // 把B新增到A中(作為A的最後一個子元素)
$(A).appendTo(B);// 把A新增到B中(作為B的最後一個子元素)

2、.after()、.before() *

$(A).after(B); // 在A的後面新增B
$(A).before(B);// 在A的前面新增B

3、.prepend()、.prependTo() *

$(A).prepend(B);   // 把B新增到A中(作為A的第一個子元素)
$(A).prependTo(B); // 把A新增到B中(作為B的第一個子元素)

4、.insertAfter()、.insertBefore()

$(A).insertAfter(B);  // 將A插入到B的後面
$(A).insertBefore(B); // 將A插入到B的前面

第03回：節點刪除

1、.empty()

該方法主要是用於清空指定元素的所有子節點，如：

<div class="box">
  <p>耀哥</p>
</div>

如果我們通過empty方法移除裡面div的所有元素，它只是清空內部的html程式碼，但是標記仍然留在DOM中。

// 通過empty處理
$('.hello').empty();

// 結果：<div class="box"></div>

2、.remove() *

移除元素自身，包括子節點、事件等資訊。

// 通過remove處理
$('.btn').remove(); // 結果：節點不存在了,同時事件也會被銷燬

3、.detach()

如果我們希望臨時刪除頁面上的節點，但是又不希望節點上的資料與事件丟失，並且能在下一個時間段讓這個刪除的節點顯示到頁面，這時候就可以使用detach方法來處理。

detach從字面上就很容易理解。讓一個web元素託管。即從當前頁面中移除該元素，但保留這個元素的記憶體模型物件。

jQuery 官方檔案說明：

這個方法不會把匹配的元素從jQuery物件中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有繫結的事件、附加的資料等都會保留下來。

$("div").detach()這一句會移除物件，僅僅是顯示效果沒有了。但是記憶體中還是存在的。當你append之後，又重新回到了檔案流中。就又顯示出來了。

當然這裡要特別注意，detach方法是JQuery特有的，所以它只能處理通過JQuery的方法系結的事件或者資料。

var li = $(".list li:eq(2)").detach();
setTimeout(() => {
    $(".list").append(li);
}, 3000);

第04回：節點複製與替換

1、.clone()

克隆節點是DOM的常見操作，jQuery提供一個clone方法，專門用於處理dom的克隆。

clone()方法深度複製所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文位元組點。

clone方法比較簡單就是克隆節點，但是需要注意，如果節點有事件或者資料之類的其他處理，我們需要通過clone(ture) 傳遞一個布林值 ture用來指定，這樣不僅僅只是克隆單純的節點結構，還要把附帶的事件與資料給一併克隆了。

$("div").on('click', function() {//執行操作})

//clone處理一
$("div").clone()     // 只克隆了結構，事件丟失

//clone處理二
$("div").clone(true) // 結構、事件與資料都克隆

2、.replaceWith()、.replaceAll() *

$(A).replaceWith(B); // 把A替換為B
$(A).replaceAll(B);  // 把B替換為A

3、.wrap()

如果要將元素用其他元素包裹起來，也就是給它增加一個父元素，針對這樣的處理，JQuery提供了一個 wrap 方法。

<p>Hello, world!</p>

$('p').wrap('<div></div>')

// 結果為：
/*
<div>
  <p>Hello, world!</p>  
</div>
*/

4、.unwrap()

該方法與wrap方法相反，unwrap方法將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。

5、.wrapAll()

wrap是針對單個dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們增加一個父元素，針對這樣的處理，JQuery提供了一個wrapAll方法，比如，頁面上有兩個p元素，如果要為兩個p元素新增共有的一個父類別div，則通過如下程式碼實現：

$('p').wrapAll('<div></div>');

6、.wrapInner()

如果要將集合中的元素內部所有的子元素用其他元素包裹起來，並當作指定元素的子元素，針對這樣的處理，JQuery提供了一個wrapInner方法。我們來看例子：

<div>Hello, world!</div>
<div>Hello, world!</div>

$('div').wrapInner('<p></p>');

// 結果為：
/*
<div>
	<p>Hello, world!</p>
</div>
<div>
	<p>Hello, world!</p>
</div>	
 */

第05回：節點遍歷

1、.children() *

jQuery是一個集合物件，如果想快速查詢集合裡面的第一級子元素，此時可以用 children() 方法。這裡需要注意：.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這裡可以理解為就是父親-兒子的關係）

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

程式碼如果是 $(".div").children() ，那麼意味著只能找到ul，因為div與ul是父子關係，li與div是祖輩關係，因此無法找到。

提示：jQuery是一個集合物件，所以通過children是匹配集合中每一個元素的第一級子元素。

該方法可以接受引數，用於篩選子元素，如 "$('.parent').children(.active)"，匹配子元素中類名為 active 的那一個。

2、.find() *

find 與 children 類似，區別在於 children是父子關係查詢，find是後代關係查詢（包含父子關係）。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

程式碼如果是 $("div").find("li") ，此時，li與div是祖輩關係，通過find方法就可以快速的查詢到了。

提示：

1. find是遍歷當前元素集合中每個元素的後代。只要符合，不管是兒子輩，孫子輩都可以。
2. 與其他的樹遍歷方法不同，選擇器表示式對於 .find() 是必需的引數。如果我們需要實現對所有後代元素的取回，可以傳遞通配選擇器 *。
3. find只在後代中遍歷，不包括自己。

3、.parent() *

如果想快速查詢合集裡面的每一個元素的父元素（這裡可以理解為就是父親-兒子的關係），此時可以用 parent() 方法。因為是父元素，這個方法只會向上查詢一級。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

查詢ul的父元素 div, $(ul).parent() ，就是這樣簡單的表達

4、.parents()

jQuery是一個合集物件，如果想快速查詢合集裡面的每一個元素的所有祖輩元素，此時可以用 parents() 方法。其實也類似 find 與 children 的區別，parent只會查詢一級，parents則會往上一直查到查詢到祖先節點。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

在li節點上找到祖輩元素div， 這裡可以用 $("li").parents() 方法

5、.closest()

以選定的元素為中心，往內查詢可以通過find、children方法。如果往上查詢，也就是查詢當前元素的父輩祖輩元素，jQuery提供了closest() 方法，這個方法類似parents但是又有一些細微的區別，屬於使用頻率很高的方法。

closest() 方法接受一個匹配元素的選擇器字串。從元素本身開始，在DOM 樹上逐級向上級元素匹配，並返回最先匹配的祖先元素。例如：在a元素中，往上查詢所有的li元素，可以這樣表達：$("a").closet("li')。

提示：jQuery是一個集合物件，所以通過closest是匹配集合中每一個元素的祖先元素。

粗看 .parents() 和 .closest() 是有點相似的，都是往上遍歷祖輩元素，但是兩者還是有區別的，否則就沒有存在的意義了

• 起始位置不同：.closest 開始於當前元素 .parents開始於父元素
• 遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到檔案根元素，closest向上查詢，直到找到一個匹配的就停止查詢，parents 一直查詢到根元素，並將匹配的元素加入集合
• 結果不同：.closest返回的是包含零個或一個元素的jquery物件，parents返回的是包含零個或一個或多個元素的jquery物件

6、.next()、.nextAll() *

• .next()：該方法用於匹配當前元素的下一個元素。
• .nextAll()：查詢當前元素之後所有的同輩元素。

7、.prev()、.prevAll() *

• .prev()：該方法用於匹配當前元素的上一個元素。
• .prevAll()：查詢當前元素之前所有的同輩元素

8、.siblings() *

該方法用於匹配當前元素的所有兄弟元素。

第 06 回：篩選

1、.eq(index) *

獲取當前鏈式操作中第N個jQuery物件，返回jQuery物件，當引數大於等於0時為正向選取，比如0代表第一個，1代表第二個。當引數為負數時為反向選取，比如-1為倒數第一個，具體可以看以下範例。

2、.first()、.last() *

• .first()：獲取匹配元素集合中第一個元素。
• .last()：獲取匹配元素集合中最後一個元素。

3、.filter()

篩選出與指定表示式匹配的元素集合。這個方法用於縮小匹配的範圍。用逗號分隔多個表示式。

4、.is()

根據選擇器、DOM元素或 jQuery 物件來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表示式就返回true。如果沒有元素符合，或者表示式無效，都返回'false'。

注意：、在jQuery 1.3中才對所有表示式提供了支援。在先前版本中，如果提供了複雜的表示式，比如層級選擇器（比如 + , ~ 和 > ），始終會返回true

5、.not()

從匹配元素的集合中刪除與指定表示式匹配的元素

6、.map(callback)

通過一個函數匹配當前集合中的每個元素,產生一個包含新的jQuery物件。

7、.has()

篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的後代元素。

（學習視訊分享：）

以上就是總結分享一些使用jQuery實現的DOM操作（收藏）的詳細內容，更多請關注TW511.COM其它相關文章！