前言：

先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問題）

創(chuàng)建流程比較簡單，大體如下：

創(chuàng)建節(jié)點(diǎn)(常見的：元素、屬性和文本)

添加節(jié)點(diǎn)的一些屬性

加入到文檔中

流程中涉及的一點(diǎn)方法：

• 創(chuàng)建元素：document.createElement
• 設(shè)置屬性：setAttribute
• 添加文本：innerHTML
• 加入文檔：appendChild

如右邊代碼所示，寫一個(gè)最簡單的元素創(chuàng)建，我們會(huì)發(fā)現(xiàn)幾個(gè)問題：

每一個(gè)元素節(jié)點(diǎn)都必須單獨(dú)創(chuàng)建

節(jié)點(diǎn)是屬性需要單獨(dú)設(shè)置，而且設(shè)置的接口不是很統(tǒng)一

添加到指定的元素位置不靈活

最后還有一個(gè)最重要的：瀏覽器兼容問題處理

針對(duì)這一系列的DOM操作的問題，jQuery給出了一套非常完美的接口方法

js原生方法創(chuàng)建元素：

<script type="text/javascript">var body = document.querySelector('body');document.addEventListener('click',function(){//創(chuàng)建2個(gè)div元素var rightdiv = document.createElement('div')var rightaaron = document.createElement("div");//給2個(gè)div設(shè)置不同的屬性rightdiv.setAttribute('class', 'right')rightaaron.className = 'aaron'rightaaron.innerHTML = "動(dòng)態(tài)創(chuàng)建DIV元素節(jié)點(diǎn)";//2個(gè)div合并成包含關(guān)系 rightdiv.appendChild(rightaaron)//繪制到頁面body body.appendChild(rightdiv)},false)</script>

jquery方法創(chuàng)建元素：

$("<div class='right'><div class='aaron'>動(dòng)態(tài)創(chuàng)建DIV元素節(jié)點(diǎn)</div></div>")

?

.append()appendTo() <script type="text/javascript">$("#bt1").on('click', function() {//.append(), 內(nèi)容在方法的后面，//參數(shù)是將要插入的內(nèi)容。$(".content").append('<div class="append">通過append方法添加的元素</div>')})</script><script type="text/javascript">$("#bt2").on('click', function() {//.appendTo()剛好相反，內(nèi)容在方法前面，//無論是一個(gè)選擇器表達(dá)式 或創(chuàng)建作為標(biāo)記上的標(biāo)記//它都將被插入到目標(biāo)容器的末尾。$('<div class="appendTo">通過appendTo方法添加的元素</div>').appendTo($(".content"))})</script>

DOM外部插入after()與before()

節(jié)點(diǎn)與節(jié)點(diǎn)之前有各種關(guān)系，除了父子，祖輩關(guān)系，還可以是兄弟關(guān)系。之前我們?cè)谔幚砉?jié)點(diǎn)插入的時(shí)候，接觸到了內(nèi)部插入的幾個(gè)方法，這節(jié)我們開始講外部插入的處理，也就是兄弟之間的關(guān)系處理，這里jQuery引入了2個(gè)方法，可以用來在匹配I的元素前后插入內(nèi)容

選擇器的描述：

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

注意點(diǎn)：

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

DOM內(nèi)部插入prepend()與prependTo()

在元素內(nèi)部進(jìn)行操作的方法，除了在被選元素的結(jié)尾（仍然在內(nèi)部）通過append與appendTo插入指定內(nèi)容外，相應(yīng)的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo

選擇器的描述：

?

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

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

這里總結(jié)下內(nèi)部操作四個(gè)方法的區(qū)別：

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

DOM外部插入insertAfter()與insertBefore()

與內(nèi)部插入處理一樣，jQuery由于內(nèi)容目標(biāo)的位置不同，然增加了2個(gè)新的方法insertAfter與insertBefore

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

注意事項(xiàng)：

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

DOM節(jié)點(diǎn)刪除之empty()的基本用法

要移除頁面上節(jié)點(diǎn)是開發(fā)者常見的操作，jQuery提供了幾種不同的方法用來處理這個(gè)問題，這里我們開仔細(xì)了解下empty方法

empty 顧名思義，清空方法，但是與刪除又有點(diǎn)不一樣，因?yàn)樗灰瞥?指定元素中的所有子節(jié)點(diǎn)。

這個(gè)方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本。因?yàn)?#xff0c;根據(jù)說明，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)。請(qǐng)看下面的HTML：

