使用jQuery操作DOM的方法小結(jié)

更新時(shí)間：2017年02月27日 14:29:32 作者：土上方方

本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

一.DOM操作分為3類

1.DOM Core

DOM Core不是Javascript的專屬品,任何一種支持DOM的編程語(yǔ)言都可以使用它.它的用途不僅限于處理一種使用標(biāo)記語(yǔ)言編寫(xiě)出來(lái)的文檔

2.HTML-DOM

比DOM Core出現(xiàn)的更早,它提供了一些更加簡(jiǎn)明的標(biāo)記來(lái)描述各種HTML-DOM的元素屬性

3.CSS-DOM

CSS-DOM 失針對(duì)CSS的操作,在JavaScript中,只要作用是獲取和設(shè)置style對(duì)象各種屬性

二.樣式操作

1.直接設(shè)置樣式值

css(name,value)  //設(shè)置單個(gè)屬性
css({name:value,name:value,name:value....})  //同事設(shè)置多個(gè)屬性

2.追加樣式和移除樣式

addClass(class) //追加樣式
removeClass(class)  //移除樣式

3.切換樣式

taggleClass() //可以切換不同元素的類樣式

三.類容操作

1.html代碼操作

html([content]) //可選,規(guī)定備選元素的新類容,該參數(shù)可以包含HTML標(biāo)簽,無(wú)參數(shù)時(shí),表示被選元素的文本類容

2.標(biāo)簽類容操作

text([content]) //可選,規(guī)定被選元素的新文本類容. 注釋,特殊字符會(huì)被編碼.無(wú)參數(shù)時(shí),表示獲取元素的被選類容

3.屬性值操作

val([value])

四.節(jié)點(diǎn)屬性操作

1.查找節(jié)點(diǎn)

$("xxx")

2.創(chuàng)建節(jié)點(diǎn)

$(selector) //選擇器
$(element) //Dom元素
$(html)    //html代碼

3.插入節(jié)點(diǎn)

內(nèi)部插入:append(content) appendTo(content) prepend(content) prependTo(content)

外部插入:after(content) insertAfter(content) before(content) insertBefore(content)

4.刪除節(jié)點(diǎn)

$(selector).remove([expr])

5.替換節(jié)點(diǎn)

$("ul li:eq(1)").replaceWith($xxx)

6.復(fù)制節(jié)點(diǎn)

$(selector).clone([includeEvents])

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JQuery實(shí)現(xiàn)絢麗的橫向下拉菜單
以前經(jīng)?？匆?jiàn)網(wǎng)站有菜單的顯示，鼠標(biāo)移上去就出現(xiàn)下拉的效果，下面為大家介紹下,下面為大家介紹下JQuery實(shí)現(xiàn)的橫向下拉菜單
2013-12-12
jQuery中g(shù)et方法用法分析
這篇文章主要介紹了jQuery中g(shù)et方法用法,結(jié)合實(shí)例形式分析了jQuery的ajax交互中g(shù)et方法的功能、參數(shù)、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
淺談jquery回調(diào)函數(shù)callback的使用
這篇文章主要簡(jiǎn)單介紹了jquery回調(diào)函數(shù)callback的使用,需要的朋友可以參考下
2015-01-01
jQuery下通過(guò)replace字符串替換實(shí)現(xiàn)大小圖片切換
實(shí)現(xiàn)的效果有點(diǎn)類似于Google picasa相冊(cè)不同尺寸圖片的切換效果。本實(shí)例通過(guò)文字大小（font-size）控制圖片尺寸的做法是跟Google學(xué)習(xí)的，但是jQuery代碼是根據(jù)效果自己想出來(lái)的，邏輯很簡(jiǎn)單，沒(méi)有什么精妙之處
2012-05-05
13個(gè)絢麗的Jquery 界面設(shè)計(jì)網(wǎng)站推薦
今天共享一些令人振奮的UI教程，這些UI大部分是基于Jquery的插件，主要包括動(dòng)態(tài)切換視圖的相冊(cè)、3D旋轉(zhuǎn)分享按鈕、Facebook admin Panel，下滑效果的導(dǎo)航Menu，滑翔購(gòu)物車功能，漂亮的Form表單元素等等。
2010-09-09
Java中Timer的用法詳解
Timer是比較常用的工具類，用于按時(shí)間計(jì)劃執(zhí)行任務(wù)。這篇文章給大家介紹java中的timer的用法詳解，涉及到j(luò)ava timer相關(guān)知識(shí)學(xué)習(xí)，對(duì)本文感興趣的朋友可以參考下本篇文章
2015-10-10
jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明
這篇文章主要介紹了jQuery事件的綁定、觸發(fā)、及監(jiān)聽(tīng)方法簡(jiǎn)單說(shuō)明,使用jQuery的事件會(huì)使代碼更加簡(jiǎn)單,同時(shí)對(duì)各瀏覽器的兼容性也還不錯(cuò),需要的朋友可以參考下
2016-05-05
jQuery中元素選擇器（element）簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery中元素選擇器（element）用法,簡(jiǎn)單通俗的說(shuō)明了jQuery元素選擇器的功能、用法并結(jié)合實(shí)例形式分析了jQuery元素選擇器的相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下
2018-05-05
基于jQuery實(shí)現(xiàn)可編輯的表格
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
href下載文件根據(jù)id取url并下載
這篇文章主要介紹了href下載文件的實(shí)現(xiàn)，主要是根據(jù)id取url并下載,需要的朋友可以參考下
2014-05-05