jQuery中的DOM操作

2021-06-29 15:45:02 字數 1801 閱讀 5197

jquery中的dom操作

dom分為3個部分,

dom core ,html-dom,css=dom

1,查詢節點

查詢元素節點可以用$選擇器,find()和children()方法。

查詢屬性節點可以用attr()方法,也可以用$的屬性過濾選擇器 eg:($(「div[tittle]」)。

2,建立節點

3,插入節點

3.3 prepend() — 在a元素內部前置b內容 — $(「a」).prepend(「b」) ;

3.4 prependto() — 同3.2

3.5 after()— 在a元素之後插入b內容

3.6 insertafter() — 同3.2

3.7 before() — 在a元素前面插入b內容

3.8 insertbefore() — 同3.2

4,刪除節點

remove() —  可以傳引數選擇性的刪除 ,detach(),empty()

5,複製節點

clone() 複製完需繫結到已有的元素上

6,替換節點

replacewith() — 將a元素替換為b元素 — $(「a」).replacewith(「b」)

replaceall() — $(「a」).replacewith(「b」) == $(「b」).replaceall(「a」)

注:若在替換元素之前已繫結事件,則替換之後要重新繫結事件。

7,包裹節點

wrap() — $("strong" ).wrap("") 用標籤把元素包裹起來 

wrapall() — 用乙個標籤包裹多個選中的標籤  

wrapinner() — 顧名思義

8,屬性操作

8.1 獲取屬性和設定屬性   attr()   eg:$(「p」).attr( )

8.2 刪除屬性  removeattr(「 title 」)  刪除title屬性

9,樣式操作

9.1 追加樣式  addclass()

9.2 移除樣式  removeclass()

9.3 切換樣式  toggleclass() 重複切換

9.4 判斷是否含有某個樣式  hasclass()

10, 設定和獲取html,文字和值

10.1 讀取或設定某個元素的html內容  html()

10.2 讀取或設定某個元素中的文字內容  text()

10.3 讀取或設定元素(包括文字框,下拉列表,單選框)的值,  val()

11, 遍歷節點

11.1 獲取匹配元素的子元素集合 children()

11.2 next()  prev()  

11.3 獲取匹配元素前後所有的同輩元素  siblings()

11.4 從元素本身開始,逐級向上級匹配,返回最先匹配的祖先元素  closet()

12, css-dom操作

css(),height(),width(),offset(),position(),scrolltop(),scrollleft() 

jQuery中的DOM操作

三 jquery中的dom操作 3.2.1 查詢節點 1.查詢元素節點 var li ul li eq 1 獲取裡第2個節點 var li text li.text 獲取第二個元素節點的文字內容 2.查詢屬性節點 var para p 獲取節點 var p text para.attr title ...

jQuery中的DOM操作

dom操作又叫節點操作,標籤操作,元素操作 再選中元素的裡邊的最後邊 叫做建立乙個元素,jquery物件 其實就是在原有標籤的基礎上做了一些改造 prepend div prepend div prepend 生成乙個jquery物件p prependto 給div裡邊的最前邊加乙個p標籤 prep...

jquery中的DOM操作

1 查詢元素節點,並列印其內容 var li ul li eq 1 查詢裡第2個節點 var li txt li.text 獲取文字內容 alert li txt 2 查詢屬性節點 var para p 獲取節點 var p txt para.attr title 獲取元素節點屬性title 3 建...