jQuery里面的DOM操作(查找,創建,添加,刪除節點)


一:創建元素節點(添加)

創建元素節點並且把節點作為元素的子節點添加到DOM樹上

append(): 在元素下添加元素
用法:$("id").append("定義的節點"); 例如:var li1 = $("<li>橘子</li>");
添加屬性節點:var li3 = $("<li class='test'>草莓</li>")

appendTo(): 將元素添加到元素里面
用法: $(li3).appendTo("#box1");

prepend(): 添加節點到元素的最上面

prependTo():將節點添加給指定元素的最上面
用法:$(li3).prependTo("#box1");

before():將節點添加到指定元素的前面(外層)
用法: $("#div1").before(div1);

insertBefore():將新建元素添加到目標節點前面左右目標元素的兄弟元素

after():將節點添加到指定元素的后面(外層)
用法: $("#div1").after(div1);

insertAfer(): 將新建的元素添加到目標節點后面作為兄弟元素
用法:$(element).insertAfter("目標節點")

二:刪除節點

remove(): 刪除所有匹配到的元素,這個方法能夠刪除元素的所有子節點
$(element).remove();

empty(): empty原則上來講它並不是刪除元素,它只是清空節點,它能清空指定元素的所有子節點

$(element).empty();

三:修改節點(替換節點,包裹節點,復制節點)

包裹節點:wrap()
用法:$(element).wrap("html")

復制節點:clone(true) 完全復制某一個元素 :true復制元素的同時也復制它的行為,如果不需要復制行為的時候就不加參數
用法:$(element).clone(true);

四:屬性操作和樣式操作

attr() : 用來獲取樣式和設置樣式和屬性
removeAttr() : 用來刪除元素樣式和屬性

addClass() :追加樣式
removeClass :移除樣式
toggleClass : 切換樣式
hasClass :判斷是否含有某個樣式

五:設置和獲取HTML 文本和值

html() :獲取元素中html內容
text() :獲取元素中文本
val() :獲取元素中的值,類似於JavaScript中的value屬性

children() :用於取得匹配元素中的子元素集合。
next() :用於取得匹配元素后面緊跟的兄弟元素
prev() :用於取得匹配元素前面緊鄰的兄弟元素
siblings() :用於取得匹配元素所有的兄弟元素

...


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM