服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學習.
通過前面幾章我們已經(jīng)能夠完全控制jQuery包裝集了, 無論是通過選擇器選取對象, 或者從包裝集中刪除,過濾元素. 本章將講解如何使用jQuery獲取和修改元素屬性和樣式.
一個img標簽:
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />
通常開發(fā)人員習慣將id, src, alt等叫做這個元素的"屬性". 我將其稱為"元素屬性". 但是在解析成DOM對象時, 實際瀏覽器最后會將標簽元素解析成"DOM對象", 并且將元素的"元素屬性"存儲為"DOM屬性". 兩者是有區(qū)別的.
雖然我們設(shè)置了元素的src是相對路徑:images/image.1.jpg
但是在"DOM屬性"中都會轉(zhuǎn)換成絕對路徑:http://localhost/images/image.1.jpg.
甚至有些"元素屬性"和"DOM屬性"的名稱都不一樣,比如上面的元素屬性class, 轉(zhuǎn)換為DOM屬性后對應(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";
在jQuery中沒有包裝操作"DOM屬性"的函數(shù), 因為使用javascript獲取和設(shè)置"DOM屬性"都很簡單. 在jQuery提供了each()函數(shù)用于遍歷jQuery包裝集, 其中的this指針是一個DOM對象, 所以我們可以應(yīng)用這一點配合原生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開始.
我們可以使用javascript中的getAttribute和setAttribute來操作元素的"元素屬性".
在jQuery中給你提供了attr()包裝集函數(shù), 能夠同時操作包裝集中所有元素的屬性:
| 名稱 | 說明 | 舉例 | 取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應(yīng)屬性，則返回 undefined 。 | 返回文檔中第一個圖像的src屬性值: $("img").attr("src"); | attr( properties ) |
將一個“名/值”形式的對象設(shè)置為所有匹配元素的屬性。 這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。 注意，如果你要設(shè)置對象的class屬性，你必須使用'className' 作為屬性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ). | 為所有圖像設(shè)置src和alt屬性: $("img").attr({ src: "test.jpg", alt: "Test Image" }); | attr( key, value ) | 為所有匹配的元素設(shè)置一個屬性值。 | 為所有圖像設(shè)置src屬性: $("img").attr("src","test.jpg"); 相關(guān)文章
|