<div class="hello"><p>慕課網(wǎng)</p></div>

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

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

可以參考右邊的代碼區(qū)域：

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

DOM節(jié)點(diǎn)刪除之remove()的有參用法和無參用法

remove與empty一樣，都是移除元素的方法，但是remove會(huì)將元素自身移除，同時(shí)也會(huì)移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)。

例如一段節(jié)點(diǎn)，綁定點(diǎn)擊事件

<div class="hello"><p>慕課網(wǎng)</p></div> $('.hello').on("click",fn)

如果不通過remove方法刪除這個(gè)節(jié)點(diǎn)其實(shí)也很簡單，但是同時(shí)需要把事件給銷毀掉，這里是為了防止"內(nèi)存泄漏"，所以前端開發(fā)者一定要注意，綁了多少事件，不用的時(shí)候一定要記得銷毀

通過remove方法移除div及其內(nèi)部所有元素，remove內(nèi)部會(huì)自動(dòng)操作事件銷毀方法，所以使用使用起來非常簡單

//通過remove處理 $('.hello').remove() //結(jié)果：<div class="hello"><p>慕課網(wǎng)</p></div> 全部被移除 //節(jié)點(diǎn)不存在了,同事事件也會(huì)被銷毀

remove表達(dá)式參數(shù)：

remove比empty好用的地方就是可以傳遞一個(gè)選擇器表達(dá)式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點(diǎn)

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

對(duì)比右邊的代碼區(qū)域，我們可以通過類似于這樣處理

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

DOM節(jié)點(diǎn)刪除之empty和remove區(qū)別

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

empty方法

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

remove方法

• 該節(jié)點(diǎn)與該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除
• 提供傳遞一個(gè)篩選的表達(dá)式，刪除指定合集中的元素

DOM節(jié)點(diǎn)刪除之保留數(shù)據(jù)的刪除操作detach()

如果我們希望臨時(shí)刪除頁面上的節(jié)點(diǎn)，但是又不希望節(jié)點(diǎn)上的數(shù)據(jù)與事件丟失，并且能在下一個(gè)時(shí)間段讓這個(gè)刪除的節(jié)點(diǎn)顯示到頁面，這時(shí)候就可以使用detach方法來處理

detach從字面上就很容易理解。讓一個(gè)web元素托管。即從當(dāng)前頁面中移除該元素，但保留這個(gè)元素的內(nèi)存模型對(duì)象。

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

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

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

參考右邊的代碼區(qū)域，通過?$("p").detach()把所有的P元素刪除后，再通過append把刪除的p元素放到頁面上，通過點(diǎn)擊文字，可以證明事件沒有丟失

DOM節(jié)點(diǎn)刪除之detach()和remove()區(qū)別

JQuery是一個(gè)很大強(qiáng)的工具庫，在工作開發(fā)中，有些方法因?yàn)椴怀Ｓ玫?#xff0c;或是沒有注意到而被我們忽略。

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

?通過一張對(duì)比表來解釋2個(gè)方法之間的不同

方法名	參數(shù)	事件及數(shù)據(jù)是否也被移除	元素自身是否被移除
remove	支持選擇器表達(dá)	是	是（無參數(shù)時(shí)），有參數(shù)時(shí)要根據(jù)參數(shù)所涉及的范圍
detach	參數(shù)同remove	否	情況同remove

remove：移除節(jié)點(diǎn)

• 無參數(shù)，移除自身整個(gè)節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)
• 有參數(shù)，移除篩選出的節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)

detach：移除節(jié)點(diǎn)

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

DOM拷貝clone()

克隆節(jié)點(diǎn)是DOM的常見操作，jQuery提供一個(gè)clone方法，專門用于處理dom的克隆

