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>

直接运行结果如下：