jquery對(duì)dom的操作常用方法整理
更新時(shí)間:2013年06月25日 18:09:00 作者:
jquery對(duì)dom的操作包括了對(duì)html內(nèi)容的添加、刪除元素/內(nèi)容、操作CSS等等,本文整理了一些dom操作的常用方法,感興趣的朋友可以參考下哈
Jquery對(duì)dom的操作也是很總要的。
1.三個(gè)簡(jiǎn)單實(shí)用的用于 DOM 操作的 jQuery 方法:
· text() - 設(shè)置或返回所選元素的文本內(nèi)容
· html() - 設(shè)置或返回所選元素的內(nèi)容(包括 HTML 標(biāo)記)
· val() - 設(shè)置或返回表單字段的值
2.attr()獲取屬性。當(dāng)然這兩也是可以自己設(shè)置值來修改的,
3.對(duì)html內(nèi)容的添加。添加新的 HTML 內(nèi)容
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法:
· append() - 在被選元素的結(jié)尾插入內(nèi)容
· prepend() - 在被選元素的開頭插入內(nèi)容
· after() - 在被選元素之后插入內(nèi)容
· before() - 在被選元素之前插入內(nèi)容
4.刪除元素/內(nèi)容
如需刪除元素和內(nèi)容,一般可使用以下兩個(gè) jQuery 方法:
· remove() - 刪除被選元素(及其子元素)
· empty() - 從被選元素中刪除子元素
5.jQuery 操作 CSS
jQuery 擁有若干進(jìn)行 CSS 操作的方法。我們將學(xué)習(xí)下面這些:
· addClass() - 向被選元素添加一個(gè)或多個(gè)類
· removeClass()- 從被選元素刪除一個(gè)或多個(gè)類
· toggleClass()- 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
· css() - 設(shè)置或返回樣式屬性
例子
$("h1,h2,p").addClass("blue");首先我們知道當(dāng)對(duì)多種標(biāo)簽添加樣式的時(shí)候我們用‘,'分開。Blue一定是一個(gè)設(shè)置好的.Blue{}類選擇器
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");有樣式就會(huì)移除,沒樣式就會(huì)添加
6.設(shè)置多個(gè) CSS 屬性
如需設(shè)置多個(gè) CSS 屬性,請(qǐng)使用如下語法:
css({"propertyname":"value","propertyname":"value",...});
7.jQuery 尺寸 方法
jQuerywidth() 和height() 方法
width() 方法設(shè)置或返回元素的寬度(不包括內(nèi)邊距、邊框或外邊距)。
height() 方法設(shè)置或返回元素的高度(不包括內(nèi)邊距、邊框或外邊距)。
jQueryinnerWidth() 和innerHeight() 方法
innerWidth() 方法返回元素的寬度(包括內(nèi)邊距)。
innerHeight() 方法返回元素的高度(包括內(nèi)邊距)。
jQueryouterWidth() 和outerHeight() 方法
outerWidth() 方法返回元素的寬度(包括內(nèi)邊距和邊框)。
outerHeight() 方法返回元素的高度(包括內(nèi)邊距和邊框)。
1.三個(gè)簡(jiǎn)單實(shí)用的用于 DOM 操作的 jQuery 方法:
· text() - 設(shè)置或返回所選元素的文本內(nèi)容
· html() - 設(shè)置或返回所選元素的內(nèi)容(包括 HTML 標(biāo)記)
· val() - 設(shè)置或返回表單字段的值
2.attr()獲取屬性。當(dāng)然這兩也是可以自己設(shè)置值來修改的,
3.對(duì)html內(nèi)容的添加。添加新的 HTML 內(nèi)容
我們將學(xué)習(xí)用于添加新內(nèi)容的四個(gè) jQuery 方法:
· append() - 在被選元素的結(jié)尾插入內(nèi)容
· prepend() - 在被選元素的開頭插入內(nèi)容
· after() - 在被選元素之后插入內(nèi)容
· before() - 在被選元素之前插入內(nèi)容
4.刪除元素/內(nèi)容
如需刪除元素和內(nèi)容,一般可使用以下兩個(gè) jQuery 方法:
· remove() - 刪除被選元素(及其子元素)
· empty() - 從被選元素中刪除子元素
5.jQuery 操作 CSS
jQuery 擁有若干進(jìn)行 CSS 操作的方法。我們將學(xué)習(xí)下面這些:
· addClass() - 向被選元素添加一個(gè)或多個(gè)類
· removeClass()- 從被選元素刪除一個(gè)或多個(gè)類
· toggleClass()- 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
· css() - 設(shè)置或返回樣式屬性
例子
$("h1,h2,p").addClass("blue");首先我們知道當(dāng)對(duì)多種標(biāo)簽添加樣式的時(shí)候我們用‘,'分開。Blue一定是一個(gè)設(shè)置好的.Blue{}類選擇器
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");有樣式就會(huì)移除,沒樣式就會(huì)添加
6.設(shè)置多個(gè) CSS 屬性
如需設(shè)置多個(gè) CSS 屬性,請(qǐng)使用如下語法:
css({"propertyname":"value","propertyname":"value",...});
7.jQuery 尺寸 方法
jQuerywidth() 和height() 方法
width() 方法設(shè)置或返回元素的寬度(不包括內(nèi)邊距、邊框或外邊距)。
height() 方法設(shè)置或返回元素的高度(不包括內(nèi)邊距、邊框或外邊距)。
jQueryinnerWidth() 和innerHeight() 方法
innerWidth() 方法返回元素的寬度(包括內(nèi)邊距)。
innerHeight() 方法返回元素的高度(包括內(nèi)邊距)。
jQueryouterWidth() 和outerHeight() 方法
outerWidth() 方法返回元素的寬度(包括內(nèi)邊距和邊框)。
outerHeight() 方法返回元素的高度(包括內(nèi)邊距和邊框)。
相關(guān)文章
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼
基于jQuery實(shí)現(xiàn)的當(dāng)離開頁面時(shí)出現(xiàn)提示的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-06-06
在頁面上用action傳遞參數(shù)到后臺(tái)出現(xiàn)亂碼的解決方法
本篇文章主要是對(duì)在頁面上用action傳遞參數(shù)到后臺(tái)出現(xiàn)亂碼的解決方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
jquery實(shí)現(xiàn)美觀的導(dǎo)航菜單鼠標(biāo)提示特效代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)美觀的導(dǎo)航菜單鼠標(biāo)提示特效代碼,涉及jquery鼠標(biāo)事件及頁面animate動(dòng)畫的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09
jQuery對(duì)象和DOM對(duì)象相互轉(zhuǎn)化
jQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象;2009-04-04
Jquery post傳遞數(shù)組方法實(shí)現(xiàn)思路及代碼
Jquery post 傳遞數(shù)組以做批量刪除會(huì)需要傳遞要?jiǎng)h除的數(shù)據(jù)ID數(shù)組,下面是具體的實(shí)現(xiàn)代碼,感興趣的童鞋們可以參考下2013-04-04

