使用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座標。此方法僅對可見元素有效 |