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

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

天水網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)從2013年創(chuàng)立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

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

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

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

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

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

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

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

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

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

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

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

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

選擇器描述
append( )向每個(gè)匹配的元素內(nèi)部追加內(nèi)容
appendTo( )把所有匹配的元素追加到另一個(gè)、指定的元素集合中
$(A).append(B);  // 把B添加到A中(作為A的最后一個(gè)子元素)
$(A).appendTo(B);// 把A添加到B中(作為B的最后一個(gè)子元素)

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

選擇器描述
after( )指定元素后面添加內(nèi)容
before( )指定元素前面添加內(nèi)容
$(A).after(B); // 在A的后面添加B
$(A).before(B);// 在A的前面添加B

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

選擇器描述
prepend( )指定元素內(nèi)部前置一內(nèi)容
prependTo( )指定元素前置到另一個(gè)元素的內(nèi)部
$(A).prepend(B);   // 把B添加到A中(作為A的第一個(gè)子元素)
$(A).prependTo(B); // 把A添加到B中(作為B的第一個(gè)子元素)

4、.insertAfter()、.insertBefore()

選擇器描述
insertAfter()將內(nèi)容插入到指定元素的后面
insertBefore()將內(nèi)容插入到指定元素的前面
$(A).insertAfter(B);  // 將A插入到B的后面
$(A).insertBefore(B); // 將A插入到B的前面

第03回：節(jié)點(diǎn)刪除

1、.empty()

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

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

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

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

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

2、.remove() *

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

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

3、.detach()

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

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

jQuery 官方文檔說明：

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

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

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

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

第04回：節(jié)點(diǎn)復(fù)制與替換

1、.clone()

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

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

clone方法比較簡(jiǎn)單就是克隆節(jié)點(diǎn)，但是需要注意，如果節(jié)點(diǎn)有事件或者數(shù)據(jù)之類的其他處理，我們需要通過clone(ture)  傳遞一個(gè)布爾值 ture用來指定，這樣不僅僅只是克隆單純的節(jié)點(diǎn)結(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()

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

<p>Hello, world!</p>
$('p').wrap('<div></div>')

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

4、.unwrap()

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

5、.wrapAll()

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

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

6、.wrapInner()

如果要將集合中的元素內(nèi)部所有的子元素用其他元素包裹起來，并當(dāng)作指定元素的子元素，針對(duì)這樣的處理，JQuery提供了一個(gè)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é)點(diǎn)遍歷

1、.children() *

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

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

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

提示：jQuery是一個(gè)集合對(duì)象，所以通過children是匹配集合中每一個(gè)元素的第一級(jí)子元素。

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

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") ，此時(shí)，li與div是祖輩關(guān)系，通過find方法就可以快速的查找到了。

提示：

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

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

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

3、.parent() *

如果想快速查找合集里面的每一個(gè)元素的父元素（這里可以理解為就是父親-兒子的關(guān)系），此時(shí)可以用 parent() 方法。因?yàn)槭歉冈?，這個(gè)方法只會(huì)向上查找一級(jí)。

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

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

4、.parents()

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

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

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

5、.closest()

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

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

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

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

  • 起始位置不同：.closest 開始于當(dāng)前元素 .parents開始于父元素

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

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

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

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

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

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

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

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

8、.siblings() *

該方法用于匹配當(dāng)前元素的所有兄弟元素。

第 06 回：篩選

1、.eq(index) *

獲取當(dāng)前鏈?zhǔn)讲僮髦械贜個(gè)jQuery對(duì)象，返回jQuery對(duì)象，當(dāng)參數(shù)大于等于0時(shí)為正向選取，比如0代表第一個(gè)，1代表第二個(gè)。當(dāng)參數(shù)為負(fù)數(shù)時(shí)為反向選取，比如-1為倒數(shù)第一個(gè)，具體可以看以下示例。

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

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

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

3、.filter()

篩選出與指定表達(dá)式匹配的元素集合。這個(gè)方法用于縮小匹配的范圍。用逗號(hào)分隔多個(gè)表達(dá)式。

4、.is()

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

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

5、.not()

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

6、.map(callback)

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

7、.has()

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

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

網(wǎng)頁名稱：如何使用jQuery實(shí)現(xiàn)的DOM操作
瀏覽地址：http://muchs.cn/article12/phocgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、定制網(wǎng)站、建站公司、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)