jQuery中DOM常見操作實例小結

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

DOM屬性操作

屬性列表

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)
參數:

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程序設計有所幫助。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com