JQuery學(xué)習(xí)筆記整理：操作DOM

在使用jQuery時(shí)，改變HTML文檔本身的結(jié)構(gòu)（也就是操作DOM）是在所難免的，那么JQuery提供了哪些方法供我們操作DOM呢？

var newElement = $('<div class="item"><span>文本</span></div>');

/<div class="example">   
/  <div class="item"><span>123</span></div>   
/</div>

var newElement = $('.example .item').clone();   
$('.example').append(newElement);

// 結(jié)果
//<div class="example">     
// <div class="item"><span>123</span></div>
// <div class="item"><span>123</span></div>
//</div>

var divElem = document.createElement('div');
divElem.className = 'item';
var newElem = $(divElem)

append(html)、append(jQuery)、append(HTMLElement)  把參數(shù)指定的元素插入到每個(gè)匹配元素內(nèi)部的末尾，成為它們的最后一個(gè)子元素。
prepend(html)、prepend(jQuery)、prepend(HTMLElement)  把參數(shù)指定的元素插入到每個(gè)匹配元素內(nèi)部的起始位置，成為它們的第一個(gè)子元素
appendTo(jQuery)、appendTo(HTMLElement)  將當(dāng)前所有匹配元素插入到指定元素內(nèi)部的末尾位置。
prependTo(html)、prependTo(jQuery)、prependTo(HTMLElement)  將當(dāng)前所有匹配元素插入到指定元素內(nèi)部的起始位置。
append(function)、prepend(function) 把參數(shù)函數(shù)的返回值插入到所有匹配元素內(nèi)部的起始位置或末尾，成為它們的子元素。

（1）append()、prepend()

append()是把參數(shù)指定的元素插入到每個(gè)匹配元素內(nèi)部的末尾，成為它們的最后一個(gè)子元素。

<div class="example">
  <div class="item1"></div>
</div>

var newElem = $('<div class="item2"></div>');
var btn = document.createElement('button');
btn.innerHTML = '發(fā)布';
newElem.append('<input type="text"/>').append(btn);

$('.example').append(newElem);

// 結(jié)果
//<div class="example">   
//  <div class="item1"></div>
//  <div class="item2">
//    <input type="text"><button>發(fā)布</button>
//  </div>
//</div>

在上面的代碼中，我展示了append方法的三種用法。第一種用法是給append傳遞一個(gè)html，第二種是用DOM API創(chuàng)建一個(gè)新元素，然后append到j(luò)Query對(duì)象（newElem）中，第三種是append一個(gè)jQuery對(duì)象。

注意：雖然多次調(diào)用append方法往jQuery對(duì)象（newElem）插入元素，但是最后返回的jQuery對(duì)象內(nèi)包含的元素始終是不變的，一直是最初的div.item2元素。

還有一點(diǎn)注意，即使這些新創(chuàng)建的元素沒有添加到頁(yè)面，我們也可以用jQuery訪問并修改它們。比如：設(shè)置樣式：

newElem.css('background','red');

prepend()方法和append()方法的用法是一樣的，只不過它是把參數(shù)指定的元素插入到每個(gè)匹配元素內(nèi)部的起始位置，成為它們的第一個(gè)子元素。

<div class="example">
  <div class="item"></div>
</div>

$('.example').prepend('<input type="text" />');

// 結(jié)果
//<div class="example">
//  <input type="text" />
//  <div class="item"></div>
//</div>

append()和prepend()方法還可以支持多個(gè)參數(shù)，可同時(shí)插入多個(gè)元素。

append(content1,content2...contentN)
prepend(content1,content2...contentN)

content參數(shù)可以是String/HTMLElement/jQuery，第一個(gè)參數(shù)content1還可以是函數(shù)（1.4新增）

再看一個(gè)例子：

<div class="example">   
  <div class="item1"></div>   
</div>

var newElem = $('<div class="item2"></div>');   
$('.example').append(newElem).prepend(newElem);

// 結(jié)果
//<div class="example">
//  <div class="item2"></div>   
//  <div class="item1"></div>   
//</div>

上面的代碼中，我們本意是將jQuery對(duì)象（newElem）先append到div.example里，然后再prepend到div.example里，那么div.example里就應(yīng)該頭尾各有一個(gè)div.item2，可是結(jié)果卻意料之外。

