區(qū)分 DOM 屬性和元素屬性
區(qū)分DOM 屬性和元素屬性
一個(gè)img 標(biāo)籤:
#<img?src="images/image.1.jpg"?id="hibiscus"?alt=" Hibiscus"?class="classA"?/>
通常開(kāi)發(fā)人員習(xí)慣將id,src,alt等叫做這個(gè)元素的"屬性"。我們稱之為"元素屬性"。但是在解析成 DOM 物件時(shí),實(shí)際瀏覽器最後會(huì)將標(biāo)籤元素解析成"DOM 物件", 並且將元素的"元素屬性"儲(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.);##1. ";
???????alert(img1.alt);
???})</script>
???$(function( )?{????????var?img1?=?document.getElementById("hibiscus");
???????alert(img1.);##1. ";
???????alert(img1.alt);
???})</script>
#img1.className?=?"classB";
在jQuery中沒(méi)有包裝操作"DOM屬性"的函數(shù), 因?yàn)槭褂胘avascript獲取和設(shè)定"DOM屬性"都很簡(jiǎn)單. 在jQuery提供了each()函數(shù)用於遍歷jQuery包裝集, 其中的this指標(biāo)是一個(gè)DOM物件, 所以我們可以應(yīng)用這一點(diǎn)配合原生javascript來(lái)操作元素的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ù)的說(shuō)明:?each( callback ) Returns: jQuery包裝集?
