srcmini本文概述
jQuery detach()方法用于删除选定的元素, 包括所有文本和子节点, 并且仅保留数据和事件。
此方法将保存已删除元素的副本, 以在以后需要时重新插入它们。
还有一些其他方法可用于删除元素, 例如jQuery remove()方法, jQuery empty()方法等。但是它们之间有一些区别。
jQuery remove()方法：此方法用于删除元素及其数据和事件。
jQuery empty()方法：此方法用于仅从所选元素中删除内容。
句法：
$(selector).detach()jQuery detach()方法的示例
让我们以一个示例来演示jQuery detach()方法的效果。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is srcmini02.com</p>
<button>Click here to detach all p elements</button>
</body>
</html>立即测试
jQuery detach()示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<style>
p {
background: lightpink;
margin: 6px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello Guys!</p>
<p>This is srcmini02.com</p>
<button>Click here to Attach/detach all p elements. </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>立即测试
detach()和remove()方法之间的区别
让我们以一个示例来清除detach()和remove()方法之间的区别：
jQuery detach()示例3
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("body").append($("#p1").detach());
});
$("#btn2").click(function(){
$("body").append($("#p2").remove());
});
$("p").click(function(){
$(this).animate({fontSize: "+=1px"})
});
});
</script>
</head>
<body>
<p id="p1"><b>This paragraph will keep its click event even after it is moved.</b></p>
<p id="p2">This paragraph will not keep its click event after it is moved.</p>
<button id="btn1">Detach and append p element</button>
<button id="btn2">Remove and append p element</button>
</body>
</html>立即测试
评论前必须登录！
注册