欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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区别

点击detach运行结果如下:

jQuery解读之empty、remove、detach区别

jQuery解读之empty、remove、detach区别

点击back运行结果如图:

jQuery解读之empty、remove、detach区别

如果将detach改为remove,那么点击back之后,控制台显示为undefined。

以上就是jQuery解读之empty、remove、detach区别的详细内容,更多请关注其它相关文章!