.clone()方法深度 復(fù)制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級(jí)元素、文字節(jié)點(diǎn)。

clone方法比較簡單就是克隆節(jié)點(diǎn)，但是需要注意，如果節(jié)點(diǎn)有事件或者數(shù)據(jù)之類的其他處理，我們需要通過clone(ture)傳遞一個(gè)布爾值ture用來指定，這樣不僅僅只是克隆單純的節(jié)點(diǎn)結(jié)構(gòu)，還要把附帶的事件與數(shù)據(jù)給一并克隆了

例如：

HTML部分 <div></div>JavaScript部分 $("div").on('click', function() {//執(zhí)行操作})//clone處理一 $("div").clone() //只克隆了結(jié)構(gòu)，事件丟失//clone處理二 $("div").clone(true) //結(jié)構(gòu)、事件與數(shù)據(jù)都克隆

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

• clone()方法時(shí)，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內(nèi)容，如右邊代碼我 $(this).clone().css('color','red') 增加了一個(gè)顏色
• 通過傳遞true，將所有綁定在原始元素上的事件處理函數(shù)復(fù)制到克隆元素上
• clone()方法是jQuery擴(kuò)展的，只能處理通過jQuery綁定的事件與數(shù)據(jù)
• 元素?cái)?shù)據(jù)（data）內(nèi)對(duì)象和數(shù)組不會(huì)被復(fù)制，將繼續(xù)被克隆元素和原始元素共享。深復(fù)制的所有數(shù)據(jù)，需要手動(dòng)復(fù)制每一個(gè)

DOM替換replaceWith()和replaceAll()

之前學(xué)習(xí)了節(jié)點(diǎn)的內(nèi)插入、外插入以及刪除方法，這節(jié)會(huì)學(xué)習(xí)替換方法replaceWith

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

簡單來說：用$()選擇節(jié)點(diǎn)A，調(diào)用replaceWith方法，傳入一個(gè)新的內(nèi)容B（HTML字符串，DOM元素，或者jQuery對(duì)象）用來替換選中的節(jié)點(diǎn)A

看個(gè)簡單的例子：一段HTML代碼

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

替換第二段的節(jié)點(diǎn)與內(nèi)容

$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內(nèi)容</a>')

通過jQuery篩選出第二個(gè)p元素，調(diào)用replaceWith進(jìn)行替換，結(jié)果如下

<div><p>第一段</p><a style="color:red">替換第二段的內(nèi)容</a>'<p>第三段</p> </div>

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

.replaceAll()和.replaceWith()功能類似，但是目標(biāo)和源相反，用上述的HTML結(jié)構(gòu)，我們用replaceAll處理

$('<a style="color:red">替換第二段的內(nèi)容</a>').replaceAll('p:eq(1)')

總結(jié)：

• .replaceAll()和.replaceWith()功能類似，主要是目標(biāo)和源的位置區(qū)別
• .replaceWith()與.replaceAll() 方法會(huì)刪除與節(jié)點(diǎn)相關(guān)聯(lián)的所有數(shù)據(jù)和事件處理程序
• .replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery對(duì)象，所以可以和其他方法鏈接使用
• .replaceWith()方法返回的jQuery對(duì)象引用的是替換前的節(jié)點(diǎn)，而不是通過replaceWith/replaceAll方法替換后的節(jié)點(diǎn)

DOM包裹wrap()方法

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

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

簡單的看一段代碼：

<p>p元素</p>

給p元素增加一個(gè)div包裹

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

最后的結(jié)構(gòu)，p元素增加了一個(gè)父div的結(jié)構(gòu)

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

.wrap( function )?：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

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

以第一個(gè)案例為例：

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

注意：

.wrap()函數(shù)可以接受任何字符串或?qū)ο?#xff0c;可以傳遞給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套了好幾層深，但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹。該方法返回原始的元素集，以便之后使用鏈?zhǔn)椒椒ā?/p>

DOM包裹unwrap()方法

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

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

看一段簡單案例：

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

