亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合，此時可以用prev()方法

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

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

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

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

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

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

children() ==》 查找元素的第一級子元素 $('div').children() ==> ?無參數 $('div').children(".selected") ==> 有參，查找篩選出來的結果

DOM包裹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?標簽應該是被正確關閉的。

DOM包裹wrapAll()方法

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

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

簡單的看一段代碼：

<p>p元素</p>?<p>p元素</p>

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

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

最后的結構，2個P元素都增加了一個父div的結構

<div>?????<p>p元素</p>?????<p>p元素</p>?</div>

.wrapAll( function )?：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象

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

以上面案例為例，

$('p').wrapAll(function()?{?????return?'<div><div/>';??})

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

<div>?????<p>p元素</p>?</div>?<div>?????<p>p元素</p>?</div>

DOM包裹unwrap()方法

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

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

看一段簡單案例：

<div>?????<p>p元素</p>?</div>

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

$('div').remove();

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

$('p').unwrap();

找到p元素，然后調用unwrap方法，這樣只會刪除父輩div元素了

結果：

<p>p元素</p>

DOM包裹wrap()方法

給p元素增加一個div包裹

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

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

<div>
????<p>p元素</p>
</div>

.wrap( function )?：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象

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

以第一個案例為例：

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

DOM拷貝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）內對象和數組不會被復制，將繼續被克隆元素和原始元素共享。深復制的所有數據，需要手動復制每一個

DOM拷貝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）內對象和數組不會被復制，將繼續被克隆元素和原始元素共享。深復制的所有數據，需要手動復制每一個

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

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

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

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

remove：移除節點

• 無參數，移除自身整個節點以及該節點的內部的所有節點，包括節點上事件與數據

• 有參數，移除篩選出的節點以及該節點的內部的所有節點，包括節點上事件與數據

detach：移除節點

• 移除的處理與remove一致

• 與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來

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

• 
  

DOM節點刪除之保留數據的刪除操作detach()

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

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

DOM節點刪除之remove()的有參用法和無參用法

remove與empty一樣，都是移除元素的方法，但是remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的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好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

我們可以通過$()選擇一組相同的元素，然后通過remove（）傳遞篩選的規則，從而這樣處理

對比右邊的代碼區域，我們可以通過類似于這樣處理

$("p").filter(":contains('3')").remove()
?$("p").remove(":contains('3')")

DOM節點刪除之empty()的基本用法

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

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

<div?class="hello"><p>慕課網</p></div>

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

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

//結果：<p>慕課網</p>被移除
<div?class="hello"></div>

• append()向每個匹配的元素內部追加內容

• prepend()向每個匹配的元素內部前置內容

• appendTo()把所有匹配的元素追加到另一個指定元素的集合中

• prependTo()把所有匹配的元素前置到另一個指定的元素集合中