這是為什么呢？

因?yàn)閖Query規(guī)定一個(gè)新元素只能插入到頁(yè)面一次，也可以這樣理解，如果將頁(yè)面已存在的元素再傳入append和prepend方法，那么就不是插入新元素，而是 移動(dòng)元素 了，也就是已存在的元素會(huì)從原位置消失，會(huì)移動(dòng)到新位置。

如果你想添加多個(gè)相同的新元素，你可以使用clone方法克隆元素，然后插入：

$('.example').append(newElem).prepend(newElem.clone());

上面的代碼就會(huì)往div.example內(nèi)部的頭尾各插入一個(gè)div.item2了。

（2）appendTo()、prependTo()

appendTo()和prependTo()方法會(huì)改變?cè)刂g的關(guān)系。

<div class="example">   
  <div class="item1"></div>   
</div>

var newElem = $('<div class="item2"></div>');   
$('.item1').appendTo(newElem);
$('.example').append(newElem);

// 結(jié)果
//<div class="example">
//  <div class="item2">
//    <div class="item1"></div>
//  </div>
//</div>

從上面代碼的執(zhí)行結(jié)果中，我們可以看到兩個(gè)信息：第一個(gè)就是div.item1被插入到div.item2中，第二個(gè)就是原來的div.item1消失了，是消失了嗎？其實(shí)不是，它只是移動(dòng)了，移到div.item2中了。

prependTo()方法和appendTo()用法一樣，只不過它是將當(dāng)前所有匹配元素插入到指定元素內(nèi)部的起始位置。

（3）append()和prepend()還可傳入函數(shù)

當(dāng)傳入?yún)?shù)函數(shù)時(shí)，會(huì)給函數(shù)傳遞兩個(gè)參數(shù)，第一個(gè)參數(shù)是當(dāng)前元素在匹配元素中的索引，第二個(gè)參數(shù)就是該元素當(dāng)前的內(nèi)部html內(nèi)容（innerHTML），函數(shù)中的this對(duì)象被設(shè)置為對(duì)應(yīng)當(dāng)前元素的HTMLElement對(duì)象。

$('p').append( function(index,html){
  return '<span>' + (index+1) +'</span>';
});

上面的代碼是為每個(gè)p元素內(nèi)部的末尾位置追加一個(gè)span元素。

注意：append()、prepend()、appendTo()、prependTo()這四個(gè)方法，如果傳入的是頁(yè)面已存在的元素，那么就不會(huì)添加了，而是移動(dòng)元素。

3、封裝（包裹）元素

我們還可以將新元素作為現(xiàn)有元素的父元素或祖先元素插入到頁(yè)面中，也就是新元素包裹住已存在元素。

wrap(html)、wrap(jQuery)、wrap(HTMLElement[])   在每個(gè)匹配元素的周圍包裹一個(gè)指定的元素。
wrapAll(html)、wrapAll(jQuery)、wrapAll(HTMLElement[])  在所有匹配元素的外面包裹一個(gè)指定的元素
wrapInner(html)、wrapInner(jQuery)、wrapInner(HTMLElement[])  在每個(gè)匹配元素的所有子節(jié)點(diǎn)外面包裹指定的元素。
wrap(function)、wrapInner(function)  使用函數(shù)動(dòng)態(tài)地包裹元素

（1）wrap()

wrap方法是在每個(gè)匹配元素的周圍包裹一個(gè)指定的元素，這個(gè)元素可以是單層元素，也可以多層嵌套的元素，返回一個(gè)jQuery對(duì)象。

<div class="example">      
  <div class="item1"></div>    
  <div class="item3"></div>    
</div>  
<div class="item3"><span></span></div>  
<div class="item1"></div>  
<div class="item4"></div>

var newElem = $('<div class="item2"></div>');   
$('.item1').wrap(newElem);
$('.item4').wrap('<div><span></span></div>');
$('.example').wrap($('.item3'));
$('.item1').wrap(function(index){   
  return '<div class="wrap-' + index + '"></div>';  
});  

