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

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

創建節點(常見的：元素、屬性和文本)

添加節點的一些屬性

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

創建元素：document.createElement

設置屬性：setAttribute

添加文本：innerHTML

加入文檔：appendChild

創建元素節點：可以有幾種方式。常見的就是直接把這個節點的結構給通過HTML標記字符串描述出來，通過$()函數處理，$("html結構")

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

append()與appendTo()在結尾處，在開頭處DOM內部插入prepend()與prependTo()

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

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

在元素內部進行操作的方法，除了在被選元素的結尾（仍然在內部）通過append與appendTo插入指定內容外，相應的還可以在被選元素之前插入，jQuery提供的方法是prepend與prependTo

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

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

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

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

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

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

})

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

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

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

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

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

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

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

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

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

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

.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構
.wrap( function ) ：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象

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

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

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

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

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

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

    
p元素

------

    
p元素
 
 

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

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

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