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>
  • 相关阅读:
    话说打工
    Linux系统信息查看命令大全
    基于LNMP的Zabbbix之Zabbix Server源码详细安装,但不给图
    基于LNMP的Zabbbix之PHP源码安装
    php --with-mysql=mysqlnd
    LeetCode:Binary Tree Level Order Traversal
    tslib-触摸屏校准
    A
    【雷电】源代码分析(二)-- 进入游戏攻击
    能够替代浮动的inline-block
  • 原文地址:https://www.cnblogs.com/NTWang/p/6404052.html
Copyright © 2011-2022 走看看