jQuery基礎(chǔ)——DOM篇

第1章簡(jiǎn)介

第2章 DOM節(jié)點(diǎn)的創(chuàng)建

2-1 DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性

通過(guò)JavaScript可以很方便的獲取DOM節(jié)點(diǎn)乎赴，從而進(jìn)行一系列的DOM操作娃属。但實(shí)際上一般開(kāi)發(fā)者都習(xí)慣性的先定義好HTML結(jié)構(gòu)，但這樣就非常不靈活了。

試想下這樣的情況：如果我們通過(guò)AJAX獲取到數(shù)據(jù)之后然后才能確定結(jié)構(gòu)的話缨睡，這種情況就需要?jiǎng)討B(tài)的處理節(jié)點(diǎn)了

本文向大家介紹一下如何使用JavaScript創(chuàng)建div節(jié)點(diǎn)元素，主要包括創(chuàng)建div節(jié)點(diǎn)元素的屬性和創(chuàng)建div節(jié)點(diǎn)元素的樣式兩大部分內(nèi)容陈辱，相信本文介紹一定會(huì)讓你有所收獲奖年。

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

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

1.創(chuàng)建節(jié)點(diǎn)(常見(jiàn)的：元素沛贪、屬性和文本)
2.加節(jié)點(diǎn)的一些屬性
3.加入到文檔中

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

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

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

1.每一個(gè)元素節(jié)點(diǎn)都必須單獨(dú)創(chuàng)建
2.節(jié)點(diǎn)是屬性需要單獨(dú)設(shè)置利赋，而且設(shè)置的接口不是很統(tǒng)一
3.添加到指定的元素位置不靈活
4.最后還有一個(gè)最重要的：瀏覽器兼容問(wèn)題處理

針對(duì)這一系列的DOM操作的問(wèn)題水评，jQuery給出了一套非常完美的接口方法，我們之后就開(kāi)始深入學(xué)習(xí)

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

上一節(jié)介紹了通過(guò)JavaScript原生接口創(chuàng)建節(jié)點(diǎn)媚送，在處理上是非常復(fù)雜與繁瑣的中燥。我們可以通過(guò)使用jQuery來(lái)簡(jiǎn)化了這個(gè)過(guò)程

創(chuàng)建元素節(jié)點(diǎn)：

可以有幾種方式，后面會(huì)慢慢接觸塘偎。常見(jiàn)的就是直接把這個(gè)節(jié)點(diǎn)的結(jié)構(gòu)給通過(guò)HTML標(biāo)記字符串描述出來(lái)疗涉，通過(guò)$()函數(shù)處理，$("html結(jié)構(gòu)")

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

創(chuàng)建文本節(jié)點(diǎn)：

與創(chuàng)建元素節(jié)點(diǎn)類(lèi)似吟秩，可以直接把文本內(nèi)容一并描述

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

創(chuàng)建為屬性節(jié)點(diǎn)：
與創(chuàng)建元素節(jié)點(diǎn)同樣的方式

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

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

這就是jQuery創(chuàng)建節(jié)點(diǎn)的方式博敬，讓我們保留HTML的結(jié)構(gòu)書(shū)寫(xiě)方式，非常的簡(jiǎn)單峰尝、方便和靈活

第3章 DOM外部插入

3-1 DOM內(nèi)部插入append()與appendTo()

動(dòng)態(tài)創(chuàng)建的元素是不夠的偏窝，它只是臨時(shí)存放在內(nèi)存中，最終我們需要放到頁(yè)面文檔并呈現(xiàn)出來(lái)武学。那么問(wèn)題來(lái)了祭往，怎么放到文檔上？

這里就涉及到一個(gè)位置關(guān)系火窒，常見(jiàn)的就是把這個(gè)新創(chuàng)建的元素硼补，當(dāng)作頁(yè)面某一個(gè)元素的子元素放到其內(nèi)部。針對(duì)這樣的處理熏矿，jQuery就定義2個(gè)操作的方法

append：這個(gè)操作與對(duì)指定的元素執(zhí)行原生的appendChild方法已骇，將它們添加到文檔中的情況類(lèi)似离钝。

appendTo：實(shí)際上，使用這個(gè)方法是顛倒了常規(guī)的$(A).append(B)的操作褪储，即不是把B追加到A中卵渴，而是把A追加到B中。

簡(jiǎn)單的總結(jié)就是：

.append()和.appendTo()兩種方法功能相同鲤竹，主要的不同是語(yǔ)法——內(nèi)容和目標(biāo)的位置不同

