首页 > 代码库 > jQuery属性-attr()方法
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()方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。