使用Jquery操做DOM對象

Dom操做分類

DOMCore：任何一種支持DOM的編程語言均可以使用它，如getElementById()

HTML-DOM：用於處理HTML文檔，如document.forms

CSS-DOM：用於操做CSS，如element.style.color="green"

提示：JavaScript用於對(x)html文檔進行操做，它對這三類DOM操做都提供了支持。

jQuery中的DOM操做

jQuery對JavaScript中的DOM操做進行了封裝，使用起來也更簡便。

jQuery中的DOM操做可分爲：樣式操做、內容及Value屬性值操做、節點操做、節點屬性操做、節點遍歷、CSS-DOM操做。

直接設置樣式值

使用css()爲指定的元素設置樣式值

css(name,value)設置單個屬性

例如：$(this).css("border","5px solid #f5f5f5");

css()同時設置多個屬性

例如：$(this).css({"border":"5pxsolid #f5f5f5","opacity":"0.5"});

追加和移出樣式

追加樣式addClass(class)或addClass(class1class2 … classN)

移除樣式removeClass(「style2」)或removeClass("style1style2 ")

切換樣式

toggleClass()模擬了addClass()與removeClass()實現樣式切換的過程

HTML代碼操做

html()能夠對HTML代碼進行操做，相似於JS中的innerHTML

例如：$("div.left").html();或 $("div.left").html("

…

");

文本操做

text()能夠獲取或設置元素的文本內容

例如：$("div.left").text();或 $("div.left").text("

…

");

html()和text()的區別

Value值操做

val()能夠獲取或設置元素的value屬性值

例如：$(this).val();或 $(this).val("");

節點操做jQuery中節點操做主要分爲：

查找節點建立節點插入節點刪除節點替換節點複製節點

建立節點元素

工廠函數$()用於獲取或建立節點

$(selector)：經過選擇器獲取節點

$(element)：把DOM節點轉化成jQuery節點

$(html)：使用HTML字符串建立jQuery節點

例如：var $newNode2=$(「千與千尋」);

替換節點replaceWith()和replaceAll()用於替換某個節點

例如：$("ul li:eq(1)").replaceWith($newNode1);或$newNode1.replaceAll("ul li:eq(1)");注意：二者的關係相似於append()和appendTo()。

複製節點

clone()用於複製某個節點：$("ul li:eq(1)").clone(true).appendTo("ul");

能夠使用clone()實現輸出DOM元素自己的HTML：$("

").append($(DOM元素).clone()).html();

刪除節點

jQuery提供了三種刪除節點的方法：

remove()：刪除整個節點

detach()：刪除整個節點，保留元素的綁定事件、附加的數據

empty()：清空節點內容

獲取與設置節點屬性

attr()用來獲取與設置元素屬性

例如：$newNode4.attr("alt");或$("img").attr();

removeAttr()用來刪除元素的屬性

例如：$newNode2.removeAttr("title");

遍歷子元素

children()方法能夠用來獲取元素的全部子元素

例如：$("body").children();

注意：獲取元素的子元素，但不包含子元素的子元素。

遍歷同輩元素

jQuery能夠獲取緊鄰其後、緊鄰其前和位於該元素前與後的全部同輩元素

遍歷前輩元素

jQuery中能夠遍歷前輩元素，方法以下：

parent()：獲取元素的父級元素

parents()：元素元素的祖先元素