jQuery知識總結之DOM操作

本篇文章主要總結一下jQuery中DOM節點的建立、插入、刪除與替換以及jQuery中豐富的遍歷節點的方法。

jQueryDOM操作之節點建立與屬性的處理

JavaScript原生介面建立節點，在處理上是非常複雜與繁瑣的，jQuery簡化了這個過程。

建立元素節點：

常見的就是直接把這個節點的結構給通過HTML標記字串描述出來，通過$()函式處理，$("html結構")

$("<div></div>")複製程式碼

建立帶文字節點：

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

$("<div>我是文字節點</div>")複製程式碼

建立帶屬性節點：

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

$("<div id='test' class='aaron'>我是文字節點</div>")複製程式碼

我們通過jQuery把上一屆的程式碼改造一下，如右邊程式碼所示

一條一句就搞定了，跟寫HTML結構方式是一樣的

$("<div class='right'><div class='aaron'>動態建立DIV元素節點</div></div>")複製程式碼

這就是jQuery建立節點的方式，讓我們保留HTML的結構書寫方式，非常的簡單、方便和靈活

jQueryDOM操作之DOM內部插入節點---$().append()與.appendTo($())

建立的元素後，將當作頁面某一個元素的子元素放到其內部。針對這樣的處理，jQuery定義了2個操作的方法

append：這個操作與對指定的元素執行原生的appendChild方法，將它們新增到文件中的情況類似。

appendTo：實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

簡單的總結就是：

.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內容和目標的位置不同
append()前面是被插入的物件，後面是要在物件內插入的元素內容
appendTo()前面是要插入的元素內容，而後面是被插入的物件

jQueryDOM操作之DOM內部插入節點---$().prepend()$().prependTo($())

在元素內部進行操作的方法，除了在被選元素的結尾（仍然在內部）通過append與appendTo插入指定內容外，相應的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo

選擇器的描述：

prepend與prependTo的使用及區別：

.prepend()方法將指定元素插入到匹配元素裡面作為它的第一個子元素 (如果要作為最後一個子元素插入用.append()).
.prepend()和.prependTo()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同
對於.prepend() 而言，選擇器表示式寫在方法的前面，作為待插入內容的容器，將要被插入的內容作為方法的引數
而.prependTo() 正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表示式或動態建立的標記，待插入內容的容器作為引數。

這裡總結下內部操作四個方法的區別：

append()向每個匹配的元素內部追加內容
prepend()向每個匹配的元素內部前置內容
appendTo()把所有匹配的元素追加到另一個指定元素的集合中
prependTo()把所有匹配的元素前置到另一個指定的元素集合中

jQueryDOM操作之DOM外部插入節點---$().before()與$().after()

節點與節點之前有各種關係，除了父子，祖輩關係，還可以是兄弟關係。Query引入了2個方法，可以用來在匹配I的元素前後插入內容。

選擇器描述：

before與after都是用來對相對選中元素外部增加相鄰的兄弟節點
2個方法都是都可以接收HTML字串，DOM 元素，元素陣列，或者jQuery物件，用來插入到集合中每個匹配元素的前面或者後面
2個方法都支援多個引數傳遞after(div1,div2,....) 可以參考右邊案例程式碼

注意點：

after向元素的後邊新增html程式碼，如果元素後面有元素了，那將後面的元素後移，然後將html程式碼插入
before向元素的前邊新增html程式碼，如果元素前面有元素了，那將前面的元素前移，然後將html程式碼插

jQueryDOM操作之外部插入節點---insertAfter($())與insertBefore($())

與內部插入處理一樣，jQuery由於內容目標的位置不同，然增加了2個新的方法insertAfter與insertBefore

.before()和.insertBefore()實現同樣的功能。主要的區別是語法——內容和目標的位置。對於before()選擇表示式在函式前面，內容作為引數，而.insertBefore()剛好相反，內容在方法前面，它將被放在引數裡元素的前面
.after()和.insertAfter() 實現同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。對於after()選擇表示式在函式的前面，引數是將要插入的內容。對於 .insertAfter(), 剛好相反，內容在方法前面，它將被放在引數裡元素的後面
before、after與insertBefore。insertAfter的除了目標與位置的不同外，後面的不支援多引數處理

