Viv*_*vek 100 javascript jquery
这三种jQuery方法之间的功能区别是什么:
Jac*_*kin 147
hide()将匹配元素的CSS display属性设置为none.
remove() 完全从DOM中删除匹配的元素.
detach()就像remove(),但保持与匹配元素相关的存储数据和事件.
要将分离的元素重新插入DOM,只需jQuery从detach()以下位置插入返回的集:
var span = $('span').detach();
...
span.appendTo('body');
Run Code Online (Sandbox Code Playgroud)
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