remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点
来源：程序员人生 发布时间：2015-04-20 08:27:21 阅读次数：2309次
remove() 删除节点 | detach() 删除节点 | empty() 清空节点的内容 | clone() 复制节点
<html>
<head>
<title></title>
<script src="
jquery⑵.1.3.js"></script>
</head>
<body>
<div>
<ul>
<li>中国</li>
<li>美国</li>
<li>德国</li>
<li>俄国</li>
</ul>
</div>
<ul id="tow"></ul>
<button id="a">remove</button><button id="b">detach</button><button id="c">empty</button>
</body>
</html>
<script type="text/javascript">
$(function () {
$("li").click(function () {
$(this).css("color", "red");
})
//----------------------remove() 删除节点
//$("ul > li").filter(":contains(中国)").remove(); //删除ul子元素li中包括“中国”文本的li
//$("li").remove(":contains(中国)"); //remove()方法也能够通过传递参数来选择性的删除元素 ，这里将包括“中国”文本的li删除
$("#a").click(function () {
var a = $("li").remove(); //删除所有的li元素
$("#tow").append(a); //将刚刚删除的li元素添加到id为tow的ul中 我们会发现改变色彩的click事件不起作用了。
})
//----------------------detach() 删除节点
//detach()和remove()方法1样，也是删除节点，只是这个方法不会把匹配的元素从
jquery对象中删除，因此可以在将来使用这些匹配的元素，与remove()不同的是所有的绑定事件，附加的数据都会保存下来。
$("#b").click(function () {
var b = $("li").detach(); //删除所有的li元素
$("#tow").append(b);//将刚刚删除的li元素添加到id为tow的ul中 我们会发现改变色彩的click事件还是起作用的。
})
//----------------------empty() 清空节点的内容
$("#c").click(function () {
$("li").empty(); //empty()方法其实不是删除节点，而是清空节点的内容，节点还在。只是节点的内容被清空了
})
//----------------------clone() 复制节点
$("li").click(function () {
$(this).clone().appendTo("#tow"); //复制当前的节点并将它追加到id=tow的元素中
})
//复制节点后，被复制的新元素其实不具有任何行动，如果需要新元素也具有复制功能，可以以下这样写
$("li").click(function () {
$(this).clone(true).appendTo("#tow");//注意参数true 它的含义就是：复制元素的同时复制元素中所绑定的事件
})
})
</script>
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
