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、验证是否删除元素本书（包含所有属性）、文本域及子节点

代码如下：

[html] view plaincopyprint?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Test Jquery remove detach empty</title>
  6. <style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
  7. <script src="js/jquery-1.8.0.min.js"></script>
  8. <script>
  9. $(document).ready(function(){
  10. $("p").click(function(){
  11. $(this).toggleClass("off");
  12. });
  13. var p;
  14. $("#button").click(function(){
  15. if ( p ) {
  16. p.appendTo("body");
  17. p = null;
  18. } else {
  19. p = $("p").detach();
  20. // p = $("p").remove();
  21. // p = $("p").empty();
  22. }
  23. });
  24. });
  25. </script>
  26. </head>
  27. <body>
  28. <p id="A">Hello <span>subNode</span></p>
  29. how are
  30. <p id="B">you? <span>subNode</span></p>
  31. <input type="button" id="button" value="Attach/detach paragraphs" />
  32. </body>
  33. </html>
 

detach() 方法：

执行之前的HTML DOM结构如图：

执行删除之后的 HTML DOM结构如图：

观察可知使用detach方法，删掉了元素<p>本身即它的所有属性（id 等）， 文本域及其子节点<span>subNode</span>.

其他方法，类似可以验证，这里就不赘述。

2、验证绑定的事件和JQuery相关数据

这里需要说明的是： 绑定事件，指的是JQuery动态绑定的事件，不是通过元素的属性指定的事件。（下面会举例说明）

JQuery 相关数据，不太懂指的什么，没有找到相关示例，希望有识之士不吝赐教。

下面的示例仅针对绑定事件，便于大家理解：

[html] view plaincopyprint?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Test Jquery remove detach empty</title>
  6. <style>
  7. p {
  8. background:yellow;
  9. margin:6px 0;
  10. }
  11. p.off {
  12. background: black;
  13. }
  14. </style>
  15. <script src="js/jquery-1.8.0.min.js"></script>
  16. <script>
  17. $(document).ready(function(){
  18. // JQuery 为P标签动态绑定click事件
  19. $("p").click(function(){
  20. $(this).toggleClass("off");
  21. });
  22. var p;
  23. $("#button").click(function(){
  24. if ( p ) {
  25. p.appendTo("body");
  26. p = null;
  27. } else {
  28. p = $("p").detach();
  29. // p = $("p").remove();
  30. // p = $("p").empty();
  31. }
  32. });
  33. });
  34. </script>
  35. </head>
  36. <body>
  37. <p id="A">Hello <span>subNode</span></p>
  38. how are
  39. <p id="B">you? <span>subNode</span></p>
  40. <input type="button" id="button" value="Attach/detach paragraphs" />
  41. </body>
  42. </html>

运行该页面，点击按钮，删除；  再次点击按钮，删除的<p>标签，重新加入到body的底部，这里我们重点验证的是，重新加入后的绑定事件click是否有效【这里的click事件为，点击P标签，class在黄色和黑色之间切换】。

1)  验证detach方法

可以看到执行detach方法，重新添加之后，JQuery动态绑定的click事件，toggleClass生效，说明之前删除的时候没有把动态绑定的事件删除。

2)  验证remove方法

修改程序中以下部分：

[javascript] view plaincopyprint?

  1. // p = $("p").detach();
  2. p = $("p").remove();
	// p = $("p").detach();
	p = $("p").remove();

测试remove函数，同样是先删除在加入，执行完后的效果：

可以发现调用remove方法之后，再重新把删除的标签加入到body后时，发现JQuery动态绑定的事件，已经失效，点击P标签，class不能切换。说明在执行remove的时候，已经把JQuery动态绑定的事件删除了。

3)  验证empty方法：

要验证empty方法，要麻烦一点，在删除之后，重新加入之后，text为空，不能够点击测试click事件，因此我们需要新增一个按钮，为这种情况增加text，便于测试click事件。

代码如下：

[html] view plaincopyprint?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Test Jquery remove detach empty</title>
  6. <style>
  7. p {
  8. background:yellow;
  9. margin:6px 0;
  10. }
  11. p.off {
  12. background: black;
  13. }
  14. </style>
  15. <script src="js/jquery-1.8.0.min.js"></script>
  16. <script>
  17. $(document).ready(function(){
  18. // JQuery 为P标签动态绑定click事件
  19. $("p").click(function(){
  20. $(this).toggleClass("off");
  21. });
  22. var p;
  23. $("#button").click(function(){
  24. if ( p ) {
  25. p.appendTo("body");
  26. p = null;
  27. } else {
  28. // p = $("p").detach();
  29. // p = $("p").remove();
  30. p = $("p").empty();
  31. }
  32. });
  33. // 为删除之后重新加入的p标签加入text
  34. $("#buttonA").click(function(){
  35. $("#A").text("Hello");
  36. $("#B").text("you?");
  37. });
  38. });
  39. </script>
  40. </head>
  41. <body>
  42. <p id="A">Hello <span>subNode</span></p>
  43. how are
  44. <p id="B">you? <span>subNode</span></p>
  45. <input type="button" id="button" value="Attach/detach paragraphs" /> <br/>
  46. <input type="button" id="buttonA" value="addTextA" /> <br/>
  47. </body>
  48. </html>
 

