remove() 刪除節點 | detach() 刪除節點 | empty() 清空節點的內容 | clone() 復制節點
來源：程序員人生 發布時間：2015-04-20 08:27:21 閱讀次數：2695次
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>
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
