jQuery属性-attr()方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery属性-attr()方法相关的知识，希望对你有一定的参考价值。
定义和用法
attr() 方法设置或返回被选元素的属性值。根据选择 attr()方法 不同的参数，工作方式也会有点差异。
返回属性值-返回被选元素的属性值。
语法
$(selector).attr(attribute)
| 参数 | 描述 |
| selector | 被选元素 |
| attribute | 规定要获取被选元素(selector)的属性 |
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>learning notes</title> <script src="js/jquery.min.js"></script> </head> <style> body { color: #FFF; } </style> <body> <a href="http://www.cnblogs.com/">博客园</a> <button type="button">attr</button> <script> $(function(){ $(‘button‘).click(function(){ alert($("a").attr("href")); }); }); </script> </body> </html>
a元素为被选元素，被选属性为 href 属性，所以最终输出为a元素的 href 属性 http://www.cnblogs.com/
设置属性/值-设置被选元素的属性和值。
语法
$(selector).attr(attribute,value)
| 参数 | 描述 |
| attribute | 规定被选元素(selector)属性的名称 |
| value | 规定被选元素(selector)属性的值 |
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>learning notes</title> <script src="js/jquery.min.js"></script> </head> <style> body{ color: #FFF; } </style> <body> <a href="http://www.cnblogs.com/">博客园</a> <button type="button">attr</button> <script> $(function(){ $(‘button‘).click(function(){ $("a").attr("href","http://www.cnblogs.com/kay-refresh/p/5911193.html"); alert("A标签href属性已经改变") }); }); </script> </body> </html>
a元素 为被选元素，被选属性为 href 属性，点击按钮，a元素 执行 attr() 方法，将 a元素 得 href 属性改为 http://www.cnblogs.com/kay-refresh/p/5911193.html
使用函数来设置属性/值-设置被选元素的属性和值。
语法
$(selector).attr(attribute,function(index,oldvalue))
| 参数 | 描述 |
| attribute | 规定被选元素(selector)属性的名称 |
| function(index,oldvalue) |
规定返回属性值的函数。 该函数可接收并使用选择器的 index 值和当前属性值。 |
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>learning notes</title> <script src="js/jquery.min.js"></script> </head> <style> body { color: #FFF; } img{ box-shadow: 0 0 2px #7ca02a; } </style> <body> <button type="button">attr</button> <br /> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" alt=""> <br /> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" alt=""> <script> $(function(){ $(‘button‘).click(function(){ $("img").attr("width",function(i,o){ return o - (i+10); }); }); }); </script> </body> </html>
img元素 为被选元素，被选属性为 width ，点击按钮，获取 img元素 得 width 的值，然后通过函数获取 img元素得 index 值 和 oldvalue 值并返回值。
注：被选元素中需设置属性才能进行修改，例子中的 img元素，需包含了 width 属性 ， attr() 方法才能有效使用。
设置多个属性/值对-为被选元素设置一个以上的属性和值。
语法
$(selector).attr({attribute:value, attribute:value ...})
| 参数 | 描述 |
| attribute:value | 规定一个或多个属性/值对。 |
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>learning notes</title> <script src="js/jquery.min.js"></script> </head> <style> body{ color: #FFF; } img{ box-shadow: 0 0 2px #7ca02a; } </style> <body> <button type="button">attr</button> <br /> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" width="270" height="129" alt=""> <script> $(function(){ $(‘button‘).click(function(){ $("img").attr({width:"100",height:"100"}); }); }); </script> </body> </html>
注：一次规定多个属性时，需要添加 {} 括号。如: attr({width:"100",height:"100"})
以上是 attr() 方法常用的四种使用方法。由于可能语言组织不好，所以可能个别地方会有语言错误。
未完待续！
以上是关于jQuery属性-attr()方法的主要内容，如果未能解决你的问题，请参考以下文章