jQuery使用之標(biāo)記元素屬性用法實(shí)例
本文實(shí)例講述了jQuery使用之標(biāo)記元素屬性用法。分享給大家供大家參考。具體分析如下：
這里介紹jQuery的使用主要包括jQuery如何控制頁(yè)面，包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等。
標(biāo)記元素的屬性
html中每一個(gè)標(biāo)記都具有一些屬性，他們這個(gè)標(biāo)記在頁(yè)面中呈現(xiàn)各種狀態(tài)，例如下面的<a>標(biāo)記
該標(biāo)記<a>表示標(biāo)記的名稱(chēng)，為一個(gè)超鏈接，另外還有href titile target id等屬性表示這個(gè)超鏈接在頁(yè)面中的各種狀態(tài)。
本文從jQuery角度出發(fā)，進(jìn)一步講解頁(yè)面屬性控制方法。
1.each()遍歷元素
each(callback)方法主要用于對(duì)選擇器中的元素進(jìn)行遍歷，它接受一個(gè)函數(shù)作為參數(shù)，這個(gè)函數(shù)接受一個(gè)參數(shù)，指代元素的序號(hào)。對(duì)于標(biāo)記的屬性而言，可以利用each()方法配合this關(guān)鍵字來(lái)獲取或者設(shè)置選擇器中的每個(gè)元素對(duì)應(yīng)的屬性值。
使用each()方法遍歷所有元素。
$(function() {
$("p").each(function(index){
this.title = "這是第"+ (index+1) + "個(gè)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個(gè)P元素，首先利用$("p")獲取頁(yè)面中所有p元素集合，然后使用each()方法遍歷所有的圖片。通過(guò)this關(guān)鍵字對(duì)圖片進(jìn)行訪問(wèn)，獲取圖片的id,并設(shè)置圖片的id屬性。其中each()方法的函數(shù)index為元素所處的序號(hào)。
2.獲取屬性的值。attr(name)方法
除了在遍歷整個(gè)選擇器中的元素。很多時(shí)候需要得到某個(gè)對(duì)象的特點(diǎn)的值，在jQuery中可以通過(guò)attr(name)方法很輕松的實(shí)現(xiàn)這一點(diǎn)。該方法獲取元素集中第一個(gè)的屬性值。如果沒(méi)有匹配則返回unfefined.
$(function() {
var sTitle = $("p").attr("title");//獲取第一個(gè)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>
如果，想獲取第二個(gè)p的title屬性值，則可以通過(guò)位置選擇器來(lái)完成。
var sTitle = $("p:eq(1)").attr("title");//獲取第2個(gè)p元素的title屬性值
$("#display").text(sTitle);
});
3.設(shè)置屬性的值。attr(name,value)
attr()方法除了可以獲取元素的值外，還可以設(shè)置屬性的值，通用 的表達(dá)式為
例如：下面代碼將使頁(yè)面的超鏈接都在新窗口打開(kāi)。
$(function() {
$("a[href*=http]").attr("target","_blank");
});
</script>
例子：
function DisableBack() {
$("button:gt(0)").attr("disabled", "disabled");
}
</script>
<div>
<button onclick="DisableBack()">第一個(gè)Button</button>
<button>第二個(gè)Button</button>
<button>第三個(gè)Button</button>
</div>
通過(guò)位置選擇器，當(dāng)單擊第一個(gè)按鈕時(shí)，后面兩個(gè)按鈕同時(shí)被禁用。
很多時(shí)候，我們希望屬性的值能根據(jù)不同的元素有規(guī)律的變化。這個(gè)時(shí)候我們可以使用attr(name,fn),第二個(gè)參數(shù)為一個(gè)函數(shù)。該函數(shù)接受一個(gè)參數(shù)，為元素的序號(hào)，返回值為字符串。
$(function() {
$("div").attr("id", function(index) {
//將id設(shè)置為序號(hào)相關(guān)的參數(shù)
return "div-id" + index;
}).each(function() {
//找到每一項(xiàng)的span標(biāo)記
$(this).find("span").html("(id='" + this.id + "')");
});
});
</script>
<div>第0項(xiàng) <span></span>
</div>
<div>第1項(xiàng) <span></span>
</div>
<div>第2項(xiàng) <span></span>
</div>
返回內(nèi)容：
第1項(xiàng) (id='div-id1')
第2項(xiàng) (id='div-id2')
以上代碼通過(guò)attr(name,fn)將頁(yè)面中所有的<div>塊的id屬性值設(shè)置為序號(hào)相關(guān)的參數(shù)。并通過(guò)each()方法遍歷div塊，將id值顯示在各自的<span>標(biāo)記中。這可以看到j(luò)Query鏈的強(qiáng)大。
有的時(shí)候?qū)τ谀承┰?，希望同時(shí)設(shè)置它不同的屬性，如果采用上面的方法則需要一個(gè)個(gè)屬性設(shè)置。jQuery很人性化， attr()還提供一個(gè)列表設(shè)置attr(properties)方法?？梢栽O(shè)置多個(gè)屬性。
$(function() {
$("img").attr({
src: "06.jpg",
title: "名字1",
alt: "名字2"
});
});
</script>
<img>
<img>
<img>
<img>
<img>
執(zhí)行結(jié)果：
<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.刪除屬性
當(dāng)設(shè)置某個(gè)元素屬性的值時(shí)，可以通過(guò)removeAttr(name)方法將屬性值刪除。這時(shí)元素將恢復(fù)默認(rèn)的設(shè)置。例如下面的代碼使得所有按鈕均不被禁用。
$("button").removeAttr("disabled")
});
removeAttr(name)刪除屬性相當(dāng)于html標(biāo)記中不刪除該屬性。并不是取消了該標(biāo)記的這個(gè)特點(diǎn)。上述代碼運(yùn)行后，所有按鈕依然具有設(shè)置為禁用的能力。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果,結(jié)合具體實(shí)例形式詳細(xì)分析了FusionCharts插件繪制3D柱狀圖的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery.Uploadify插件實(shí)現(xiàn)帶進(jìn)度條的批量上傳功能
這篇文章主要介紹了jQuery.Uploadify插件實(shí)現(xiàn)帶進(jìn)度條的批量上傳功能,還具有取消上傳及刪除等功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
jquery如何改變html標(biāo)簽的樣式(兩種實(shí)現(xiàn)方法)
對(duì)于如何修飾html標(biāo)簽，這對(duì)于js來(lái)說(shuō)，可以通過(guò)setAttribute來(lái)設(shè)置標(biāo)簽的屬性，通過(guò)getAttribute來(lái)得到標(biāo)簽的屬性，而在jq中當(dāng)然也可以實(shí)現(xiàn)類(lèi)似的功能，方法上肯定比js要簡(jiǎn)化多了,接下來(lái)介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下2013-01-01
本文將結(jié)合實(shí)際,使用PHP讀取Mysql數(shù)據(jù)表中的數(shù)據(jù),并將獲取的數(shù)據(jù)按照要求輸出給前端JS,再通過(guò)配置調(diào)用Highcharts圖表庫(kù)生成餅狀圖。2015-05-05
利用jQuery設(shè)計(jì)一個(gè)簡(jiǎn)單的web音樂(lè)播放器的實(shí)例分享
這篇文章主要介紹了利用jQuery設(shè)計(jì)一個(gè)簡(jiǎn)單的web音樂(lè)播放器的實(shí)例分享,包括PHP后臺(tái)和從MySQL中讀取曲目等基本功能的實(shí)現(xiàn),需要的朋友可以參考下2016-03-03
jquery實(shí)現(xiàn)焦點(diǎn)圖片隨機(jī)切換效果的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)焦點(diǎn)圖片隨機(jī)切換效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了jQuery中的基本選擇器用法,文中分簡(jiǎn)單、進(jìn)階、高階三個(gè)部分來(lái)講解,十分詳細(xì),需要的朋友可以參考下2016-04-04
jQuery.holdReady()方法允許jQuery的完成事件被該函數(shù)鎖定，下面為大家介紹下其具體的使用2014-05-05
本文對(duì)AngularJS中的JSONP實(shí)例解析。需要的朋友可以參考下2016-12-12