免費AI編程助手
JQuery學(xué)習(xí)筆記整理：操作DOM
在使用jQuery時，改變HTML文檔本身的結(jié)構(gòu)（也就是操作DOM）是在所難免的，那么JQuery提供了哪些方法供我們操作DOM呢？
- 創(chuàng)建新元素
- 添加子元素或后代元素（append()、prepend()、appendTo()、prependTo()）
- 封裝（包裹）元素（wrap()、wrapAll()、wrapInner()）
- 插入兄弟元素（after()、before()、insertAfter()、insertBefore()）
- 替換元素（replaceWith()、replaceAll()）
- 刪除元素（detach()、remove()、empty()、unwrap()）
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ù)指定的元素插入到每個匹配元素內(nèi)部的末尾，成為它們的最后一個子元素。
prepend(html)、prepend(jQuery)、prepend(HTMLElement) 把參數(shù)指定的元素插入到每個匹配元素內(nèi)部的起始位置，成為它們的第一個子元素
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ù)指定的元素插入到每個匹配元素內(nèi)部的末尾，成為它們的最后一個子元素。
<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傳遞一個html，第二種是用DOM API創(chuàng)建一個新元素，然后append到j(luò)Query對象（newElem）中，第三種是append一個jQuery對象。
注意：雖然多次調(diào)用append方法往jQuery對象（newElem）插入元素，但是最后返回的jQuery對象內(nèi)包含的元素始終是不變的，一直是最初的div.item2元素。
還有一點注意，即使這些新創(chuàng)建的元素沒有添加到頁面，我們也可以用jQuery訪問并修改它們。比如：設(shè)置樣式：
newElem.css('background','red');
prepend()方法和append()方法的用法是一樣的，只不過它是把參數(shù)指定的元素插入到每個匹配元素內(nèi)部的起始位置，成為它們的第一個子元素。
<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()方法還可以支持多個參數(shù)，可同時插入多個元素。
append(content1,content2...contentN)
prepend(content1,content2...contentN)
content參數(shù)可以是String/HTMLElement/jQuery，第一個參數(shù)content1還可以是函數(shù)（1.4新增）
再看一個例子：
<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對象（newElem）先append到div.example里，然后再prepend到div.example里，那么div.example里就應(yīng)該頭尾各有一個div.item2，可是結(jié)果卻意料之外。
這是為什么呢？
因為jQuery規(guī)定一個新元素只能插入到頁面一次，也可以這樣理解，如果將頁面已存在的元素再傳入append和prepend方法，那么就不是插入新元素，而是 移動元素 了，也就是已存在的元素會從原位置消失，會移動到新位置。
如果你想添加多個相同的新元素，你可以使用clone方法克隆元素，然后插入：
$('.example').append(newElem).prepend(newElem.clone());
上面的代碼就會往div.example內(nèi)部的頭尾各插入一個div.item2了。
（2）appendTo()、prependTo()
appendTo()和prependTo()方法會改變元素之間的關(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é)果中，我們可以看到兩個信息：第一個就是div.item1被插入到div.item2中，第二個就是原來的div.item1消失了，是消失了嗎？其實不是，它只是移動了，移到div.item2中了。
prependTo()方法和appendTo()用法一樣，只不過它是將當(dāng)前所有匹配元素插入到指定元素內(nèi)部的起始位置。
（3）append()和prepend()還可傳入函數(shù)
當(dāng)傳入?yún)?shù)函數(shù)時，會給函數(shù)傳遞兩個參數(shù)，第一個參數(shù)是當(dāng)前元素在匹配元素中的索引，第二個參數(shù)就是該元素當(dāng)前的內(nèi)部html內(nèi)容（innerHTML），函數(shù)中的this對象被設(shè)置為對應(yīng)當(dāng)前元素的HTMLElement對象。
$('p').append( function(index,html){
return '<span>' + (index+1) +'</span>';
});
上面的代碼是為每個p元素內(nèi)部的末尾位置追加一個span元素。
注意：append()、prepend()、appendTo()、prependTo()這四個方法，如果傳入的是頁面已存在的元素，那么就不會添加了，而是移動元素。
3、封裝（包裹）元素
我們還可以將新元素作為現(xiàn)有元素的父元素或祖先元素插入到頁面中，也就是新元素包裹住已存在元素。
wrap(html)、wrap(jQuery)、wrap(HTMLElement[]) 在每個匹配元素的周圍包裹一個指定的元素。
wrapAll(html)、wrapAll(jQuery)、wrapAll(HTMLElement[]) 在所有匹配元素的外面包裹一個指定的元素
wrapInner(html)、wrapInner(jQuery)、wrapInner(HTMLElement[]) 在每個匹配元素的所有子節(jié)點外面包裹指定的元素。
wrap(function)、wrapInner(function) 使用函數(shù)動態(tài)地包裹元素
（1）wrap()
wrap方法是在每個匹配元素的周圍包裹一個指定的元素，這個元素可以是單層元素，也可以多層嵌套的元素，返回一個jQuery對象。
<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>
從上面代碼運行結(jié)果中，我們可得到（后面的wrapAll和wrapInner方法也會遵循著下面四點）：
- 如果參數(shù)匹配多個元素，則只將第一個元素作為包裹元素（看item3）。
- 即使參數(shù)是當(dāng)前頁面中的元素，該元素不會從原位置上消失，因為wrap()使用的是該元素的克隆副本來充當(dāng)包裹。（看item3）
- 可采用多層嵌套的元素包裹元素（看item4）
- 如果傳入的是參數(shù)函數(shù)，那么將根據(jù)匹配的所有元素遍歷執(zhí)行該函數(shù)，函數(shù)中的this將指向?qū)?yīng)的DOM元素，還會給函數(shù)傳入一個參數(shù)，即當(dāng)前元素在匹配元素中的索引（從0開始）。
（2）wrapAll()
wrapAll()用來在所有匹配元素的外面包裹一個指定的元素，返回一個jQuery對象。
<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()遵循三點規(guī)則外，還有一個 特殊規(guī)則 ：如果參數(shù)不是函數(shù)，那么所有匹配的元素都會被移動到第一個匹配元素的位置，然后用指定的元素將它們包裹起來。
那如果是函數(shù)參數(shù)，結(jié)果會是怎樣呢？
$('.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ù)時，實質(zhì)上和wrap()傳入?yún)?shù)函數(shù)一樣，并不會移動匹配元素的位置。
（3）wrapInner()
wrapInner方法和wrap方法類似，只不過前者并不會包裹匹配元素的頂級元素，而是包裹頂級元素內(nèi)部的所有元素，也是返回一個jQuery對象。
<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中的四點。
4、插入兄弟元素
after(content[,content]) 在每個匹配元素之后插入指定的元素，作為其兄弟節(jié)點
before(content[,content]) 在每個匹配元素之前插入指定的元素，作為其兄弟節(jié)點
insertAfter(content[,content]) 將當(dāng)前所有匹配元素插入到指定元素之后
insertBefore(content[,content]) 將當(dāng)前所有匹配元素插入到指定元素之前
after(function)、before(function) 使用回調(diào)函數(shù)添加兄弟元素
（1）after()、before()
after()和before()方法用來在每個匹配元素之后或之前插入指定的元素，作為其兄弟元素。
<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()也可以支持多個參數(shù)：
after(content[,content2,....])
before(content[,content2,....])
注意：只能第一個參數(shù)是函數(shù)，當(dāng)傳入的是函數(shù)時，還會為函數(shù)傳入兩個參數(shù)，第一個參數(shù)就是當(dāng)前元素在匹配元素中的索引，第二個參數(shù)是該元素的內(nèi)部html內(nèi)容（innerHTML），返回值就是需要插入的內(nèi)容。
after(function(index,html){})
還有一點要注意：如果插入的內(nèi)容是當(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)前頁面中的元素，那這些元素將從原位置上消失，移動到新位置，也就是說，并不是簡單的插入，而是移動。
<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ū)別
這四個方法都是將一個元素插入另一個元素之前或之后，當(dāng)然還是有區(qū)別的。
- 目標(biāo)元素的位置不一樣
- 返回值不一樣
A.after(B); //將B插入到A之后，返回A的jQuery對象
A.insertAfter(B) //將A插入到B之后，返回表示插入元素的jQuery對象
實例：
<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對象，B是包含著div.item元素的jQuery對象。
5、替換元素
使用一些元素替換已有元素
replaceWith(html)、replaceWith(jQuery)、replaceWith(HTMLElement[]) 使用指定的元素替換每個匹配的元素
replaceAll(jQuery)、replaceAll(HTMLElement[]) 使用當(dāng)前匹配元素替換所有的目標(biāo)元素
replaceWidth(function) 使用回調(diào)函數(shù)替換元素
（1）replaceWith()
replaceWith()是使用指定元素替換掉每個匹配的元素，而且返回被刪除的元素的集合。
<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í)行第二步時，span.item3已經(jīng)是頁面中的元素了，所以這里就不是簡單的替換了，而是移動替換。
replaceWidth()方法也可以傳入函數(shù)，該函數(shù)還會傳入兩個參數(shù)，第一個參數(shù)是當(dāng)前元素在匹配元素中的索引，第二個參數(shù)就是該參數(shù)當(dāng)前的內(nèi)部html內(nèi)容（innerHTML），返回值就是用于替換的內(nèi)容。
（2）replaceAll()
replaceAll()方法是將當(dāng)前匹配元素替換所有的目標(biāo)元素，返回替換內(nèi)容的jQuery對象。
<div class="item1"></div>
$('<span class="item3" />').replaceAll($('.item1'));
// 結(jié)果
//<span class="item3"></span>
（3）replaceWith()和replaceAll()的區(qū)別
replaceWidth()和replaceAll()都是用來替換元素的，它們有幾個共同點：
- 如果傳入的頁面已存在的元素，元素會從原位置消失，移動并替換到目標(biāo)元素
- 如果匹配多個元素，只會將第一個元素用做替換元素
- 目標(biāo)元素位置不一樣
- 返回值不一樣
A.replaceAll(B) //將A替換B，并返回替換內(nèi)容（A）的jQuery對象
A.replaceWith(B) //將B替換A，并返回目標(biāo)元素（A）的jQuery對象
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()方法的工作方式完全相同，只不過前者會移除與元素相關(guān)聯(lián)綁定的附加數(shù)據(jù)（data()函數(shù)）和事件處理器，而后者不會。
注意：使用remove()和detach()方法，雖然目標(biāo)元素已經(jīng)從文檔中被移除，可是不會將其從jQuery中移除，我們依舊可以訪問到被移除的元素，不過remove()只會保留元素本身，而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都注冊了點擊事件，然后分別使用remove(）和detach()方法刪除了span.item1和span.item2，最后又將這兩個元素添加回div.box中，當(dāng)你再去點擊span.item1和span.item2時，會發(fā)現(xiàn)前者沒有反應(yīng)，而后者卻依舊響應(yīng)點擊事件。
如果元素上沒有附加數(shù)據(jù)和事件處理器，兩者方法沒有區(qū)別，兩者都會返回jQuery對象本身。
（2）empty()
empty()用于清空匹配元素內(nèi)的所有內(nèi)容，返回jQuery對象本身。
<div class="box">
<span></span>234<!--注釋-->
</div>
$('.box').empty();
// 結(jié)果
//<div class="box"></div>
作用和html('')一樣。
（4）unwrap()
unwrap()方法用于移除每個匹配元素的父元素，但會保留其所有的后代元素，正好和wrap()方法相反，它返回jQuery對象本身。
<div class="box"></div>
$('.box').wrap('<div class="parent"></div>').unwrap();
// 結(jié)果
//<div class="box"></div>
注意：unwrap()不會移除body元素，也就是說，如果當(dāng)前匹配元素的父元素是body，則不會移除。
更多建議：