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. 2.FastJson公司--阿里巴巴开源的速度最快的Json和对象转换工具

    转自:https://blog.csdn.net/gongpulin/article/details/52062532 这是关于FastJson的一个使用Demo,在Java环境下验证的 这是关于Fa ...

  2. 洛谷P1143 进制转换

    题目描述 请你编一程序实现两种不同进制之间的数据转换. 输入输出格式 输入格式: 输入数据共有三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进制数,若n>10 ...

  3. gdbserver 使用方法

    1.分别编译出在宿主机运行的交叉调试器arm-linux-gdb和在目标板上运行的gdbserver: 2.在目标板开启gdbserver#gdbserver  宿主机ip:任意指定端口号 ./待调试 ...

  4. Echarts Y轴min显示奇葩问题（做此记录）

    项目需求是根据不同情况显示最大值最小值   有9-35  12-50 9-50 三种情况 前面两种可以显示出来  但是9-50的话  最小值9显示不出来  8,7等就可以显示出来 后面想到强制从最小值 ...

  5. JS实践与写博客-序

    大二的时候,就开始接触JavaScript了. 当时学了1年多,主要是认真看了一本JavaScript的入门书籍,了解了JavaScript大致怎么回事.在独自做Web项目的时候,用的都是JavaSc ...

  6. Android学习之图片压缩，压缩程度高且失真度小

    曾经在做手机上传图片的时候.直接获取相机拍摄的原图上传,原图大小一般1~2M.因此上传一张都比較浪费资源,有些场景还须要图片多张上传,所以近期查看了好多前辈写的关于图片处理的资料.然后试着改了一个图片 ...

  7. LayoutAnimation-容器动画

    1.LayoutAnimation的作用主要就是加载到一个layout上,让这个layout里面的所有控件都有相同的动画效果.现在用到的是在listview中添加动画,使得它每一个item都是滑落显示 ...

  8. 学习笔记（二）：javascript之dom操作

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  9. 关于laravel框架分页报错的问题

    因为laravel框架有自己的分页封装,所以与其他框架相比laravel框架的分页的实现要方便的多 只要分别在php脚本与视图中使用 $data=DB::table('index_pic')-> ...

  10. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...