zoukankan      html  css  js  c++  java
  • 了解jQuery的detach()和remove()

    jQuery中提供了两种移出一个DOM元素的方法detach()和remove(),虽然是一样的功能,但是给出两种方法,必然有它的不同之处。

    empty() 单独说一下 ,它删除当前元素的所有子元素,包括文本节点,并不会删除当前元素的事件和样式,删除之后不可恢复。

    官方解释:

        detach() 方法移除被选元素,包括所有文本和子节点。detach() 会保留所有绑定的事件、附加的数据

        remove() 方法是移出元素,包括绑定的事件,附加数据

    代码分析

      当使用的是 detach方法时,重新添加元素之后点击事件依然有效

      当使用的是remove方法时,重新添加元素之后点击事件不生效

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <script src="js/jquery-1.7.2.min.js"></script>
     7     <script>
     8         $(document).ready(function(){
     9             var $div1 = $('.div1')
    10             // 绑定事件
    11             $('.div1').click(function(){
    12                 alert(1)
    13             })
    14             // 删除元素
    15             $('#detach').click(function(){
    16                 $div1.detach();
    17             })
    18             //重新添加
    19             $('#back').click(function(){
    20                 $('#box').append($div1)
    21             })
    22         })
    23     </script>
    24 </head>
    25 <body>
    26     <div id="box">
    27         <div class="div1">aaaaaa</div>
    28         <div class="div2"">bbbbbb</div>
    29     </div>
    30     <input type="button" value="detach" id="detach">
    31     <input type="button" value="back" id="back">
    32 </body>
    33 </html>
  • 相关阅读:
    用Lua编写ACM算法竞赛开灯问题
    糟糕的中文版龙书
    font and face, 浅探Emacs字体选择机制及部分记录
    栈与卡特兰数
    关于2018年东南大学Robomaster算法组工作的总结
    C++中的默认参数规则
    MySQL第三章——嵌套查询
    MySQL第三章——空值的处理
    MySQL第三章——数据更新
    MySQL第三章——连接查询
  • 原文地址:https://www.cnblogs.com/NTWang/p/6404052.html
Copyright © 2011-2022 走看看