jQuery解读之empty、remove、detach区别

程序员文章站 2022-04-08 11:17:46

...

通过一张对比表来解释几个方法之间的不同

方法名	参数	被移除的元素所绑定的事件及数据是否也被移除	元素自身是否被移除
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>

直接运行结果如下：

jQuery解读之empty、remove、detach区别