定義和用法
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() 方法常用的四種使用方法。由於可能語言組織不好，所以可能個別地方會有語言錯誤。
未完待續！