將元素用其他元素包裹起來，也就是給它增加一個父元素，針對這樣的處理，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結構。這種結構可以嵌套了好幾層深，但應該只包含一個核心的元素。每個匹配的元素都會被這種結構包裹。該方法返回原始的元素集，以便之后使用鏈式方法。

節點的替換方法replaceWith

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

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

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

<div>
????<p>第一段</p>
????<p>第二段</p>
????<p>第三段</p>
</div>

替換第二段的節點與內容

$("p:eq(1)").replaceWith('<a?>替換第二段的內容</a>')

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

<div>
????<p>第一段</p>
????<a?>替換第二段的內容</a>'
????<p>第三段</p>
</div>

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

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

$('<a?>替換第二段的內容</a>').replaceAll('p:eq(1)')

總結：

• .replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區別

• .replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有數據和事件處理程序

• .replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery對象，所以可以和其他方法鏈接使用

• .replaceWith()方法返回的jQuery對象引用的是替換前的節點，而不是通過replaceWith/replaceAll方法替換后的節點

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

<table><tbody><tr class="firstRow"><td><p>方法名</p></td><td><p>參數</p></td><td><p>事件及數據是否也被移除</p></td><td><p>元素自身是否被移除</p></td></tr><tr><td><p>remove</p></td><td><p>支持選擇器表達</p></td><td><p>是</p></td><td><p>是（無參數時），有參數時要根據參數所涉及的范圍</p></td></tr><tr><td><p>detach</p></td><td><p>參數同remove</p></td><td><p>否</p></td><td><p>情況同remove</p></td></tr></tbody></table><p>remove：移除節點</p><ul class=" list-paddingleft-2"><li><p>無參數，移除自身整個節點以及該節點的內部的所有節點，包括節點上事件與數據</p></li><li><p>有參數，移除篩選出的節點以及該節點的內部的所有節點，包括節點上事件與數據</p></li></ul><p>detach：移除節點</p><ul class=" list-paddingleft-2"><li><p>移除的處理與remove一致</p></li><li><p>與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來</p></li><li><p>例如：$(&quot;p&quot;).detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。</p></li></ul>

detach

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

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

empty方法

• 嚴格地講，empty()方法并不是刪除節點，而是清空節點，它能清空元素中的所有后代節點

• empty不能刪除自己本身這個節點

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

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

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

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

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

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

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

可以參考右邊的代碼區域：

通過empty移除了當前div元素下的所有p元素
但是本身id=test的div元素沒有被刪除

• .before()和.insertBefore()實現同樣的功能。主要的區別是語法——內容和目標的位置。 對于before()選擇表達式在函數前面，內容作為參數，而.insertBefore()剛好相反，內容在方法前面，它將被放在參數里元素的前面

• .after()和.insertAfter() 實現同樣的功能。主要的不同是語法——特別是（插入）內容和目標的位置。 對于after()選擇表達式在函數的前面，參數是將要插入的內容。對于 .insertAfter(), 剛好相反，內容在方法前面，它將被放在參數里元素的后面

• before、after與insertBefore。insertAfter的除了目標與位置的不同外，后面的不支持多參數處理

注意事項：

• insertAfter將JQuery封裝好的元素插入到指定元素的后面，如果元素后面有元素了，那將后面的元素后移，然后將JQuery對象插入；

• insertBefore將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然后將JQuery對象插入

選擇器的描述：

?

通過右邊代碼可以看到prepend與prependTo的使用及區別：

• .prepend()方法將指定元素插入到匹配元素里面作為它的第一個子元素 (如果要作為最后一個子元素插入用.append()).

• .prepend()和.prependTo()實現同樣的功能，主要的不同是語法，插入的內容和目標的位置不同

• 對于.prepend() 而言，選擇器表達式寫在方法的前面，作為待插入內容的容器，將要被插入的內容作為方法的參數

• 而.prependTo() 正好相反，將要被插入的內容寫在方法的前面，可以是選擇器表達式或動態創建的標記，待插入內容的容器作為參數。

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

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

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

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

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

選擇器的描述：

• before與after都是用來對相對選中元素外部增加相鄰的兄弟節點

• 2個方法都是都可以接收HTML字符串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面

• 2個方法都支持多個參數傳遞after(div1,div2,....) 可以參考右邊案例代碼

注意點：

• after向元素的后邊添加html代碼，如果元素后面有元素了，那將后面的元素后移，然后將html代碼插入

• before向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然后將html代碼插

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

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

簡單的總結就是：

.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內容和目標的位置不同

append()前面是被插入的對象，后面是要在對象內插入的
元素內容
appendTo()前面是要插入的元素內容，而后面是被插入
的對象

創建元素節點：

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

$("<div></div>")

創建為本節點：

與創建元素節點類似，可以直接把文本內容一并描述

$("<div>我是文本節點</div>")

創建為屬性節點：

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

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

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

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

$("<div?class='right'><div?class='aaron'>動態
創建DIV元素節點</div></div>")

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

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

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

Q: if (index % 2) 這是什么意思？

A: index對2取余，當index為偶數的時候，index%2的表達式值為0，0==false，index為奇數的時候，index%2表達式不為零，即為true?？偟恼f就是過濾掉偶數