// 結(jié)果
//<div class="item3">
//  <div class="example">
//    <div class="item2"><div class="wrap-0"><div class="item1"></div></div></div>
//    <div class="item3"></div>
//  </div>
//</div>
//<div class="item3"><span></span></div>
//<div class="item2"><div class="wrap-1"><div class="item1"></div></div></div>
//<div><span><div class="item4"></div></span></div>

從上面代碼運(yùn)行結(jié)果中，我們可得到（后面的wrapAll和wrapInner方法也會(huì)遵循著下面四點(diǎn)）：

• 如果參數(shù)匹配多個(gè)元素，則只將第一個(gè)元素作為包裹元素（看item3）。
• 即使參數(shù)是當(dāng)前頁(yè)面中的元素，該元素不會(huì)從原位置上消失，因?yàn)閣rap()使用的是該元素的克隆副本來充當(dāng)包裹。（看item3）
  
• 可采用多層嵌套的元素包裹元素（看item4）
• 如果傳入的是參數(shù)函數(shù)，那么將根據(jù)匹配的所有元素遍歷執(zhí)行該函數(shù)，函數(shù)中的this將指向?qū)?yīng)的DOM元素，還會(huì)給函數(shù)傳入一個(gè)參數(shù)，即當(dāng)前元素在匹配元素中的索引（從0開始）。

（2）wrapAll()

wrapAll()用來在所有匹配元素的外面包裹一個(gè)指定的元素，返回一個(gè)jQuery對(duì)象。

<div class="example">   
  <div class="item1"></div>   
</div>   
<div class="item1"></div>

var newElem = $('<div class="box"></div>'); 
$('.item1').wrapAll(newElem);

// 結(jié)果
//<div class="example">
//  <div class="box"><div class="item1"></div><div class="item1"></div></div>
//</div>

wrapAll()除了和wrap()遵循三點(diǎn)規(guī)則外，還有一個(gè) 特殊規(guī)則 ：如果參數(shù)不是函數(shù)，那么所有匹配的元素都會(huì)被移動(dòng)到第一個(gè)匹配元素的位置，然后用指定的元素將它們包裹起來。

那如果是函數(shù)參數(shù)，結(jié)果會(huì)是怎樣呢？

$('.item1').wrapAll(function(){   
  return newElem;  
});

// 結(jié)果
//<div class="example">      
//  <div class="box"><div class="item1"></div></div>     
//</div>     
//<div class="box"><div class="item1"></div></div>

從上面代碼的執(zhí)行結(jié)果來看，當(dāng)wrapAll傳入的是參數(shù)函數(shù)時(shí)，實(shí)質(zhì)上和wrap()傳入?yún)?shù)函數(shù)一樣，并不會(huì)移動(dòng)匹配元素的位置。

（3）wrapInner()

wrapInner方法和wrap方法類似，只不過前者并不會(huì)包裹匹配元素的頂級(jí)元素，而是包裹頂級(jí)元素內(nèi)部的所有元素，也是返回一個(gè)jQuery對(duì)象。

<div class="example">   
  <div class="item1"></div>   
</div>   

var newElem = $('<div class="box"></div>'); 
$('.example').wrapInner(newElem);

// 結(jié)果
//<div class="example">
//  <div class="box"><div class="item1"></div></div>
//</div>

wrapInner也遵循wrap中的四點(diǎn)。

4、插入兄弟元素

after(content[,content])  在每個(gè)匹配元素之后插入指定的元素，作為其兄弟節(jié)點(diǎn)
before(content[,content]) 在每個(gè)匹配元素之前插入指定的元素，作為其兄弟節(jié)點(diǎn)
insertAfter(content[,content])  將當(dāng)前所有匹配元素插入到指定元素之后
insertBefore(content[,content]) 將當(dāng)前所有匹配元素插入到指定元素之前
after(function)、before(function) 使用回調(diào)函數(shù)添加兄弟元素

（1）after()、before()

after()和before()方法用來在每個(gè)匹配元素之后或之前插入指定的元素，作為其兄弟元素。

<div class="box">   
  <div class="item"></div>   
  <div class="item"></div>   
</div>

var newElem = $('<div class="after"></div>');   
$('.item').after(newElem);   
var newElem2 = $('<div class="before"/>');   
$('.item').before(newElem2);

