一.摘要
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區分值得大家學習.
二.前言
通過前面幾章我們已經能夠完全控制jQuery包裝集了, 無論是通過選擇器選取對象, 或者從包裝集中刪除,過濾元素. 本章將講解如何使用jQuery獲取和修改元素屬性和樣式.
三. 區分DOM屬性和元素屬性
一個img標簽:
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />
通常開發人員習慣將id, src, alt等叫做這個元素的"屬性". 我將其稱為"元素屬性". 但是在解析成DOM對象時, 實際瀏覽器最后會將標簽元素解析成"DOM對象", 并且將元素的"元素屬性"存儲為"DOM屬性". 兩者是有區別的.
雖然我們設置了元素的src是相對路徑:images/image.1.jpg
但是在"DOM屬性"中都會轉換成絕對路徑:http://localhost/images/image.1.jpg.
甚至有些"元素屬性"和"DOM屬性"的名稱都不一樣,比如上面的元素屬性class, 轉換為DOM屬性后對應className.
牢記, 在javascript中我們可以直接獲取或設置"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>
所以如果要設置元素的CSS樣式類, 要使用的是"DOM屬性"className"而不是"元素屬性"class:
img1.className = "classB";
