創(chuàng)建

$('body').append($("<div></div>")) //向body 中插入一個 div

插入

append：這個操作與對指定的元素執(zhí)行原生的appendChild方法，將它們添加到文檔中的情況類似。

$(".content").append('<div></div>')

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

$('<div></div>').appendTo($(".content"))

注意

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

.after(content):在匹配元素集合中的每個元素后面插入?yún)?shù)所指定的內(nèi)容,作為其兄弟節(jié)點

$(".test2").after('<p>after</p>', '<p>多參數(shù)</p>')

.before(content):根據(jù)參數(shù)設(shè)定,在匹配元素的前面插入內(nèi)容

$(".test1").before('<p>before</p>', '<p>多參數(shù)</p>')

注意

• before與after都是用來對相對選中元素外部增加相鄰的兄弟節(jié)點
• 2個方法都是都可以接收HTML字符串，DOM 元素，元素數(shù)組，或者jQuery對象，用來插入到集合中每個匹配元素的前面或者后面
• 2個方法都支持多個參數(shù)傳遞after(div1,div2,....) 可以參考右邊案例代碼
• after向元素的后邊添加html代碼，如果元素后面有元素了，那將后面的元素后移，然后將html代碼插入
• before向元素的前邊添加html代碼，如果元素前面有元素了，那將前面的元素前移，然后將html代碼插

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

$('.aaron1').prepend('<p>prepend</p>')

prependTo把所有匹配的元素前置到另一個指定的元素集合中

$('<p>prependTo</p>').prependTo($('.aaron2'))

注意

• .prepend()方法將指定元素插入到匹配元素里面作為它的第一個子元素 (如果要作為最后一個子元素插入用.append()).
• .prepend()和.prependTo()實現(xiàn)同樣的功能，主要的不同是語法，插入的內(nèi)容和目標的位置不同
• 對于.prepend() 而言，選擇器表達式寫在方法的前面，作為待插入內(nèi)容的容器，將要被插入的內(nèi)容作為方法的參數(shù)
• 而.prependTo() 正好相反，將要被插入的內(nèi)容寫在方法的前面，可以是選擇器表達式或動態(tài)創(chuàng)建的標記，待插入內(nèi)容的容器作為參數(shù)。

• append()向每個匹配的元素內(nèi)部追加內(nèi)容
• prepend()向每個匹配的元素內(nèi)部前置內(nèi)容
• appendTo()把所有匹配的元素追加到另一個指定元素的集合中
• prependTo()把所有匹配的元素前置到另一個指定的元素集合中

insertBefore() 在目標元素前面插入集合中的每個元素

$('<p>測試insertBefore方法增加</p>', '<p>多參數(shù)</p>').insertBefore($(".test1"))

insertAfter() 在目標元素后面插入集合中的每個匹配的元素

$('<p>測試insertAfter方法增加</p>', '<p>多參數(shù)</p>').insertAfter($(".test2"))

注意

• .before()和.insertBefore()實現(xiàn)同樣的功能。主要的區(qū)別是語法——內(nèi)容和目標的位置。 對于before()選擇表達式在函數(shù)前面，內(nèi)容作為參數(shù)，而.insertBefore()剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的前面
• .after()和.insertAfter() 實現(xiàn)同樣的功能。主要的不同是語法——特別是（插入）內(nèi)容和目標的位置。 對于after()選擇表達式在函數(shù)的前面，參數(shù)是將要插入的內(nèi)容。對于 .insertAfter(), 剛好相反，內(nèi)容在方法前面，它將被放在參數(shù)里元素的后面
• before、after與insertBefore。insertAfter的除了目標與位置的不同外，后面的不支持多參數(shù)處理

• insertAfter將JQuery封裝好的元素插入到指定元素的后面，如果元素后面有元素了，那將后面的元素后移，然后將JQuery對象插入；
• insertBefore將JQuery封裝好的元素插入到指定元素的前面，如果元素前面有元素了，那將前面的元素前移，然后將JQuery對象插入；

刪除

.empty() 清空所匹配元素內(nèi)部的 html 代碼,但標記仍然在 DOM 中

$('.hello').empty()

.remove() 移除所匹配元素內(nèi)部所有元素，remove內(nèi)部會自動操作事件銷毀方法

$('.hello').remove()

注意

• remove比empty好用的地方就是可以傳遞一個選擇器表達式用來過濾將被移除的匹配元素集合，可以選擇性的刪除指定的節(jié)點
  $("p").remove(":contains('3')") //找到 p 元素中,包含3的元素然后刪除
$("p").filter(":contains('3')").remove() //找到 p 元素中,包含3的元素然后刪除
• empty()方法并不是刪除節(jié)點，而是清空節(jié)點，它能清空元素中的所有后代節(jié)點
• empty不能刪除自己本身這個節(jié)點
• remove該節(jié)點與該節(jié)點所包含的所有后代節(jié)點將同時被刪除
• remove提供傳遞一個篩選的表達式，刪除指定合集中的元素

detach() 相當于剪切所匹配的元素,僅僅是顯示效果沒有了.但是內(nèi)存中還是存在的.當你append之后,又重新回到了文檔流中,就又顯示出來了.

var p;
p = $("p").detach();  //p 元素只是從頁面中消失了,
$("body").append(p); //p 元素又重新回到了頁面上

注意

