jQuery中DOM常見操作實例小結

這篇文章主要介紹了jQuery中DOM常見操作,結合實例形式總結分析了jQuery針對dom屬性操作、文檔操作等常用方法與操作技巧,需要的朋友可以參考下

本文實例講述了jQuery中DOM常見操作。分享給大家供大家參考，具體如下：

DOM屬性操作

屬性列表

屬性	版本	說明
attr()	1.0	設置或返回文檔節點的屬性。
removeAttr()	1.0	移除文檔節點的屬性。
prop()	1.6	設置或返回DOM元素的屬性。
removeProp()	1.6	移除每個匹配元素的屬性。
addClass()	1.0	添加CSS類名。
removeClass()	1.0	移除CSS類名。
toggleClass()	1.2	切換CSS類名(存在就刪除，不存在就添加)。
html()	1.0	設置或返回元素的html內容(即innerHTML)。
text()	1.0	設置或返回元素的文本內容(已過濾掉HTML標籤，即IE中的innerText )。
val()	1.0	設置或返回元素的值(主要是表單元素的value值)。

DOM文檔操作

一、添加元素

1、內部添加

1. 向當前元素的內部追加內容添加到末尾

append($(selector))

2. 將當前元素在某元素內部追加。但由於會根據需要對當前元素進行移動，所以jQuery對象更改了，可用end()還原

appendTo($(selector))

3. 向當前元素的內部前置內容

prepend($(selector))

4. 將當前元素在某元素內部前置。類似於appendTo()，會改變對象

prependTo($(selector))

2、外部添加

1. 向當前元素之後插入內容

after($(selector))

2. 將當前元素插入到某元素之後。類似於appendTo()，會改變對象

insertAfter($(selector))

3. 向當前元素之前插入內容

before($(selector))

4. 將當前元素插入到某元素之前。類似於appendTo()，會改變對象

insertBefore($(selector))

二、刪除元素

1. 刪除當前元素，該元素包含的文本內容和後代元素會一起刪除掉，綁定的事件也不復存在

remove()

2. 同樣是刪除當前元素，但是綁定的事件還是存在的

detach()

3. 清空當前元素，該元素的文本內容和後代元素都將刪除，但保留其本身

empty()

三、替換元素

1. 移動頁面上原有的元素來替換當前選定的頁面元素，也可以添加新元素來替換

replaceWith($(selector))
replaceWith($(html))

2. 用當前選定的元素來替換某元素，可以使頁面上原有元素，也可以是新元素。同樣會根據需要複製當前元素副本，從而更改jQuery對象

replaceAll($(selector))
replaceAll($(html))

DOM樣式操作

一丶概要

通過JavaScript獲取dom元素上的style屬性，我們可以動態的給元素賦予樣式屬性。在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實現了

二丶樣式操作函數

1. CSS()

css()函數用於設置或返回當前jQuery對象所匹配的元素的css樣式屬性值,如果需要刪除指定的css屬性，使用函數將其值設爲空字符串("")

語法格式:

$("selector").css(property [, value ])
$("selector").css( object )

2. height()

用於設置或返回當前匹配元素的高度
語法格式: $("selector").height( [ value ] )
如果省略了value參數，則表示獲取高度；如果指定了該參數，則表示設置高度。

3. width()

用於設置或返回當前匹配元素的寬度
語法格式: $("selector").width( [ value ] )

4. innerHeight(),innerWidth()

置或返回當前匹配元素的內寬度或者高度

語法格式:

$("selector").innerHeight( [ value ] )
$("selector").innerWidth( [ value ] )

5. outerHeight(),outerWidht()

獲取當前匹配元素的外高度(外寬度)

語法格式:

$("selector").outerHeight( [ includeMargin ] )
$("selector").outerWidth( [ includeMargin ] )

DOM事件操作

一丶事件API

jQuery對象的核心事件方法，核心事件函數，主要用於爲元素的任意事件(包括自定義事件)添加、取消、觸發綁定的一個或多個事件處理函數

二丶方法

1. on()方法

說明:on() 方法在被選元素及子元素上添加一個或多個事件處理程序。
語法:$(selector).on(event,childSelector,data,function,map)

2. toggle([speed],[easing],[fn])

說明: 用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的click事件。如果元素是可 見的，切換爲隱藏的；如果元素是隱藏的，切換爲可見的.
語法:$(selector).toggle(speed,easing,function)
參數:

• speed： 隱藏/顯示 效果的速度。默認是 "0"毫秒。可能的值：slow，normal，fast。
• easing：可選參數。用來指定切換效果，默認是"swing"，可用參數"linear"。

fn：在動畫完成時執行的函數，每個元素執行一次。

3. change([[data],fn])

說明:當元素的值發生改變時，會發生change事件.該事件僅適用於文本域（text field），以及 textarea 和 select 元素。當用於 select 元素時，change事件會在選擇某個選項時發生。當用於 text field 或 text area 時，該事件會在元素失去焦點時發生

語法:$(selector).change(data,fn);

4. click([[data],fn])

說明: 觸發每一個匹配元素的click事件。這個函數會調用執行綁定到click事件的所有函數。
語法:$(selector).click(data,fn);

5. mouseover([[data],fn])

說明: 當鼠標指針位於元素上方時，會發生mouseover事件。該事件大多數時候會與mouseout事件一起使用。
與mouseenter事件不同，不論鼠標指針穿過被選元素或其子元素，都會觸發mouseover事件。只有在鼠標指針穿過被選元素時，纔會觸發mouseenter事件
語法:$(selector).mouseover(data,fn);

6. mouseout([[data],fn])

1.說明:當鼠標指針從元素上移開時，發生mouseout事件。該事件大多數時候會與mouseover事件一起使用。
語法:$(selector).mouseout(data,fn);

7. select([[data],fn])

說明: 當textarea或文本類型的input元素中的文本被選擇時，會發生select事件
語法: $(selector).select(data,fn);

8. submit([[data],fn])

更多關於jQuery相關內容還可查看本站專題：《jQuery操作DOM節點方法總結》、《jQuery遍歷算法與技巧總結》、《jQuery表格(table)操作技巧彙總》、《jQuery擴展技巧總結》、《jQuery常見經典特效彙總》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》

希望本文所述對大家jQuery程序設計有所幫助。