jQuery入門（2）使用jQuery操作元素的屬性與樣式

標籤：

jQuery入門（1）jQuery中萬能的選取器

jQuery入門（2）使用jQuery操作元素的屬性與樣式

jQuery入門（3）事件與事件對象

jQuery入門（4）jQuery中的Ajax()應用

 

 

一、區分DOM屬性和元素屬性

對於下面這樣一個標籤元素：

<img id=‘img‘ src="images/image.1.jpg" alt=‘1‘ class="imgs"></img>

我們通常將id、src、alt、class稱為屬性，也即元素屬性。但是，當瀏覽器對標籤元素進行解析時，會將元素解析為Dom對象，相應的，元素屬性也就解析為Dom屬性，兩者是有區別的。

元素屬性 和 Dom屬性 只是在我們對其進行不同解析時的不同稱呼。

值得注意的是：

1.元素被解析成Dom時，元素屬性和Dom屬性並不一定是原來的名稱；

例如，img的class屬性，在表現為元素屬性時是class；在表現為Dom屬性時，屬性名稱為className。

2.雖然我們設定了元素的src是相對路徑：images/image.1.jpg，但是在“DOM屬性”中都會轉換成絕對路徑：

http://localhost/images/image.1.jpg。

3.在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 )	為所有匹配的元素設定一個計算的屬性值。不提供值，而是提供一個函數，由這個Function Compute的值作為屬性值。	把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");

注意：

對於樣式值為數位程式碼範例及結果：

樣本	產生的源碼
$("input").css("border-width","5");	<input style="BORDER-RIGHT-WIDTH: 5px; BORDER-TOP-WIDTH: 5px; BORDER-BOTTOM-WIDTH: 5px; BORDER-LEFT-WIDTH: 5px" id="txt1" />

五、擷取常用屬性

雖然我們可以通過擷取屬性，特性以及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.位置相關 Position

另外在一些設計套彈出對象的指令碼中，常常需要動態擷取彈出座標並且設定元素的位置。

但是很多的計算位置的方法存在著瀏覽器安全色性問題， jQuery中為我們提供了位置相關的各個函數：

名稱	說明	舉例
offset( )	擷取匹配元素在當前（document）文檔的相對位移。返回的對象包含兩個整形屬性：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);

【補充】：

offsetParent( ) ：獲得最近的被定位的祖先元素。（注意，當前元素不一定是定位元素）

詳細說明

如果給定一個表示 DOM 元素集合的 jQuery 對象，.offsetParent() 方法允許我們搜尋 DOM 樹中元素的祖先，並構造一個由最近的定位祖先元素包圍的 jQuery 對象。定位元素指的是，元素的 CSS position 屬性設定為 relative、absolute 或 fixed。在為表演動畫計算位移或在頁面上放置對象時，該資訊會很有用處。

請思考帶有基本嵌套列表的頁面，其中帶有定位元素：

<ul>  <li>I</li>  <li style="position: relative;">II    <ul>      <li>A</li>      <li>B        <ul>          <li>1</li>          <li>2</li>          <li>3</li>        </ul>      </li>      <li>C</li>    </ul>  </li>  <li>III</li></ul>

  如果我們從項目 A 開始，我們可以找到其定位祖先元素：

$(‘li.item-a‘).offsetParent().css(‘background-color‘, ‘red‘);

這會改變被定位的項目 II 的背景色。

參考：

http://www.w3school.com.cn/jquery/jquery_ref_css.asp  

 

延伸閱讀：

JavaScript如何擷取/計算頁面元素的offset？

關於jQuery中的offset()和position()的用法      

jQuery入門（2）使用jQuery操作元素的屬性與樣式