從零開始學(xué)習(xí)jQuery (四) jQuery中操作元素的屬性與樣式
本篇文章講解如何使用jQuery獲取和操作元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區(qū)分值得大家學(xué)習(xí).
二.前言
通過前面幾章我們已經(jīng)能夠完全控制jQuery包裝集了, 無論是通過選擇器選取對象, 或者從包裝集中刪除,過濾元素. 本章將講解如何使用jQuery獲取和修改元素屬性和樣式.
三. 區(qū)分DOM屬性和元素屬性
一個(gè)img標(biāo)簽:
<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />
通常開發(fā)人員習(xí)慣將id, src, alt等叫做這個(gè)元素的"屬性". 我將其稱為"元素屬性". 但是在解析成DOM對象時(shí), 實(shí)際瀏覽器最后會將標(biāo)簽元素解析成"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";
四. 操作"DOM屬性"
在jQuery中沒有包裝操作"DOM屬性"的函數(shù), 因?yàn)槭褂胘avascript獲取和設(shè)置"DOM屬性"都很簡單. 在jQuery提供了each()函數(shù)用于遍歷jQuery包裝集, 其中的this指針是一個(gè)DOM對象, 所以我們可以應(yīng)用這一點(diǎn)配合原生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包裝集
對包裝集中的每一個(gè)元素執(zhí)行callback方法. 其中callback方法接受一個(gè)參數(shù), 表示當(dāng)前遍歷的索引值,從0開始.
五. 操作"元素屬性"
我們可以使用javascript中的getAttribute和setAttribute來操作元素的"元素屬性".
在jQuery中給你提供了attr()包裝集函數(shù), 能夠同時(shí)操作包裝集中所有元素的屬性:
| 名稱 | 說明 | 舉例 |
| 取得第一個(gè)匹配元素的屬性值。通過這個(gè)方法可以方便地從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒有相應(yīng)屬性，則返回 undefined 。 | 返回文檔中第一個(gè)圖像的src屬性值: $("img").attr("src"); | |
| attr( properties ) |
將一個(gè)“名/值”形式的對象設(shè)置為所有匹配元素的屬性。 這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。 注意，如果你要設(shè)置對象的class屬性，你必須使用'className' 作為屬性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ). |
為所有圖像設(shè)置src和alt屬性: $("img").attr({ src: "test.jpg", alt: "Test Image" }); |
| attr( key, value ) | 為所有匹配的元素設(shè)置一個(gè)屬性值。 | 為所有圖像設(shè)置src屬性: $("img").attr("src","test.jpg"); |
| attr( key, fn ) |
為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。 不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)計(jì)算的值作為屬性值。 |
把src屬性的值設(shè)置為title屬性的值: $("img").attr("title", function() { return this.src }); |
| removeAttr( name ) | 從每一個(gè)匹配的元素中刪除一個(gè)屬性 | 將文檔中圖像的src屬性刪除: $("img").removeAttr("src"); |
function testAttr1(event) {
alert($("#hibiscus").attr("class"));
}
注意attr(name)函數(shù)只返回第一個(gè)匹配元素的特定元素屬性值. 而attr(key, name)會設(shè)置所有包裝集中的元素屬性:
//修改所有img元素的alt屬性
$("img").attr("alt", "修改后的alt屬性");
而 attr( properties ) 可以一次修改多個(gè)元素屬性:
$("img").attr({title:"修改后的title", alt: "同時(shí)修改alt屬性"});
另外雖然我們可以使用 removeAttr( name ) 刪除元素屬性, 但是對應(yīng)的DOM屬性是不會被刪除的, 只會影響DOM屬性的值.
比如將一個(gè)input元素的readonly元素屬性去掉,會導(dǎo)致對應(yīng)的DOM屬性變成false(即input變成可編輯狀態(tài)):
$("#inputTest").removeAttr("readonly");
六,修改CSS樣式
修改元素的樣式, 我們可以修改元素CSS類或者直接修改元素的樣式.
一個(gè)元素可以應(yīng)用多個(gè)css類, 但是不幸的是在DOM屬性中是用一個(gè)以空格分割的字符串存儲的, 而不是數(shù)組. 所以如果在原始javascript時(shí)代我們想對元素添加或者刪除多個(gè)屬性時(shí), 都要自己操作字符串.
jQuery讓這一切變得異常簡單. 我們再也不用做那些無聊的工作了.
1. 修改CSS類
下表是修改CSS類相關(guān)的jQuery方法:
| 名稱 | 說明 | 實(shí)例 |
| 為每個(gè)匹配的元素添加指定的類名。 | 為匹配的元素加上 'selected' 類: $("p").addClass("selected"); | |
| hasClass( class ) | 判斷包裝集中是否至少有一個(gè)元素應(yīng)用了指定的CSS類 | $("p").hasClass("selected"); |
| removeClass( [classes] ) | 從所有匹配的元素中刪除全部或者指定的類。 | 從匹配的元素中刪除 'selected' 類: $("p").removeClass("selected"); |
| toggleClass( class ) | 如果存在（不存在）就刪除（添加）一個(gè)類。 | 為匹配的元素切換 'selected' 類: $("p").toggleClass("selected"); |
| toggleClass( class, switch ) | 當(dāng)switch是true時(shí)添加類, 當(dāng)switch是false時(shí)刪除類 |
每三次點(diǎn)擊切換高亮樣式: |
使用上面的方法, 我們可以將元素的CSS類像集合一樣修改, 再也不必手工解析字符串.
注意 addClass( class ) 和removeClass( [classes] ) 的參數(shù)可以一次傳入多個(gè)css類, 用空格分割,比如:
$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });
removeClass方法的參數(shù)可選, 如果不傳入?yún)?shù)則移除全部CSS類:
$("p").removeClass()
2. 修改CSS樣式
同樣當(dāng)我們想要修改元素的具體某一個(gè)CSS樣式,即修改元素屬性"style"時(shí), jQuery也提供了相應(yīng)的方法:
| 名稱 | 說明 | 實(shí)例 |
| css( name ) | 訪問第一個(gè)匹配元素的樣式屬性。 | 取得第一個(gè)段落的color樣式屬性的值: $("p").css("color"); |
| css( properties ) |
把一個(gè)“名/值對”對象設(shè)置為所有匹配元素的樣式屬性。 這是一種在所有匹配的元素上設(shè)置大量樣式屬性的最佳方式。 |
將所有段落的字體顏色設(shè)為紅色并且背景為藍(lán)色: $("p").css({ color: "#ff0011", background: "blue" }); |
| css( name, value ) |
在所有匹配的元素中，設(shè)置一個(gè)樣式屬性的值。 數(shù)字將自動轉(zhuǎn)化為像素值 |
將所有段落字體設(shè)為紅色: $("p").css("color","red"); |
七.獲取常用屬性
雖然我們可以通過獲取屬性,特性以及CSS樣式來取得元素的幾乎所有信息, 但是注意下面的實(shí)驗(yàn):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>獲取對象寬度</title> <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript"> $(function() { alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifined alert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff) alert("width():" + $("#testDiv").width()); //正確的數(shù)值1264 alert("style.width:" + $("#testDiv")[0].style.width ); //空值 }) </script> </head> <body> <div id="testDiv"> 測試文本</div> </body> </html>
我們希望獲取測試圖層的寬度, 使用attr方法獲取"元素特性"為undifined, 因?yàn)椴]有為div添加width. 而使用css()方法雖然可以獲取到style屬性的值, 但是在不同瀏覽器里返回的結(jié)果不同, IE6下返回auto, 而FF下雖然返回了正確的數(shù)值但是后面帶有"px". 所以jQuery提供了width()方法, 此方法返回的是正確的不帶px的數(shù)值.
針對上面的問題, jQuery為常用的屬性提供了獲取和設(shè)置的方法, 比如width()用戶獲取元素的寬度, 而 width(val)用來設(shè)置元素寬度.
下面這些方法可以用來獲取元素的常用屬性值:
1.寬和高相關(guān) Height and Width
| 名稱 | 說明 | 舉例 |
| height( ) | 取得第一個(gè)匹配元素當(dāng)前計(jì)算的高度值（px）。 | 獲取第一段的高: $("p").height(); |
| height( val ) | 為每個(gè)匹配的元素設(shè)置CSS高度(hidth)屬性的值。如果沒有明確指定單位（如：em或%），使用px。 | 把所有段落的高設(shè)為 20: $("p").height(20); |
| width( ) | 取得第一個(gè)匹配元素當(dāng)前計(jì)算的寬度值（px）。 | 獲取第一段的寬: $("p").width(); |
| width( val ) |
為每個(gè)匹配的元素設(shè)置CSS寬度(width)屬性的值。 如果沒有明確指定單位（如：em或%），使用px。 |
將所有段落的寬設(shè)為 20: $("p").width(20); |
| innerHeight( ) |
獲取第一個(gè)匹配元素內(nèi)部區(qū)域高度（包括補(bǔ)白、不包括邊框）。 |
見最后示例 |
| innerWidth( ) |
獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾龋òㄑa(bǔ)白、不包括邊框）。 |
見最后示例 |
| outerHeight( [margin] ) |
獲取第一個(gè)匹配元素外部高度（默認(rèn)包括補(bǔ)白和邊框）。 |
見最后示例 |
| outerWidth( [margin] ) |
獲取第一個(gè)匹配元素外部寬度（默認(rèn)包括補(bǔ)白和邊框）。 |
見最后示例 |
關(guān)于在獲取長寬的函數(shù)中, 要區(qū)別"inner", "outer"和height/width這三種函數(shù)的區(qū)別:
outerWith可以接受一個(gè)bool值參數(shù)表示是否計(jì)算margin值.
相信此圖一目了然各個(gè)函數(shù)所索取的范圍. 圖片以width為例說明的, height的各個(gè)函數(shù)同理.
2.位置相關(guān) Positioning
另外在一些設(shè)計(jì)套彈出對象的腳本中,常常需要動態(tài)獲取彈出坐標(biāo)并且設(shè)置元素的位置.
但是很多的計(jì)算位置的方法存在著瀏覽器兼容性問題, jQuery中為我們提供了位置相關(guān)的各個(gè)函數(shù):
| 名稱 | 說明 | 舉例 |
| offset( ) |
獲取匹配元素在當(dāng)前窗口的相對偏移。 返回的對象包含兩個(gè)整形屬性：top 和 left。此方法只對可見元素有效。 |
獲取第二段的偏移: var p = $("p:last"); |
| position( ) |
獲取匹配元素相對父元素的偏移。 返回的對象包含兩個(gè)整形屬性：top 和 left。為精確計(jì)算結(jié)果，請?jiān)谘a(bǔ)白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。 |
獲取第一段的偏移: var p = $("p:first"); |
| scrollTop( ) |
獲取匹配元素相對滾動條頂部的偏移。 此方法對可見和隱藏元素均有效。 |
獲取第一段相對滾動條頂部的偏移: var p = $("p:first"); |
| scrollTop( val ) |
傳遞參數(shù)值時(shí)，設(shè)置垂直滾動條頂部偏移為該值。 此方法對可見和隱藏元素均有效。 |
設(shè)定垂直滾動條值: |
| scrollLeft( ) |
獲取匹配元素相對滾動條左側(cè)的偏移。 此方法對可見和隱藏元素均有效。 |
獲取第一段相對滾動條左側(cè)的偏移: var p = $("p:first"); |
| scrollLeft( val ) |
傳遞參數(shù)值時(shí)，設(shè)置水平滾動條左側(cè)偏移為該值。 此方法對可見和隱藏元素均有效。 |
設(shè)置相對滾動條左側(cè)的偏移: |
八.總結(jié)
本篇文章主要講解如何使用jQuery操作元素的屬性和修改樣式. 請大家主要注意元素屬性和DOM屬性的區(qū)別. 下一篇文章將講解最重要的事件, 介紹如何綁定事件, 操作事件對象等.
作者：張子秋
出處：http://www.cnblogs.com/zhangziqiu/
相關(guān)文章
下面小編就為大家?guī)硪黄淮?.getJSON不執(zhí)行的簡單記錄。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
在一個(gè)對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會向這個(gè)對象的父級對象傳播，從里到外，直至它被處理,挺起來感覺這么不可思議，接下來為大家解除疑惑2012-12-12
淺談window.onbeforeunload() 事件調(diào)用ajax
下面小編就為大家?guī)硪黄獪\談window.onbeforeunload() 事件調(diào)用ajax。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jQuery實(shí)現(xiàn)導(dǎo)航回彈效果
本文主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航回彈效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法，需要的朋友可以參考一下2013-05-05
jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
jQuery學(xué)習(xí)筆記之jQuery的DOM操作
jQuery學(xué)習(xí)筆記之jQuery的DOM操作實(shí)現(xiàn)方法， 學(xué)習(xí)jquery與dom操作的朋友可以參考下。2010-12-12
這篇文章主要介紹了jQuery日程管理控件glDatePicker用法,結(jié)合具體實(shí)例形式分析了jQuery控件glDatePicker的簡單使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項(xiàng)卡
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)簽支持圖文排列帶上下箭頭按鈕的選項(xiàng)卡的特效，效果十分不錯(cuò)，而且非常實(shí)用，有需要的小伙伴參考下吧。2015-03-03
jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV功能
這篇文章主要介紹了jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV的相關(guān)資料,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-11-11