詳解jQuery中的empty、remove和detach

更新時(shí)間：2016年04月11日 09:48:20 作者：猴子猿

empty、remove和detach三者都有把元素移除的作用，但細(xì)微的差別，造就了它們的使命不同。下面給大家介紹jQuery中的empty、remove和detach的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧

通過一張對(duì)比表來解釋幾個(gè)方法之間的不同

三者都有把元素移除的作用，但細(xì)微的差別，造就了它們的使命不同。

最權(quán)威的解釋當(dāng)然是jQuery_API咯，下面是API中關(guān)于他三兒的部分截取。

一、empty:

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element.To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves. If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

注意：加粗的部分，通過empty移除后代元素，會(huì)移除其事件的。

為什么呢?

防止內(nèi)存泄露?。?！

二、remove:

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

remove和empty方法一樣，都會(huì)移除元素的事件句柄，從而避免內(nèi)存泄露。

區(qū)別：remove包含了移除事件本身，而empty是后代元素。

三、detach:

從empty和remove的介紹中（英文斜體部分），可以或多或少得知，detach是不會(huì)移除事件句柄的。

那么我們?cè)賮砜纯丛敿?xì)的API講解：

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

咦，什么意思？

看了detach的注解，不知道大家有沒有眼前一亮，detach不能用來刪除廢棄的元素。

為什么呢？

因?yàn)樗Ａ袅耸录?qū)動(dòng)嘛，這樣不就會(huì)造成內(nèi)存泄露么。

所以要?jiǎng)h除以后不再利用的元素時(shí)，使用empty或者remove。

那要detach有何用？

用處大了。

當(dāng)我們要對(duì)一個(gè)元素進(jìn)行大規(guī)模的增刪改的時(shí)候，我們可以用detach將這個(gè)元素提取出來，然后在這個(gè)元素上進(jìn)行操作，而不是在整個(gè)dom文檔中進(jìn)行操作。

好處就是：減少對(duì)整個(gè)dom文檔的修改，從而減少頁(yè)面重繪；而且對(duì)整個(gè)dom文檔進(jìn)行操作，在ie下還可能會(huì)造成內(nèi)存泄露哦。所以穩(wěn)妥起見，還是利用detach這一神器吧。

下面是一個(gè)demo，首先對(duì)#container元素綁定click事件（事件委托），然后利用detach將其脫離文檔，然后再創(chuàng)建兩個(gè)child元素，追加到#container元素中，最后將#container重新添加到body后。

<!DOCTYPE html> 
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
div.monkey, #container {
width:120px;
height:120px;
line-height:60px;
}
div.monkey {
border:1px solid black;
} 
</style>
</head>
<body>
<div class="monkey"> </div>
<div id="container"> </div>
<script src="jquery-1.12.0.js"></script>
<script>
$(function(){
//事件代理
$('#container').on('click',function( event ){
console.log( $(event.target).text() );
});
//利用detach將container從dom文檔中剝離開
var container = $('#container').detach();
var child1 = '<div>I am Monkey</div>';
var child2 = '<div>Monkey is me</div>';
//將child1、child2插入container中
$(container).append( child1 )
.append( child2 );
//將container重新插入body中 
$('body').append( container );
}); 
</script>
</body>
</html>

以上所述是小編給大家介紹的jQuery中的empty、remove和detach的區(qū)別，希望對(duì)大家有所幫助！

您可能感興趣的文章: