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

最新推荐文章于 2024-05-23 23:33:04 发布

weixin_34100227

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量55

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Renyi-Fan/p/9223853.html

版权

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、代码

 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>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9223853.html

weixin_34100227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶 11-12 jquery如何实现节点的删除和复制

js进阶 11-12 jquery如何实现节点的删除和复制一、总结一句话总结：remove()、detach()、empty()方法1、jquery删除节点中的remove()方法和detach()方法的区别是什么？detach()方法删除节点后所有绑定的事件、附加的数据等都会保留下来因为remove()方法和detach()方法删除的数据是可以保留下来的，remove...
复制链接

扫一扫