jQuery使用之標記元素屬性用法實例_jquery

本文實例講述了jQuery使用之標記元素屬性用法。分享給大家供大家參考。具體分析如下：

這裡介紹jQuery的使用主要包括jQuery如何控制頁面，包含元素的屬性、css樣式風格、DOM模型、表單元素和事件處理等。

標記元素的屬性

html中每個標記都有一些屬性，他們這個標記在頁面中呈現各種狀態，例如下面的標記

複製程式碼 程式碼如下:

該標記表示標記的名稱，為一個超鏈接，另外還有href titile target id等屬性表示這個超鏈接在頁面中的各種狀態。

本文從jQuery角度出發，進一步說明頁面屬性控制方法。

1.each()遍歷元素

each(callback)方法主要用於對選擇器中的元素進行遍歷，它接受一個函數作為參數，這個函數接受一個參數，指元素的序號。對於標記的屬性而言，可以利用each()方法來配合this關鍵字來取得或設定選擇器中的每個元素對應的屬性值。

使用each()方法遍歷所有元素。

複製程式碼 程式碼如下:

   

第一段

   

第二段

   

第二段

   

第二段

   

第二段

   

第二段

   

第二段

以上程式碼中有7個P元素，首先利用$("p")取得頁面中所有p元素集合，然後使用each()方法遍歷所有的圖片。透過this關鍵字對圖片進行訪問，取得圖片的id,並設定圖片的id屬性。其中each()方法的函數index為元素所處的序號。

2.取得屬性的值。 attr(name)方法

除了遍歷整個選擇器中的元素。很多時候需要得到某個物件的特點的值，在jQuery中可以透過attr(name)方法很輕鬆的實現這一點。此方法取得元素集中第一個的屬性值。如果沒有符合則回傳unfefined.

複製程式碼 程式碼如下:

script type="text/javascript">
    $(function() {
 var sTitle = $("p").attr("title");//取得第一個p元素的title屬性值
 $("#display").text(sTitle);
    });

   

第一段

   

第二段

   

第二段

   

第二段

   

第二段

   

第二段

   

第二段

   

如果，想取得第二個p的title屬性值，則可以透過位置選擇器來完成。

複製程式碼 程式碼如下:

$(function() {
 var sTitle = $("p:eq(1)").attr("title");//取得第2個p元素的title屬性值
 $("#display").text(sTitle);
});

3.設定屬性的值。 attr(name,value)

attr()方法除了可以取得元素的值外，還可以設定屬性的值，通用 的表達式為

複製程式碼 程式碼如下:

attr(name,value)

例如：下面程式碼將使頁面的超連結都在新視窗中開啟。

複製程式碼 程式碼如下:

例：

複製程式碼 程式碼如下:

    第一個Button 
    第二個Button 
    第三個Button 

透過位置選擇器，當點擊第一個按鈕時，後面兩個按鈕同時被停用。

很多時候，我們希望屬性的值能依照不同的元素有規律的變化。這時候我們可以用attr(name,fn),第二個參數為一個函數。函數接受一個參數，為元素的序號，傳回值為字串。

複製程式碼 程式碼如下:

第0項

第1項

第2項

返回內容：

複製程式碼 程式碼如下:

第0項 (id='div-id0')
第1項 (id='div-id1')
第2項 (id='div-id2')

以上程式碼透過attr(name,fn)將頁面中所有的

區塊的id屬性值設定為序號相關的參數。並透過each()方法遍歷div塊，將id值顯示在各自的標記中。這可以看到jQuery鏈的強大。

有的時候對於某些元素，希望同時設定它不同的屬性，如果採用上面的方法則需要一個個屬性設定。 jQuery很人性化， attr()也提供一個列表設定attr(properties)方法。可以設定多個屬性。

複製程式碼 程式碼如下:

執行結果：

複製程式碼 程式碼如下:

4.刪除屬性

當設定某個元素屬性的值時，可以透過removeAttr(name)方法將屬性值刪除。這時元素將恢復預設的設定。例如下面的程式碼使得所有按鈕都不會被停用。

複製程式碼 程式碼如下:

$(function() {
 $("button").removeAttr("disabled")
});

removeAttr(name)刪除屬性相當於html標記中不刪除該屬性。並不是取消了該標記的這個特點。上述程式碼運行後，所有按鈕依然具有設定為停用的能力。

希望本文所述對大家的jQuery程式設計有所幫助。