一.摘要
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學(xué)習(xí).
二.前言
通過前面幾章我們已經(jīng)能夠完全控制jQuery包裝集了, 無論是通過選擇器選取對(duì)象, 或者從包裝集中刪除,過濾元素. 本章將講解如何使用jQuery獲取和修改元素屬性和樣式.
三. 區(qū)分DOM屬性和元素屬性
一個(gè)img標(biāo)簽:
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />
通常開發(fā)人員習(xí)慣將id, src, alt等叫做這個(gè)元素的"屬性". 我將其稱為"元素屬性". 但是在解析成DOM對(duì)象時(shí), 實(shí)際瀏覽器最后會(huì)將標(biāo)簽元素解析成"DOM對(duì)象", 并且將元素的"元素屬性"存儲(chǔ)為"DOM屬性". 兩者是有區(qū)別的.
雖然我們?cè)O(shè)置了元素的src是相對(duì)路徑:images/image.1.jpg
但是在"DOM屬性"中都會(huì)轉(zhuǎn)換成絕對(duì)路徑:http://localhost/images/image.1.jpg.
甚至有些"元素屬性"和"DOM屬性"的名稱都不一樣,比如上面的元素屬性class, 轉(zhuǎn)換為DOM屬性后對(duì)應(yīng)className.
牢記, 在javascript中我們可以直接獲取或設(shè)置"DOM屬性":
<script type="text/javascript"> $(function() {
var img1 = document.getElementById("hibiscus");
alert(img1.alt);
img1.alt = "Change the alt element attribute";
alert(img1.alt);
})
</script>
所以如果要設(shè)置元素的CSS樣式類, 要使用的是"DOM屬性"className"而不是"元素屬性"class:
img1.className = "classB";
