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 ...
随机推荐
- MYSQL存储过程中 使用变量 做表名--转
原文地址:http://blog.csdn.net/business122/article/details/7528859 今天写一个对数据库做快照的存储过程,用到了动态表名,突然发现MYSQL不支持 ...
- 命令行SVN的使用
1.检出svn co http://路径(目录或文件的全路径) [本地目录全路径] --username 用户名 --password 密码svn co svn://路径(目录或文件的全路径 ...
- golang filepath.Walk遍历指定目录下的所有文件
package main import ( "fmt" "os" "path/filepath" ) func walkFunc(path ...
- Js 栈和堆的实现
一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的集合,即后被插 ...
- 【LightOJ - 1205】Palindromic Numbers
[链接]https://cn.vjudge.net/problem/LightOJ-1205 [题意] 求出L..R范围内的回文个数 [题解] 数位DP; 先求出1..x里面的回文串个数.则做一下前缀 ...
- WPF 入门《常用控件》
1.GroupBox 注意: GroupBox仍然需要布局容器来放置元素.如: StackPanel面板 <GroupBox Header="select number?"& ...
- Java中的线程模型及实现方式
概念: 线程是一个程序内部的顺序控制流 线程和进程的比较: 每个进程都有独立的代码和数据空间(进程上下文),进程切换的开销大. 线程:轻量的进程,同一类线程共享代码和数据空间,每个线程有独立的运行栈和 ...
- ubuntu下useradd与adduser差别，新建用户不再home文件夹下
useradd username不会在/home下建立一个目录username adduser username会在/home下建立一个目录username useradd -m username跟a ...
- Windows环境下ARM集成开发环境的搭建与使用
Windows环境下能够使用Eclipse IDE for C/C++ Developers来搭建ARM开发环境 本文地址:http://blog.csdn.net/u011833609/articl ...
- 深入理解HTTP协议及原理分析之缓存（3种缓存机制）
3.2 缓存的实现原理 3.2.1什么是Web缓存 WEB缓存(cache)位于Web服务器和客户端之间. 缓存会根据请求保存输出内容的副本,例如html页面,图片,文件,当下一个请求来到的时候:如果 ...