使用jquery操作DOM物件
目錄
①使用jQuery操作CSS樣式——css()、 addClass()、 removeClass()、 toggleClass()
②使用jQuery操作文字與屬性值內容——html()、 text()、 val()
③使用jQuery操作DOM節點——查詢、建立、插入、刪除、替換、複製和遍歷
⑤使用jQuery遍歷DOM節點——遍歷子元素、遍歷同輩元素和遍歷前輩元素
1、DOM操作分類
DOM操作分為三類:
- DOM Core:任何一種支援DOM的程式語言都可以使用它,如getElementById()
- HTML-DOM:用於處理HTML文件,如document.forms
- CSS-DOM:用於操作CSS,如element.style.color="green"
JavaScript用於對(x)html文件進行操作,它對這三類DOM操作都提供了支援
2、jQuery中的DOM操作
jQuery對JavaScript中的DOM操作進行了封裝,使用起來也更簡便
jQuery中的DOM操作可分為:
- 樣式操作
- 內容及Value屬性值操作
- 節點操作
- 節點屬性操作
- 節點遍歷
- CSS-DOM操作
①使用jQuery操作CSS樣式——css()、 addClass()、 removeClass()、 toggleClass()
①使用css()為指定的元素設定樣式值
②追加和移除樣式
addClass(class)或addClass(class1 class2 … classN);//追加樣式
removeClass(“style2 ”)或removeClass("style1 style2 ");//移除樣式
③切換樣式:toggleClass()模擬了addClass()與removeClass()實現樣式切換的過程
toggleClass(class);
②使用jQuery操作文字與屬性值內容——html()、 text()、 val()
①HTML程式碼操作:html()可以對HTML程式碼進行操作,類似於JS中的innerHTML
②文字操作:text()可以獲取或設定元素的文字內容
html()和text()的區別
語法 |
引數 |
功能 |
html() |
無引數 |
用於獲取第一個匹配元素的HTML內容或文字內容 |
html(content) |
content引數為元素的HTML內容 |
用於設定所有匹配元素的HTML內容或文字內容 |
text() |
無引數 |
用於獲取所有匹配元素的文字內容 |
text (content) |
content引數為元素的文字內容 |
用於設定所有匹配元素的文字內容 |
③Value值操作:val()可以獲取或設定元素的value屬性值
③使用jQuery操作DOM節點——查詢、建立、插入、刪除、替換、複製和遍歷
jQuery中節點操作主要分為:
- 查詢節點——利用選擇器和工廠函式
- 建立節點
- 插入節點
- 刪除節點
- 替換節點
- 複製節點
①建立節點元素
工廠函式$()用於獲取或建立節點
- $(selector):通過選擇器獲取節點
- $(element):把DOM節點轉化成jQuery節點
- $(html):使用HTML字串建立jQuery節點
②插入子節點:元素內部插入子節點
語法 |
功能 |
append(content) |
$(A).append(B)表示將B追加到A中 如:$("ul").append($newNode1); |
appendTo(content) |
$(A).appendTo(B)表示把A追加到B中 如:$newNode1.appendTo("ul"); |
prepend(content) |
$(A). prepend (B)表示將B前置插入到A中 如:$("ul"). prepend ($newNode1); |
prependTo(content) |
$(A). prependTo (B)表示將A前置插入到B中 如:$newNode1. prependTo ("ul"); |
③插入同輩節點:元素外部插入同輩節點
語法 |
功能 |
after(content) |
$(A).after (B)表示將B插入到A之後 如:$("ul").after($newNode1); |
insertAfter(content) |
$(A). insertAfter (B)表示將A插入到B之後 如:$newNode1.insertAfter("ul"); |
before(content) |
$(A). before (B)表示將B插入至A之前 如:$("ul").before($newNode1); |
insertBefore(content) |
$(A). insertBefore (B)表示將A插入到B之前 如:$newNode1.insertBefore("ul"); |
④刪除節點
jQuery提供了三種刪除節點的方法
- remove():刪除整個節點
- detach():刪除整個節點,保留元素的繫結事件、附加的資料
- empty():清空節點內容
⑤替換節點:replaceWith()和replaceAll()用於替換某個節點
⑥複製節點:clone()用於複製某個節點
可以使用clone()實現輸出DOM元素本身的HTML
$("<div></div>").append($(DOM元素).clone()).html();
④節點屬性操作:attr() 、removeAttr()
獲取與設定節點屬性
①attr()用來獲取與設定元素屬性
②removeAttr()用來刪除元素的屬性
⑤使用jQuery遍歷DOM節點——遍歷子元素、遍歷同輩元素和遍歷前輩元素
①遍歷子元素:children()方法可以用來獲取元素的所有子元素
②遍歷同輩元素:jQuery可以獲取緊鄰其後、緊鄰其前和位於該元素前與後的所有同輩元素
語法 |
功能 |
next([expr]) |
用於獲取緊鄰匹配元素之後的元素, 如:$("li:eq(1)").next().css("background-color","#F06"); |
prev([expr]) |
用於獲取緊鄰匹配元素之前的元素, 如:$("li:eq(1)").prev().css("background-color","#F06"); |
slibings([expr]) |
用於獲取位於匹配元素前面和後面的所有同輩元素, 如:$("li:eq(1)").siblings().css("background-color","#F06"); |
③遍歷前輩元素:
jQuery中可以遍歷前輩元素,方法如下:
- parent():獲取元素的父級元素
- parents():元素元素的祖先元素
3、使用jQuery操作CSS-DOM
除css()外,還有獲取和設定元素高度、寬度、相對位置等的樣式操作方法
語法 |
功能 |
css() |
設定或返回匹配元素的樣式屬性 |
height([value]) |
設定或返回匹配元素的高度 |
width([value]) |
設定或返回匹配元素的寬度 |
offset([value]) |
返回以畫素為單位的top和left座標。此方法僅對可見元素有效 |