標籤：
一. 操作"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"); |
四.擷取常用屬性
雖然我們可以通過擷取屬性,特性以及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 ) | 傳遞參數值時，設定垂直捲軸頂部位移為該值。 此方法對可見和隱藏元素均有效。 |
設定垂直捲軸值: |
| scrollLeft( ) | 擷取匹配元素相對捲軸左側的位移。 此方法對可見和隱藏元素均有效。 |
擷取第一段相對捲軸左側的位移: var p = $("p:first"); $("p:last").text( "scrollLeft:" + p.scrollLeft() ); |
| scrollLeft( val ) | 傳遞參數值時，設定水平捲軸左側位移為該值。 此方法對可見和隱藏元素均有效。 |
設定相對捲軸左側的位移: |
理解-----each(callback) callback是執行each之後再執行此方(callback)法函數
轉載：http://www.cnblogs.com/engine1984/archive/2012/02/28/2371488.html
jquery基礎 筆記三
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
