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

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

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

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

加入到文檔中
流程中涉及的一點方法：

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

設(shè)置屬性：setAttribute

添加文本：innerHTML

加入文檔：appendChild

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

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

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

動態(tài)創(chuàng)建的元素是不夠的，它只是臨時存放在內(nèi)存中，最終我們需要放到頁面文檔并呈現(xiàn)出來。那么問題來了，怎么放到文檔上？
這里就涉及到一個位置關(guān)系，常見的就是把這個新創(chuàng)建的元素，當(dāng)作頁面某一個元素的子元素放到其內(nèi)部。針對這樣的處理，jQuery就定義2個操作的方法
.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內(nèi)容和目標(biāo)的位置不同

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

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

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

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

before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點

2個方法都是都可以接收HTML字符串，DOM 元素，元素數(shù)組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面

2個方法都支持多個參數(shù)傳遞after(div1,div2,....) 可以參考右邊案例代碼

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

})

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

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

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

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

$("button:first").on("click", function() {
        //刪除整個 class=test1的div節(jié)點
        $(".test1").remove()
    })
    $("button:last").on("click", function() {
        //找到所有p元素中，包含了3的元素
        //這個也是一個過濾器的處理
        $("p").remove(":contains("3")")
    }) 

如果我們希望臨時刪除頁面上的節(jié)點，但是又不希望節(jié)點上的數(shù)據(jù)與事件丟失，并且能在下一個時間段讓這個刪除的節(jié)點顯示到頁面，這時候就可以使用detach方法來處理。
detach從字面上就很容易理解。讓一個web元素托管。即從當(dāng)前頁面中移除該元素，但保留這個元素的內(nèi)存模型對象。

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

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

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

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

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

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

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

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

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

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

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

    
p元素

------

    
p元素
 
 

children()方法：快速查找合集里面的第一級子元素
find()方法：快速查找DOM樹中的這些元素的后代元素
find是遍歷當(dāng)前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
與其他的樹遍歷方法不同，選擇器表達(dá)式對于 .find() 是必需的參數(shù)。如果我們需要實現(xiàn)對所有后代元素的取回，可以傳遞通配選擇器 "*"。
find只在后代中遍歷，不包括自己。
選擇器 context 是由 .find() 方法實現(xiàn)的；因此，$(".item-ii").find("li") 等價于 $("li", ".item-ii")(找到類名為item-ii的標(biāo)簽下的li標(biāo)簽)。
parent()方法：快速查找合集里面的每一個元素的父元素，因為是父元素，這個方法只會向上查找一級。
parents()方法：查找合集里面的每一個元素的所有祖輩元素。
注意事項：
1 .parents()和.parent()方法是相似的，但后者只是進(jìn)行了一個單級的DOM樹查找
2 $( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。??
closest()方法：查找當(dāng)前元素的父輩祖輩元素。
parents()和.closest()是有點相似的，都是往上遍歷祖輩元素，但是兩者還是有區(qū)別的，否則就沒有存在的意義了
起始位置不同：.closest開始于當(dāng)前元素 .parents開始于父元素
遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合
結(jié)果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

next()方法: 查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合。
prev()方法：查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合。
Sibling()方法：查找指定元素集合中每一個元素的同輩元素。
add()方法：用來創(chuàng)建一個新的jQuery對象 ，元素添加到匹配的元素集合中。
each()方法：就是一個for循環(huán)的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調(diào)函數(shù)執(zhí)行時，會傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開始計數(shù)。

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