执行效果如图：

可以发现empty方法，没有删除动态绑定事件。

4)  补充讲解：

为了更好的理解这里所说的绑定事件是JQuery的动态绑定事件，我们修改一下程序，使用onclick属性，把click事件作为一个属性值，来静态绑定。

修改后的程序如下：

[html] view plaincopyprint?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Test Jquery remove detach empty</title>
  6. <style>
  7. p {
  8. background:yellow;
  9. margin:6px 0;
  10. }
  11. p.off {
  12. background: black;
  13. }
  14. </style>
  15. <script src="js/jquery-1.8.0.min.js"></script>
  16. <script>
  17. // 处理P标签click事件
  18. function clickHandler(element){
  19. $(element).toggleClass("off");
  20. }
  21. $(document).ready(function(){
  22. var p;
  23. $("#button").click(function(){
  24. if ( p ) {
  25. p.appendTo("body");
  26. p = null;
  27. } else {
  28. // p = $("p").detach();
  29. p = $("p").remove();
  30. // p = $("p").empty();
  31. }
  32. });
  33. });
  34. </script>
  35. </head>
  36. <body>
  37. <p id="A" onclick="clickHandler(this)">Hello <span>subNode</span></p>
  38. how are
  39. <p id="B" onclick="clickHandler(this)">you? <span>subNode</span></p>
  40. <input type="button" id="button" value="Attach/detach paragraphs" /> <br/>
  41. </body>
  42. </html>
 

我们再次使用remove方法，删除然后在append，发现事件响应有效了。其实这里的click事件已经作为一个静态的p元素的一个属性onclick的值了。所有append之后是有效的。

综上所述，可以得到这个三个方法的上述比较表格了。

【转载】http://blog.csdn.net/walkerjong/article/details/7989405

时间： 2024-07-31 10:56:18

Jquery empty() remove() detach() 方法的区别的相关文章

jquery之remove(),detach()方法详解

一:remove()方法 remove()函数用于从文档中移除匹配的元素. 你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素. 与detach()相比,remove()函数会同时移除与元素关联绑定的附加数据( data()函数 )和事件处理器等(detach()会保留). 该函数属于jQuery对象(实例). 语法 jQueryObject.remove( [ selector ] ) 参数 参数 描述 selector 可选/String类型指定的选择器字符

jQuery中删除节点方法remove()、detach()、empty()分析

jQuery中提供了三种删除节点的方法:remove().detach().empty(),本文详细分析这三种方法. 最容易区分的是empty(),该方法严格上属于“清空节点”,即删除其子节点,自身并不会删除.举个栗子: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>remove和detach对

PHP remove,empty和detach区别

empty: 把所有段落的子元素(包括文本节点)删除 HTML 代码: <p>Hello, <span>Person</span> <a href="#">and person</a></p> jQuery 代码: $("p").empty(); 结果: <p></p> remove: 从DOM中删除所有匹配的元素. 这个方法不会把匹配的元素从jQuery对象中删除,因而

jQuery基础：remove（）与 detach（）区别

1.detach() detach() 方法移除被选元素,包括所有文本和子节点. 这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素. detach() 会保留所有绑定的事件.附加的数据,这一点与 remove() 不同. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume

jquery 中remove()与detach()的区别

remove()与detach()方法都是从dom中删除所有的元素 两者的共同之处在于都不会把匹配的元素从jQuery对象中删除. 不同之处在于用remove()删除的元素,除了元素被保留,其他的在这个元素上的绑定事件等都会被移除,但是detach()方法不会移除这个元素上的方法或者是附加数据. 简单举例: html: <body><p>区别</p></body> js: p元素的绑定事件 $("p").click(function(){

jQuery remove()与jQuery empty()的区别

jQuery remove() 方法删除被选元素及其子元素.举例如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"></script> 5 <script> 6 $(document).ready(function(){ 7 $("button").click(function(

jquery中html 与 text方法的区别

jquery中html 与 text方法的区别 24 May 2012/in 网站设计和开发 /by Bruce 接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别. 通常在用jquery写ajax时,都会用到html()这个方法,而不用text()这个方法,他们之间有什么区别呢?

jquery append()方法与html()方法用法区别

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容. 定义和用法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(content) 使用函数来附加内容 使用函数在指定元素的结尾插入内容. 语法 $(selector).append(function(index,html)) 实例代码: <

jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un