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 ...
随机推荐
- golang panic and recover
panic 是一个内置函数,当一个函数 F 调用 panic,F 的执行就会停止,F 中 deferred 函数调用会被执行,然后 F 返回控制到它的调用者.这个过程会沿着调用栈执行下去,直到当前 g ...
- COGS 163 [USACO Mat07] 牛语
COGS 163 [USACO Mat07] 牛语 输入文件:latin.in 输出文件:latin.out 简单对比 时间限制:1 s 内存限制:128 MB 奶牛们听说猪发明了一种秘密 ...
- Codeforces Round #277.5 解题报告
又熬夜刷了cf,今天比正常多一题.比赛还没完但我知道F过不了了,一个半小时贡献给F还是没过--应该也没人Hack.写写解题报告吧= =. 解题报告例如以下: A题:选择排序直接搞,由于不要求最优交换次 ...
- 7. 基于Express实现接口
安装Mongoose 创建model //server/models/goods.js var mongoose = require('mongoose');//优先到node_modeles里加载 ...
- [D3] Adding Arrows to Links
svg.append('defs').selectAll('marker') .data(['end']).enter() .append('marker') .attr('id', String) ...
- hadoop 2.4.1 集群安装二
1:创建文件夹 [jifeng@feng01 hadoop]$ mkdir tmp [jifeng@feng01 hadoop]$ mkdir name [jifeng@feng01 hadoop]$ ...
- 关于jsonp跨域的问题以及解决方法(跨域、同源与非同源)
什么是跨域? 想要了解跨域,首先需要了解下浏览器的同源机制: JSONP和AJAX相同,都是客户端向服务器端发送请求:给服务器端传递数据 或者 从服务器端获取数据 的方式 JSONP属于非同源策略(跨 ...
- GO语言学习（八）Go 语言常量
Go 语言常量 常量是一个简单值的标识符,在程序运行时,不会被修改的量. 常量中的数据类型只可以是布尔型.数字型(整数型.浮点型和复数)和字符串型. 常量的定义格式: const identifier ...
- 【Codeforces Round #432 (Div. 1) B】Arpa and a list of numbers
[链接]h在这里写链接 [题意] 定义bad list是一个非空的.最大公约数为1的序列.给定一个序列,有两种操作:花费x将一个元素删除.花费y将一个元素加1,问你将这个序列变为good list所需 ...
- Kinect开发笔记之三Kinect开发环境配置具体解释
0.前言: 首先说一下我的开发环境,Visual Studio是2013的,系统是win8的64位版本号,SDK是Kinect for windows SDK 1.8版本 ...