1.DOM節點的創建

創建元素節點：

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

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

創建為本節點：

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

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

創建為屬性節點：

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

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

2.DOM節點的插入

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

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

簡單的總結就是：

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

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

?

在匹配I的元素前后插入內容（外部插入）

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

注意點：

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

?

內部進行操作的方法（內部插入）

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

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

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

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

?

內部插入：

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

注意事項：

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

3.DOM節點的刪除

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

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

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

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

//通過empty處理 $('.hello').empty()//結果：<p>慕課網</p>被移除 <div class="hello"></div>

?

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好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節點

實例：

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

?

empty 和 remove 的區別：

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

empty方法

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

remove方法

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

以上就是二者的區別，我們具體通過右邊代碼部分加深理解

?

保留數據的刪除操作detach()

detach從字面上就很容易理解。讓一個web元素托管。即從當前頁面中移除該元素，但保留這個元素的內存模型對象。

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

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

?

detach() 和 remove() 區別：

remove：移除節點

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

detach：移除節點

• 移除的處理與remove一致
• 與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來
• 例如：$("p").detach()這一句會移除對象，僅僅是顯示效果沒有了。但是內存中還是存在的。當你append之后，又重新回到了文檔流中。就又顯示出來了。

?

4.DOM節點的復制與替換

.clone()方法深度 復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點。

實例：

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

?

.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方法替換后的節點

?

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

?

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

實例：

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

jQuery提供了unwarp方法很方便的處理了這個問題

$('p').unwarp();

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

結果：

<p>p元素</p>

?

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>

注意：

.wrapAll()函數可以接受任何字符串或對象，可以傳遞給$()工廠函數來指定一個DOM結構。這種結構可以嵌套多層，但是最內層只能有一個元素。所有匹配元素將會被當作是一個整體，在這個整體的外部用指定的 HTML 結構進行包裹。

?

如果要將合集中的元素內部所有的子元素用其他元素包裹起來，并當作指定元素的子元素，針對這樣的處理，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 標簽應該是被正確關閉的。

?

5.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是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

?

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() 是必需的參數。如果我們需要實現對所有后代元素的取回，可以傳遞通配選擇器 '*'。
• find只在后代中遍歷，不包括自己。
• 選擇器 context 是由 .find() 方法實現的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。

注意重點：

.find()和.children()方法是相似的 1.children只查找第一級的子節點 2.find查找范圍包括子節點的所有后代節點

?

parent()方法

快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系），此時可以用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是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

?

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是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

注意事項：

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

?

closest()方法

以選定的元素為中心，往內查找可以通過find、children方法。如果往上查找，也就是查找當前元素的父輩祖輩元素，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對象

?

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是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

?

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是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

?

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是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

?

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(目標位置)

?

each()

.each() 方法就是一個for循環的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數

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

each是一個for循環的包裝迭代器 each通過回調的方式處理，并且會有2個固定的實參，索引與元素 each回調方法中的this指向當前迭代的dom元素

看一個簡單的案例

<ul><li>慕課網</li><li>Aaron</li> </ul>

開始迭代li，循環2次

$("li").each(function(index, element) {index 索引 0,1element是對應的li節點 li,lithis 指向的是li })

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

?

.

總結

以上是生活随笔為你收集整理的jQuery （DOM篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。