第三章 jQuery中的DOM操作

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

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

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

2.jQuery的DOM操作:對元素的增刪改查

3.查找節點: var $li=$("ul li:eq(1)");

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

5.創建節點: var $li = $("<li></li>"); var $li=$("<li name="li">xxx</li>");

6.插入節點:(1)after():插入到元素外部的后面

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

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

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

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

7.刪除節點:(1)remove 例題:$("ul li:eq(1)").remove();

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

8.復制節點:clone();如果傳遞的參數為true時,被復制出來的還可以復制.

9替換節點:(1)replaceAll()

(2)replaceWith()

10.包裹節點:(1)wrapAll():將所有元素用一個元素來包裹(即包裹元素外部)

(2)wrap();將所有元素進行單獨的包裹(即元素節點外部包裹)

(3)wrapInner();每個匹配的元素的子內容用其他結構化的標記包裹起來(即元素外部包 裹)

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

(2)RemoveAttr()刪除屬性

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

(2)addClass();追加樣式

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

(4)toggle();切換樣式

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

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

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

13.設置和獲取HTML,文本和值:

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

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

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

14.遍歷節點:

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

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

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

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

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

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

15.CSS DOM操作:

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

(2)opacity屬性:透明度

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

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

(5)offset();取當前窗體的相對偏移值(top 和 left);

(6)position();取元素相對最近的一個position樣式屬性設置為relative或者 absolute的祖父節點的相對偏移(top 和 left)

(7)滾動條:scorllTop()和scrollLeft()