jQuery知識總結之DOM操做

時間 2019-11-17

標籤 jquery 知識總結 dom 欄目 JQuery 简体版

原文原文鏈接

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

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

JavaScript原生接口建立節點，在處理上是很是複雜與繁瑣的，jQuery簡化了這個過程。css

建立元素節點：html

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

$("<div></div>")複製代碼

建立帶文本節點：java

與建立元素節點相似，直接把文本內容一併描述jquery

$("<div>我是文本節點</div>")複製代碼

建立帶屬性節點：web

與建立元素節點一樣的方式數組

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

咱們經過jQuery把上一屆的代碼改造一下，如右邊代碼所示bash

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

$("<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以便在回調函數內停止循

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。