慕課網(wǎng)jQuery學(xué)習(xí)筆記(二)

1:jQuery節(jié)點(diǎn)創(chuàng)建與屬性的處理

創(chuàng)建元素節(jié)點(diǎn):
可以有幾種方式消玄,后面會(huì)慢慢接觸历极。常見的就是直接把這個(gè)節(jié)點(diǎn)的結(jié)構(gòu)給通過HTML標(biāo)記字符串描述出來,通過$()函數(shù)處理倦蚪,$("html結(jié)構(gòu)")

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

創(chuàng)建為文本節(jié)點(diǎn):
與創(chuàng)建元素節(jié)點(diǎn)類似侣诵,可以直接把文本內(nèi)容一并描述

$("<div>我是文本節(jié)點(diǎn)</div>")

創(chuàng)建為本節(jié)點(diǎn):
與創(chuàng)建元素節(jié)點(diǎn)類似痢法,可以直接把文本內(nèi)容一并描述

$("<div>我是文本節(jié)點(diǎn)</div>")

2:DOM內(nèi)部插入append()與appendTo()

動(dòng)態(tài)創(chuàng)建的元素是不夠的,它只是臨時(shí)存放在內(nèi)存中杜顺,最終我們需要放到頁面文檔并呈現(xiàn)出來财搁。
常見的就是把這個(gè)新創(chuàng)建的元素,當(dāng)作頁面某一個(gè)元素的子元素放到其內(nèi)部躬络。針對(duì)這樣的處理尖奔,jQuery就定義2個(gè)操作的方法

image.png

append:這個(gè)操作與對(duì)指定的元素執(zhí)行原生的appendChild方法,將它們添加到文檔中的情況類似穷当。

appendTo:實(shí)際上提茁,使用這個(gè)方法是顛倒了常規(guī)的$(A).append(B)的操作,即不是把B追加到A中馁菜,而是把A追加到B中茴扁。

簡單的總結(jié)就是:
.append()和.appendTo()兩種方法功能相同,主要的不同是語法——內(nèi)容和目標(biāo)的位置不同

append()前面是被插入的對(duì)象汪疮,后面是要在對(duì)象內(nèi)插入的元素內(nèi)容
appendTo()前面是要插入的元素內(nèi)容峭火,而后面是被插入的對(duì)象

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

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

外部插入的處理稍浆,也就是兄弟之間的關(guān)系處理,這里jQuery引入了2個(gè)方法,可以用來在匹配I的元素前后插入內(nèi)容

image.png

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代碼插

$("#bt1").on('click', function() {
        //在匹配test1元素集合中的每個(gè)元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多參數(shù)</p>')
    })

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

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

選擇器的描述:

image.png

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è)指定的元素集合中

//找到class="aaron1"的div節(jié)點(diǎn)
        //然后通過prepend在內(nèi)部的首位置添加一個(gè)新的p節(jié)點(diǎn)
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')

//找到class="aaron2"的div節(jié)點(diǎn)
        //然后通過prependTo內(nèi)部的首位置添加一個(gè)新的p節(jié)點(diǎn)
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))

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

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

image.png

.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ì)象插入旺遮;

//在test1元素前后插入集合中每個(gè)匹配的元素
        //不支持多參數(shù)
        $('<p style="color:red">測試insertBefore方法增加</p>', '<p style="color:red">多參數(shù)</p>').insertBefore($(".test1"))

不支持多參數(shù),也就是說只有第一個(gè)p標(biāo)簽才能顯示出來

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

要移除頁面上節(jié)點(diǎn)是開發(fā)者常見的操作盈咳,jQuery提供了幾種不同的方法用來處理這個(gè)問題
empty 顧名思義耿眉,清空方法,但是與刪除又有點(diǎn)不一樣鱼响,因?yàn)樗灰瞥?指定元素中的所有子節(jié)點(diǎn)鸣剪。

這個(gè)方法不僅移除子元素(和其他后代元素),同樣移除元素里的文本丈积。因?yàn)槲骺鶕?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>

7: 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)不存在了,同時(shí)事件也會(huì)被銷毀

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

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

$("p").filter(":contains('3')").remove()
//刪除整個(gè) class=test1的div節(jié)點(diǎn)
        $(".test1").remove()

//找到所有p元素中吻氧,包含了3的元素
        //這個(gè)也是一個(gè)過濾器的處理
        $("p").remove(":contains('3')")

8: 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á)式歌溉,刪除指定合集中的元素

9: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ù)

<body>
    <p>P元素1姻蚓,默認(rèn)給綁定一個(gè)點(diǎn)擊事件</p>
    <p>P元素2,默認(rèn)給綁定一個(gè)點(diǎn)擊事件</p>
    <button id="bt1">點(diǎn)擊刪除 p 元素</button>
    <button id="bt2">點(diǎn)擊移動(dòng) p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通過detach方法刪除元素
        //只是頁面不可見匣沼,但是這個(gè)節(jié)點(diǎn)還是保存在內(nèi)存中
        //數(shù)據(jù)與事件都不會(huì)丟失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到頁面中
        //事件還是存在
        $("body").append(p);
    });
    </script>
</body>