append()前面是被插入的對(duì)象浪读，后面是要在對(duì)象內(nèi)插入的元素內(nèi)容
appendTo()前面是要插入的元素內(nèi)容，而后面是被插入的對(duì)象

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .content {
        width: 300px;
    }
    .append{
        background-color: blue;
    }
    .appendTo{
        background-color: red;
    }
    </style>
</head>

<body>
    <h2>通過(guò)append與appendTo添加元素</h2>
    <button id="bt1">點(diǎn)擊通過(guò)jQuery的append添加元素</button>
    <button id="bt2">點(diǎn)擊通過(guò)jQuery的appendTo添加元素</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {
            //.append(), 內(nèi)容在方法的后面辛藻，
            //參數(shù)是將要插入的內(nèi)容碘橘。
            $(".content").append('<div class="append">通過(guò)append方法添加的元素</div>')
        })

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

3-2 DOM外部插入after()與before()

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

選擇器的描述：

before與after都是用來(lái)對(duì)相對(duì)選中元素外部增加相鄰的兄弟節(jié)點(diǎn)

2個(gè)方法都是都可以接收HTML字符串，DOM 元素奕坟，元素?cái)?shù)組祥款，或者jQuery對(duì)象，用來(lái)插入到集合中每個(gè)匹配元素的前面或者后面

2個(gè)方法都支持多個(gè)參數(shù)傳遞after(div1,div2,....)

注意點(diǎn)：

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

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .aaron{
        border: 1px solid red;
    }
    </style>
</head>

<body>
    <h2>通過(guò)before與after添加元素</h2>
    <button id="bt1">點(diǎn)擊通過(guò)jQuery的before添加元素</button>
    <button id="bt2">點(diǎn)擊通過(guò)jQuery的after添加元素</button>
    <div class="aaron">
        <p class="test1">測(cè)試before</p>
    </div>
    <div class="aaron">
        <p class="test2">測(cè)試after</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在匹配test1元素集合中的每個(gè)元素前面插入p元素
        $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多參數(shù)</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在匹配test1元素集合中的每個(gè)元素后面插入p元素
        $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多參數(shù)</p>')

    })
    </script>
</body>

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

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

選擇器的描述：

prepend與prependTo的使用及區(qū)別：

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

2..prepend()和.prependTo()實(shí)現(xiàn)同樣的功能翘盖，主要的不同是語(yǔ)法桂塞，插入的內(nèi)容和目標(biāo)的位置不同

3.對(duì)于.prepend() 而言，選擇器表達(dá)式寫(xiě)在方法的前面馍驯，作為待插入內(nèi)容的容器阁危，將要被插入的內(nèi)容作為方法的參數(shù)

4.而.prependTo() 正好相反玛痊，將要被插入的內(nèi)容寫(xiě)在方法的前面，可以是選擇器表達(dá)式或動(dòng)態(tài)創(chuàng)建的標(biāo)記狂打，待插入內(nèi)容的容器作為參數(shù)擂煞。

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

1.append()向每個(gè)匹配的元素內(nèi)部追加內(nèi)容

2.prepend()向每個(gè)匹配的元素內(nèi)部前置內(nèi)容

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

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .aaron1{
        border: 1px solid red;
    }
    .aaron1 p {
        color: red;
    }
    .aaron2{
        border: 1px solid blue;
    }
    .aaron2 p {
        color: blue;
    }
    </style>
</head>
<body>
    <h2>通過(guò)prepend與prependTo添加元素</h2>
    <button id="bt1">點(diǎn)擊通過(guò)jQuery的prepend添加元素</button>
    <button id="bt2">點(diǎn)擊通過(guò)jQuery的prependTo添加元素</button>
    <div class="aaron1">
        <p>測(cè)試prepend</p>
    </div>
    <div class="aaron2">
        <p>測(cè)試prependTo</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //找到class="aaron1"的div節(jié)點(diǎn)
        //然后通過(guò)prepend在內(nèi)部的首位置添加一個(gè)新的p節(jié)點(diǎn)
        $('.aaron1')
            .prepend('<p>prepend增加的p元素</p>')
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //找到class="aaron2"的div節(jié)點(diǎn)
        //然后通過(guò)prependTo內(nèi)部的首位置添加一個(gè)新的p節(jié)點(diǎn)
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })
    </script>
</body>
</html>

3-4 DOM外部插入insertAfter()與insertBefore()

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

