jQuery的DOM操作
刪除節點
remove()、detach()、empty()
-
remove()
var $li = $("ul li:eq(0)").remove(); $li.appendTo("ul");
用remove()刪除節點後,所有後代節點同時刪除。該方法返回值是一個指向已被刪除的節點。但除了這個元素本身得以保留之外,其他的比如繫結的事件,附加的資料等都會被移除。
-
detach()
與remove()的區別是仍然保留其繫結的資料。
-
empty()
作用是清空元素內的後代元素。
複製節點
clone()
複製的節點會帶 原來的性質 ,但並不具有任何行為。如需要新元素複製功能,在cline()中傳遞一個引數true。
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
})
替換節點
replaceWith()、replaceAll()
將所匹配的元素替換成指定的HTML或者DOM。例如<p>hao</p>
換成<b>hao</b>
$("p").replaceWith("<b>hao</b>");
$("<b>hao</b>").replaceAll("p");
如果替換前繫結了事件,替換後需要重新給新元素繫結事件。
設定和獲取HTML、文字和值
html()、text()和val()
遍歷節點
parent()、parents()和closest()
parent() | 匹配元素的父元素 |
parents() | 匹配元素的祖先元素 |
closest() | 從本身開始找,本身不是則逐級向上級 父元素 匹配 |