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

DOM屬性操作

屬性列表

DOM文檔操作

一、添加元素

1、內(nèi)部添加

1. 向當(dāng)前元素的內(nèi)部追加內(nèi)容添加到末尾

append($(selector))

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

appendTo($(selector))

3. 向當(dāng)前元素的內(nèi)部前置內(nèi)容

prepend($(selector))

4. 將當(dāng)前元素在某元素內(nèi)部前置。類似于appendTo()，會改變對象

prependTo($(selector))

2、外部添加

1. 向當(dāng)前元素之后插入內(nèi)容

after($(selector))

2. 將當(dāng)前元素插入到某元素之后。類似于appendTo()，會改變對象

insertAfter($(selector))

3. 向當(dāng)前元素之前插入內(nèi)容

before($(selector))

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

insertBefore($(selector))

二、刪除元素

1. 刪除當(dāng)前元素，該元素包含的文本內(nèi)容和后代元素會一起刪除掉，綁定的事件也不復(fù)存在

remove()

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

detach()

3. 清空當(dāng)前元素，該元素的文本內(nèi)容和后代元素都將刪除，但保留其本身

empty()

三、替換元素

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

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

2. 用當(dāng)前選定的元素來替換某元素，可以使頁面上原有元素，也可以是新元素。同樣會根據(jù)需要復(fù)制當(dāng)前元素副本，從而更改jQuery對象

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

DOM樣式操作

一丶概要

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

二丶樣式操作函數(shù)

1. CSS()

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

語法格式:

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

2. height()

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

3. width()

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

4. innerHeight(),innerWidth()

置或返回當(dāng)前匹配元素的內(nèi)寬度或者高度

語法格式:

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

5. outerHeight(),outerWidht()

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

語法格式:

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

DOM事件操作

一丶事件API

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

二丶方法

1. on()方法

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

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

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

• speed： 隱藏/顯示 效果的速度。默認(rèn)是 "0"毫秒?？赡艿闹担簊low，normal，fast。
• easing：可選參數(shù)。用來指定切換效果，默認(rèn)是"swing"，可用參數(shù)"linear"。

fn：在動畫完成時執(zhí)行的函數(shù)，每個元素執(zhí)行一次。

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

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

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

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

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

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

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

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

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

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

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

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

更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專題：《jQuery操作DOM節(jié)點方法總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

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

最新評論