如何使用jQuery實現(xiàn)的DOM操作

本篇內(nèi)容主要講解“如何使用jQuery實現(xiàn)的DOM操作”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何使用jQuery實現(xiàn)的DOM操作”吧!

第01回：節(jié)點創(chuàng)建

1、創(chuàng)建元素節(jié)點

可以有幾種方式，后面會慢慢接觸。常見的就是直接把這個節(jié)點的結(jié)構(gòu)通過HTML標記字符串描述出來，通過 $() 函數(shù)處理，$("html結(jié)構(gòu)")【相關(guān)推薦：jQuery視頻教程】

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

2、創(chuàng)建文本節(jié)點

與創(chuàng)建元素節(jié)點類似，可以直接把文本內(nèi)容一并描述

$('<div>我是文本節(jié)點</div>')

3、創(chuàng)建屬性節(jié)點

與創(chuàng)建元素節(jié)點同樣的方式

$("<div id='test' class='box'>我是文本節(jié)點</div>")

第02回：節(jié)點插入

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回：節(jié)點刪除

1、.empty()

該方法主要是用于清空指定元素的所有子節(jié)點，如：

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

如果我們通過empty方法移除里面div的所有元素，它只是清空內(nèi)部的html代碼，但是標記仍然留在DOM中。

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

// 結(jié)果：<div class="box"></div>

2、.remove() *

移除元素自身，包括子節(jié)點、事件等信息。

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

3、.detach()

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

detach從字面上就很容易理解。讓一個web元素托管。即從當前頁面中移除該元素，但保留這個元素的內(nèi)存模型對象。

jQuery 官方文檔說明：

這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來。

$("div").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內(nèi)存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。

當然這里要特別注意，detach方法是JQuery特有的，所以它只能處理通過JQuery的方法綁定的事件或者數(shù)據(jù)。

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

第04回：節(jié)點復制與替換

1、.clone()

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

clone()方法深度復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節(jié)點。

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

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

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

//clone處理二
$("div").clone(true) // 結(jié)構(gòu)、事件與數(shù)據(jù)都克隆

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>')

// 結(jié)果為：
/*
<div>
  <p>Hello, world!</p>  
</div>
*/

4、.unwrap()

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

5、.wrapAll()

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

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

6、.wrapInner()

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

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

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

// 結(jié)果為：
/*
<div>
	<p>Hello, world!</p>
</div>
<div>
	<p>Hello, world!</p>
</div>	
 */

第05回：節(jié)點遍歷

1、.children() *

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

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

代碼如果是 $(".div").children() ，那么意味著只能找到ul，因為div與ul是父子關(guān)系，li與div是祖輩關(guān)系，因此無法找到。

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

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

2、.find() *

find 與 children 類似，區(qū)別在于 children是父子關(guān)系查找，find是后代關(guān)系查找（包含父子關(guān)系）。

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

代碼如果是 $("div").find("li") ，此時，li與div是祖輩關(guān)系，通過find方法就可以快速的查找到了。

提示：

1. find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。

2. 與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數(shù)。如果我們需要實現(xiàn)對所有后代元素的取回，可以傳遞通配選擇器 *。

3. find只在后代中遍歷，不包括自己。

3、.parent() *

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

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

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

4、.parents()

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

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

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

5、.closest()

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

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

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

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

• 起始位置不同：.closest 開始于當前元素 .parents開始于父元素

• 遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents 一直查找到根元素，并將匹配的元素加入集合

• 結(jié)果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

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

• .next()：該方法用于匹配當前元素的下一個元素。

• .nextAll()：查找當前元素之后所有的同輩元素。

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

• .prev()：該方法用于匹配當前元素的上一個元素。

• .prevAll()：查找當前元素之前所有的同輩元素

8、.siblings() *

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

第 06 回：篩選

1、.eq(index) *

獲取當前鏈式操作中第N個jQuery對象，返回jQuery對象，當參數(shù)大于等于0時為正向選取，比如0代表第一個，1代表第二個。當參數(shù)為負數(shù)時為反向選取，比如-1為倒數(shù)第一個，具體可以看以下示例。

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

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

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

3、.filter()

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

4、.is()

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

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

5、.not()

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

6、.map(callback)

通過一個函數(shù)匹配當前集合中的每個元素,產(chǎn)生一個包含新的jQuery對象。

7、.has()

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

到此，相信大家對“如何使用jQuery實現(xiàn)的DOM操作”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！