摘要：將匹配元素集合的父級(jí)元素刪除，保留自身和兄弟元素，如果存在在原來(lái)的位置。方法查找指定元素集合中每一個(gè)元素的同輩元素。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)從開(kāi)始計(jì)數(shù)。

先介紹下需要用到的瀏覽器提供的一些原生的方法（這里不處理低版本的IE兼容問(wèn)題）
創(chuàng)建流程比較簡(jiǎn)單，大體如下：

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

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

加入到文檔中
流程中涉及的一點(diǎn)方法：

創(chuàng)建元素：document.createElement

設(shè)置屬性：setAttribute

添加文本：innerHTML

加入文檔：appendChild

創(chuàng)建元素節(jié)點(diǎn)：可以有幾種方式。常見(jiàn)的就是直接把這個(gè)節(jié)點(diǎn)的結(jié)構(gòu)給通過(guò)HTML標(biāo)記字符串描述出來(lái)，通過(guò)$()函數(shù)處理，$("html結(jié)構(gòu)")

$("
我是文本節(jié)點(diǎn)
") ?? 

append()與appendTo()在結(jié)尾處，在開(kāi)頭處DOM內(nèi)部插入prepend()與prependTo()

動(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()和.appendTo()兩種方法功能相同，主要的不同是語(yǔ)法——內(nèi)容和目標(biāo)的位置不同

$(".content").append("
通過(guò)append方法添加的元素
")
$("
通過(guò)appendTo方法添加的元素
").appendTo($(".content")) 

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

after()與before()，insertAfter()與insertBefore()

外部插入的處理，也就是兄弟之間的關(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,....) 可以參考右邊案例代碼

.before()和.insertBefore()實(shí)現(xiàn)同樣的功能。主要的區(qū)別是語(yǔ)法——內(nèi)容和目標(biāo)的位置。 對(duì)于before()選擇表達(dá)式在函數(shù)前面，內(nèi)容作為參數(shù)，而.insertBefore()剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的前面
$(".test1").before("before,在匹配元素之前增加", "多參數(shù)")

})

$("測(cè)試insertBefore方法增加", "多參數(shù)").insertBefore($(".test1"))

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

$("button").on("click", function() {
        //通過(guò)empty移除了當(dāng)前div元素下的所有p元素
        //但是本身id=test的div元素沒(méi)有被刪除
        $("#test").empty()
    })  

remove會(huì)將元素自身移除，同時(shí)也會(huì)移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)。
remove表達(dá)式參數(shù)：
remove比empty好用的地方就是可以傳遞一個(gè)選擇器表達(dá)式用來(lái)過(guò)濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點(diǎn)

$("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")")
    }) 

如果我們希望臨時(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ì)象。

.clone()方法深度 復(fù)制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級(jí)元素、文字節(jié)點(diǎn)。??
clone方法比較簡(jiǎn)單就是克隆節(jié)點(diǎn)，但是需要注意，如果節(jié)點(diǎn)有事件或者數(shù)據(jù)之類的其他處理，我們需要通過(guò)clone(ture)傳遞一個(gè)布爾值ture用來(lái)指定，這樣不僅僅只是克隆單純的節(jié)點(diǎn)結(jié)構(gòu)，還要把附帶的事件與數(shù)據(jù)給一并克隆了

$(".left").append($(".aaron2").clone(true).css("color","blue"))? 

.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)，而不是通過(guò)replaceWith/replaceAll方法替換后的節(jié)點(diǎn)。分離DOM元素

".right > div:first p:last").replaceWith("replaceWith替換第二段的內(nèi)容")
$("replaceAll替換第六段的內(nèi)容").replaceAll(".right > div:last p:last"); 

.wrap( wrappingElement )：在集合中匹配的每個(gè)元素周圍包裹一個(gè)HTML結(jié)構(gòu)
.wrap( function ) ：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

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

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

 $("p").unwrap("
") 

wrap是針對(duì)單個(gè)dom元素處理，如果要將集合中的元素用其他元素包裹起來(lái)，也就是給他們?cè)黾右粋€(gè)父元素，針對(duì)這樣的處理，JQuery提供了一個(gè)wrapAll方法
.wrapAll( wrappingElement )：給集合中匹配的元素增加一個(gè)外面包裹HTML結(jié)構(gòu)
.wrapAll( function ) ：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

.wrapInner( wrappingElement )：給集合中匹配每一個(gè)的元素的內(nèi)部，增加包裹的HTML結(jié)構(gòu)
.wrapInner( function ) ：允許我們用一個(gè)callback函數(shù)做參數(shù)，每次遇到匹配元素時(shí)，該函數(shù)被執(zhí)行，返回一個(gè)DOM元素，jQuery對(duì)象，或者HTML片段，用來(lái)包住匹配元素的內(nèi)容

p元素
p元素
$("p").wrapInner("
")

    
p元素

------

    
p元素
 
 

children()方法：快速查找合集里面的第一級(jí)子元素
find()方法：快速查找DOM樹(shù)中的這些元素的后代元素
find是遍歷當(dāng)前元素集合中每個(gè)元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
與其他的樹(shù)遍歷方法不同，選擇器表達(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)簽)。
parent()方法：快速查找合集里面的每一個(gè)元素的父元素，因?yàn)槭歉冈兀@個(gè)方法只會(huì)向上查找一級(jí)。
parents()方法：查找合集里面的每一個(gè)元素的所有祖輩元素。
注意事項(xiàng)：
1 .parents()和.parent()方法是相似的，但后者只是進(jìn)行了一個(gè)單級(jí)的DOM樹(shù)查找
2 $( "html" ).parent()方法返回一個(gè)包含document的集合，而$( "html" ).parents()返回一個(gè)空集合。??
closest()方法：查找當(dāng)前元素的父輩祖輩元素。
parents()和.closest()是有點(diǎn)相似的，都是往上遍歷祖輩元素，但是兩者還是有區(qū)別的，否則就沒(méi)有存在的意義了
起始位置不同：.closest開(kāi)始于當(dāng)前元素 .parents開(kāi)始于父元素
遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)，.parents遍歷到文檔根元素，closest向上查找，直到找到一個(gè)匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合
結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象

next()方法: 查找指定元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合。
prev()方法：查找指定元素集合中每一個(gè)元素緊鄰的前面同輩元素的元素集合。
Sibling()方法：查找指定元素集合中每一個(gè)元素的同輩元素。
add()方法：用來(lái)創(chuàng)建一個(gè)新的jQuery對(duì)象 ，元素添加到匹配的元素集合中。
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ù)。

$("li").each(function(index,element){
            $(this).css("color","red");
        })