jQuery使用之標記元素屬性用法實例
本文實例講述了jQuery使用之標記元素屬性用法。分享給大家供大家參考。具體分析如下：
這里介紹jQuery的使用主要包括jQuery如何控制頁面，包含元素的屬性、css樣式風格、DOM模型、表單元素和事件處理等。
標記元素的屬性
html中每一個標記都具有一些屬性，他們這個標記在頁面中呈現各種狀態(tài)，例如下面的<a>標記
該標記<a>表示標記的名稱，為一個超鏈接，另外還有href titile target id等屬性表示這個超鏈接在頁面中的各種狀態(tài)。
本文從jQuery角度出發(fā)，進一步講解頁面屬性控制方法。
1.each()遍歷元素
each(callback)方法主要用于對選擇器中的元素進行遍歷，它接受一個函數作為參數，這個函數接受一個參數，指代元素的序號。對于標記的屬性而言，可以利用each()方法配合this關鍵字來獲取或者設置選擇器中的每個元素對應的屬性值。
使用each()方法遍歷所有元素。
$(function() {
$("p").each(function(index){
this.title = "這是第"+ (index+1) + "個P，id是："+ this.id;
});
});
</script>
<div>
<p id="001">第一段</p>
<p id="002">第二段</p>
<p id="003">第二段</p>
<p id="004">第二段</p>
<p id="005">第二段</p>
<p id="006">第二段</p>
<p id="007">第二段</p>
</div>
以上代碼中有7個P元素，首先利用$("p")獲取頁面中所有p元素集合，然后使用each()方法遍歷所有的圖片。通過this關鍵字對圖片進行訪問，獲取圖片的id,并設置圖片的id屬性。其中each()方法的函數index為元素所處的序號。
2.獲取屬性的值。attr(name)方法
除了在遍歷整個選擇器中的元素。很多時候需要得到某個對象的特點的值，在jQuery中可以通過attr(name)方法很輕松的實現這一點。該方法獲取元素集中第一個的屬性值。如果沒有匹配則返回unfefined.
$(function() {
var sTitle = $("p").attr("title");//獲取第一個p元素的title屬性值
$("#display").text(sTitle);
});
</script>
<div>
<p id="001" title="isaac,hobby">第一段</p>
<p id="002" title="isaac,hobby">第二段</p>
<p id="003">第二段</p>
<p id="004">第二段</p>
<p id="005">第二段</p>
<p id="006">第二段</p>
<p id="007">第二段</p>
<span id="display"></span>
</div>
如果，想獲取第二個p的title屬性值，則可以通過位置選擇器來完成。
var sTitle = $("p:eq(1)").attr("title");//獲取第2個p元素的title屬性值
$("#display").text(sTitle);
});
3.設置屬性的值。attr(name,value)
attr()方法除了可以獲取元素的值外，還可以設置屬性的值，通用 的表達式為
例如：下面代碼將使頁面的超鏈接都在新窗口打開。
$(function() {
$("a[href*=http]").attr("target","_blank");
});
</script>
例子：
function DisableBack() {
$("button:gt(0)").attr("disabled", "disabled");
}
</script>
<div>
<button onclick="DisableBack()">第一個Button</button>
<button>第二個Button</button>
<button>第三個Button</button>
</div>
通過位置選擇器，當單擊第一個按鈕時，后面兩個按鈕同時被禁用。
很多時候，我們希望屬性的值能根據不同的元素有規(guī)律的變化。這個時候我們可以使用attr(name,fn),第二個參數為一個函數。該函數接受一個參數，為元素的序號，返回值為字符串。
$(function() {
$("div").attr("id", function(index) {
//將id設置為序號相關的參數
return "div-id" + index;
}).each(function() {
//找到每一項的span標記
$(this).find("span").html("(id='" + this.id + "')");
});
});
</script>
<div>第0項 <span></span>
</div>
<div>第1項 <span></span>
</div>
<div>第2項 <span></span>
</div>
返回內容：
第1項 (id='div-id1')
第2項 (id='div-id2')
以上代碼通過attr(name,fn)將頁面中所有的<div>塊的id屬性值設置為序號相關的參數。并通過each()方法遍歷div塊，將id值顯示在各自的<span>標記中。這可以看到jQuery鏈的強大。
有的時候對于某些元素，希望同時設置它不同的屬性，如果采用上面的方法則需要一個個屬性設置。jQuery很人性化， attr()還提供一個列表設置attr(properties)方法?？梢栽O置多個屬性。
$(function() {
$("img").attr({
src: "06.jpg",
title: "名字1",
alt: "名字2"
});
});
</script>
<img>
<img>
<img>
<img>
<img>
執(zhí)行結果：
<img src="06.jpg" title="名字1" alt="名字2">
<img src="06.jpg" title="名字1" alt="名字2">
<img src="06.jpg" title="名字1" alt="名字2">
<img src="06.jpg" title="名字1" alt="名字2">
4.刪除屬性
當設置某個元素屬性的值時，可以通過removeAttr(name)方法將屬性值刪除。這時元素將恢復默認的設置。例如下面的代碼使得所有按鈕均不被禁用。
$("button").removeAttr("disabled")
});
removeAttr(name)刪除屬性相當于html標記中不刪除該屬性。并不是取消了該標記的這個特點。上述代碼運行后，所有按鈕依然具有設置為禁用的能力。
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
Ajax分頁插件Pagination從前臺jQuery到后端java總結
這篇文章主要從前臺jQuery到后java端總結了Ajax分頁插件Pagination的使用方法和技巧，感興趣的小伙伴們可以參考一下2016-07-07
jquery 實時監(jiān)聽輸入框值變化的完美方法(必看)
下面小編就為大家?guī)硪黄猨query 實時監(jiān)聽輸入框值變化的完美方法(必看)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
本文給大家分享一段jquery代碼實現手指滑動輪播效果，代碼簡單易懂，非常不錯，需要的朋友參考下2016-12-12
jQuery UI Dialog 創(chuàng)建友好的彈出對話框實現代碼
jQuery UI Dialog是jQuery UI的彈出對話框組件，使用它可以創(chuàng)建各種美觀的彈出對話框；它可以設置對話框的標題、內容，并且使對話框可以拖動、調整大小、及關閉；平常主要用來替代瀏覽囂自帶的alert、confirm、open等方法2012-04-04
這篇文章主要介紹了Jquery對select的增、刪、改、查操作的方法,需要的朋友可以參考下2015-02-02
普通JS寫法與jQuery選擇器寫法,選擇table的行，隔一行，選擇一行，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
這篇文章主要為大家詳細介紹了jquery自定義放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery實現base64前臺加密解密功能,結合實例形式分析了jquery.base64.js實現前臺base64加密與解密功能的實現方法,并給出了java實現后臺base64加密解密的操作示例對比驗證加密效果,需要的朋友可以參考下2017-08-08
很多網站的首頁都有廣告輪播，今天閑來看了一網站的首頁廣告輪播方式，是通過 jQuery的blockSlide插件實現的，然后自己測試了一下，很好。2010-11-11
這篇文章主要介紹了通過jQuery.extend的源碼分析了一下JQuery中的extend方法實現原理以及使用方式，非常的詳細，這里推薦給大家，有需要的小伙伴來參考下吧。2015-02-02