我們?cè)谑褂胐etach方法的時(shí)候狰挡,要保存返回值,方便append添加释涛。

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

JQuery是一個(gè)很大強(qiáng)的工具庫加叁,在工作開發(fā)中,有些方法因?yàn)椴怀S玫绞嗷撸蚴菦]有注意到而被我們忽略殉农。

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

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

image.png

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之后驰吓,又重新回到了文檔流中。就又顯示出來了系奉。

11:DOM拷貝clone()
.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è)

12:DOM替換replaceWith()和replaceAll()

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

13: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ū)ο螅梢詡鬟f給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)臼节。這種結(jié)構(gòu)可以嵌套了好幾層深撬陵,但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹网缝。該方法返回原始的元素集巨税,以便之后使用鏈?zhǔn)椒椒ā?/p>

14:DOM包裹unwrap()方法

Query提供了一個(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>

15: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ū)ο螅梢詡鬟f給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)癞季。這種結(jié)構(gòu)可以嵌套多層澜掩,但是最內(nèi)層只能有一個(gè)元素哥童。所有匹配元素將會(huì)被當(dāng)作是一個(gè)整體躲因,在這個(gè)整體的外部用指定的 HTML 結(jié)構(gòu)進(jìn)行包裹秤标。

16: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)算谈,匹配的div元素的內(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)閉的。

17: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á)式

18: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)

<script type="text/javascript">
    $("button:first").click(function() {
        $('.left').find('li:last').css('border', '1px solid red')
    })
</script>

19:jQuery遍歷之parent()方法

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

因?yàn)槭歉冈胤碳危@個(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á)式

20: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è)空集合要出。

21:jQuery遍歷之closest()方法

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ì)象

22: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á)式

<script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-2的li
        //然后篩選出第一個(gè)li续徽,加上藍(lán)色的邊
       $('.item-2').next(':first').css('border', '1px solid blue')
    })
</script>

23: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á)式

24: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á)式

<script type="text/javascript">
    $("button:last").click(function() {
        //找到class=item-2的所有兄弟節(jié)點(diǎn)
        //然后篩選出最后一個(gè),加上藍(lán)色的邊
       $('.item-2').siblings(':last').css('border', '2px solid blue')
    })
</script>

25: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)位置)

26: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,1
     element是對(duì)應(yīng)的li節(jié)點(diǎn) li,li
     this 指向的是li
})

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

<script type="text/javascript">
    $("button:last").click(function() {
        //遍歷所有的li
        //修改偶數(shù)li內(nèi)的字體顏色
        $("li").each(function(index, element) {
            if (index % 2) {
                $(this).css('color','blue')
            }
        })
    })
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蚁吝,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子舀射,更是在濱河造成了極大的恐慌窘茁,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件脆烟,死亡現(xiàn)場離奇詭異山林,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)邢羔,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門驼抹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人张抄,你說我怎么就攤上這事砂蔽。” “怎么了署惯?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵左驾,是天一觀的道長。 經(jīng)常有香客問我,道長诡右,這世上最難降的妖魔是什么安岂? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮帆吻,結(jié)果婚禮上域那,老公的妹妹穿的比我還像新娘。我一直安慰自己猜煮,他們只是感情好次员,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著王带,像睡著了一般淑蔚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上愕撰,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天刹衫,我揣著相機(jī)與錄音,去河邊找鬼搞挣。 笑死带迟,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的囱桨。 我是一名探鬼主播仓犬,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼舍肠!你這毒婦竟也來了婶肩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤貌夕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后民镜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啡专,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年制圈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了们童。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鲸鹦,死狀恐怖慧库,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情馋嗜,我是刑警寧澤齐板,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響甘磨,放射性物質(zhì)發(fā)生泄漏橡羞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一济舆、第九天 我趴在偏房一處隱蔽的房頂上張望卿泽。 院中可真熱鬧,春花似錦滋觉、人聲如沸签夭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽第租。三九已至,卻和暖如春肺蔚,著一層夾襖步出監(jiān)牢的瞬間煌妈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國打工宣羊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留璧诵,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓仇冯,卻偏偏與公主長得像之宿,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子苛坚,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性 通過JavaScript可以很方便的獲取DOM節(jié)點(diǎn)比被,從而進(jìn)行一系列的DOM操作。但實(shí)際上...
    阿r阿r閱讀 1,013評(píng)論 0 9
  • 一泼舱、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,380評(píng)論 0 44
  • 第1章 簡介 第2章 DOM節(jié)點(diǎn)的創(chuàng)建 2-1 DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性 通過JavaScript可以很方便的獲...
    mo默22閱讀 810評(píng)論 0 8
  • jQuery基礎(chǔ)課程總共分為4個(gè)部分等缀,分別是樣式篇、事件篇娇昙、動(dòng)畫篇尺迂、DOM篇。 樣式篇 jquery的作用:jqu...
    Jayzen閱讀 714評(píng)論 0 4
  • 幾天前冒掌,在華為集團(tuán)“心聲論壇”貼出了一封由華為總裁任正非簽發(fā)噪裕、名為《要堅(jiān)持真實(shí),華為才能更充實(shí)》的內(nèi)部郵件股毫,該郵件...
    天使克星閱讀 510評(píng)論 0 3