• 移除的處理與remove一致
• 與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來

拷貝

.clone()方法深度 復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節(jié)點。

clone方法比較簡單就是克隆節(jié)點，但是需要注意，如果節(jié)點有事件或者數(shù)據(jù)之類的其他處理，我們需要通過clone(ture)傳遞一個布爾值ture用來指定，這樣不僅僅只是克隆單純的節(jié)點結(jié)構(gòu)，還要把附帶的事件與數(shù)據(jù)給一并克隆了

//clone處理一
$("div").clone()   //只克隆了結(jié)構(gòu)，事件丟失

//clone處理二
$("div").clone(true) //結(jié)構(gòu)、事件與數(shù)據(jù)都克隆

注意

• clone()方法時，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內(nèi)容，如代碼$(this).clone().css('color','red') 增加了一個顏色
• 通過傳遞true，將所有綁定在原始元素上的事件處理函數(shù)復制到克隆元素上
• clone()方法是jQuery擴展的，只能處理通過jQuery綁定的事件與數(shù)據(jù)
• 元素數(shù)據(jù)（data）內(nèi)對象和數(shù)組不會被復制，將繼續(xù)被克隆元素和原始元素共享。深復制的所有數(shù)據(jù)，需要手動復制每一個

替換

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

簡單來說：用$()選擇節(jié)點A，調(diào)用replaceWith方法，傳入一個新的內(nèi)容B（HTML字符串，DOM元素，或者jQuery對象）用來替換選中的節(jié)點A
$("p").replaceWith('<a style="color:red">替換第二段的內(nèi)容</a>')

.replaceAll( target ) ：用集合的匹配元素替換每個目標元素

.replaceAll()和.replaceWith()功能類似，但是目標和源相反，用上述的HTML結(jié)構(gòu)，我們用replaceAll處理
$('<a style="color:red">替換第二段的內(nèi)容</a>').replaceAll('p')

注意

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

包裹

.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結(jié)構(gòu)

$('p').wrap('<div></div>') //給 p 元素增加一個 div 包圍

.wrap( function ) ：一個回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對象

使用后的效果與直接傳遞參數(shù)是一樣，只不過可以把代碼寫在函數(shù)體內(nèi)部，寫法不同而已

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

注意

• .wrap()函數(shù)可以接受任何字符串或?qū)ο螅梢詡鬟f給$()工廠函數(shù)來指定一個DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套了好幾層深，但應(yīng)該只包含一個核心的元素。每個匹配的元素都會被這種結(jié)構(gòu)包裹。該方法返回原始的元素集，以便之后使用鏈式方法。

.unwarp(): 去除集合匹配的每一個元素周圍包裹的一個 HTML 結(jié)構(gòu)

$('p').unwarp(); //去除 p 標簽外的一個 HTML 結(jié)構(gòu),而不傷害 p 標簽

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

$('p').wrapAll('<div></div>') //給所有p元素增加一個div包裹

.wrapAll( function ) ：一個回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對象

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

注意

• .wrapAll()函數(shù)可以接受任何字符串或?qū)ο?，可以傳遞給$()工廠函數(shù)來指定一個DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套多層，但是最內(nèi)層只能有一個元素。所有匹配元素將會被當作是一個整體，在這個整體的外部用指定的 HTML 結(jié)構(gòu)進行包裹。

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

$('div').wrapInner('<p></p>') //給 div 的所有子元素增加一個 p 標簽

.wrapInner( function ) ：允許我們用一個callback函數(shù)做參數(shù)，每次遇到匹配元素時，該函數(shù)被執(zhí)行，返回一個DOM元素，jQuery對象，或者HTML片段，用來包住匹配元素的內(nèi)容

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

注意

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

遍歷

.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關(guān)系）

$('div').children() //找到 div 中的所有子元素
$("div").children(':last') //找到 div 中的子元素的最后一個

.find() 查找所有后代節(jié)點中的所匹配的元素

$("div").find("li") //div 中所以為 li 的后代節(jié)點

注意

• find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以。
• 與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數(shù)。如果我們需要實現(xiàn)對所有后代元素的取回，可以傳遞通配選擇器 '*'。
• find只在后代中遍歷，不包括自己。
• 選擇器 context 是由 .find() 方法實現(xiàn)的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)。

parent() 查找所匹配元素的父元素
parents() 查找所匹配元素的所有祖先元素

$('.item').parent(':first')
$('.item').parents('.first-div')

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

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

注意

• 起始位置不同：.closest開始于當前元素 .parents開始于父元素
• 遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合
• 結(jié)果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象

.next() 元素緊鄰的后面同輩元素的元素集合

$('.item').next(':first')

.prev() 元素緊鄰的前面同輩元素的元素集合

$('.item').prev()

.siblings()元素集合中每一個元素的兄弟元素(不包含自己)

.add() 向指定元素添加新的對象

.add()的參數(shù)可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。
$('li').add('p').css('background', 'red')
$('li').add('<p>新的p元素</p>').appendTo($('.class'))

.each() 方法就是一個for循環(huán)的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調(diào)函數(shù)執(zhí)行時，會傳遞當前循環(huán)次數(shù)作為參數(shù)從0開始計數(shù)

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

$("li").each(function(index, element) {
     index 索引
     element是對應(yīng)的li節(jié)點
     this 指向的是li
})