jQuery裡面的attr()方法實例詳解

這個是上個星期在公司的時候遇到的問題,都不知道在學校學的啥一直沒有弄清楚,趁著周末好好補補。

說說attr()這個方法吧。

這裡寫一段通用的代碼:

<body>
<p title="你最喜歡的水果是。">你最喜歡的水果是?</p>
<ul>
   <li title="蘋果汁">蘋果</li>
   <li title="橘子汁" value="123">橘子</li>
   <li title="菠蘿汁">菠蘿</li>
</ul>
<button>點擊按鈕看attr()方法的效果</button>
<h3></h3>
</body>

1、返回屬性的值:

語法:attr(屬性名) 
$(document).ready(function(){ 
$("button").click(function(){ 
var vatext= $("ul li:eq(1)").attr("value"); 
$("h3").text(vatext); 
}); 
}); 
這時h3標簽獲取瞭第二個li裡面value的值: 

這裡寫圖片描述

2、設置屬性和值:

語法:attr(屬性,屬性值) 
<script> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("ul li:eq(0)").attr("title","聖誕節要吃蘋果"); 
var vatext=$("ul li:eq(0)").attr("title"); 
$("h3").text(vatext); 
}); 
}); 
</script> 
這是第一個li的title屬性值變成瞭我們自己定義的內容: 

這裡寫圖片描述

3、使用函數設置屬性和值:

語法:attr(屬性,函數值) 
<script> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("ul li:eq(1)").attr("title",function(){ 
return this.value; 
}); 
var vatext=$("ul li:eq(1)").attr("title"); 
$("h3").text(vatext); 
}); 
}); 
</script> 

這裡寫圖片描述

4、設置多個屬性和值:

語法:attr(屬性:屬性值,屬性:屬性值…) 
其實感覺這個和第二個差不多的性質,隻是加瞭屬性和屬性值。 
<script> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("ul li:eq(1)").attr({title:"我想喝檸檬汁,不想喝橘子汁",value:"123長大瞭變成瞭321"}); 
var vatext1=$("ul li:eq(1)").attr("title"); 
var vatext2=$("ul li:eq(1)").attr("value"); 
$("p").text(vatext1); 
$("h3").text(vatext2); 
}); 
}); 
</script> 
原來p標簽和H3標簽的值都改變瞭: 

這裡寫圖片描述

溫馨提示:

刪除屬性用removeAttr()方法就可以瞭。

本來說講attr()方法和data()方法的,attr()講完就那麼多瞭,data()放在下一篇文章吧。

You May Also Like