js进阶 11-12 jquery如何实现节点的删除和复制
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、代码
<!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进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 26.event跨进程通信
以id创建事件 ] = "myevent"; HANDLE event = CreateEventA(NULL, FALSE, FALSE, name); 设置事件 SetEven ...
- 深入理解Java内存模型--转载
原文地址:http://www.infoq.com/cn/articles/java-memory-model-1 并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之 ...
- linux监测tomcat服务
原文链接:https://blog.csdn.net/qq_37936542/article/details/81086928 项目上线之后,tomcat服务器有时候会莫名其妙的挂掉,利用shell写 ...
- RS-485总线和Modbus通信协议的关系
一.RS-485总线 RS-485总线技术只是规定了接口的电气标准,并没有规定RS-485接口的电缆,插件以及通信协议,只是OSI规范中物理层的一个标准,RS-485总线采用差分平衡传输方式.由于RS ...
- ubuntu14中 memcached安装与使用
第一步,先安装lib-event 下载lib-event 的包http://libevent.org/ 下载完之后,解压安装 ./configure –prefix=/usr (或 ./config ...
- Android RecyclerView嵌套RecyclerView
原理 RecyclerView嵌套RecyclerView的条目,项目中可能会经常有这样的需求,但是我们将子条目设置为RecyclerView之后,却显示不出来.自己试了很久,终于找到了原因:必须先设 ...
- 00089_字节输出流OutputStream
1.字节输出流OutputStream (1)OutputStream此抽象类,是表示输出字节流的所有类的超类.操作的数据都是字节,定义了输出字节流的基本共性功能方法: (2)输出流中定义都是写wri ...
- 洛谷——U10223 Cx大帝远征埃及
https://www.luogu.org/problem/show?pid=U10223#sub 题目背景 众所周知,Cx是一个宇宙大犇.Cx能文善武,一直在为大一统的实现而努力奋斗着.Cx将调用他 ...
- 《TCP/IP具体解释卷2：实现》笔记--协议控制块
协议层使用协议控制块(PCB)存放各UDP和TCP插口所要求的多个信息片.Internet协议维护Internet协议控制块 (internet protocol control block)和TCP ...
- [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''<h1 style="text-align: center;">php
[Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL s ...