1.1操做元素屬性和特性
提到DOM 元素,咱們能夠操做的最基本部分是指派到元素的屬性和特性。這些屬性和特性做爲解析頁面HML標記的結果,初始化時被指派到DOM元素,而且能夠在腳本控制下動態地修改。
爲了正確理解術語和概念,考慮如下圖像元素的HTML標記。
<img id="myImage" src="image.gif" alt="An image" class ="someclass" title="This is an image">
在這個元素標記裏,標籤名稱爲image,而標記id、src、alt、class和title表示原始的特性,每一個特性均由名稱和值所組成。瀏覽器讀取並解釋這個元素標記,建立在DOM裏表示這個元素的JavaScript對象。除存儲特性之外,這個對象還擁有多個屬性,包括一些表示標記特性值的屬性(甚至有一個屬性用於保持特性列表)。以下圖顯示這個過程的簡化歸納。
HTML 標記由瀏覽器解釋成爲表示圖像的DOM元素,建立節點列表對象NodeList(DOM定義的容器類型之一),而且指派給名爲attributes的元素屬性。特性和它的對應屬性(咱們稱它爲特性屬性(是指DOM 元素中可以和HTML元素中的某個特性對應得上的屬性))之間存在動態關聯。
1.1.1操做元素屬性
jQuery 沒有用於獲取或元素屬性的具體命令。可是咱們能夠利用原生JavaScript表示法,存取屬性和屬性值。
查看或修改包裝集組成元素的最簡便辦法是利用each()命令。該命令語法以下:
each(iterator):遍歷包裝集裏全部元素,爲各元素分別調用傳入的迭代器函數。
參數:一個函數,爲匹配集中的各元素分別調用一次,傳遞到函數的參數被設置爲包裝集裏當前元素的下標(從0開始),而當前元素可經過函數this屬性來訪問。
經過這個命令能夠輕鬆地把屬性值設置到匹配集裏的全部元素上。例如:
$('img').each(function (n){
this.alt='This is image ['+n+'] with an id of ' + this.id;
});
這個語句爲頁面上每一個圖像元素分別調用內聯函數,利用元素下標和id值修改元素alt屬性。請注意,由於這是特性屬性,而特性屬性與同名特性動態關聯,因此alt特性也被間接的更新。
相似地,能夠利用each()方法來將特定屬性的全部值收集到一個數組裏,以下所示:
var allAlts = new Array();
$('img').each(function (){
allAlts.push(this.alt);
});
若是隻想獲取單個元素的屬性值(請記住匹配集能夠當成JavaScript數組來處理),就能夠經過以下語句獲取屬性:
var altValue = $("#myImage")[0].alt;
與處理屬性相比,用JavaScript處理特性不是那麼直接,因此jQuery提供處理特性的輔助手段。
1.1.2獲取特性值
就像許多其餘jQuery命令那樣,attr()命令也能夠用來進行讀操做或者寫操做。相同的jQuery命令可以執行這樣迥異的操做,是由於傳給命令的參數的個數和類型決定了採用命令的那個重載變體(相似於Java中方法的重載)。
attr(name):獲取指派到包裝集裏第一個元素指定特性的值。
參數(字符串):特性的名稱,該特性的值將被獲取。
返回:包裝集裏第一個元素指定特性的值,若是包裝集爲空,或第一個元素沒有該特性,則返回undefined。
即便一般認爲特性是由HTML預約義的,可是對於經過JavaScript或HTML標記設置的自定義特性,也能夠利用attr()方法。例如:
<img id="myImage" src="image.gif" alt="An image" class="someclass"
title="This is an image" custom="some value">
請注意,咱們已經添加了自定義特性,並命名爲custom,以下語句能夠獲取custom的特性值,就像標準特性那樣:
$("#myImage").attr("custom");
警告:使用非標準的特性名稱雖然是常見手法,卻會致使標記被認爲是非法的——它會致使有效性測試失敗。這可能影響可存取行,還可能影響程序解析,由於那些程序期望你的網站是用有效的HTML或者XHTML編寫的。
在HTML裏,特性名稱是不區分大小寫的。無論特性在標記裏怎麼聲明,均可以存取或設置,經過利用任何大小寫變體,或任何其餘等效組合來完成。即便在XHTML標記裏特性名稱必須小寫,也依然能夠利用任何大小寫變體來獲取特性值。
jQuery的attr()命令不只僅是JavaScript的getAttribute()和setAttribute()方法的包裝。出容許存取元素特性集之外,jQuery 也容許存儲經常使用屬性。
規範化存取名稱以下表:
規範化名稱 |
源名稱 |
class |
className |
cssFloat |
ie用styleFloat,其餘瀏覽器用cssFloat(當和.css一塊兒使用時) |
float |
ie用styleFloat,其餘瀏覽器用cssFloat(當和.css一塊兒使用時) |
for |
htmlFor |
maxlength |
maxLength |
readonly |
readOnly |
styleFloat |
ie用styleFloat,其餘瀏覽器用cssFloat(當和.css一塊兒使用時) |
除了這些有用的快捷方式之外,用於寫操做的attr()重載變體還提供了便利的功能。
1.1.3設置特性值
用jQuery把特性值設置到包裝集元素上,有兩種辦法。極爲直接的辦法是:容許一次設置一個特性。語法以下:
attr(name,value):爲包裝集裏全部元素的name特性設置傳進來的值。
參數name(字符串):將被設置的特性的名稱。
參數value(字符串|對象|函數):指定特性的值。能夠是有返回值的任何JavaScript表達式,或是一個函數,
返回一個包裝集。
這個attr的重載方法,乍看起來也許以爲簡單,其實它的操做是至關複雜的。
attr的最基本的形式是,當value參數是任何有返回值(能夠是數組)的JavaScript表達式時,把表達式的已計算值設置爲特性值。
當value參數是一個函數引用時,事情變得更加有趣,在這種狀況下,爲包裝集各元素分別調用函數,把函數返回值做爲特性值。每次調用函數時,傳遞一個參數,表示元素在包裝集裏從0開始的下標。另外創建當前元素做爲this 變量,用於函數調用以便函數爲各個特定元素調整處理方式——這就是以這種方式來調用函數的主要力量所在。
考慮以下語句:
$('*').attr('title',function(index){
return 'I am element '+index +'and my name is '+
(this.id?this.id:'unset');
});
這個命令將做用於頁面上的全部元素,設置各個元素的title特性爲一個字符串,即由DOM中元素下標和各個特定元素id特性值所組成的字符串。
咱們會採用這個辦法來制定特性值,只要那個值依賴於元素其餘特性值,而不依賴於無關值。
用於寫操做的attr()第二個重載方法容許一次性指定多個特性。
attr(attributes):把已傳遞對象制定的特性和值設置到包裝集的全部元素上。
參數attributes:一個對象,對象屬性被做爲特性而複製到包裝集裏全部元素上。
這種格式是設置多個特性到包裝集裏全部元素的快速簡便的方式。傳遞的參數能夠是任何對象引用,但一般是對象字面量(能夠理解爲字面上的對象,格式爲{key1:value1,key2:value2.... })。以下:
$('input').attr({value:'',title:'Please enter a value'});
這個語句把全部<input>元素的value設置爲空字符串,同時把title設置爲字符串please enter a value。
請注意,若是傳遞進來的對象(做爲value的參數)的屬性值是一個函數的引用,則它的操做方式相似於前面的attr()格式——爲匹配集裏各元素分別調用函數。
警告 : ie瀏覽器不容許<input> 元素的name特性被修改,若是你想修改ie瀏覽器裏<input>元素的name特性,就必須用擁有目標名稱的新元素取代舊元素。
1.1.4刪除特性
爲了從DOM 元素中刪除特性,jQuery提供了removeattr()命令。語法以下:
removeattr(name):從每一個已匹配元素刪除指定的特性。
參數name(字符串):將要刪除的特性的名稱。
返回一個包裝集。
請注意,刪除一個特性不會從JavaScript DOM元素刪除任何對應的屬性,儘管可能致使屬性值的改變。例如,從一個元素刪除readonly特性,會致使元素readonly特性值從true變爲false,可是屬性自己不會從元素中刪除。
1.4.5特性帶來的快樂
假定咱們想要在新窗口裏打開網站上指向外部域名的全部連接。若是由咱們全盤掌握整個標記的話,這個任務就很是簡單,以下所示:
<a href="http://external.com" target="_blank">some External Site </a>
那固然好,但若是咱們運行CMS(Content Management System,內容管理系統)或維基網站,在那兒終端用戶可以添加內容,但不能添加target="_blank" 到全部外部連接。能夠利用jQuery技巧簡潔地完成任務,以下:
$("a[href^=http://]").attr("target","_blank");
另外一個jQuery特性操做功能的卓越用途是幫助解決web應用長期存在的問題:可惡的雙重提交問題。這是web應用的常見問題,因爲表單提交的延遲,有時幾秒鐘或更長,讓用戶有機會屢次點擊提交按鈕,從而致使服務器端代碼的種種麻煩。
爲了解決該問題,咱們綁定處理程序到表單的提交事件上,在按鈕第一次點擊提交以後禁止提交按鈕。經過這種方式,用戶就不會有機會屢次點擊提交按鈕,而且看見可見的指示「表單正在提交中...」。如今關注於attr()命令的使用:
$("form").submit(function(){
$(":submit",this).attr("disabled","disabled");
});
在事件處理程序內,用:submit 選擇器來獲取表單內的全部提交按鈕,並將disabled特性值修改成disabled。請注意,創建匹配集的時候咱們提供this的上下文值。
警告:以這種方式禁止提交按鈕,不會免除服務端代碼的責任——預防雙重提交或任何其餘類型的驗證問題。添加這種功能到客戶端代碼,可以提升界面對終端用戶的有好程度,而且幫助防止正常狀況下的雙重提交問題,可是防止不了攻擊或其餘黑客企圖,因此服務端代碼必須繼續保持警戒。