jQuery中的DOM操作
通常DOM操作可分爲三類——DOM Core(核心)、HTML-DOM和CSS-DOM。
樣式操作
css()直接設置樣式
css("name","value")//設置單個屬性
或
css({"name":"value","name":"value",...})//設置多個屬性
addClass()爲元素追加類樣式
addClass("class")//添加單個樣式
或
addClass("class1" "class2" ... "classN")//添加多個樣式
remove()移除樣式,和addClass()方法對應。
removeClass("class")//移除單個樣式
或
removeClass("class1" "class2" ... "classN")//移除多個樣式
toggleClass()切換樣式
toggleClass("class")//模擬了addClass()和removeClass()實現樣式切換的過程。
內容操作
html()獲取或設置元素的內容(包含HTML標籤)
html()//用於獲取第一個匹配元素的HTML內容和文本內容
html("content")//用於設置所有匹配元素的HTML內容和文本內容
text()獲取或設置元素的文本內容(不包含HTML標籤)
text()//用於獲取所有匹配元素的文本內容
text("content")//用於設置所有匹配元素的內容
val()獲取或設置value屬性值的方法
val()//用於獲取第一個被選元素的value屬性的值
val("新value屬性值")//規定被選元素的新內容
節點操作
1.查找節點
在jQuery中,獲取元素,可以使用jQuery選擇器。
2.創建節點
使用$()工廠函數來創建節點。
3.插入節點
內部插入
/*向父節點的內部的後面插入新節點*/
("父節點").append("新子節點")
或
("新子節點").appendTo("父節點")
/*向父節點的內部的前面插入新節點*/
("父節點").prepend("新子節點")
或
("新子節點").prependTo("父節點")
外部插入
/*向原節點的後面插入同輩新節點*/
("原節點").after("新節點")
或
("新節點").insertAfter("原節點")
/*向原節點的前面插入同輩新節點*/
("原節點").before("新節點")
或
("新節點").insertBefore("原節點")
4.刪除節點
$("要刪除節點").remove()//刪除所選節點
$("要清空節點").empty()//清空所選節點中的內容
5.替換節點
/*將所有匹配元素替換成指定的新元素*/
$("被替換節點").replaceWith("新節點")
或
$("新節點").replaceAll("被替換節點")
6.複製節點
$(selector).clone([includeEvents])//其中參數爲可選值,爲布爾值,規定是否複製元素的所有事件處理,爲true時複製事件處理,爲false時反之。
屬性操作
/*獲取、設置和刪除元素屬性*/
attr([name])//獲取或設置單個元素的屬性值
attr({[name1:value1],[name2:value2],...[nameN:valueN]})//設置多個屬性值
removeAttr("attName")//刪除某個元素特定的屬性
節點遍歷
遍歷子元素
children([expr])//遍歷子元素的方法只有一個,該方法可以用來獲取元素的所有子元素,而不考慮其他的後代元素。其參數expr可選,用於過濾子元素的表達式。
遍歷同輩元素
next([expr])//獲取緊鄰匹配元素的下一個同輩元素
prev([expr])//獲取緊鄰匹配元素的上一個同輩元素
sibling([expr])//獲取匹配元素的所有同輩元素
遍歷前輩元素
parent([selector])//獲取匹配元素集合中的每個元素父級元素
parents([selector])//獲取匹配元素集合中的每個元素的祖先元素
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.