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. remove():删除匹配的元素集合中所有的子节点。
  
  绑定的事件，附加的数据等都会被移除。
2. detach():从DOM中删除所有匹配的元素。
  与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
3. empty():删除匹配的元素集合中所有的子节点。
  remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。
复制节点
语法：$(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如何实现节点的删除和复制

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

一、总结

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

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

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

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

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

1、相关知识

2、代码

最新文章

热门文章