從零開始學習jQuery (四) 使用jQuery操做元素的屬性與樣式

本系列文章導航

 

從零開始學習jQuery (四) 使用jQuery操做元素的屬性與樣式

 

一.摘要

本篇文章講解如何使用jQuery獲取和操做元素的屬性和CSS樣式. 其中DOM屬性和元素屬性的區分值得你們學習.

 

二.前言

經過前面幾章咱們已經可以徹底控制jQuery包裝集了,  不管是經過選擇器選取對象, 或者從包裝集中刪除,過濾元素. 本章將講解如何使用jQuery獲取和修改元素屬性和樣式.

 

三. 區分DOM屬性和元素屬性

一個img標籤:

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

 

一般開發人員習慣將id, src, alt等叫作這個元素的"屬性". 我將其稱爲"元素屬性". 可是在解析成DOM對象時, 實際瀏覽器最後會將標籤元素解析成"DOM對象", 而且將元素的"元素屬性"存儲爲"DOM屬性". 二者是有區別的. 
雖然咱們設置了元素的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>

因此若是要設置元素的CSS樣式類, 要使用的是"DOM屬性"className"而不是"元素屬性"class:

img1.className = "classB";

 

四. 操做"DOM屬性"

在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開始.

 

五. 操做"元素屬性"

咱們可使用javascript中的getAttribute和setAttribute來操做元素的"元素屬性".

在jQuery中給你提供了attr()包裝集函數, 可以同時操做包裝集中全部元素的屬性:

名稱	說明	舉例
attr( name )	取得第一個匹配元素的屬性值。經過這個方法能夠方便地從第一個匹配元素中獲取一個屬性的值。若是元素沒有相應屬性，則返回 undefined 。	返回文檔中第一個圖像的src屬性值:  $("img").attr("src");
attr( properties )	將一個「名/值」形式的對象設置爲全部匹配元素的屬性。 這是一種在全部匹配元素中批量設置不少屬性的最佳方式。 注意，若是你要設置對象的class屬性，你必須使用'className' 做爲屬性名。或者你能夠直接使用.addClass( class ) 和 .removeClass( class ).	爲全部圖像設置src和alt屬性:  $("img").attr({ src: "test.jpg", alt: "Test Image" });
attr( key, value )	爲全部匹配的元素設置一個屬性值。	爲全部圖像設置src屬性:  $("img").attr("src","test.jpg");
attr( key, fn )	爲全部匹配的元素設置一個計算的屬性值。 不提供值，而是提供一個函數，由這個函數計算的值做爲屬性值。	把src屬性的值設置爲title屬性的值:  $("img").attr("title", function() { return this.src });
removeAttr( name )	從每個匹配的元素中刪除一個屬性	將文檔中圖像的src屬性刪除:  $("img").removeAttr("src");

 

當使用id選擇器時經常返回只有一個對象的jQuery包裝集, 這個時侯常使用attr(name)函數得到它的元素屬性:

function testAttr1(event) { alert($("#hibiscus").attr("class")); }

注意attr(name)函數只返回第一個匹配元素的特定元素屬性值. 而attr(key, name)會設置全部包裝集中的元素屬性:

//修改全部img元素的alt屬性
$("img").attr("alt", "修改後的alt屬性");

而 attr( properties ) 能夠一次修改多個元素屬性:

$("img").attr({title:"修改後的title", alt: "同時修改alt屬性"});

另外雖然咱們可使用 removeAttr( name ) 刪除元素屬性, 可是對應的DOM屬性是不會被刪除的, 只會影響DOM屬性的值.

好比將一個input元素的readonly元素屬性去掉,會致使對應的DOM屬性變成false(即input變成可編輯狀態):

$("#inputTest").removeAttr("readonly");

 

六,修改CSS樣式

修改元素的樣式, 咱們能夠修改元素CSS類或者直接修改元素的樣式.

一個元素能夠應用多個css類, 可是不幸的是在DOM屬性中是用一個以空格分割的字符串存儲的, 而不是數組. 因此若是在原始javascript時代咱們想對元素添加或者刪除多個屬性時, 都要本身操做字符串.

jQuery讓這一切變得異常簡單. 咱們不再用作那些無聊的工做了.

1. 修改CSS類

下表是修改CSS類相關的jQuery方法:

名稱	說明	實例
addClass( classes )	爲每一個匹配的元素添加指定的類名。	爲匹配的元素加上 'selected' 類:  $("p").addClass("selected");
hasClass( class )	判斷包裝集中是否至少有一個元素應用了指定的CSS類	$("p").hasClass("selected");
removeClass( [classes] )	從全部匹配的元素中刪除所有或者指定的類。	從匹配的元素中刪除 'selected' 類:  $("p").removeClass("selected");
toggleClass( class )	若是存在（不存在）就刪除（添加）一個類。	爲匹配的元素切換 'selected' 類:  $("p").toggleClass("selected");
toggleClass( class, switch )	當switch是true時添加類,  當switch是false時刪除類	每三次點擊切換高亮樣式:  var count = 0;  $("p").click(function(){    $(this).toggleClass("highlight", count++ % 3 == 0);  });

 

使用上面的方法, 咱們能夠將元素的CSS類像集合同樣修改, 不再必手工解析字符串.

注意  addClass( class ) 和removeClass( [classes] ) 的參數能夠一次傳入多個css類, 用空格分割,好比:

$("#btnAdd").bind("click", function(event) { $("p").addClass("colorRed borderBlue"); });

