detach(),hide()和remove()之间的区别 - jQuery

Viv*_*vek 100 javascript jquery

这三种jQuery方法之间的功能区别是什么:

  • 分离()
  • 隐藏()
  • 去掉()

Jac*_*kin 147

hide()将匹配元素的CSS display属性设置为none.

remove() 完全从DOM中删除匹配的元素.

detach()就像remove(),但保持与匹配元素相关的存储数据和事件.

要将分离的元素重新插入DOM,只需jQuerydetach()以下位置插入返回的集:

var span = $('span').detach();

...

span.appendTo('body');
Run Code Online (Sandbox Code Playgroud)

  • @comecme:如果你已经将一个事件绑定到了span的click处理程序,调用`remove()`,再次附加它,绑定就会消失,单击span将什么都不做.如果你调用`detach()`并重新连接,绑定将保持不变,单击处理程序将继续工作. (11认同)
  • 结合.clone(true),你可以使用detach来实现避免jquery直播事件的廉价模板:http://jsfiddle.net/b9chris/PNd2t/ (7认同)

Zol*_*ási 43

想象一张桌子上的一张纸,上面写着用铅笔写的一些笔记.

  • hide - >把衣服扔到上面
  • empty - >用橡皮擦删除笔记
  • detach - >抓住手中的纸张并将其保存在那里以备将来的计划
  • remove - >抓住纸张扔到垃圾箱里

本文表示元素,注释表示元素的内容(子节点).

有点简化,不完全准确,但易于理解.


Kum*_*mar 12

hide() 将匹配元素的显示设置为无.

detach() 删除匹配的元素,包括所有文本和子节点.

此方法存储与元素关联的所有数据,因此可用于还原元素的数据以及事件处理程序.

remove() 还会删除匹配的元素,包括所有文本和子节点.

但是,在这种情况下,只能恢复元素的数据,而不能恢复其事件处理程序.


小智 11

在jQuery中,有三种方法可以从DOM中删除元素.这三种方法是.empty(),.remove().detach().所有这些方法都用于从DOM中删除元素,但它们都是不同的.

.隐藏()

隐藏匹配的元素.没有参数,.hide()方法是隐藏HTML元素的最简单方法:

$(".box").hide();
Run Code Online (Sandbox Code Playgroud)

.empty()

.empty()方法从所选元素中删除所有子节点和内容.此方法不会删除元素本身或其属性.

注意

.empty()方法不接受任何参数以避免内存泄漏.在删除元素本身之前,jQuery会从子元素中删除其他构造,例如数据和事件处理程序.

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").empty();
</script>
Run Code Online (Sandbox Code Playgroud)

这将导致删除Hai文本的DOM结构:

<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>
Run Code Online (Sandbox Code Playgroud)

如果我们内部有任意数量的嵌套元素<div class="hai">,它们也会被删除.

.去掉()

.remove()方法删除所选元素,包括所有文本和子节点.此方法还会删除所选元素的数据和事件.

注意

如果要删除元素本身以及其中的所有内容,请使用.remove().除此之外,还删除了与元素关联的所有绑定事件和jQuery数据.

考虑以下html:

<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").remove();
</script>
Run Code Online (Sandbox Code Playgroud)

这将导致<div>删除元素的DOM结构:

<div class="content">
<div class="goodevening">good evening</div>
</div
Run Code Online (Sandbox Code Playgroud)

如果我们内部有任意数量的嵌套元素<div class="hai">,它们也会被删除.其他jQuery构造(例如数据或事件处理程序)也会被擦除.

.分离()

.detach()方法删除所选元素,包括所有文本和子节点.但是,它会保留数据和事件.此方法还保留已删除元素的副本,以便以后重新插入它们.

注意

当删除的元素稍后要重新插入DOM时,.detach()方法很有用.

<!doctype html>
<html>
<head>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hai!</p>Good <p>Afternoo</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

欲了解更多信息,请访问:http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html