Jquery empty() remove() detach() 方法的区别
方法简介:
empty()
This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element.
该方法不仅删除它的子节点,同时也删除该节点的文本域(根据DOM规范,节点的文本域也被认为是子节点)。
remove( [selector] )
selectorA selector expression that filters the set of matched elements to be removed.
Similar to .empty()
, the .remove()
method takes elements out of the DOM. Use.remove()
when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use.detach()
instead.
和empty方法类似,remove方法也是从DOM里删除元素。当你想要删除节点本身和节点里的所有东西的时候,可以使用remove方法。除了节点本身以外,节点绑定的事件 和该节点相关的JQuery数据,也会被同时清除。当需要清除节点本身,但是不需要清除绑定的事件和数据的时候,可以使用detach方法。
detach( [selector] )
selectorA selector expression that filters the set of matched elements to be removed.
The .detach()
method is the same as .remove()
, except that .detach()
keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
detach方法和remove方法很相似,但是它会保留所有JQuery相关的数据和绑定的事件。当你删除之后,想要在后来的某个时候重新加入时,这个方法将会很有用。
三者区别:
empty,remove,detach方法的区别
方法名称 |
元素本身(包含所有属性) |
绑定事件和JQuery相关数据 |
文本域及子节点 |
empty() |
不删除 |
不删除 |
删除 |
remove() |
删除 |
删除 |
删除 |
detach() |
删除 |
不删除 |
删除 |
示例验证:
验证环境: JQuery-1.8.0.min.js, Firefox 11.0, Firebug1.9.2;
1、验证是否删除元素本书(包含所有属性)、文本域及子节点
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>p { background:yellow; margin:6px ; } p.off { background: black; }</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).toggleClass("off");
}); var p;
$("#button").click(function(){
if ( p ) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
// p = $("p").remove();
// p = $("p").empty();
}
});
});
</script>
</head> <body>
<p id="A">Hello <span>subNode</span></p>
how are
<p id="B">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> </body>
</html>
detach() 方法:
执行之前的HTML DOM结构如图:
执行删除之后的 HTML DOM结构如图:
观察可知使用detach方法,删掉了元素<p>本身即它的所有属性(id 等), 文本域及其子节点<span>subNode</span>.
其他方法,类似可以验证,这里就不赘述。
2、验证绑定的事件和JQuery相关数据
这里需要说明的是: 绑定事件,指的是JQuery动态绑定的事件,不是通过元素的属性指定的事件。(下面会举例说明)
JQuery 相关数据,不太懂指的什么,没有找到相关示例,希望有识之士不吝赐教。
下面的示例仅针对绑定事件,便于大家理解:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>
p {
background:yellow;
margin:6px ;
}
p.off {
background: black;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){ // JQuery 为P标签动态绑定click事件
$("p").click(function(){
$(this).toggleClass("off");
}); var p;
$("#button").click(function(){
if ( p ) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
// p = $("p").remove();
// p = $("p").empty();
}
});
});
</script>
</head> <body>
<p id="A">Hello <span>subNode</span></p>
how are
<p id="B">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> </body>
</html>
运行该页面,点击按钮,删除; 再次点击按钮,删除的<p>标签,重新加入到body的底部,这里我们重点验证的是,重新加入后的绑定事件click是否有效【这里的click事件为,点击P标签,class在黄色和黑色之间切换】。
1) 验证detach方法
可以看到执行detach方法,重新添加之后,JQuery动态绑定的click事件,toggleClass生效,说明之前删除的时候没有把动态绑定的事件删除。
2) 验证remove方法
修改程序中以下部分:
p = $("p").remove();
测试remove函数,同样是先删除在加入,执行完后的效果:
可以发现调用remove方法之后,再重新把删除的标签加入到body后时,发现JQuery动态绑定的事件,已经失效,点击P标签,class不能切换。说明在执行remove的时候,已经把JQuery动态绑定的事件删除了。
3) 验证empty方法:
要验证empty方法,要麻烦一点,在删除之后,重新加入之后,text为空,不能够点击测试click事件,因此我们需要新增一个按钮,为这种情况增加text,便于测试click事件。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>
p {
background:yellow;
margin:6px ;
}
p.off {
background: black;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){ // JQuery 为P标签动态绑定click事件
$("p").click(function(){
$(this).toggleClass("off");
}); var p;
$("#button").click(function(){
if ( p ) {
p.appendTo("body");
p = null;
} else {
// p = $("p").detach();
// p = $("p").remove();
p = $("p").empty();
}
}); // 为删除之后重新加入的p标签加入text
$("#buttonA").click(function(){
$("#A").text("Hello");
$("#B").text("you?");
});
});
</script>
</head> <body>
<p id="A">Hello <span>subNode</span></p>
how are
<p id="B">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> <br/>
<input type="button" id="buttonA" value="addTextA" /> <br/> </body>
</html>
执行效果如图:
可以发现empty方法,没有删除动态绑定事件。
4) 补充讲解:
为了更好的理解这里所说的绑定事件是JQuery的动态绑定事件,我们修改一下程序,使用onclick属性,把click事件作为一个属性值,来静态绑定。
修改后的程序如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>
p {
background:yellow;
margin:6px ;
}
p.off {
background: black;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
// 处理P标签click事件
function clickHandler(element){
$(element).toggleClass("off");
} $(document).ready(function(){
var p;
$("#button").click(function(){
if ( p ) {
p.appendTo("body");
p = null;
} else {
// p = $("p").detach();
p = $("p").remove();
// p = $("p").empty();
}
}); });
</script>
</head> <body>
<p id="A" onclick="clickHandler(this)">Hello <span>subNode</span></p>
how are
<p id="B" onclick="clickHandler(this)">you? <span>subNode</span></p> <input type="button" id="button" value="Attach/detach paragraphs" /> <br/> </body>
</html>
我们再次使用remove方法,删除然后在append,发现事件响应有效了。其实这里的click事件已经作为一个静态的p元素的一个属性onclick的值了。所有append之后是有效的。
Jquery empty() remove() detach() 方法的区别的更多相关文章
- jquery之remove(),detach()方法详解
一:remove()方法 remove()函数用于从文档中移除匹配的元素. 你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素. 与detach()相比,remove ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- jquery remove() detach() empty()三种方法的区别
remove方法把事件删除掉了,数据并没有删除 detach方法保存了事件和数据 empty方法保留了元素本身,移除子节点,删除内容 举例: <!DOCTYPE html><html ...
- jQuery.toggleClass() 和detach()方法详解
一.toggleClass()函数: toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名.所谓"切换",就是如果该元素上已存在指定的类名 ...
- [jQuery]html(),text(),val()方法的区别
1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但 ...
- jquery offset() 与position()方法的区别
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- jquery attr()和prop()方法的区别
$('').attr()返回的是html对象 $('').prop()返回的是DOM对象 attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素 ...
- jquery 中一些 特殊方法 的特殊使用 一览表
cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...
- jQuery中删除方法empty(),remove()和detach()的区别
empty():清空匹配的元素集合中所有的子节点,自身节点和事件都未被删除. remove():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身 ...
随机推荐
- JAVA单链表的实现-不带头结点且没有尾指针
本程序采用JAVA语言实现了线性表的链式实现.首先定义了线性表的接口ListInterface,然后LList类实现了ListInterface完成了链表的实现. 本实现中,链表是不带表头结点的,且有 ...
- C++使用目录
VS2017的安装和配置 常用指令 C++ 数据类型 常量 运算符 数组 字符串 Ansi与Unicode 指针 模态与非模态对话框 变量的引用& new和delete动态分配和 ...
- hashMap之jdk1.7和jdk1.8
参考链接: http://allenwu.itscoder.com/hashmap-analyse https://tech.meituan.com/java-hashmap.html
- python set()、len()、type()、保留小数、EOFError
1.集合set() set()存的数据为不重复的,可以用此来过滤重复的元素.可以用&求两个set的交集 c = a&b,用|求两个set的并集 c = a | b 用for i in ...
- 2017-2018-2 20155303『网络对抗技术』Exp1:PC平台逆向破解
2017-2018-2 『网络对抗技术』Exp1:PC平台逆向破解 --------CONTENTS-------- 1. 逆向及Bof基础实践说明 2. 直接修改程序机器指令,改变程序执行流程 3. ...
- Dubbo监控中心
(1).dubbo-admin(管理控制台) 1).从https://github.com/apache/incubator-dubbo-ops下载解压 2).修改dubbo-admin配置文件中zo ...
- eclipse指定项目编译级别
指定项目编译级别Eclipse→Preferences→Java→Compiler→Compiler compliance level:1.6或其他 或者,
- java项目中oracle配置说明
配置信息: #oracle database settings jdbc.url::orcl jdbc.username=cognos_data jdbc.password=cognos_data j ...
- 转载:configure生成的文件(1.5.3)《深入理解Nginx》(陶辉)
原文:https://book.2cto.com/201304/19620.html 当configure执行成功时会生成objs目录,并在该目录下产生以下目录和文件:|---ngx_auto_hea ...
- .netcore 整合 log4net
1.背景 前两天,曾经的一个同事咨询我,怎样将log4net以中间件的形式整合到core里边去.我不假思索的回答,这种问题应该有人做过吧,他说没有.于是,我去博客园搜了下,发现还真没有,全部都是传统. ...