// 結(jié)果
//<div class="box">   
//  <div class="before"></div>
//  <div class="item"></div>
//  <div class="after"></div>   
//  <div class="before"></div>
//  <div class="item"></div>
//  <div class="after"></div>   
//</div>

after()和before()也可以支持多個(gè)參數(shù)：

after(content[,content2,....])
before(content[,content2,....])

注意：只能第一個(gè)參數(shù)是函數(shù)，當(dāng)傳入的是函數(shù)時(shí)，還會(huì)為函數(shù)傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)就是當(dāng)前元素在匹配元素中的索引，第二個(gè)參數(shù)是該元素的內(nèi)部html內(nèi)容（innerHTML），返回值就是需要插入的內(nèi)容。

after(function(index,html){})

還有一點(diǎn)要注意：如果插入的內(nèi)容是當(dāng)前頁(yè)面中的元素，那這些元素將從原位置上消失，移動(dòng)到新位置，也就是說，并不是簡(jiǎn)單的插入，而是移動(dòng)。

（2）insertAfter()、insertBefore()

insertAfter()和insertBefore()是將當(dāng)前所有匹配元素插入到指定元素之后或之前。

<div class="box">   
  <div class="item"></div>   
  <div class="item"></div>   
</div>

var newElem = $('<div class="after"></div>');   
newElem.insertAfter($('.item'));

// 結(jié)果
//<div class="box">   
//  <div class="item"></div>
//  <div class="after"></div>   
//  <div class="item"></div>
//  <div class="after"></div>   
//</div>

注意：如果插入的內(nèi)容是當(dāng)前頁(yè)面中的元素，那這些元素將從原位置上消失，移動(dòng)到新位置，也就是說，并不是簡(jiǎn)單的插入，而是移動(dòng)。

<div class="box">   
  <div class="before"></div>   
  <div class="item"></div>   
</div>

$('.before').insertAfter($('.item'));

// 結(jié)果
//<div class="box">      
//  <div class="item"></div>      
//  <div class="before"></div>     
//</div> 

（3）after()和before() 與 insertAfter()和insertBefore()的區(qū)別

這四個(gè)方法都是將一個(gè)元素插入另一個(gè)元素之前或之后，當(dāng)然還是有區(qū)別的。

• 目標(biāo)元素的位置不一樣
• 返回值不一樣

A.after(B);  //將B插入到A之后，返回A的jQuery對(duì)象
A.insertAfter(B)  //將A插入到B之后，返回表示插入元素的jQuery對(duì)象

實(shí)例：

<div class="box">   
  <div class="item"></div>   
</div>

var newElem = $('<div class="after"></div>');  
var A = newElem.insertAfter($('.item')); 
var newElem = $('<div class="after"></div>');    
var B = $('.item').after(newElem);

上面最后兩行代碼都是在div.item后插入元素div.after，但它們的目標(biāo)元素位置不一樣，而且A是包含著div.after元素的jQuery對(duì)象，B是包含著div.item元素的jQuery對(duì)象。

5、替換元素

使用一些元素替換已有元素

replaceWith(html)、replaceWith(jQuery)、replaceWith(HTMLElement[])  使用指定的元素替換每個(gè)匹配的元素
replaceAll(jQuery)、replaceAll(HTMLElement[])  使用當(dāng)前匹配元素替換所有的目標(biāo)元素
replaceWidth(function)  使用回調(diào)函數(shù)替換元素

（1）replaceWith()

replaceWith()是使用指定元素替換掉每個(gè)匹配的元素，而且返回被刪除的元素的集合。

<div class="item1"></div>
<div class="box"><div class="item2"></div></div>

$('.item2').replaceWith('<span class="item3"></span>');
$('.item3').replaceWith($('.item1'));

// 結(jié)果
//<div class="box"><div class="item1"></div></div>

在上面的代碼中，首先用span.item3替換div.item2，然后用div.item1替換span.item3，由于在執(zhí)行第二步時(shí)，span.item3已經(jīng)是頁(yè)面中的元素了，所以這里就不是簡(jiǎn)單的替換了，而是移動(dòng)替換。

