第三章 jQuery中的DOM操作

1.DOM操作:(1)DOM Core(核心)

(2)HTML_DOM (例題:document.getElementById("xxx").value)

(3)CSS_DOM (例題:document.getElementById("xxx").style)

2.jQuery的DOM操作:對(duì)元素的增刪改查

3.查找節(jié)點(diǎn): var $li=$("ul li:eq(1)");

4.查找屬性節(jié)點(diǎn):var name=$li.attr("name","xxx");//賦值

5.創(chuàng)建節(jié)點(diǎn): var $li = $("<li></li>"); var $li=$("<li name="li">xxx</li>");

6.插入節(jié)點(diǎn):(1)after():插入到元素外部的后面

(2)prepend():插入到元素內(nèi)部的前面

(3)before():插入到元素外部之前

(4)append():插入到元素內(nèi)部的后面

(5)appendTo():插入到元素內(nèi)部的后面(與append寫法相反)

7.刪除節(jié)點(diǎn):(1)remove 例題:$("ul li:eq(1)").remove();

(2)empty 沒有引用,直接清空 例題:$("ul li:eq(1)").empty();

8.復(fù)制節(jié)點(diǎn):clone();如果傳遞的參數(shù)為true時(shí),被復(fù)制出來的還可以復(fù)制.

9替換節(jié)點(diǎn):(1)replaceAll()

(2)replaceWith()

10.包裹節(jié)點(diǎn):(1)wrapAll():將所有元素用一個(gè)元素來包裹(即包裹元素外部)

(2)wrap();將所有元素進(jìn)行單獨(dú)的包裹(即元素節(jié)點(diǎn)外部包裹)

(3)wrapInner();每個(gè)匹配的元素的子內(nèi)容用其他結(jié)構(gòu)化的標(biāo)記包裹起來(即元素外部包 裹)

11.屬性操作:(1)attr()獲取,設(shè)置屬性

(2)RemoveAttr()刪除屬性

12.樣式操作:(1)attr();設(shè)置獲取樣式

(2)addClass();追加樣式

(3)RemoveClass();移除樣式;不帶參數(shù)是,將class的值全部刪除

(4)toggle();切換樣式

(5)toggleclass();重復(fù)切換樣式

(6)hasclass();判斷是否有某個(gè)樣式

(7)IS();判斷元素的狀態(tài)

13.設(shè)置和獲取HTML,文本和值:

(1)html();獲取和設(shè)置某個(gè)元素中的html值

(2)text();讀取或者設(shè)置某個(gè)元素中的文本內(nèi)容

(3)val();設(shè)置或者獲取元素的值

14.遍歷節(jié)點(diǎn):

(1)children();獲取匹配元素的所有子元素的個(gè)數(shù)

(2)next();獲取匹配元素后緊鄰的同輩元素(即后一個(gè)元素)

(3)prev();獲取匹配元素前面緊鄰的同輩元素(即上一個(gè)元素)

(4)siblings();獲取匹配元素前后的所有同輩元素

(5)closest();獲取最近的匹配元素(逐級(jí)向上查找)

(6)find();查找 filter();過濾掉 nextAll(); prevAll(); parent();直接父元素 parents();所有父元素

15.CSS DOM操作:

(1)css();獲取樣式屬性

(2)opacity屬性:透明度

(3)height();取元素高度

(4)width();取元素的寬度值

(5)offset();取當(dāng)前窗體的相對(duì)偏移值(top 和 left);

(6)position();取元素相對(duì)最近的一個(gè)position樣式屬性設(shè)置為relative或者 absolute的祖父節(jié)點(diǎn)的相對(duì)偏移(top 和 left)

(7)滾動(dòng)條:scorllTop()和scrollLeft()