.before()和.insertBefore()實(shí)現(xiàn)同樣的功能颈娜。主要的區(qū)別是語(yǔ)法——內(nèi)容和目標(biāo)的位置剑逃。對(duì)于before()選擇表達(dá)式在函數(shù)前面浙宜，內(nèi)容作為參數(shù)，而.insertBefore()剛好相反蛹磺，內(nèi)容在方法前面粟瞬，它將被放在參數(shù)里元素的前面

.after()和.insertAfter() 實(shí)現(xiàn)同樣的功能。主要的不同是語(yǔ)法——特別是（插入）內(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ì)象插入溺职；

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通過(guò)insertBefore與insertAfter添加元素</h2>
    <button id="bt1">點(diǎn)擊通過(guò)jQuery的insertBefore添加元素</button>
    <button id="bt2">點(diǎn)擊通過(guò)jQuery的insertAfter添加元素</button>
    <div class="aaron">
        <p class="test1">測(cè)試insertBefore,不支持多參數(shù)</p>
    </div>
    <div class="aaron">
        <p class="test2">測(cè)試insertAfter,不支持多參數(shù)</p>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //在test1元素前后插入集合中每個(gè)匹配的元素
        //不支持多參數(shù)
        $('<p style="color:red">測(cè)試insertBefore方法增加</p>', '<p style="color:red">多參數(shù)</p>').insertBefore($(".test1"))
    })
    </script>
    <script type="text/javascript">
    $("#bt2").on('click', function() {
        //在test2元素前后插入集合中每個(gè)匹配的元素
        //不支持多參數(shù)
        $('<p style="color:red">測(cè)試insertAfter方法增加</p>', '<p style="color:red">多參數(shù)</p>').insertAfter($(".test2"))
    })
    </script>
</body>

</html>

第4章 DOM節(jié)點(diǎn)刪除

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

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

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

這個(gè)方法不僅移除子元素（和其他后代元素）阔蛉，同樣移除元素里的文本。因?yàn)轳海鶕?jù)說(shuō)明状原，元素里任何文本字符串都被看做是該元素的子節(jié)點(diǎn)聋呢。請(qǐng)看下面的HTML：

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

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

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

//結(jié)果：<p>慕課網(wǎng)</p>被移除
<div class="hello"></div>

可以參考下面的代碼區(qū)域：

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    div {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>

<body>
    <h2>通過(guò)empty移除元素</h2>
    <div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>點(diǎn)擊通過(guò)jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() {
        //通過(guò)empty移除了當(dāng)前div元素下的所有p元素
        //但是本身id=test的div元素沒(méi)有被刪除
        $("#test").empty()
    })
    </script>
</body>

</html>

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

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)

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

通過(guò)remove方法移除div及其內(nèi)部所有元素廓八，remove內(nèi)部會(huì)自動(dòng)操作事件銷(xiāo)毀方法奉芦，所以使用使用起來(lái)非常簡(jiǎn)單

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

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

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

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

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

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

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }
    
    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通過(guò)jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>通過(guò)點(diǎn)擊jQuery的empty移除元素</button>
    <button>通過(guò)點(diǎn)擊jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //刪除整個(gè) class=test1的div節(jié)點(diǎn)
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
        //找到所有p元素中宠叼，包含了3的元素
        //這個(gè)也是一個(gè)過(guò)濾器的處理
        $("p").remove(":contains('3')")
    })
    </script>
</body>

</html>

4-3 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á)式朝卒，刪除指定合集中的元素

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left div {
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通過(guò)empty與remove移除元素</h2>
    <div class="left">
        <button id="bt1">點(diǎn)擊通過(guò)jQuery的empty移除內(nèi)部P元素</button>
        <button id="bt2">點(diǎn)擊通過(guò)jQuery的remove移除整個(gè)節(jié)點(diǎn)</button>
    </div>
    <div class="right">
        <div id="test1">
            <p>p元素1</p>
            <p>p元素2</p>
        </div>
        <div id="test2">
            <p>p元素3</p>
            <p>p元素4</p>
        </div>
    </div>
    <script type="text/javascript">
    $("#bt1").on('click', function() {
        //刪除了2個(gè)p元素，但是本著沒(méi)有刪除 
        $("#test1").empty()
    })

    $("#bt2").on('click', function() {
        //刪除整個(gè)節(jié)點(diǎn)
        $("#test2").remove()
    })
    </script>
</body>

</html>

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

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

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

來(lái)看看jquery官方文檔的解釋?zhuān)?/strong>

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

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

