DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery中刪除節點方法remove()、detach()、empty()分析
jQuery中刪除節點方法remove()、detach()、empty()分析
編輯:JQuery特效代碼     

  jQuery中提供了三種刪除節點的方法:remove()、detach()、empty(),本文詳細分析這三種方法。

  最容易區分的是empty(),該方法嚴格上屬於“清空節點”,即刪除其子節點,自身並不會刪除。舉個栗子:

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>remove和detach對比</title>
     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
     <script type="text/javascript">
     $(function(){
         $(".apple").click(function(){alert('我是蘋果');});
         var $apple = $(".apple");
 
         //empty()
          $(".delete").click(function(){
              $apple.empty();
          });
          $(".add").click(function(){
              $apple.text("蘋果");
          });
 
 
     });
 
     </script>
 </head>
 <body>
     <div>
         <ul>
             <li>香蕉</li>
             <li>草莓</li>
             <li>橘子</li>
             <li style="color:red;" class="apple">蘋果</li>
         </ul>
         <button class="delete">點擊刪除</button>
         <button class="add">點擊添加</button>
     </div>
 </body>
 </html>

  刪除前:

 

  刪除後:

 

  empty()方法很容易理解。下面重點分析一下remove()和detach()方法:

  remove():刪除所有後代節點及自身,與該節點綁定的事件刪除後也將解除綁定。同樣使用上面的栗子,js代碼如下:

         //remove--節點刪除後,綁定的事件也會解除。
         $(".delete").click(function(){
             $apple.remove();
         });
         $(".add").click(function(){
             $apple.appendTo("ul");
         });

  刪除前,點擊“蘋果”,會跳出提示信息:

  刪除後:

  

  點擊添加後,能夠得到刪除前一樣的效果,但是點擊“蘋果”時不會出現提示框,說明原來綁定的click()事件解除了。

  

  detach():刪除所有後代節點及自身,但與該節點綁定的事件刪除後依然保留。js代碼:

         //detach--節點刪除後,綁定的事件依然存在,可繼續使用。
         $(".delete").click(function(){
             $apple.detach();
         });
 
         $(".add").click(function(){
             $apple.appendTo("ul");
         });

  刪除後再次添加節點,點擊“蘋果”會保留刪除前的綁定信息,即彈出提示信息。

 

  全文完,歡迎各位朋友批評指正!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved