首页 > web前端 > js教程 > 正文

jQuery解读之empty、remove、detach区别

巴扎黑
发布: 2017-06-25 09:53:23
原创
1402 人浏览过

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

方法名

参数

被移除的元素所绑定的事件及数据是否也被移除

元素自身是否被移除

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>
登录后复制


直接运行结果如下:


点击detach运行结果如下:



点击back运行结果如图:


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

以上是jQuery解读之empty、remove、detach区别的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板