这三种jQuery方法的功能区别是什么：
- 分离（）
- 隐藏（）
- 消除（）
detach()、hide() 和 remove() 之间的区别 - jQuery
IT技术
javascript
jquery
2021-02-18 23:41:59
5个回答
想象一张桌子上的一张纸，上面有一些用铅笔写的笔记。
hide-> 把衣服扔到上面empty-> 用橡皮擦删除笔记detach-> 拿起你手中的纸，放在那里以备将来的任何计划remove-> 抓起纸扔进垃圾箱
table代表当前DOM空间，paper代表元素，notes代表元素的内容（子节点）。
有点简化，并不完全准确，但很容易理解。
hide() 将匹配元素的显示设置为无。
detach() 删除匹配的元素，包括所有文本和子节点。
此方法存储与元素关联的所有数据，因此可用于恢复元素的数据以及事件处理程序。
remove() 还会删除匹配的元素，包括所有文本和子节点。
但是，在这种情况下，只能恢复元素的数据，而不能恢复其事件处理程序。
在 jQuery 中，有三种方法可以从 DOM 中删除元素。这三种方法是.empty()，.remove()和.detach()。所有这些方法都用于从 DOM 中删除元素，但它们都不同。
。隐藏（）
隐藏匹配的元素。没有参数，.hide() 方法是隐藏 HTML 元素的最简单方法：
$(".box").hide();
。空的（）
.empty() 方法从所选元素中删除所有子节点和内容。此方法不会删除元素本身或其属性。
笔记
.empty() 方法不接受任何参数以避免内存泄漏。jQuery 在删除元素本身之前从子元素中删除其他构造，例如数据和事件处理程序。
例子
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>
这将导致删除 Hai 文本的 DOM 结构：
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>
如果我们在里面有任意数量的嵌套元素<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>
这将导致<div>删除元素的 DOM 结构：
<div class="content">
<div class="goodevening">good evening</div>
</div
如果我们在里面有任意数量的嵌套元素<div class="hai">，它们也会被删除。其他 jQuery 构造，例如数据或事件处理程序，也会被删除。
。分离（）
.detach() 方法删除选定的元素，包括所有文本和子节点。但是，它保留数据和事件。此方法还保留已删除元素的副本，以便稍后重新插入。
笔记
.detach() 方法在稍后将删除的元素重新插入 DOM 时很有用。
例子
<!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>
更多信息，请访问：http : //www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var $span;
$span = $("<span>");
$span.text("Ngoc Xuan");
function addEvent() {
$span.on("click",function(){
alert("I'm Span");
});
}
function addSpan() {
$span.appendTo("body");
}
function addButton(name) {
var $btn = $("<input>");
$btn.attr({value:name,
type:'submit'});
if(name=="remove"){
$btn.on("click",function(){
$("body").find("span").remove();
})
}else if(name=="detach"){
$btn.on("click",function(){
$("body").find("span").detach();
})
}else if(name=="Add") {
$btn.on("click",function(){
addSpan();
})
}else if(name=="Event"){
$btn.on("click",function(){
addEvent();
})
}else if (name == "Hide") {
$btn.on("click",function(){
if($span.text()!= '')
$span.hide();
})
}else {
$btn.on("click",function(){
$span.show();
})
}
$btn.appendTo("body");
}
(function () {
addButton("remove");
addButton("detach");
addButton("Add");
addButton("Event");
addButton("Hide");
addButton("Show");
})();
});
</script>
</body>
</html>
其它你可能感兴趣的问题