參考右邊的代碼區(qū)域瞳遍，通過(guò) $("p").detach()把所有的P元素刪除后，再通過(guò)append把刪除的p元素放到頁(yè)面上造虎，通過(guò)點(diǎn)擊文字傅蹂，可以證明事件沒(méi)有丟失

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style type="text/css"> p { color: red; } </style> </head> <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; //去重 //通過(guò)detach方法刪除元素 //只是頁(yè)面不可見(jiàn)，但是這個(gè)節(jié)點(diǎn)還是保存在內(nèi)存中 //數(shù)據(jù)與事件都不會(huì)丟失 p = $("p").detach() }); $("#bt2").click(function() { //把p元素在添加到頁(yè)面中 //事件還是存在 $("body").append(p); }); </script> </body> </html>

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

JQuery是一個(gè)很大強(qiáng)的工具庫(kù)犁功，在工作開(kāi)發(fā)中氓轰，有些方法因?yàn)椴怀Ｓ玫剑蚴菦](méi)有注意到而被我們忽略浸卦。

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

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

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

無(wú)參數(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ì)保留下來(lái) 例如：$("p").detach()這一句會(huì)移除對(duì)象稚叹，僅僅是顯示效果沒(méi)有了焰薄。但是內(nèi)存中還是存在的。當(dāng)你append之后扒袖，又重新回到了文檔流中塞茅。就又顯示出來(lái)了。

第5章 DOM節(jié)點(diǎn)的復(fù)制與替換

5-1 DOM拷貝clone()

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

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

clone方法比較簡(jiǎn)單就是克隆節(jié)點(diǎn)，但是需要注意，如果節(jié)點(diǎn)有事件或者數(shù)據(jù)之類(lèi)的其他處理救湖，我們需要通過(guò)clone(ture)傳遞一個(gè)布爾值ture用來(lái)指定枢希，這樣不僅僅只是克隆單純的節(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ù)都克隆

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

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

5-2 DOM替換replaceWith()和replaceAll()

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

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

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

看個(gè)簡(jiǎn)單的例子：一段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>')

通過(guò)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()功能類(lèi)似，但是目標(biāo)和源相反塑煎，用上述的HTML結(jié)構(gòu)沫换，我們用replaceAll處理

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

總結(jié)：

.replaceAll()和.replaceWith()功能類(lèi)似，主要是目標(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)炭晒，而不是通過(guò)replaceWith/replaceAll方法替換后的節(jié)點(diǎn)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> .right div { background: yellow; } </style> </head> <body> <h2>replaceWith()和replaceAll()</h2> <div class="left"> <button class="bt1">點(diǎn)擊,通過(guò)replaceWith替換內(nèi)容</button> <button class="bt2">點(diǎn)擊,通過(guò)rreplaceAll替換內(nèi)容</button> </div> <div class="right"> <div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> <div> <p>第四段</p> <p>第五段</p> <p>第六段</p> </div> </div> <script type="text/javascript"> //只克隆節(jié)點(diǎn) //不克隆事件 $(".bt1").on('click', function() { //找到內(nèi)容為第二段的p元素 //通過(guò)replaceWith刪除并替換這個(gè)節(jié)點(diǎn) $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替換第二段的內(nèi)容</a>') }) </script> <script type="text/javascript"> //找到內(nèi)容為第六段的p元素 //通過(guò)replaceAll刪除并替換這個(gè)節(jié)點(diǎn) $(".bt2").on('click', function() { $('<a style="color:red">replaceAll替換第六段的內(nèi)容</a>').replaceAll('.right > div:last p:last'); }) </script> </body> </html>

5-3 DOM包裹wrap()方法

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

.wrap( wrappingElement )：在集合中匹配的每個(gè)元素周?chē)粋€(gè)HTML結(jié)構(gòu)

簡(jiǎn)單的看一段代碼：

<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ù)是一樣，只不過(guò)可以把代碼寫(xiě)在函數(shù)體內(nèi)部怜庸，寫(xiě)法不同而已

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

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

注意：