我要?jiǎng)h除這段代碼中的div，一般常規(guī)的方法會(huì)直接通過remove或者empty方法

$('div').remove();

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

$('p').unwrap();

找到p元素，然后調(diào)用unwrap方法，這樣只會(huì)刪除父輩div元素了

結(jié)果：

<p>p元素</p>

?

DOM包裹wrapAll()方法

wrap是針對(duì)單個(gè)dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們?cè)黾右粋€(gè)父元素，針對(duì)這樣的處理，JQuery提供了一個(gè)wrapAll方法

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

簡單的看一段代碼：

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

給所有p元素增加一個(gè)div包裹

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

最后的結(jié)構(gòu)，2個(gè)P元素都增加了一個(gè)父div的結(jié)構(gòu)

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

.wrapAll( function )?：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

通過回調(diào)的方式可以單獨(dú)處理每一個(gè)元素

以上面案例為例，

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

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

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

注意：

.wrapAll()函數(shù)可以接受任何字符串或?qū)ο?#xff0c;可以傳遞給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套多層，但是最內(nèi)層只能有一個(gè)元素。所有匹配元素將會(huì)被當(dāng)作是一個(gè)整體，在這個(gè)整體的外部用指定的 HTML 結(jié)構(gòu)進(jìn)行包裹。

DOM包裹wrapInner()方法

如果要將合集中的元素內(nèi)部所有的子元素用其他元素包裹起來，并當(dāng)作指定元素的子元素，針對(duì)這樣的處理，JQuery提供了一個(gè)wrapInner方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內(nèi)部，增加包裹的HTML結(jié)構(gòu)

聽起來有點(diǎn)繞，可以用個(gè)簡單的例子描述下，簡單的看一段代碼：

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

給所有元素增加一個(gè)p包裹

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

最后的結(jié)構(gòu)，匹配的di元素的內(nèi)部元素被p給包裹了

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

.wrapInner( function )?：允許我們用一個(gè)callback函數(shù)做參數(shù)，每次遇到匹配元素時(shí)，該函數(shù)被執(zhí)行，返回一個(gè)DOM元素，jQuery對(duì)象，或者HTML片段，用來包住匹配元素的內(nèi)容

以上面案例為例，

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

以上的寫法的結(jié)果如下，等同于第一種處理了

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

注意：

當(dāng)通過一個(gè)選擇器字符串傳遞給.wrapInner() 函數(shù)，其參數(shù)應(yīng)該是格式正確的 HTML，并且 HTML 標(biāo)簽應(yīng)該是被正確關(guān)閉的。

?

jQuery遍歷之children()方法

jQuery是一個(gè)合集對(duì)象，如果想快速查找合集里面的第一級(jí)子元素，此時(shí)可以用children()方法。這里需要注意：.children(selector) 方法是返回匹配元素集合中每個(gè)元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關(guān)系）

理解節(jié)點(diǎn)查找關(guān)系：

<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>

代碼如果是$("div").children()，那么意味著只能找到ul，因?yàn)閐iv與ul是父子關(guān)系，li與div是祖輩關(guān)系，因此無法找到。

children()無參數(shù)

允許我們通過在DOM樹中對(duì)這些元素的直接子元素進(jìn)行搜索，并且構(gòu)造一個(gè)新的匹配元素的jQuery對(duì)象

注意：jQuery是一個(gè)合集對(duì)象，所以通過children是匹配合集中每一給元素的第一級(jí)子元素

.children()方法選擇性地接受同一類型選擇器表達(dá)式

$("div").children(".selected")

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery遍歷之find()方法

jQuery是一個(gè)合集對(duì)象，如果想快速查找DOM樹中的這些元素的后代元素，此時(shí)可以用find()方法，這也是開發(fā)使用頻率很高的方法。這里要注意 children與find方法的區(qū)別，children是父子關(guān)系查找，find是后代關(guān)系（包含父子關(guān)系）

理解節(jié)點(diǎn)查找關(guān)系：

<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>

代碼如果是$("div").find("li")，此時(shí)，li與div是祖輩關(guān)系，通過find方法就可以快速的查找到了。