注意事項：

insertAfter將JQuery封裝好的元素插入到指定元素的後面，如果元素後面有元素了，那將後面的元素後移，然後將JQuery物件插入；
insertBefore將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然後將JQuery物件插入；

jQueryDOM節點操作之刪除---empty()

要移除頁面上節點是開發者常見的操作，jQuery提供了幾種不同的方法用來處理這個問題，這裡我們開仔細瞭解下empty方法

empty 顧名思義，清空方法，但是與刪除又有點不一樣，因為它只移除了指定元素中的所有子節點。

這個方法不僅移除子元素（和其他後代元素），同樣移除元素裡的文字。因為，根據說明，元素裡任何文字字串都被看做是該元素的子節點。請看下面的HTML：

<div class="hello"><p>測試用文字</p></div>複製程式碼

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

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

//結果：<p>測試用文字</p>被移除，但匹配的元素還留在文件中
<div class="hello"></div>複製程式碼

jQueryDOM節點操作之刪除---remove()的有參用法和無參用法

remove與empty一樣，都是移除元素的方法，但是remove會將元素自身移除，同時也會移除元素內部的一切，包括繫結的事件及與該元素相關的jQuery資料。

該方法不會把匹配的元素從 jQuery 物件中刪除，因而可以在將來再使用這些匹配的元素。

例如一段節點，繫結點選事件

<div class="hello"><p>測試文字</p></div>
$('.hello').on("click",fn)複製程式碼

如果不通過remove方法刪除這個節點其實也很簡單，但是同時需要把事件給銷燬掉，這裡是為了防止"記憶體洩漏"，前端開發一定要注意，綁了多少事件，不用的時候一定要記得銷燬

通過remove方法移除div及其內部所有元素，remove內部會自動操作事件銷燬方法，所以使用使用起來非常簡單

//通過remove處理
$('.hello').remove()
//結果：<div class="hello"><p>慕課網</p></div> 全部被移除
//節點不存在了,同事事件也會被銷燬複製程式碼

remove表示式引數：

remove比empty好用的地方就是可以傳遞一個選擇器表示式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

$("p").remove(":contains('3')")複製程式碼

DOM節點刪除之empty和remove區別

要用到移除指定元素的時候，jQuery提供了empty()與remove([expr])二個方法，兩個都是刪除元素，但是兩者還是有區別

empty方法

嚴格地講，empty()方法並不是刪除節點，而是清空節點，它能清空元素中的所有後代節點
empty不能刪除自己本身這個節點

remove方法

該節點與該節點所包含的所有後代節點將同時被刪除
提供傳遞一個篩選的表示式，刪除指定合集中的元素

jQueryDOM節點操作之刪除---detach()

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

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

來看看jquery官方文件的解釋：

這個方法不會把匹配的元素從jQuery物件中刪除，因而可以在將來再使用這些匹配的元素。而且與remove()不同的是，所有繫結的事件、附加的資料等都會保留下來。 $("div").detach()這一句會移除物件，僅僅是顯示效果沒有了。但是記憶體中還是存在的。當你append之後，又重新回到了文件流中。就又顯示出來了。

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

<body>
    <p>P元素1，預設給繫結一個點選事件</p>
    <p>P元素2，預設給繫結一個點選事件</p>
    <button id="bt1">點選刪除 p 元素</button>
    <button id="bt2">點選移動 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重,不然連續點兩次刪除，第二次刪除會儲存undefined在p裡·
        //通過detach方法刪除元素
        //只是頁面不可見，但是這個節點還是儲存在記憶體中
        //資料與事件都不會丟失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在新增到頁面中
        //事件還是存在
        $("body").append(p);
    });
    </script>
</body>複製程式碼

jQueryDOM節點刪除之detach()和remove()區別

