欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery使用之標(biāo)記元素屬性用法實例

 更新時間：2015年01月19日 10:02:02   投稿：shichen2014  
這篇文章主要介紹了jQuery使用之標(biāo)記元素屬性用法,實例分析了jQuery如何控制頁面,包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下

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

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

標(biāo)記元素的屬性

html中每一個標(biāo)記都具有一些屬性，他們這個標(biāo)記在頁面中呈現(xiàn)各種狀態(tài)，例如下面的<a>標(biāo)記

復(fù)制代碼 代碼如下:
<a herf="http://www.baidu.com" title="isaac" target="_blank" id="linkisaac">

該標(biāo)記<a>表示標(biāo)記的名稱，為一個超鏈接，另外還有href titile target id等屬性表示這個超鏈接在頁面中的各種狀態(tài)。

本文從jQuery角度出發(fā)，進(jìn)一步講解頁面屬性控制方法。

1.each()遍歷元素

each(callback)方法主要用于對選擇器中的元素進(jìn)行遍歷，它接受一個函數(shù)作為參數(shù)，這個函數(shù)接受一個參數(shù)，指代元素的序號。對于標(biāo)記的屬性而言，可以利用each()方法配合this關(guān)鍵字來獲取或者設(shè)置選擇器中的每個元素對應(yīng)的屬性值。

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

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(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關(guān)鍵字對圖片進(jìn)行訪問，獲取圖片的id,并設(shè)置圖片的id屬性。其中each()方法的函數(shù)index為元素所處的序號。

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

除了在遍歷整個選擇器中的元素。很多時候需要得到某個對象的特點的值，在jQuery中可以通過attr(name)方法很輕松的實現(xiàn)這一點。該方法獲取元素集中第一個的屬性值。如果沒有匹配則返回unfefined.

復(fù)制代碼 代碼如下:
script type="text/javascript">
    $(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屬性值，則可以通過位置選擇器來完成。

復(fù)制代碼 代碼如下:
$(function() {
 var sTitle = $("p:eq(1)").attr("title");//獲取第2個p元素的title屬性值
 $("#display").text(sTitle);
});

3.設(shè)置屬性的值。attr(name,value)

attr()方法除了可以獲取元素的值外，還可以設(shè)置屬性的值，通用 的表達(dá)式為

復(fù)制代碼 代碼如下:
attr(name,value)

例如：下面代碼將使頁面的超鏈接都在新窗口打開。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
    $("a[href*=http]").attr("target","_blank");
    });
</script>

例子：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
    function DisableBack() {
 $("button:gt(0)").attr("disabled", "disabled");
    }
</script>
<div>
    <button onclick="DisableBack()">第一個Button</button>&nbsp;
    <button>第二個Button</button>&nbsp;
    <button>第三個Button</button>&nbsp;
</div>

通過位置選擇器，當(dāng)單擊第一個按鈕時，后面兩個按鈕同時被禁用。

很多時候，我們希望屬性的值能根據(jù)不同的元素有規(guī)律的變化。這個時候我們可以使用attr(name,fn),第二個參數(shù)為一個函數(shù)。該函數(shù)接受一個參數(shù)，為元素的序號，返回值為字符串。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
 $("div").attr("id", function(index) {
     //將id設(shè)置為序號相關(guān)的參數(shù)
     return "div-id" + index;
 }).each(function() {
     //找到每一項的span標(biāo)記
     $(this).find("span").html("(id='" + this.id + "')");
 });
    });
</script>
<div>第0項 <span></span>
</div>
<div>第1項 <span></span>
</div>
<div>第2項 <span></span>
</div>

返回內(nèi)容：

復(fù)制代碼 代碼如下:
第0項 (id='div-id0')
第1項 (id='div-id1')
第2項 (id='div-id2')

以上代碼通過attr(name,fn)將頁面中所有的<div>塊的id屬性值設(shè)置為序號相關(guān)的參數(shù)。并通過each()方法遍歷div塊，將id值顯示在各自的<span>標(biāo)記中。這可以看到j(luò)Query鏈的強(qiáng)大。

有的時候?qū)τ谀承┰?，希望同時設(shè)置它不同的屬性，如果采用上面的方法則需要一個個屬性設(shè)置。jQuery很人性化， attr()還提供一個列表設(shè)置attr(properties)方法。可以設(shè)置多個屬性。

復(fù)制代碼 代碼如下:
<script type="text/javascript">
    $(function() {
 $("img").attr({
     src: "06.jpg",
     title: "名字1",
     alt: "名字2"
 });
    });
</script>
<img>
<img>
<img>
<img>
<img>

執(zhí)行結(jié)果：

復(fù)制代碼 代碼如下:
<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">
<img src="06.jpg" title="名字1" alt="名字2">

4.刪除屬性

當(dāng)設(shè)置某個元素屬性的值時，可以通過removeAttr(name)方法將屬性值刪除。這時元素將恢復(fù)默認(rèn)的設(shè)置。例如下面的代碼使得所有按鈕均不被禁用。

復(fù)制代碼 代碼如下:
$(function() {
 $("button").removeAttr("disabled")
});

removeAttr(name)刪除屬性相當(dāng)于html標(biāo)記中不刪除該屬性。并不是取消了該標(biāo)記的這個特點。上述代碼運行后，所有按鈕依然具有設(shè)置為禁用的能力。

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

相關(guān)文章

最新評論