removeClass方法的參數可選, 若是不傳入參數則移除所有CSS類:

 $("p").removeClass()

 

2. 修改CSS樣式

一樣當咱們想要修改元素的具體某一個CSS樣式,即修改元素屬性"style"時,  jQuery也提供了相應的方法:

名稱	說明	實例
css( name )	訪問第一個匹配元素的樣式屬性。	取得第一個段落的color樣式屬性的值:  $("p").css("color");
css( properties )	把一個「名/值對」對象設置爲全部匹配元素的樣式屬性。 這是一種在全部匹配的元素上設置大量樣式屬性的最佳方式。	將全部段落的字體顏色設爲紅色而且背景爲藍色:  $("p").css({ color: "#ff0011", background: "blue" });
css( name, value )	在全部匹配的元素中，設置一個樣式屬性的值。 數字將自動轉化爲像素值	將全部段落字體設爲紅色:  $("p").css("color","red");

 

七.獲取經常使用屬性

雖然咱們能夠經過獲取屬性,特性以及CSS樣式來取得元素的幾乎全部信息,  可是注意下面的實驗:

<!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()); //正確的數值1264 alert("style.width:" + $("#testDiv")[0].style.width ); //空值 }) </script> </head> <body> <div id="testDiv"> 測試文本</div> </body> </html>

咱們但願獲取測試圖層的寬度,  使用attr方法獲取"元素特性"爲undifined, 由於並無爲div添加width. 而使用css()方法雖然能夠獲取到style屬性的值, 可是在不一樣瀏覽器裏返回的結果不一樣, IE6下返回auto, 而FF下雖然返回了正確的數值可是後面帶有"px". 因此jQuery提供了width()方法, 此方法返回的是正確的不帶px的數值.

針對上面的問題, jQuery爲經常使用的屬性提供了獲取和設置的方法, 好比width()用戶獲取元素的寬度, 而 width(val)用來設置元素寬度.

下面這些方法能夠用來獲取元素的經常使用屬性值:

1.寬和高相關 Height and Width

名稱	說明	舉例
height( )	取得第一個匹配元素當前計算的高度值（px）。	獲取第一段的高:  $("p").height();
height( val )	爲每一個匹配的元素設置CSS高度(hidth)屬性的值。若是沒有明確指定單位（如：em或%），使用px。	把全部段落的高設爲 20:  $("p").height(20);
width( )	取得第一個匹配元素當前計算的寬度值（px）。	獲取第一段的寬:  $("p").width();
width( val )	爲每一個匹配的元素設置CSS寬度(width)屬性的值。 若是沒有明確指定單位（如：em或%），使用px。	將全部段落的寬設爲 20:  $("p").width(20);
innerHeight( )	獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。  此方法對可見和隱藏元素均有效。	見最後示例
innerWidth( )	獲取第一個匹配元素內部區域寬度（包括補白、不包括邊框）。  此方法對可見和隱藏元素均有效。	見最後示例
outerHeight( [margin] )	獲取第一個匹配元素外部高度（默認包括補白和邊框）。  此方法對可見和隱藏元素均有效。	見最後示例
outerWidth( [margin] )	獲取第一個匹配元素外部寬度（默認包括補白和邊框）。  此方法對可見和隱藏元素均有效。	見最後示例

 

關於在獲取長寬的函數中, 要區別"inner", "outer"和height/width這三種函數的區別:

outerWith能夠接受一個bool值參數表示是否計算margin值.

相信此圖一目瞭然各個函數所索取的範圍. 圖片以width爲例說明的, height的各個函數同理.  

2.位置相關 Positioning

另外在一些設計套彈出對象的腳本中,經常須要動態獲取彈出座標而且設置元素的位置.

可是不少的計算位置的方法存在着瀏覽器兼容性問題,  jQuery中爲咱們提供了位置相關的各個函數:

名稱	說明	舉例
offset( )	獲取匹配元素在當前窗口的相對偏移。 返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。	獲取第二段的偏移:  var p = $("p:last");  var offset = p.offset();  p.html( "left: " + offset.left + ", top: " + offset.top );
position( )	獲取匹配元素相對父元素的偏移。 返回的對象包含兩個整形屬性：top 和 left。爲精確計算結果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。	獲取第一段的偏移:  var p = $("p:first");  var position = p.position();  $("p:last").html( "left: " + position.left + ", top: " + position.top );
scrollTop( )	獲取匹配元素相對滾動條頂部的偏移。 此方法對可見和隱藏元素均有效。	獲取第一段相對滾動條頂部的偏移:  var p = $("p:first");  $("p:last").text( "scrollTop:" + p.scrollTop() );
scrollTop( val )	傳遞參數值時，設置垂直滾動條頂部偏移爲該值。 此方法對可見和隱藏元素均有效。	設定垂直滾動條值:  $("div.demo").scrollTop(300);
scrollLeft( )	獲取匹配元素相對滾動條左側的偏移。 此方法對可見和隱藏元素均有效。	獲取第一段相對滾動條左側的偏移:  var p = $("p:first");  $("p:last").text( "scrollLeft:" + p.scrollLeft() );
scrollLeft( val )	傳遞參數值時，設置水平滾動條左側偏移爲該值。 此方法對可見和隱藏元素均有效。	設置相對滾動條左側的偏移:  $("div.demo").scrollLeft(300);

 

八.總結

本篇文章主要講解如何使用jQuery操做元素的屬性和修改樣式. 請你們主要注意元素屬性和DOM屬性的區別. 下一篇文章將講解最重要的事件, 介紹如何綁定事件, 操做事件對象等.