JQuery dom屬性操作 節點遍歷及包裹

2021-08-04 12:26:20 字數 1997 閱讀 3380

jquery中對dom屬性的操作和遍歷節點。

1. attr()屬性操作

attr()的作用是獲取屬性和設定屬性。

<1>當為該方法傳遞乙個引數時, 即為某元素的獲取指定屬性。

<2>當為該方法傳遞兩個引數時, 即為某元素設定指定屬性。

<3>jquery 中有很多方法都是乙個函式實現獲取和設定. 如: attr(), html(), text(), val(), height(), width(), css() 等。

<4>removeattr(「屬性名」): 刪除指定元素的指定屬性。

2. 樣式操作

<1>獲取 class 和設定 class

class 是元素的乙個屬性, 所以獲取 class 和設定 class 都可以使用 attr() 方法來完成。

<2>追加樣式:addclass()

<3>移除樣式

removeclass() — 從匹配的元素中刪除全部或指定的 class。

<4>切換樣式

toggleclass() — 控制樣式上的重複切換.如果類名存在則刪除它, 如果類名不存在則新增它。

注意:在使用toggleclass的時候,我們會很經常不小心把它寫成toggle,這兩個方法具有很大的不同。toggle這個函式的作用是:回判斷當前元素是否為隱藏,如果為隱藏狀態,則呼叫jquery的show方法,進行顯示。如果為顯示狀態,則就會呼叫jquery的hide方法進行隱藏。

<5>判斷是否含有某個樣式

hasclass() — 判斷元素中是否含有某個 class, 如果有, 則返回 true; 否則返回 false。

3. 遍歷節點

children():取得匹配元素的所有子元素組成的集合,該方法只考慮子元素而不考慮任何後代元素。

next():取得匹配元素後面緊鄰的同輩元素下乙個元素。經常應用於切換。

prev()取得匹配元素前面緊鄰的同輩元素上乙個元素。經常用於切換。

siblings:取得匹配元素前後所有的同輩元素。

4. 節點包裹

<1>wrap()

將匹配到的元素使用指定標籤進行逐個包裹。

title="jquery">jquerystrong>

title="jquery">jquerystrong>

//jquery**如下

$("strong").wrap("

b>");

//得到的結果如下

title="jquery">jquerystrong>

b>

title="jquery">jquerystrong>

b>

<2>wrapall()

將匹配到的元素使用指定標籤進行整體包裹

title="jquery">jquerystrong>

title="jquery">jquerystrong>

//jquery**如下:

$("strong").wrapall("

b>");

//得到的結果如下

title="jquery">jquerystrong>

title="jquery">jquerystrong>

b>

<3>wrapinner()

將匹配到的元素使用指定標籤進行內部逐個包裹。

title="jquery">jquerystrong>

//jquery**如下:

$("strong"). wrapinner("

b>");

//得到的結果如下

title="jquery">

jqueryb>

strong>

5.

JQuery DOM節點操作

1.建立 移動節點 var box 建立節點 return html代表原本裡面的內容 div prepend 插入節點,插入到內容的前面 div prepend function index,html return html代表原本裡面的內容 box.prependto body 插入的內容前面 ...

jQuery Dom節點操作

1.jquery追加標籤 c css font size 100px 2.移除標籤 c remove 3.新增父級標籤,在某個標籤的外層新增標籤 c wrap 4.在某個標籤之前新增標籤 c before 我是before新增的標籤 5.在某個標籤之後新增標籤 c after 我是after新增的標...

jQuery DOM節點操作

函式 處理 函式處理,函式處理 html結構 jquery建立的節點是乙個jquery物件 總結 這兩個方法功能相同,主要的不同是語法 內容和目標的位置不同 2 prepend 與prependto 方法 prepend content 向每個匹配的元素內部前置內容 prependto conten...