JQuery是一個很大強的工具庫，在工作開發中，有些方法因為不常用到，或是沒有注意到而被我們忽略。

remove()和detach()可能就是其中的一個，可能remove()我們用得比較多，而detach()就可能會很少了

通過一張對比表來解釋2個方法之間的不同

方法名	引數	事件及資料是否也被移除	元素自身是否被移除
remove	支援選擇器表達	是	是（無引數時），有引數時要根據引數所涉及的範圍
detach	引數同remove	否	情況同remove

remove：移除節點

無引數，移除自身整個節點以及該節點的內部的所有節點，包括節點上事件與資料
有引數，移除篩選出的節點以及該節點的內部的所有節點，包括節點上事件與資料

detach：移除節點

移除的處理與remove一致
與remove()不同的是，所有繫結的事件、附加的資料等都會保留下來
例如：$("p").detach()這一句會移除物件，僅僅是顯示效果沒有了。但是記憶體中還是存在的。當你append之後，又重新回到了文件流中。就又顯示出來了。

jQueryDOM節點操作之節點複製---.clone()

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

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

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

例如：

HTML部分
<div></div>

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

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

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

使用上就是這樣簡單，使用克隆的我們需要額外知道的細節：

clone()方法時，在將它插入到文件之前，我們可以修改克隆後的元素或者元素內容，如右邊程式碼我 $(this).clone().css('color','red') 增加了一個顏色
通過傳遞true，將所有繫結在原始元素上的事件處理函式複製到克隆元素上
clone()方法是jQuery擴充套件的，只能處理通過jQuery繫結的事件與資料
元素資料（data）內物件和陣列不會被複制，將繼續被克隆元素和原始元素共享。深複製的所有資料，需要手動複製每一個

jQueryDOM節點操作之節點替換---replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合

簡單來說：用$()選擇節點A，呼叫replaceWith方法，傳入一個新的內容B（HTML字串，DOM元素，或者jQuery物件）用來替換選中的節點A

看個簡單的例子：一段HTML程式碼

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>複製程式碼

替換第二段的節點與內容

$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')複製程式碼

通過jQuery篩選出第二個p元素，呼叫replaceWith進行替換，結果如下

<div>
    <p>第一段</p>
    <a style="color:red">替換第二段的內容</a>'
    <p>第三段</p>
</div>複製程式碼

.replaceAll( target ) ：用集合的匹配元素替換每個目標元素

.replaceAll()和.replaceWith()功能類似，但是目標和源相反，用上述的HTML結構，我們用replaceAll處理

$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')複製程式碼

總結：

.replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區別
.replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有資料和事件處理程式
.replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery物件，所以可以和其他方法連結使用
.replaceWith()方法返回的jQuery物件引用的是替換前的節點，而不是通過replaceWith/replaceAll方法替換後的節點

jQueryDOM節點操作之包裹節點---wrap()

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

.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構

簡單的看一段程式碼：

<p>p元素</p>複製程式碼

給p元素增加一個div包裹

$('p').wrap('<div></div>')複製程式碼

最後的結構，p元素增加了一個父div的結構

<div>
    <p>p元素</p>
</div>複製程式碼

.wrap( function ) ：一個回撥函式，返回用於包裹匹配元素的 HTML 內容或 jQuery 物件

使用後的效果與直接傳遞引數是一樣，只不過可以把程式碼寫在函式體內部，寫法不同而已

以第一個案例為例：

$('p').wrap(function() {
    return '<div></div>';   //與第一種類似，只是寫法不一樣
})複製程式碼

注意：

.wrap()函式可以接受任何字串或物件，可以傳遞給$()工廠函式來指定一個DOM結構。這種結構可以巢狀了好幾層深，但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集，以便之後使用鏈式方法。

我們可以通過wrap方法給選中元素增加一個包裹的父元素。相反，如果刪除選中元素的父元素要如何處理 ?

jQueryDOM節點操作之包裹多個節點---wrapAll()

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

.wrapAll( wrappingElement )：給集合中匹配的元素增加一個外面包裹HTML結構

