jQuery中attr()方法用法实例
本文实例讲述了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程序设计有所帮助。
