jQuery中DOM常見操作實(shí)例小結(jié)

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

DOM屬性操作

屬性列表

DOM文檔操作

一、添加元素

1、內(nèi)部添加

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

append($(selector))

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

appendTo($(selector))

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

prepend($(selector))

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

prependTo($(selector))

2、外部添加

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

after($(selector))

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

insertAfter($(selector))

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

before($(selector))

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

insertBefore($(selector))

二、刪除元素

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

remove()

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

detach()

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

empty()

三、替換元素

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

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

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

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

DOM樣式操作

一丶概要

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

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

1. CSS()

css()函數(shù)用于設(shè)置或返回當(dāng)前jQuery對(duì)象所匹配的元素的css樣式屬性值,如果需要?jiǎng)h除指定的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對(duì)象的核心事件方法，核心事件函數(shù)，主要用于為元素的任意事件(包括自定義事件)添加、取消、觸發(fā)綁定的一個(gè)或多個(gè)事件處理函數(shù)

二丶方法

1. on()方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com