簡單的看一段程式碼：

<div id="demo1">
    <p>元素1</p>
</div>
<div id="demo2">
    <p>元素2</p>
    <p>元素3</p>
</div>複製程式碼

給所有p元素增加一個div包裹

$('p').wrapAll('<div></div>')複製程式碼

最後的結構，3個匹配的P元素會被拉取成為第一個匹配的p元素的相鄰兄弟元素，並增加了一個父div的結構

<div id="demo1">
    <div>
        <p>元素1</p>
        <p>元素2</p>
        <p>元素3</p>
    </div>
</div>
<div id="demo2">
</div>複製程式碼

.wrapAll( function ) ：一個回撥函式，返回用於包裹匹配元素的 HTML 內容或 jQuery 物件

通過回撥的方式可以單獨處理每一個元素

以上面案例為例，

$('p').wrapAll(function() {
    return '<div><div/>'; 
})複製程式碼

以上的寫法的結果如下，等同於warp的處理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>複製程式碼

jQueryDOM節點操作之包裹節點內部所有子節點---wrapInner()

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

.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增加包裹的HTML結構

聽起來有點繞，可以用個簡單的例子描述下，簡單的看一段程式碼：

<div>p元素</div>
<div>p元素</div>複製程式碼

給所有元素增加一個p包裹

$('div').wrapInner('<p></p>')複製程式碼

最後的結構，匹配的di元素的內部元素被p給包裹了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>複製程式碼

.wrapInner( function ) ：允許我們用一個callback函式做引數，每次遇到匹配元素時，該函式被執行，返回一個DOM元素，jQuery物件，或者HTML片段，用來包住匹配元素的內容

以上面案例為例，

$('div').wrapInner(function() {
    return '<p></p>'; 
})複製程式碼

以上的寫法的結果如下，等同於第一種處理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>複製程式碼

注意：

當通過一個選擇器字串傳遞給.wrapInner() 函式，其引數應該是格式正確的 HTML，並且 HTML 標籤應該是被正確關閉的。

jQueryDOM節點操作之刪除節點父節點---unwrap()

jQuery提供了一個unwrap()方法，作用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。

看一段簡單案例：

<div>
    <p>p元素</p>
</div>複製程式碼

我要刪除這段程式碼中的div，一般常規的方法會直接通過remove或者empty方法

$('div').remove();複製程式碼

但是如果我還要保留內部元素p，這樣就意味著需要多做很多處理，步驟相對要麻煩很多，為了更便捷，jQuery提供了unwrap方法很方便的處理了這個問題

$('p').unwrap();複製程式碼

找到p元素，然後呼叫unwrap方法，這樣只會刪除父輩div元素了

結果：

<p>p元素</p>複製程式碼

jQueryDOM節點操作之遍歷---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是祖輩關係，因此無法找到。

children()不帶引數時

允許我們通過在DOM樹中對匹配的元素的直接子元素進行搜尋，並且構造一個新的匹配元素的jQuery物件

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

.children()方法選擇性地接受同一型別選擇器表示式

$("div").children(".selected")複製程式碼

同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式

jQueryDOM節點操作之遍歷---find()

jQuery是一個合集物件，如果想快速查詢DOM樹中的這些元素的後代元素，此時可以用find()方法，這也是開發使用頻率很高的方法。這裡要注意 children與find方法的區別，children是父子關係查詢，find是後代所有子元素。

節點查詢關係：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
複製程式碼

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

注意：

find是遍歷當前元素集合中每個元素的後代。只要符合，不管是兒子輩，孫子輩都可以。
與其他的樹遍歷方法不同，選擇器表示式對於 .find() 是必需的引數。如果我們需要實現對所有後代元素的取回，可以傳遞通配選擇器 '*'。
find只在後代中遍歷，不包括自己。
選擇器 context 是由 .find() 方法實現的；因此，$('.item-ii').find('li') 等價於 $('li', '.item-ii')(找到類名為item-ii的標籤下的li標籤)。

