js进阶 11-12  jquery如何实现节点的删除和复制

一、总结

一句话总结：remove()、detach()、empty()方法

1、jquery删除节点中的remove()方法和detach()方法的区别是什么？

detach()方法删除节点后所有绑定的事件、附加的数据等都会保留下来

因为remove()方法和detach()方法删除的数据是可以保留下来的，remove()方法删除保留的数据没有了原来的事件，detach()方法有

35             $('#btn1').click(function(){

36                 var $li=$('li:first').remove()

37                 $('ol').append($li)

38             })

2、jquery删除节点中的remove()方法、detach()方法和empty()方法的区别是什么？

remove()方法、detach()方法是删除自身加后代节点

empty()方法只删除后代节点

3、jquery复制节点中的clone()方法和clone(true)的区别是什么？

clone()方法复制标签

clone(true)方法复制对象

46             $('#btn4').click(function(){

47                 var $li=$('li:first').clone(true)

48                 $('ol').append($li)

49             })

二、jquery如何实现节点的删除和复制

1、相关知识

  1. 删除节点
    1. remove():删除匹配的元素集合中所有的子节点。

      绑定的事件，附加的数据等都会被移除。

    2. detach():从DOM中删除所有匹配的元素。

      与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

    3. empty():删除匹配的元素集合中所有的子节点。

      remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。

  2. 复制节点

    语法：$(selector).clone(includeEvents)includeEvents：可选。布尔值。规定是否复制元素的所有事件处理。

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         li{

             background: #ccc;margin-top: 25px;width: 150px;

         }

         .orange{background: orange}

         .red{background: red}

         .green{background: green}

         .ccc{background: #ccc}

     </style>

 </style>

 </head>

 <body>

     <ol>

         <li class="orange">列表项1</li>

         <li class="red">列表项2</li>

         <li class="green">列表项3</li>

     </ol>

     <input id="btn1" type="button" value="remove">

     <input id="btn2" type="button" value="detach">

     <input id="btn3" type="button" value="empty">

     <input id="btn4" type="button" value="clone">

     <script type="text/javascript">

         $(function(){

             $('li').click(function(){

                 alert($(this).text())

             })

             $('#btn1').click(function(){

                 var $li=$('li:first').remove()

                 $('ol').append($li)

             })

             $('#btn2').click(function(){

                 var $li=$('li:first').detach()

                 $('ol').append($li)

             })

             $('#btn3').click(function(){

                 var $li=$('li:first').empty()

             })

             $('#btn4').click(function(){

                 var $li=$('li:first').clone(true)

                 $('ol').append($li)

             })

         })

     </script>

 </body>

 </html>
 

js进阶 11-12 jquery如何实现节点的删除和复制的更多相关文章

  1. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  8. js进阶 10-11/12 表单伪类选择器的作用

    js进阶 10-11  表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...

  9. jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. WSDL生成dll

    --生成代理类wsdl /l:cs /n:OAWebService /out:D:OAWebService.cs D:\OAWebService.WSDL--生成dllcsc /out:D:OAWeb ...

  2. php学习笔记6

    PHP 字符串变量 PHP 中的字符串变量 字符串变量用于包含有字符的值. 在创建字符串之后,我们就可以对它进行操作了.您可以直接在函数中使用字符串,或者把它存储在变量中. 在下面的实例中,我们创建一 ...

  3. （转）修改 ubuntu 默认启动项

    转自: http://jingyan.baidu.com/article/afd8f4de58959134e386e969.html 当我们安装windows和ubuntu双系统以后,默认启动变成ub ...

  4. 【2017"百度之星"程序设计大赛 - 初赛（B）】度度熊的交易计划

    [链接]点击打开链接 [题意] 在这里写题意 [题解] 先设一个超级源点,向每个片区都建一条边,容量为b,费用为-a; 然后从每个片区再连一条边,指向一个超级汇点. 容量为d,费用为c; 然后从起点到 ...

  5. Dell shareplex 与HVR数据复制软件

    今天大体了解了一下Dell shareplex 数据复制软件,网址为:http://software.dell.com/products/shareplex/ 从该网址能够看到. shareplex作 ...

  6. Warning: Division by zero in 错误处理

    Warning: Division by zero in 错误处理 今天调试一段代码,结果提示 Warning: Division by zero in ,没有扫到答案,最后发现 $dir/$name ...

  7. DriverModule_01

    最小驱动模块: 最简单的Makefile 无配置文件 最小驱动的四部分 头文件 声明模块信息 模块驱动的入口.出口 功能区 关于这个头文件的分析: linux头文件的位置,例如#include< ...

  8. VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数

    methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...

  9. Hadoop ecosystem 生态圈

    Cascading: hadoop上面的workflow Sqoop(发音:skup)是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.postgresql...)间进行 ...

  10. android问题及其解决-优化listView卡顿和怎样禁用ListView的fling

    问题解决-优化listView卡顿和怎样禁用ListView的fling 前戏非常长,转载请保留出处:http://blog.csdn.net/u012123160/article/details/4 ...