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、相关知识
- 删除节点
- remove():删除匹配的元素集合中所有的子节点。
绑定的事件，附加的数据等都会被移除。
- detach():从DOM中删除所有匹配的元素。
与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
- empty():删除匹配的元素集合中所有的子节点。
remove()和detach()这2个方法删除节点时，会将自身节点以及后代节点一并删除。但是empty()方法仅仅删除后代节点，而会保留自身节点。
- remove():删除匹配的元素集合中所有的子节点。
- 复制节点
语法：$(selector).clone(includeEvents)includeEvents：可选。布尔值。规定是否复制元素的所有事件处理。
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style> 10 li{ 11 background: #ccc;margin-top: 25px;width: 150px; 12 } 13 .orange{background: orange} 14 .red{background: red} 15 .green{background: green} 16 .ccc{background: #ccc} 17 </style> 18 </style> 19 </head> 20 <body> 21 <ol> 22 <li class="orange">列表项1</li> 23 <li class="red">列表项2</li> 24 <li class="green">列表项3</li> 25 </ol> 26 <input id="btn1" type="button" value="remove"> 27 <input id="btn2" type="button" value="detach"> 28 <input id="btn3" type="button" value="empty"> 29 <input id="btn4" type="button" value="clone"> 30 <script type="text/javascript"> 31 $(function(){ 32 $('li').click(function(){ 33 alert($(this).text()) 34 }) 35 $('#btn1').click(function(){ 36 var $li=$('li:first').remove() 37 $('ol').append($li) 38 }) 39 $('#btn2').click(function(){ 40 var $li=$('li:first').detach() 41 $('ol').append($li) 42 }) 43 $('#btn3').click(function(){ 44 var $li=$('li:first').empty() 45 }) 46 $('#btn4').click(function(){ 47 var $li=$('li:first').clone(true) 48 $('ol').append($li) 49 }) 50 }) 51 </script> 52 </body> 53 </html>