jQuery中DOM常見操作實(shí)例小結(jié)
本文實(shí)例講述了jQuery中DOM常見操作。分享給大家供大家參考,具體如下:
DOM屬性操作
屬性列表
屬性 | 版本 | 說(shuō)明 |
---|---|---|
attr() | 1.0 | 設(shè)置或返回文檔節(jié)點(diǎn)的屬性。 |
removeAttr() | 1.0 | 移除文檔節(jié)點(diǎn)的屬性。 |
prop() | 1.6 | 設(shè)置或返回DOM元素的屬性。 |
removeProp() | 1.6 | 移除每個(gè)匹配元素的屬性。 |
addClass() | 1.0 | 添加CSS類名。 |
removeClass() | 1.0 | 移除CSS類名。 |
toggleClass() | 1.2 | 切換CSS類名(存在就刪除,不存在就添加)。 |
html() | 1.0 | 設(shè)置或返回元素的html內(nèi)容(即innerHTML)。 |
text() | 1.0 | 設(shè)置或返回元素的文本內(nèi)容(已過(guò)濾掉HTML標(biāo)簽,即IE中的innerText )。 |
val() | 1.0 | 設(shè)置或返回元素的值(主要是表單元素的value值)。 |
DOM文檔操作
一、添加元素
1、內(nèi)部添加
- 向當(dāng)前元素的內(nèi)部追加內(nèi)容添加到末尾
append($(selector))
- 將當(dāng)前元素在某元素內(nèi)部追加。但由于會(huì)根據(jù)需要對(duì)當(dāng)前元素進(jìn)行移動(dòng),所以jQuery對(duì)象更改了,可用end()還原
appendTo($(selector))
- 向當(dāng)前元素的內(nèi)部前置內(nèi)容
prepend($(selector))
- 將當(dāng)前元素在某元素內(nèi)部前置。類似于
appendTo()
,會(huì)改變對(duì)象
prependTo($(selector))
2、外部添加
- 向當(dāng)前元素之后插入內(nèi)容
after($(selector))
- 將當(dāng)前元素插入到某元素之后。類似于
appendTo()
,會(huì)改變對(duì)象
insertAfter($(selector))
- 向當(dāng)前元素之前插入內(nèi)容
before($(selector))
- 將當(dāng)前元素插入到某元素之前。類似于
appendTo()
,會(huì)改變對(duì)象
insertBefore($(selector))
二、刪除元素
- 刪除當(dāng)前元素,該元素包含的文本內(nèi)容和后代元素會(huì)一起刪除掉,綁定的事件也不復(fù)存在
remove()
- 同樣是刪除當(dāng)前元素,但是綁定的事件還是存在的
detach()
- 清空當(dāng)前元素,該元素的文本內(nèi)容和后代元素都將刪除,但保留其本身
empty()
三、替換元素
- 移動(dòng)頁(yè)面上原有的元素來(lái)替換當(dāng)前選定的頁(yè)面元素,也可以添加新元素來(lái)替換
replaceWith($(selector)) replaceWith($(html))
- 用當(dāng)前選定的元素來(lái)替換某元素,可以使頁(yè)面上原有元素,也可以是新元素。同樣會(huì)根據(jù)需要復(fù)制當(dāng)前元素副本,從而更改jQuery對(duì)象
replaceAll($(selector)) replaceAll($(html))
DOM樣式操作
一丶概要
通過(guò)JavaScript獲取dom元素上的style屬性,我們可以動(dòng)態(tài)的給元素賦予樣式屬性。在jQuery中我們要?jiǎng)討B(tài)的修改style屬性我們只要使用css()
方法就可以實(shí)現(xiàn)了
二丶樣式操作函數(shù)
- CSS()
css()
函數(shù)用于設(shè)置或返回當(dāng)前jQuery對(duì)象所匹配的元素的css樣式屬性值,如果需要?jiǎng)h除指定的css屬性,使用函數(shù)將其值設(shè)為空字符串("")
語(yǔ)法格式:
$("selector").css(property [, value ]) $("selector").css( object )
- height()
用于設(shè)置或返回當(dāng)前匹配元素的高度
語(yǔ)法格式: $("selector").height( [ value ] )
如果省略了value參數(shù),則表示獲取高度;如果指定了該參數(shù),則表示設(shè)置高度。
- width()
用于設(shè)置或返回當(dāng)前匹配元素的寬度
語(yǔ)法格式: $("selector").width( [ value ] )
- innerHeight(),innerWidth()
置或返回當(dāng)前匹配元素的內(nèi)寬度或者高度
語(yǔ)法格式:
$("selector").innerHeight( [ value ] ) $("selector").innerWidth( [ value ] )
- outerHeight(),outerWidht()
獲取當(dāng)前匹配元素的外高度(外寬度)
語(yǔ)法格式:
$("selector").outerHeight( [ includeMargin ] ) $("selector").outerWidth( [ includeMargin ] )
DOM事件操作
一丶事件API
jQuery對(duì)象的核心事件方法,核心事件函數(shù),主要用于為元素的任意事件(包括自定義事件)添加、取消、觸發(fā)綁定的一個(gè)或多個(gè)事件處理函數(shù)
二丶方法
- on()方法
說(shuō)明:on()
方法在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。
語(yǔ)法:$(selector).on(event,childSelector,data,function,map)
- toggle([speed],[easing],[fn])
說(shuō)明: 用于綁定兩個(gè)或多個(gè)事件處理器函數(shù),以響應(yīng)被選元素的輪流的click事件。如果元素是可 見的,切換為隱藏的;如果元素是隱藏的,切換為可見的.
語(yǔ)法:$(selector).toggle(speed,easing,function)
參數(shù):
- speed: 隱藏/顯示 效果的速度。默認(rèn)是 "0"毫秒??赡艿闹担簊low,normal,fast。
- easing:可選參數(shù)。用來(lái)指定切換效果,默認(rèn)是"swing",可用參數(shù)"linear"。
fn:在動(dòng)畫完成時(shí)執(zhí)行的函數(shù),每個(gè)元素執(zhí)行一次。
- change([[data],fn])
說(shuō)明:當(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ā)生
語(yǔ)法:$(selector).change(data,fn);
- click([[data],fn])
說(shuō)明: 觸發(fā)每一個(gè)匹配元素的click事件。這個(gè)函數(shù)會(huì)調(diào)用執(zhí)行綁定到click事件的所有函數(shù)。
語(yǔ)法:$(selector).click(data,fn);
- mouseover([[data],fn])
說(shuō)明: 當(dāng)鼠標(biāo)指針位于元素上方時(shí),會(huì)發(fā)生mouseover事件。該事件大多數(shù)時(shí)候會(huì)與mouseout事件一起使用。
與mouseenter事件不同,不論鼠標(biāo)指針穿過(guò)被選元素或其子元素,都會(huì)觸發(fā)mouseover事件。只有在鼠標(biāo)指針穿過(guò)被選元素時(shí),才會(huì)觸發(fā)mouseenter事件
語(yǔ)法:$(selector).mouseover(data,fn);
- mouseout([[data],fn])
1.說(shuō)明:當(dāng)鼠標(biāo)指針從元素上移開時(shí),發(fā)生mouseout事件。該事件大多數(shù)時(shí)候會(huì)與mouseover事件一起使用。
語(yǔ)法:$(selector).mouseout(data,fn);
- select([[data],fn])
說(shuō)明: 當(dāng)textarea或文本類型的input元素中的文本被選擇時(shí),會(huì)發(fā)生select事件
語(yǔ)法: $(selector).select(data,fn);
- 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ì)有所幫助。
- jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery的DOM操作之刪除節(jié)點(diǎn)示例
- jQuery學(xué)習(xí)筆記之jQuery的DOM操作
- jQuery DOM操作 基于命令改變頁(yè)面
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- jQuery DOM操作小結(jié)與實(shí)例
- jQuery常見面試題之DOM操作詳析
- 淺談jQuery 選擇器和dom操作
- Jquery基礎(chǔ)教程之DOM操作
- 鋒利的jQuery jQuery中的DOM操作
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jQuery DOM操作實(shí)例
相關(guān)文章
jquery slibings選取同級(jí)其他元素的實(shí)現(xiàn)代碼
jquery選取同級(jí)其他元素可以使用slibings方法,end方法可以清除之前的鏈?zhǔn)讲僮?,相?dāng)于重新開始2013-11-11基于jQuery對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例
下面小編就為大家?guī)?lái)一篇基于jQuery對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
用JavaScript使頁(yè)面上的一組checkbox全選/取消全選,邏輯很簡(jiǎn)單,實(shí)現(xiàn)代碼也沒(méi)有太難的語(yǔ)法。但使用jQuery實(shí)現(xiàn)則更簡(jiǎn)單,代碼也很簡(jiǎn)潔,精辟!2009-11-11- 把一個(gè)元素淡出或淡入可以達(dá)到更為生動(dòng)的效果,在任何一種情況下,都只是隨著時(shí)間來(lái)改變?cè)氐耐该鞫?/div> 2014-09-09
jQuery表單校驗(yàn)插件validator使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery表單校驗(yàn)插件validator的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02JS拖動(dòng)選擇table里的單元格完整實(shí)例【基于jQuery】
這篇文章主要介紹了JS拖動(dòng)選擇table里的單元格,結(jié)合完整實(shí)例形式分析了基于jQuery的table表格動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,涉及事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作使用方法,需要的朋友可以參考下2019-05-05最新評(píng)論