replaceWidth()方法也可以傳入函數(shù)，該函數(shù)還會(huì)傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)是當(dāng)前元素在匹配元素中的索引，第二個(gè)參數(shù)就是該參數(shù)當(dāng)前的內(nèi)部html內(nèi)容（innerHTML），返回值就是用于替換的內(nèi)容。

（2）replaceAll()

replaceAll()方法是將當(dāng)前匹配元素替換所有的目標(biāo)元素，返回替換內(nèi)容的jQuery對(duì)象。

<div class="item1"></div>

$('<span class="item3" />').replaceAll($('.item1'));

// 結(jié)果
//<span class="item3"></span>

（3）replaceWith()和replaceAll()的區(qū)別

replaceWidth()和replaceAll()都是用來替換元素的，它們有幾個(gè)共同點(diǎn)：

• 如果傳入的頁(yè)面已存在的元素，元素會(huì)從原位置消失，移動(dòng)并替換到目標(biāo)元素
• 如果匹配多個(gè)元素，只會(huì)將第一個(gè)元素用做替換元素

A.replaceAll(B)   //將A替換B，并返回替換內(nèi)容（A）的jQuery對(duì)象
A.replaceWith(B)  //將B替換A，并返回目標(biāo)元素（A）的jQuery對(duì)象

6、刪除元素

detach()、detach(selector)   從DOM中刪除元素
empty()  清空所有匹配元素中的所有內(nèi)容
remove()、remove(selector)  刪除元素
unwrap()  刪除所有匹配元素的父元素

（1）detach()、remove()

detach()方法是從DOM中刪除元素

<span></span>
<div class="box">   
  <span></span><span></span>   
  <b class="item"></b><b></b>
</div>

$('span').detach();   
$('b').detach('.item');

// 結(jié)果
// <div class="box"><b></b></div>

在上面的代碼中，第一行是從DOM中刪除所有的span，第二行是從DOM中刪除具有類名為item的b元素。

remove()方法和detach()方法的工作方式完全相同，只不過前者會(huì)移除與元素相關(guān)聯(lián)綁定的附加數(shù)據(jù)（data()函數(shù)）和事件處理器，而后者不會(huì)。

注意：使用remove()和detach()方法，雖然目標(biāo)元素已經(jīng)從文檔中被移除，可是不會(huì)將其從jQuery中移除，我們依舊可以訪問到被移除的元素，不過remove()只會(huì)保留元素本身，而detach()還保留著附加數(shù)據(jù)和事件處理器。

<div class="box">   
  <span class="item1">remove</span>   
  <span class="item2">detach</span>   
</div>

$('.item1,.item2').on('click',function(){   
  alert(1);   
});   
var item1 = $('.item1');   
var item2 = $('.item2');   
item1.remove();   
item2.detach();   
$(".box").append(item1,item2);

在上面的代碼中，給span.item1和span.item2都注冊(cè)了點(diǎn)擊事件，然后分別使用remove(）和detach()方法刪除了span.item1和span.item2，最后又將這兩個(gè)元素添加回div.box中，當(dāng)你再去點(diǎn)擊span.item1和span.item2時(shí)，會(huì)發(fā)現(xiàn)前者沒有反應(yīng)，而后者卻依舊響應(yīng)點(diǎn)擊事件。

如果元素上沒有附加數(shù)據(jù)和事件處理器，兩者方法沒有區(qū)別，兩者都會(huì)返回jQuery對(duì)象本身。

（2）empty()

empty()用于清空匹配元素內(nèi)的所有內(nèi)容，返回jQuery對(duì)象本身。

<div class="box">   
  <span></span>234<!--注釋-->   
</div>

$('.box').empty();

// 結(jié)果
//<div class="box"></div>

作用和html('')一樣。

（4）unwrap()

unwrap()方法用于移除每個(gè)匹配元素的父元素，但會(huì)保留其所有的后代元素，正好和wrap()方法相反，它返回jQuery對(duì)象本身。

<div class="box"></div>

$('.box').wrap('<div class="parent"></div>').unwrap();

// 結(jié)果
//<div class="box"></div>

注意：unwrap()不會(huì)移除body元素，也就是說，如果當(dāng)前匹配元素的父元素是body，則不會(huì)移除。