探索jquery方法中empty,remove與detach的區別

標籤：des   style   blog   http   io   ar   color   使用   sp   

   最近一直疑惑此三種方法的具體區別在於何處，隨即想弄明白其具體的區別，看了一些說明，也依照官方文檔，終於把這三個方法弄明白了，果然功夫不負有心人，繼續努力。

  上本文，先簡單介紹下這三種方法

 

　.empty()  描述: 從DOM中移除集合中匹配元素的所有子節點。

　這個方法不接受任何參數。

　這個方法不僅移除子項目（和其他後代元素），同樣移除元素裡的文本。因為，根據說明，元素裡任何文本字串都被看做是該元素的子節點。請看下面的HTML：

<div class="container">  <div class="hello">Hello</div>  <div class="goodbye">Goodbye</div></div>

我們可以移除裡面的任何元素

1 $(‘.hello‘).empty();

結果文本 Hello文本被刪除：

1 <div class="container">2   <div class="hello"></div>3   <div class="goodbye">Goodbye</div>4 </div>

如果 <div class="hello">裡麵包含任何數量的嵌套元素，他們也會被移走。

為了避免記憶體流失，jQuery先移除子項目的資料和事件處理函數，然後移除子項目。

如果你想刪除元素，不破壞他們的資料或事件處理常式（這些綁定的資訊還可以在之後被重新添加回來），請使用.detach()代替 。

 

 

.detach()   描述: 從DOM中去掉所有匹配的元素。

.detach() 方法和.remove()一樣, 除了 .detach()儲存所有jQuery資料和被移走的元素相關聯。當需要移走一個元素，不久又將該元素插入DOM時，這種方法很有用。

例子:

 

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style> 5   <script src="http://code.jquery.com/jquery-latest.js"></script> 6 </head> 7 <body> 8   <p>Hello</p> 9   how are10   <p>you?</p>11   <button>Attach/detach paragraphs</button>12 <script>13     $("p").click(function(){14       $(this).toggleClass("off");15     });16     var p;17     $("button").click(function(){18       if ( p ) {19         p.appendTo("body");20         p = null;21       } else {22         p = $("p").detach();23       }24     });</script>25  26 </body>27 </html>

 

 

.remove   描述: 將匹配元素集合從DOM中刪除。（同時移除元素上的事件及 jQuery 資料。）

 

和 .empty()相似。.remove() 將元素移出DOM。 當我們想將元素自身移除時我們用 .remove()，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery資料。要刪除的元素不刪除資料和事件的情況下，使用.detach()來代替。

1 <div class="container">2   <div class="hello">Hello</div>3   <div class="goodbye">Goodbye</div>4 </div>

可以移除任何想要移除的元素:

$(‘.hello‘).remove();

結果如下：

1 <div class="container">2   <div class="goodbye">Goodbye</div>3 </div>

 

如果<div class="hello">元素裡面有子項目，他們同樣會被移除。還有元素上的事件及 jQuery 資料也會被刪除。

我們也可以添加一個可選的選取器參數來過濾匹配的元素。例如，前面的代碼可以重寫為：

1 $(‘div‘).remove(‘.hello‘);

結果將一樣：

1 <div class="container">2   <div class="goodbye">Goodbye</div>3 </div>

 

例子:

 

Example: 將所有段落從DOM刪除：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <style>p { background:yellow; margin:6px 0; }</style> 5   <script src="http://code.jquery.com/jquery-latest.js"></script> 6 </head> 7 <body> 8   <p>Hello</p> 9   how are10   <p>you?</p>11   <button>Call remove() on paragraphs</button>12 <script>13 $("button").click(function () {14   $("p").remove();15 });16 </script>17  18 </body>19 </html>

         

 

上面是一些基本概念，讓大家久等了，經過本人的測試得出如下結論。empty()方法無參數，而且清空後的子集及文本無法進行還原。而detach()和remove()方法可以將其儲存在一個變數中

如聲明變數p 寫成如下形式

1 var p=$(‘p‘).remove();

當需要從新添加時可以直接添加如下

1  p.appendTo("body");

這是detach()和remove()方法都有的功能。remove（）較detach()不同的是remove（）可以刪除指定的類如remove（‘a’）,而detach()不可這樣操作，還要注意一點，當用remove()方法移除元素後，再進行添加，再子集的事件的不會存在，而detach()子集的事件還可執行。

   如果不明白的或者不清楚的可以隨時評論，大家一同學習與進步。

探索jquery方法中empty,remove與detach的區別