.wrap()函數(shù)可以接受任何字符串或?qū)ο螅梢詡鬟f給$()工廠函數(shù)來(lái)指定一個(gè)DOM結(jié)構(gòu)割疾。這種結(jié)構(gòu)可以嵌套了好幾層深嚎卫，但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹宏榕。該方法返回原始的元素集拓诸，以便之后使用鏈?zhǔn)椒椒ā?/p>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .left div, .right div { width: 100px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; background: #bbffaa; } .right div { background: yellow; } p { border: 1px solid red; } a { border: 1px solid blue; } </style> </head> <body> <h2>DOM包裹wrap()方法</h2> <div class="left"> <button class="aaron1">點(diǎn)擊,通過(guò)wrap方法給p元素增加父容器div</button> <button class="aaron2">點(diǎn)擊,通過(guò)wrap的回調(diào)方法給a元素增加父容器div</div> </div> <div class="right"> <p>p元素</p> <p>p元素</p> </div> <div class="left"> <a>a元素</a> <a>a元素</a> </div> <script type="text/javascript"> $(".aaron1").on('click', function() { //給所有p元素，增加父容器div $('p').wrap('<div></div>') }) </script> <script type="text/javascript"> $(".aaron2").on('click', function() { $('a').wrap(function() { return '<div class="' + $(this).text() + '" />'; }) }) </script>

5-4 DOM包裹unwrap()方法

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

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

看一段簡(jiǎn)單案例：

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

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

$('div').remove();

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

$('p').unwarp();

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

結(jié)果：

<p>p元素</p>

這個(gè)方法比較簡(jiǎn)單蚕脏，也不接受任何參數(shù)侦副，注意參考下案例的使用即可

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> .left, .right { width: 250px; height: 120px; } .left div, .right div { width: 100px; height: 120px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; background: #bbffaa; } .right div { background: yellow; } p { border: 1px solid red; } a { border: 1px solid blue; } </style> </head> <body> <h2>DOM包裹unwrap()方法</h2> <div class="left"> <div class="aaron1">點(diǎn)擊,通過(guò)unwrap方法給p元素刪除父容器div</div> <div class="aaron2">點(diǎn)擊,通過(guò)unwrap的回調(diào)方法給a元素刪除父容器div</div> </div> <div class="right"> <div> <p>p元素</p> </div> <div> <p>p元素</p> </div> </div> <div class="left"> <div> <a>a元素</a> </div> <div> <a>a元素</a> </div> </div> <script type="text/javascript"> $(".aaron1").on('click', function() { //找到所有p元素，刪除父容器div $('p').unwrap('<div></div>') }) </script> <script type="text/javascript"> $(".aaron2").on('click', function() { //找到所有p元素驼鞭，刪除父容器div $('a').unwrap(function() { return '<div></div>'; }) }) </script> </body> </html>

5-5 DOM包裹wrapAll()方法

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

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

簡(jiǎn)單的看一段代碼：

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

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

以上面案例為例固耘，

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

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

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

注意：
.wrapAll()函數(shù)可以接受任何字符串或?qū)ο蟠噬恚梢詡鬟f給$()工廠函數(shù)來(lái)指定一個(gè)DOM結(jié)構(gòu)厅目。這種結(jié)構(gòu)可以嵌套多層，但是最內(nèi)層只能有一個(gè)元素。所有匹配元素將會(huì)被當(dāng)作是一個(gè)整體损敷，在這個(gè)整體的外部用指定的 HTML 結(jié)構(gòu)進(jìn)行包裹葫笼。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> .left, .right { width: 250px; height: 120px; } .left div, .right div { width: 100px; /*height: 120px;*/ padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; background: #bbffaa; } .right div { background: yellow; } p { border: 1px solid red; } a { border: 1px solid blue; } </style> </head> <body> <h2>DOM包裹wrapAll()方法</h2> <div class="left"> <div class="aaron1">點(diǎn)擊,通過(guò)wrapAll方法給所有P元素增加父容器div</div> <div class="aaron2">點(diǎn)擊,通過(guò)wrapAll的回調(diào)方法給每個(gè)a元素增加父容器div</div> </div> <div class="right"> <p>p元素</p> <p>p元素</p> </div> <div class="left"> <a>a元素</a> <a>a元素</a> </div> <script type="text/javascript"> $(".aaron1").on('click', function() { //給所有p元素，增加父容器div $('p').wrapAll('<div></div>'); }) </script> <script type="text/javascript"> $(".aaron2").on('click', function() { //wrapAll接受一個(gè)回調(diào)函數(shù) //每一次遍歷this都指向了合集中每一個(gè)a元素 $('a').wrapAll(function() { return '<div></div>' }) }) </script> </body> </html>

5-6 DOM包裹wrapInner()方法

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

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

聽(tīng)起來(lái)有點(diǎn)繞奥额，可以用個(gè)簡(jiǎn)單的例子描述下，簡(jiǎn)單的看一段代碼：

<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片段涡相，用來(lái)包住匹配元素的內(nèi)容

以上面案例為例哲泊，

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

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

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

注意：

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> .left, .right { width: 250px; height: 130px; } .left div, .right div { width: 100px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; background: #bbffaa; } .right div { background: yellow; } p { border: 1px solid red; } a { border: 1px solid blue; } </style> </head> <body> <h2>DOM包裹wrapInner()方法</h2> <div class="left"> <div class="aaron1">點(diǎn)擊,通過(guò)wrapInner方法給所有div元素增加內(nèi)部父容器p</div> <div class="aaron2">點(diǎn)擊,通過(guò)wrapInner的回調(diào)方法給每個(gè)div元素增加內(nèi)部父容器a</div> </div> <div class="right"> <div class="right1">p元素</div> <div class="right1">p元素</div> </div> <div class="left"> <div class="left1">a元素</div> <div class="left1">a元素</div> </div> <script type="text/javascript"> $(".aaron1").on('click', function() { //給所有class=right1的div元素丙号，增加內(nèi)部包裹父容器p $('.right1').wrapInner('<p></p>'); }) </script> <script type="text/javascript"> $(".aaron2").on('click', function() { //wrapInner接受一個(gè)回調(diào)函數(shù) //每一次遍歷this都指向了合集中每一個(gè)class=left1的div元素 $('.left1').wrapInner(function() { return '<a></a>' }) }) </script> </body> v</html>

第6章 jQuery遍歷

6-1 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)系，因此無(wú)法找到枝恋。

children()無(wú)參數(shù)

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

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

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

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

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <style> .left { width: auto; height: 120px; } .left div { width: 150px; height: 70px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } a { display: block; } </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <h2>children方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button id="bt1">點(diǎn)擊：children無(wú)參數(shù)</button> <button id="bt2">點(diǎn)擊：children傳遞表達(dá)式</button> <script type="text/javascript"> $("#bt1").click(function() { $('.div').children().css('border','1px solid red'); }) </script> <script type="text/javascript"> $("#bt2").click(function() { //找到所有class=div的元素 //找到其對(duì)應(yīng)的子元素ul呐能，然后篩選出最后一個(gè)念搬，給邊寬加上顏色 $('.div').children(':last').css('border', '3px solid blue') }) </script> </body> </html>

6-2 jQuery遍歷之find()方法

jQuery是一個(gè)合集對(duì)象抑堡，如果想快速查找DOM樹(shù)中的這些元素的后代元素，此時(shí)可以用find()方法朗徊，這也是開(kāi)發(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)系温亲，通過(guò)find方法就可以快速的查找到了棚壁。

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

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

注意重點(diǎn)：

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <style> .left { width: auto; height: 200px; } .left div { width: 150px; height: 70px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } span { color: blue; } </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <h2>find方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2 test">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button>點(diǎn)擊：find傳遞表達(dá)式</button> <br/> <br/> <h3>find表達(dá)式</h3> <div style="border:1px solid red;"> <p> <span>測(cè)試1</span> <a>測(cè)試2</a> </p> <p> <span>慕課網(wǎng)1</span> <a>慕課網(wǎng)2</a> </p> <div> <span>Aaron1</span> <a>Aaron2</a> </div> </div> <br/> <br/> <button>點(diǎn)擊：find傳遞$對(duì)象</button> <script type="text/javascript"> $("button:first").click(function() { var $lis = $('li:last'); $('.left').find($lis).css('border','1px solid red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有p元素号显，然后篩選出子元素是span標(biāo)簽的節(jié)點(diǎn) //改變其字體顏色 var $spans = $('span'); $("p").find($spans).css('color', 'red'); }) </script> </body> </html>

6-3 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()获讳，就是這樣簡(jiǎn)單的表達(dá)

parent()無(wú)參數(shù)

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

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

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

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <style> .left { width: auto; height: 400px; } .left div { width: 350px; height: 150px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } span { color: blue; } </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <h2>parent方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-2">  <li class="item-a">A</li>  <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li>  <li class="item-c">C</li> </ul> </div> <div class="div"> <ul class="level-2">  <li class="item-a">A</li>  <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li>  <li class="item-c">C</li> </ul> </div> </div> <button>點(diǎn)擊：parent無(wú)參數(shù)</button> <button>點(diǎn)擊：paren傳遞選擇器</button> <script type="text/javascript"> $("button:first").click(function() { $('.level-3').parent().css('border','1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-a的父元素 //然后給每個(gè)ul,然后篩選出最后一個(gè)偎肃，加上藍(lán)色的邊 $('.item-a').parent(':last').css('border', '1px solid blue') }) </script> </body> </html>

6-3 jQuery遍歷之parents()方法

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

其實(shí)也類(lèi)似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()無(wú)參數(shù)

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

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

注意：jQuery是一個(gè)合集對(duì)象蒲犬，所以通過(guò)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樹(shù)查找
2 $( "html" ).parent()方法返回一個(gè)包含document的集合巡蘸，而$( "html" ).parents()返回一個(gè)空集合奋隶。

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 350px; } .left div { width: 350px; height: 150px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } span { color: blue; } </style> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <h2>parents方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-2">  <li class="item-a">A</li>  <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li>  <li class="item-c">C</li> </ul> </div> <div class="div"> <ul class="level-2">  <li class="item-a">A</li>  <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li>  <li class="item-c">C</li> </ul> </div> </div> <button>點(diǎn)擊：parents無(wú)參數(shù)</button> <button>點(diǎn)擊：parents傳遞選擇器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-b').parents().css('border','1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到當(dāng)前元素的所有祖輩元素,篩選出class="first-div"的元素 //并且附上一個(gè)邊 $('.item-b').parents('.first-div').css('border', '2px solid blue') }) </script> </body> </html>

6-5 jQuery遍歷之closest()方法

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

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

從元素本身開(kāi)始身腻，在DOM 樹(shù)上逐級(jí)向上級(jí)元素匹配产还，并返回最先匹配的祖先元素

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

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

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

closest()方法給定的jQuery集合或元素來(lái)過(guò)濾元素

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

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

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

1.起始位置不同：.closest開(kāi)始于當(dāng)前元素 .parents開(kāi)始于父元素
2.遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)，.parents遍歷到文檔根元素陵刹，closest向上查找默伍，直到找到一個(gè)匹配的就停止查找，parents一直查找到根元素衰琐，并將匹配的元素加入集合
3.結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象也糊，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象

<body> <h2>closest方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </div> </div> <br/> <button>點(diǎn)擊：closest傳遞選擇器 </button> <button>點(diǎn)擊：closest傳遞一個(gè)元素對(duì)象</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-1').closest($('.level-2')).css('border','1px solid red'); }) </script> <script type="text/javascript"> $("button:last").click(function() { var itemB = $('.item-b') $('li.item-1') .closest(itemB) .css('border', '1px solid blue'); }) </script> </body> </html>

6-6 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()無(wú)參數(shù)

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

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

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

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

<body> <h2>next方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button>點(diǎn)擊：next無(wú)參數(shù)</button> <button>點(diǎn)擊：next傳遞表達(dá)式</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').next().css('border', '1px solid red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-3的li //然后篩選出第一個(gè)li探颈，加上藍(lán)色的邊 $('.item-2').next(':first').css('border', '1px solid blue') }) </script> </body> </html>

6-7 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()無(wú)參數(shù)

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

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

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

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

<body> <h2>prev方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button>點(diǎn)擊：prev無(wú)參數(shù)</button> <button>點(diǎn)擊：prev傳遞選擇器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').prev().css('border', '1px solid red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //找到所有class=item-2的li //然后篩選出最后一個(gè)全闷，加上藍(lán)色的邊 $('.item-3').prev(':last').css('border', '1px solid blue') }) </script> </body>

6-8 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()無(wú)參數(shù)

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

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

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

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

<body> <h2>siblings方法()</h2> <div class="left first-div"> <div class="div"> <ul class="level-1"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-2"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> <div class="div"> <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </div> </div> <button>點(diǎn)擊：siblingsv無(wú)參數(shù)</button> <button>點(diǎn)擊：siblings傳遞選擇器</button> <script type="text/javascript"> $("button:first").click(function() { $('.item-2').siblings().css('border', '2px solid red') }) </script> <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> </body>

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

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

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

簡(jiǎn)單的看一個(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)位置)

<body> <h2>add方法()</h2> <div class="left first-div"> <div class="div"> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> <p>新的p元素</p> </div> </div> <div class="right"></div> <br/> <button>點(diǎn)擊：add傳遞元素標(biāo)簽</button> <button>點(diǎn)擊：add傳遞html結(jié)構(gòu)</button> <script type="text/javascript"> $("button:first").click(function() { //把p元素添加到li的合集中 $('li').add('p').css('background', 'red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //把html結(jié)構(gòu)'<p>新的p元素</p>' //加入到li的合集中，為了能夠在頁(yè)面上顯示 //需要再重新appendTo到指定的節(jié)點(diǎn)處 //值得注意：整個(gè)結(jié)構(gòu)位置都改變了 $('li').add('<p>新的p元素</p>').appendTo($('.right')) }) </script> </body>

6-10 jQuery遍歷之each()

jQuery是一個(gè)合集對(duì)象菜皂，通過(guò)$()方法找到指定的元素合集后可以進(jìn)行一系列的操作。比如我們操作$("li").css('') 給所有的li設(shè)置style值厉萝，因?yàn)閖Query是一個(gè)合集對(duì)象恍飘，所以css方法內(nèi)部就必須封裝一個(gè)遍歷的方法榨崩，被稱(chēng)為隱式迭代的過(guò)程。要一個(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開(kāi)始計(jì)數(shù)

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

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

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

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

開(kāi)始迭代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ì)做一些邏輯操作了秫逝，如果需要提前退出，可以以通過(guò)返回 false以便在回調(diào)函數(shù)內(nèi)中止循環(huán)

<script type="text/javascript"> $("button:first").click(function() { //遍歷所有的li //修改每個(gè)li內(nèi)的字體顏色 $("li").each(function(index, element) { $(this).css('color','red') }) }) </script> <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> </body>

最后編輯于：2017.12.06 01:03:55

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末询枚，一起剝皮案震驚了整個(gè)濱河市违帆，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌金蜀，老刑警劉巖刷后，帶你破解...
沈念sama閱讀 206,126評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異渊抄，居然都是意外死亡尝胆，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,254評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)护桦，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)含衔，“玉大人，你說(shuō)我怎么就攤上這事嘶炭”Щ牛” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,445評(píng)論 0贊 341
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵眨猎，是天一觀的道長(zhǎng)抑进。經(jīng)常有香客問(wèn)我，道長(zhǎng)睡陪，這世上最難降的妖魔是什么寺渗？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,185評(píng)論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮兰迫，結(jié)果婚禮上信殊，老公的妹妹穿的比我還像新娘。我一直安慰自己汁果，他們只是感情好涡拘，可當(dāng)我...
茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著据德，像睡著了一般鳄乏。火紅的嫁衣襯著肌膚如雪跷车。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 48,970評(píng)論 1贊 284
城市分裂傳說(shuō)
那天橱野，我揣著相機(jī)與錄音朽缴，去河邊找鬼。笑死水援，一個(gè)胖子當(dāng)著我的面吹牛密强，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播蜗元，決...
沈念sama閱讀 38,276評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼或渤，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了许帐？” 一聲冷哼從身側(cè)響起劳坑，我...
開(kāi)封第一講書(shū)人閱讀 36,927評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎成畦，沒(méi)想到半個(gè)月后距芬，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,400評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡循帐，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年框仔，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拄养。...
茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡离斩，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出瘪匿，到底是詐尸還是另有隱情跛梗，我是刑警寧澤，帶...
沈念sama閱讀 33,646評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布棋弥，位于F島的核電站核偿，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏顽染。R本人自食惡果不足惜漾岳，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望粉寞。院中可真熱鬧尼荆，春花似錦、人聲如沸唧垦。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,204評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至野芒，卻和暖如春蓄愁，著一層夾襖步出監(jiān)牢的瞬間双炕，已是汗流浹背狞悲。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,423評(píng)論 1贊 260
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留妇斤，地道東北人摇锋。一個(gè)月前我還...
沈念sama閱讀 45,423評(píng)論 2贊 352
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像站超，于是被迫代替她去往敵國(guó)和親荸恕。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345

jQuery基礎(chǔ)——DOM篇

第1章 簡(jiǎn)介

第2章 DOM節(jié)點(diǎn)的創(chuàng)建

2-1 DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性

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

第3章 DOM外部插入

3-1 DOM內(nèi)部插入append()與appendTo()

3-2 DOM外部插入after()與before()

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

3-4 DOM外部插入insertAfter()與insertBefore()

第4章 DOM節(jié)點(diǎn)刪除

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

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

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

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

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

第5章 DOM節(jié)點(diǎn)的復(fù)制與替換

5-1 DOM拷貝clone()

5-2 DOM替換replaceWith()和replaceAll()

5-3 DOM包裹wrap()方法

5-4 DOM包裹unwrap()方法

5-5 DOM包裹wrapAll()方法

5-6 DOM包裹wrapInner()方法

第6章 jQuery遍歷

6-1 jQuery遍歷之children()方法

6-2 jQuery遍歷之find()方法

6-3 jQuery遍歷之parent()方法

6-3 jQuery遍歷之parents()方法

6-5 jQuery遍歷之closest()方法

6-6 jQuery遍歷之next()方法

6-7 jQuery遍歷之prev()方法

6-8 jQuery遍歷之siblings()

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

6-10 jQuery遍歷之each()

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

第1章簡(jiǎn)介