jQueryDOM節點操作之遍歷---parent()

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

因為是父元素，這個方法只會向上查詢一級

理解節點查詢關係：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
複製程式碼

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

parent()無引數

parent()方法允許我們能夠在DOM樹中搜尋到這些元素的父級元素，從有序的向上匹配元素，並根據匹配的元素建立一個新的 jQuery 物件

注意：jQuery是一個合集物件，所以通過parent是匹配合集中每一個元素的父元素

parent()帶選擇器表示式

同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式

jQueryDOM節點操作之遍歷---parents()

jQuery是一個合集物件，如果想快速查詢合集裡面的每一個元素的所有祖輩元素，此時可以用parents()方法

其實也類似find與children的區別，parent只會查詢一級，parents則會往上一直查到查詢到祖先節點

理解節點查詢關係：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>
複製程式碼

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

parents()無引數

parents()方法允許我們能夠在DOM樹中搜尋到這些元素的祖先元素，從有序的向上匹配元素，並根據匹配的元素建立一個新的 jQuery 物件;

返回的元素秩序是從離他們最近的父級元素開始的

注意：jQuery是一個合集物件，所以通過parent是匹配合集中所有元素的祖輩元素

parents()方法選擇性地接受同一型選擇器表示式

同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式

注意事項：

.parents()和.parent()方法是相似的，但後者只是進行了一個單級的DOM樹查詢
$( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。

jQueryDOM節點操作之遍歷---closest()

查詢當前元素的父輩祖輩元素，jQuery還提供了closest()方法，這個方法類似parents但是又有一些細微的區別，屬於使用頻率很高的方法

closest()方法接受一個匹配元素的選擇器字串

從元素本身開始，在DOM 樹上逐級向上級元素匹配，並返回最先匹配的祖先元素

例如：在div元素中，往上查詢所有的li元素，可以這樣表達

$("div").closet("li')複製程式碼

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

closest()方法給定的jQuery集合或元素來過濾元素

同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個jQuery的物件

注意事項：在使用的時候需要特別注意下

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

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

.parent()帶選擇器引數和.closest()區別是

.parent()帶參是從元素最近的父元素中查詢跟選擇器匹配的父元素，若沒有不會再向上查詢，length就是0；
.closest必須帶選擇器引數，會一直向上遍歷到包括document，直到找到跟選擇器匹配的父元素，沒有則是0；

jQueryDOM節點操作之遍歷---next()

jQuery是一個合集物件，如果想快速查詢指定元素集合中每一個元素緊鄰的後面同輩元素的元素集合，此時可以用next()方法

理解節點查詢關係：

如下class="item-1"元素就是紅色部分，那藍色的class="item-2"就是它的兄弟元素

<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>複製程式碼

next()無引數

允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，並根據匹配的元素建立一個新的 jQuery 物件。

注意：jQuery是一個合集物件，所以通過next匹配合集中每一個元素的下一個兄弟元素

next()方法選擇性地接受同一型別選擇器表示式

同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式

jQueryDOM節點操作之遍歷---prev()

jQuery是一個合集物件，如果想快速查詢指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合，此時可以用prev()方法

理解節點查詢關係：

如下藍色的class="item-2"的li元素，紅色的節點就是它的prev兄弟節點

<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>複製程式碼

prev()無引數

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合

注意：jQuery是一個合集物件，所以通過prev是匹配合集中每一個元素的上一個兄弟元素

prev()方法選擇性地接受同一型別選擇器表示式

同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式

jQueryDOM節點操作之遍歷---siblings()

jQuery是一個合集物件，如果想快速查詢指定元素集合中每一個元素的同輩元素，此時可以用siblings()方法

理解節點查詢關係：

如下藍色的class="item-2"的li元素，紅色的節點就是它的siblings兄弟節點

<ul class="level-3">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
</ul>複製程式碼

siblings()無引數

取得一個包含匹配的元素集合中每一個元素的同輩元素的元素集合

注意：jQuery是一個合集物件，所以通過siblings是匹配合集中每一個元素的同輩元素

siblings()方法選擇性地接受同一型別選擇器表示式

同樣的也是因為jQuery是合集物件，可能需要對這個合集物件進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表示式

jQueryDOM節點操作之遍歷---add()

jQuery是一個合集物件，通過$()方法找到指定的元素合集後可以進行一系列的操作。$()之後就意味著這個合集物件已經是確定的，如果後期需要再往這個合集中新增一新的元素要如何處理？jQuery為此提供add方法，用來建立一個新的jQuery物件，元素新增到匹配的元素集合中

.add()的引數可以幾乎接受任何的$()，包括一個jQuery選擇器表示式，DOM元素，或HTML片段引用。複製程式碼

簡單的看一個案例：

操作：選擇所有的li元素，之後把p元素也加入到li的合集中

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>複製程式碼

處理一：傳遞選擇器

$('li').add('p')複製程式碼

處理二：傳遞dom元素

$('li').add(document.getElementsByTagName('p')[0])複製程式碼

還有一種方式，就是動態建立P標籤加入到合集，然後插入到指定的位置，但是這樣就改變元素的本身的排列了

 $('li').add('<p>新的p元素</p>').appendTo(目標位置)複製程式碼

jQueryDOM節點操作之遍歷---each()

jQuery是一個合集物件，通過$()方法找到指定的元素合集後可以進行一系列的操作。比如我們操作$("li").css('') 給所有的li設定style值，因為jQuery是一個合集物件，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設定顏色，這裡方法就是each

.each() 方法就是一個for迴圈的迭代器，它會迭代jQuery物件合集中的每一個DOM元素。每次回撥函式執行時，會傳遞當前迴圈次數作為引數(從0開始計數

所以大體上了解3個重點：

each是一個for迴圈的包裝迭代器
each通過回撥的方式處理，並且會有2個固定的實參，索引與元素
each回撥方法中的this指向當前迭代的dom元素複製程式碼

看一個簡單的案例

<ul>
    <li>test</li>
    <li>test</li>
</ul>複製程式碼

開始迭代li，迴圈2次

$("li").each(function(index, element) {
     index 索引 0,1
     element是對應的li節點 li,li
     this 指向的是li
})複製程式碼

這樣可以在迴圈體會做一些邏輯操作了，如果需要提前退出，可以以通過返回 false以便在回撥函式內中止循

jQuery知識總結之DOM操作

jQueryDOM操作之節點建立與屬性的處理

jQueryDOM操作之DOM內部插入節點---$().append()與.appendTo($())

jQueryDOM操作之DOM內部插入節點---$().prepend()$().prependTo($())

jQueryDOM操作之DOM外部插入節點---$().before()與$().after()

jQueryDOM操作之外部插入節點---insertAfter($())與insertBefore($())

jQueryDOM節點操作之刪除---empty()

jQueryDOM節點操作之刪除---remove()的有參用法和無參用法

DOM節點刪除之empty和remove區別

jQueryDOM節點操作之刪除---detach()

jQueryDOM節點刪除之detach()和remove()區別

jQueryDOM節點操作之節點複製---.clone()

jQueryDOM節點操作之節點替換---replaceWith()和replaceAll()

jQueryDOM節點操作之包裹節點---wrap()

jQueryDOM節點操作之包裹多個節點---wrapAll()

jQueryDOM節點操作之包裹節點內部所有子節點---wrapInner()

jQueryDOM節點操作之刪除節點父節點---unwrap()

jQueryDOM節點操作之遍歷---children()

jQueryDOM節點操作之遍歷---find()

jQueryDOM節點操作之遍歷---parent()

jQueryDOM節點操作之遍歷---parents()

jQueryDOM節點操作之遍歷---closest()

jQueryDOM節點操作之遍歷---next()

jQueryDOM節點操作之遍歷---prev()

jQueryDOM節點操作之遍歷---siblings()

jQueryDOM節點操作之遍歷---add()

jQueryDOM節點操作之遍歷---each()

相關文章