jQuery 文档操作 - detach() 方法

实例

移除所有 p 元素：

  1. $("button").click(function(){
  2.   $("p").detach();
  3. });

定义和用法

detach() 方法移除被选元素，包括所有文本和子节点。

这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

语法

  1. $(selector).detach()

实例

移动元素

使用 detach() 方法来移动元素。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("body").append($("p").detach());
  8.   });
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. <p>This is a paragraph.</p>
  14. <button>移动 p 元素</button>
  15. </body>
  16. </html>

删除并恢复一个元素

使用 detach() 方法来删除并恢复一个元素。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   var x;
  7.   $("#btn1").click(function(){
  8.     x=$("p").detach();
  9.   });
  10.   $("#btn2").click(function(){
  11.     $("body").prepend(x);
  12.   });
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <p>这是一个段落。</p>
  18. <button id="btn1">删除 p 元素</button>
  19. <button id="btn2">恢复 p 元素</button>
  20. </body>
  21. </html>

移动元素并保留其 click 事件

使用 detach() 方法来移动元素，并保留元素的 jQuery 数据。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("body").append($("p").detach());
  8.   });
  9.  $("p").click(function(){
  10.     $(this).animate({fontSize:"+=1px"})
  11.   });
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. <p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
  17. <button>移动 p 元素</button>
  18. </body>
  19. </html>