.find()方法要注意的知識(shí)點(diǎn)：

• find是遍歷當(dāng)前元素集合中每個(gè)元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
• 與其他的樹遍歷方法不同，選擇器表達(dá)式對(duì)于 .find() 是必需的參數(shù)。如果我們需要實(shí)現(xiàn)對(duì)所有后代元素的取回，可以傳遞通配選擇器 '*'。
• find只在后代中遍歷，不包括自己。
• 選擇器 context 是由 .find() 方法實(shí)現(xiàn)的；因此，$('.item-ii').find('li') 等價(jià)于 $('li', '.item-ii')(找到類名為item-ii的標(biāo)簽下的li標(biāo)簽)。

注意重點(diǎn)：

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

jQuery遍歷之parent()方法

jQuery是一個(gè)合集對(duì)象，如果想快速查找合集里面的每一個(gè)元素的父元素（這里可以理解為就是父親-兒子的關(guān)系），此時(shí)可以用parent()方法

因?yàn)槭歉冈?#xff0c;這個(gè)方法只會(huì)向上查找一級(jí)

理解節(jié)點(diǎn)查找關(guān)系：

<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>

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

parent()無參數(shù)

parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級(jí)元素，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象

注意：jQuery是一個(gè)合集對(duì)象，所以通過parent是匹配合集中每一個(gè)元素的父元素

parent()方法選擇性地接受同一型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery遍歷之parents()方法

jQuery是一個(gè)合集對(duì)象，如果想快速查找合集里面的每一個(gè)元素的所有祖輩元素，此時(shí)可以用parents()方法

其實(shí)也類似find與children的區(qū)別，parent只會(huì)查找一級(jí)，parents則會(huì)往上一直查到查找到祖先節(jié)點(diǎn)

理解節(jié)點(diǎn)查找關(guān)系：

<div class="div"><ul class="son"><li class="grandson">1</li></ul> </div>

在li節(jié)點(diǎn)上找到祖 輩元素div， 這里可以用$("li").parents()方法

parents()無參數(shù)

parents()方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素，從有序的向上匹配元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象;

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

注意：jQuery是一個(gè)合集對(duì)象，所以通過parent是匹配合集中所有元素的祖輩元素

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

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

注意事項(xiàng)：

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

jQuery遍歷之closest()方法

以選定的元素為中心，往內(nèi)查找可以通過find、children方法。如果往上查找，也就是查找當(dāng)前元素的父輩祖輩元素，jQuery提供了closest()方法，這個(gè)方法類似parents但是又有一些細(xì)微的區(qū)別，屬于使用頻率很高的方法

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

從元素本身開始，在DOM 樹上逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素

例如：在div元素中，往上查找所有的li元素，可以這樣表達(dá)

$("div").closet("li')

注意：jQuery是一個(gè)合集對(duì)象，所以通過closest是匹配合集中每一個(gè)元素的祖先元素

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

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)jQuery的對(duì)象

注意事項(xiàng)：在使用的時(shí)候需要特別注意下

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

起始位置不同：.closest開始于當(dāng)前元素 .parents開始于父元素

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

結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象

jQuery遍歷之next()方法

jQuery是一個(gè)合集對(duì)象，如果想快速查找指定元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合，此時(shí)可以用next()方法

理解節(jié)點(diǎn)查找關(guān)系：

如下class="item-1"元素就是紅色部分，那藍(lán)色的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()無參數(shù)

允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據(jù)匹配的元素創(chuàng)建一個(gè)新的 jQuery 對(duì)象。

注意：jQuery是一個(gè)合集對(duì)象，所以通過next匹配合集中每一個(gè)元素的下一個(gè)兄弟元素

next()方法選擇性地接受同一類型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery遍歷之prev()方法

jQuery是一個(gè)合集對(duì)象，如果想快速查找指定元素集合中每一個(gè)元素緊鄰的前面同輩元素的元素集合，此時(shí)可以用prev()方法

理解節(jié)點(diǎn)查找關(guān)系：

