本文實例講述了jQuery中attr()方法用法。分享給大家供大家參考。具體分析如下：
此方法設置或返回匹配元素的屬性值。 attr()方法根據參數的不同，功能也不同。
語法結構一: 獲取第一個匹配元素指定屬性的屬性值。
代碼如下:
$(selector).attr(name)
參數列表:
| 參數 | 描述 |
| name | 定義要獲取其值的屬性名稱。 |
實例代碼:
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>attr()函數-腳本之家</title> <style type="text/css"> .font{ font-size:18px; color:yellow } .bg{ background:#336; } .second{ color:green } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ alert($("div").attr("class")); }) }) </script> </head> <body> <div class="font bg">我是第一個div</div> <div class="second">我是第二個div</div> <button id="btn">點擊查看效果</button> </body> </html>
以上代碼中，點擊按鈕可以彈出匹配元素集合中，第一個元素的class屬性值。
語法結構二: 為匹配元素指定的屬性設置屬性值。
代碼如下:
$(selector).attr(attribute,value)
參數列表:
| 參數 | 描述 |
| attribute | 定義要設置值的屬性名稱。 |
| value | 定義要設置的屬性值。 |
實例代碼:
代碼如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.jb51.net/" /> 6 <title>attr()函數-腳本之家</title> 7 <style type="text/css"> 8 div{ 9 width:200px; 10 height:200px; 11 border:1px solid blue 12 } 13 .font{ 14 font-size:18px; 15 color:yellow 16 } 17 .bg{ 18 background:#336; 19 } 20 .reset{ 21 color:green; 22 font-size:20px; 23 } 24 </style> 25 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 26 <script type="text/javascript"> 27 $(document).ready(function(){ 28 $("#btn").click(function(){ 29 $("div").attr("class","reset"); 30 }); 31 }) 32 </script> 33 </head> 34 <body> 35 <div class="font bg">腳本之家歡迎您</div> 36 <button id="btn">點擊查看效果</button> 37 </body> 38 </html>
以上代碼中， 當點擊按鈕的時候，能夠重新設置div元素的class屬性值。
語法結構三: 將“名/值”形式的對象設置為匹配元素的屬性。可以一次性設置多組“名/值”對，對匹配元素屬性進行設置。
代碼如下:
$(selector).attr(properties)
參數列表:
| 參數 | 描述 |
| attribute:value | 定義屬性名/值對 |
實例代碼:
代碼如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.jb51.net/" /> 6 <title>attr()函數-腳本之家</title> 7 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $("#btn").click(function(){ 11 $("td").attr({width:"200",height:"300"}); 12 }) 13 }) 14 </script> 15 </head> 16 <body> 17 <table border="1"> 18 <tr> 19 <td>歡迎來到腳本之家</td> 20 </tr> 21 </table> 22 <button id="btn">點擊查看效果</button> 23 </body> 24 </html>
以上代碼中，可以設置單元格的寬度和高度。
語法結構四:通過函數返回值設置屬性值。
代碼如下:
$(selector).attr(name,function(index,oldvalue))
參數列表:
| 參數 | 描述 |
| name | 定義要設置值的屬性的名稱。 |
| function(index,oldvalue) | 定義返回屬性值的函數 index - 可選，接受選擇器的索引位置。 class - 可選，接受選擇器的當前的屬性值。 |
實例代碼:
代碼如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <meta name="author" content="http://www.jb51.net/" /> 6 <title>attr()函數-腳本之家</title> 7 <style type="text/css"> 8 div{ 9 height:200px; 10 width:200px; 11 border:1px solid blue 12 } 13 .font{ 14 font-size:18px; 15 } 16 .bg{ 17 background:#336; 18 color:red; 19 } 20 .reset{ 21 font-size:20px; 22 color:green; 23 } 24 </style> 25 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 26 <script type="text/javascript"> 27 $(document).ready(function(){ 28 $("#btn").click(function(){ 29 $("div").attr("class" ,function(){ 30 return "reset" 31 }) 32 }) 33 }) 34 </script> 35 </head> 36 <body> 37 <div class="font bg">腳本之家歡迎您</div> 38 <button id="btn">點擊查看效果</button> 39 </body> 40 </html>
以上代碼中，同樣可以設置div的class屬性值，只是屬性值是以函數的返回值方式獲得的。
希望本文所述對大家的jQuery程序設計有所幫助。