jQuery中的detach()方法解析
Posted 考拉的墨尔本
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中的detach()方法解析相关的知识，希望对你有一定的参考价值。
在jQuery中，存在着三个删除元素的方法
1.empty()
2.remove([selector])
3.detach([selector])
对于前两种方法可能大家已经很熟悉了，但是关于detach()的使用可能稍微有一些欠缺，其实detach()和remove()是非常相似的，这两者的区别主要在于是否将已删除元素所绑定的数据删除。这是什么意思呢?让我们写个简单的demo来说明这个问题
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(function()
// $div2.data("value", 1);
$("#detach").on("click", function()
$div2.detach();
);
var $div2=$("#div2");
$("#back").on("click", function()
$("#div3").after($div2);
console.log($("#div2").attr('data'));
);
);
</script>
</head>
<body>
<div id="div2" data='kka'>div2</div>
<div id="div3">div3</div>
<input value="detach" id="detach" type="button" />
<input value="back" id="back" type="button" />
</body>
</html> 对于上面的demo，运行之后当我们点击detach按钮的时候，js就执行了detach方法将div2删除，此时我们注意到div2中是绑定数据的，当我们再点击back按钮的时候，将div2重新添加到div3的后面，然后我们在控制台输出div2中绑定的数据，仍然是可以输出kka的。
所以，我们一开始所说的detach()不删除元素绑定的数据就是这个意思。在日常的开发中我们可以依据具体情况使用对应的方法来处理dom元素。
以上是关于jQuery中的detach()方法解析的主要内容，如果未能解决你的问题，请参考以下文章
jQuery中的remove()detach()和empty()的区别