區(qū)分 DOM 屬性和元素屬性
區(qū)分 DOM 屬性和元素屬性
一個 img 標簽:
<img?src="images/image.1.jpg"?id="hibiscus"?alt="Hibiscus"?class="classA"?/>
通常開發(fā)人員習慣將id,src,alt等叫做這個元素的"屬性"。我們將其稱為"元素屬性"。但是在解析成 DOM 對象時,實際瀏覽器最后會將標簽元素解析成"DOM 對象", 并且將元素的"元素屬性"存儲為"DOM 屬性"，兩者是有區(qū)別的。
雖然我們設置了元素的 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>
???$(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";
在jQuery中沒有包裝操作"DOM屬性"的函數(shù), 因為使用javascript獲取和設置"DOM屬性"都很簡單. 在jQuery提供了each()函數(shù)用于遍歷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函數(shù)的說明:?
each( callback ) Returns: jQuery包裝集?
對包裝集中的每一個元素執(zhí)行callback方法. 其中callback方法接受一個參數(shù), 表示當前遍歷的索引值,從0開始.