如下藍(lán)色的class="item-2"的li元素，紅色的節(jié)點(diǎn)就是它的prev兄弟節(jié)點(diǎn)

<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>

prev()無參數(shù)

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

注意：jQuery是一個(gè)合集對(duì)象，所以通過prev是匹配合集中每一個(gè)元素的上一個(gè)兄弟元素

prev()方法選擇性地接受同一類型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

jQuery遍歷之siblings()

jQuery是一個(gè)合集對(duì)象，如果想快速查找指定元素集合中每一個(gè)元素的同輩元素，此時(shí)可以用siblings()方法

理解節(jié)點(diǎn)查找關(guān)系：

如下藍(lán)色的class="item-2"的li元素，紅色的節(jié)點(diǎn)就是它的siblings兄弟節(jié)點(diǎn)

<ul class="level-3"><li class="item-1">1</li><li class="item-2">2</li><li class="item-3">3</li> </ul>

siblings()無參數(shù)

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

注意：jQuery是一個(gè)合集對(duì)象，所以通過siblings是匹配合集中每一個(gè)元素的同輩元素

siblings()方法選擇性地接受同一類型選擇器表達(dá)式

同樣的也是因?yàn)閖Query是合集對(duì)象，可能需要對(duì)這個(gè)合集對(duì)象進(jìn)行一定的篩選，找出目標(biāo)元素，所以允許傳一個(gè)選擇器的表達(dá)式

?

?

jQuery遍歷之a(chǎn)dd()方法

jQuery是一個(gè)合集對(duì)象，通過$()方法找到指定的元素合集后可以進(jìn)行一系列的操作。$()之后就意味著這個(gè)合集對(duì)象已經(jīng)是確定的，如果后期需要再往這個(gè)合集中添加一新的元素要如何處理？jQuery為此提供add方法，用來創(chuàng)建一個(gè)新的jQuery對(duì)象 ，元素添加到匹配的元素集合中

.add()的參數(shù)可以幾乎接受任何的$()，包括一個(gè)jQuery選擇器表達(dá)式，DOM元素，或HTML片段引用。

簡單的看一個(gè)案例：

操作：選擇所有的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])

還有一種方式，就是動(dòng)態(tài)創(chuàng)建P標(biāo)簽加入到合集，然后插入到指定的位置，但是這樣就改變?cè)氐谋旧淼呐帕辛?/p> $('li').add('<p>新的p元素</p>').appendTo(目標(biāo)位置)

?

jQuery遍歷之each()

jQuery是一個(gè)合集對(duì)象，通過$()方法找到指定的元素合集后可以進(jìn)行一系列的操作。比如我們操作$("li").css('') 給所有的li設(shè)置style值，因?yàn)閖Query是一個(gè)合集對(duì)象，所以css方法內(nèi)部就必須封裝一個(gè)遍歷的方法，被稱為隱式迭代的過程。要一個(gè)一個(gè)給合集中每一個(gè)li設(shè)置顏色，這里方法就是each

.each() 方法就是一個(gè)for循環(huán)的迭代器，它會(huì)迭代jQuery對(duì)象合集中的每一個(gè)DOM元素。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開始計(jì)數(shù)

所以大體上了解3個(gè)重點(diǎn)：

each是一個(gè)for循環(huán)的包裝迭代器 each通過回調(diào)的方式處理，并且會(huì)有2個(gè)固定的實(shí)參，索引與元素 each回調(diào)方法中的this指向當(dāng)前迭代的dom元素

看一個(gè)簡單的案例

<ul><li>慕課網(wǎng)</li><li>Aaron</li> </ul>

開始迭代li，循環(huán)2次

$("li").each(function(index, element) {index 索引 0,1element是對(duì)應(yīng)的li節(jié)點(diǎn) li,lithis 指向的是li })

這樣可以在循環(huán)體會(huì)做一些邏輯操作了，如果需要提前退出，可以以通過返回 false以便在回調(diào)函數(shù)內(nèi)中止循

?

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/lianghong/p/8476124.html

總結(jié)

以上是生活随笔為你收集整理的【总结整理】JQuery基础学习---DOM篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。