jQuery筆記02-DOM操作

◆ 查找節點

查找屬性節點: 通過 jQuery 選擇器完成.

查找屬性節點: 查找到所需要的元素之後, 可以調用jQuery 對象的 attr() 方法來獲取它的各種屬性值

1. CSS類

① addClass(class) 爲每個匹配的元素添加指定的類名。

② removeClass(class)從所有匹配的元素中刪除全部或者指定的類。

③ toggleClass( class, switch ) [互相切換]如果開關switch參數爲true則加上對應的class,否則就刪除。

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

2、節點操作

2.1創建節點

案例原始狀態:

  1. 文檔處理——內部插入

①append(content)向每個匹配的元素內部追加內容。

這個操作與對指定的元素執行appendChild方法,將它們添加到文檔中的情況類似。

②appendTo(content)把所有匹配的元素追加到另一個、指定的元素元素集合中。

實際上,使用這個方法是顛倒了常規的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

③prepend(content)向每個匹配的元素內部前置內容。

這是向所有匹配元素內部的開始處插入內容的最佳方式。

④prependTo(content)把所有匹配的元素前置到另一個、指定的元素元素集合中。

實際上,使用這個方法是顛倒了常規的$(A).prepend(B)的操作,即不是把B前置到A中,而是把A前置到B中。

回顧JS:傳統的dom方法操作

  1. 文檔處理——外部插入

⑤after(content)在每個匹配的元素之後插入內容。

⑥insertAfter(content)把所有匹配的元素插入到另一個、指定的元素元素集合的後面。

實際上,使用這個方法是顛倒了常規的$(A).after(B)的操作,即不是把B插入到A後面,而是把A插入到B後面。

⑦before(content)在每個匹配的元素之前插入內容。

⑧insertBefore(content) 把所有匹配的元素插入到另一個、指定的元素元素集合的前面。

實際上,使用這個方法是顛倒了常規的$(A).before(B)的操作,即不是把B插入到A前面,而是把A插入到B前面。

備註:以上方法不但能將新創建的 DOM 元素插入到文檔中, 也能對原有的 DOM 元素進行移動.

2.2 刪除節點

empty(): 清空元素中的所有後代節點(不包含屬性節點,即對應的標籤會保留).

remove(): 從 DOM 中刪除所有匹配的元素, 當某個節點用 remove() 方法刪除後, 該節點所包含的所有後代節點將被同時刪除,(標籤也會被刪除)。

2.3 複製節點

clone(): 克隆匹配的 DOM 元素, 返回值爲克隆後的副本. 但此時複製的新節點不具有任何行爲.

clone(true): 複製元素的同時也複製元素中的的事件

2.4 替換節點

replaceWith(): 將所有匹配的元素都替換爲指定的 HTML 或 DOM 元素

replaceAll(): 顛倒了的 replaceWith() 方法.

注意: 若在替換之前, 已經在元素上綁定了事件, 替換後原先綁定的事件會與原先的元素一起消失

3. 屬性操作

(1)attr(): 獲取屬性和設置屬性

當爲該方法傳遞一個參數時, 即爲某元素的獲取指定屬性

當爲該方法傳遞兩個參數時, 即爲某元素設置指定屬性的值

(2)removeAttr(): 刪除指定元素的指定屬性

◆ jQuery 中有很多方法都是一個函數實現獲取和設置. 如: attr(), html(), text(), val(), height(), width(), css() 等.

3、節點集合與遍歷

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

②next()取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合

nextAll()查找當前元素之後所有的同輩元素。

③prev()取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

prevAll()查找當前元素之前所有的同輩元素

④ siblings()取得匹配元素前後所有的同輩元素

【代碼】https://github.com/rxbook/study-jquery-2/tree/master/JQ02-DOM%E6%93%8D%E4%BD%9C

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章