jQuery解读之empty、remove、detach区别

最新推荐文章于 2022-01-19 09:37:31 发布

笔心

最新推荐文章于 2022-01-19 09:37:31 发布

阅读量1.5w

点赞数 3

分类专栏： jQuery 文章标签： jquery detach remove empty 区别

本文链接：https://blog.csdn.net/qinshenxue/article/details/23832221

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

方法名	参数	被移除的元素所绑定的事件及数据是否也被移除	元素自身是否被移除
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 $div2=$("#div2");
				$div2.data("value", 1);
				$("#detach").on("click", function() {
					$div2.detach();
				});

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

直接运行结果如下：