jQuery解讀之empty、remove、detach區別

來源：懂視網責編：小采時間：2020-11-27 20:18:46

jQuery解讀之empty、remove、detach區別

jQuery解讀之empty、remove、detach區別:通過一張對比表來解釋幾個方法之間的不同方法名參數被移除的元素所綁定的事件及數據是否也被移除元素自身是否被移除empty無是否remove選擇器表達式，比如remove(.class);remove(#id);remove(tag):是是（無參數時），有參數時要根據參數所涉及的

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery解讀之empty、remove、detach區別:通過一張對比表來解釋幾個方法之間的不同方法名參數被移除的元素所綁定的事件及數據是否也被移除元素自身是否被移除empty無是否remove選擇器表達式，比如remove(.class);remove(#id);remove(tag):是是（無參數時），有參數時要根據參數所涉及的

通過一張對比表來解釋幾個方法之間的不同

方法名	參數	被移除的元素所綁定的事件及數據是否也被移除	元素自身是否被移除
empty	無	是	否
remove	選擇器表達式，比如 remove(“.class”); remove(“#id”); remove(“tag”):	是	是（無參數時），有參數時要根據參數所涉及的范圍。
detach	參數同remove	否	情況同remove

下面著重就detach不移除元素綁定的事件及數據這一特性來舉個例子。

代碼如下：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript" src="jquery-1.11.0.js" ></script>
	<script type="text/javascript">
	$(function() {
	var $p2=$("#p2");
	$p2.data("value", 1);
	$("#detach").on("click", function() {
	$p2.detach();
	});

	$("#back").on("click", function() {
	$("#p1").append($p2);
	console.log($("#p2").data("value"));
	});
	});
	</script>
	</head>
	<body>
	<p id="p1">
	<p id="p2">
	p2
	</p>
	<p id="p3">
	p3
	</p>
	</p>
	<input value="detach" id="detach" type="button" />
	<input value="back" id="back" type="button" />
	</body>
</html>

直接運行結果如下：