區分DOM 屬性和元素屬性
一個img 標籤:
#<img src="images/image.1.jpg" id="hibiscus" alt=" Hibiscus" class="classA" />
通常開發人員習慣將id,src,alt等叫做這個元素的"屬性"。我們稱之為"元素屬性"。但是在解析成 DOM 物件時,實際瀏覽器最後會將標籤元素解析成"DOM 物件", 並且將元素的"元素屬性"儲存為"DOM 屬性"，兩者是有區別的。
雖然我們設定了元素的src 是相對路徑：
但是在"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.);##1. ";
alert(img1.alt);
})</script>
所以如果要設定元素的CSS 樣式類別, 要使用的是DOM 屬性"className"而不是元素屬性"class:
#img1.className = "classB";
在jQuery中沒有包裝操作"DOM屬性"的函數, 因為使用javascript獲取和設定"DOM屬性"都很簡單. 在jQuery提供了each()函數用於遍歷jQuery包裝集, 其中的this指標是一個DOM物件, 所以我們可以應用這一點配合原生javascript來操作元素的DOM屬性:
$("img").each(function(index) {
alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
this.alt = "changed";
alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);
});下面是each函數的說明:
each( callback ) Returns: jQuery包裝集
對包裝集中的每一個元素執行callback方法. 其中callback方法接受一個參數, 表示當前遍歷的索引值,從0開始.
下一節
