返回值:Stringattr(attributeName)

取得所有匹配的元素中，第一个元素的属性值（attribute）。

.attr() 方法只取得所有匹配元素的 第一个 元素的属性值（attribute）。要想取得每一个匹配元素的值 ，请使用循环结构，例如 jQuery 的 .each() 或 .map() 方法。

从 jQuery 1.6 开始，,如果指定的属性名不存在，那么 .attr() 方法将返回 undefined。另外,.attr() 不应该在如下对象上使用：纯对象，数组，window 对象，或者 document 对象。若要取得或变更 DOM 的属性值，请使用 .prop() 方法。

使用 jQuery 的 .attr() 方法来到得元素的属性值，主要有以下两个好处：

  1. 便捷: 可以直接在 jQuery 对象或对象链上使用该方法。
  2. 跨浏览器的一致性: 在不同的浏览器中，相同的属性返回的属性值可能是不一致的，即使是相同浏览器，由于版本不同，也可能出现这种情况。.attr() 方法减少了这种不一致性。

注意: 所指定的属性名，不能是 value 或 tabindex。

示例:

取得页面上第一个 <em> 的 title 属性值。

<!DOCTYPE html>
<html>
<head>
<style>
  em { color:blue; font-weight;bold; }
  div { color:red; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>


<p>
  Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>

  The title of the emphasis is:<div></div>


<script>


var title = $("em").attr("title");
  $("div").text(title);


</script>
</body>
</html>

演示:

返回值:jQueryattr(attributeName, value)

为所有匹配的元素，设置一个或多个属性值（attribute）。

使用 .attr() 方法设置属性值非常的方便。特别是对于需要设置多个属性值或使用一个函数返要设置值的情况。例如，有如下的图片: 

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

设置一个简单的属性

若要改变 alt 的属性值，只需简单的将属性名和新值传给 .attr() 方法即可： 

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

增加 一个属性也如此： 

$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');

一次设置多个属性

若要同时修改 alt 属性并添加 title 属性，可以将一个由属性名及属性值组成的 map 对象(JavaScript对象字面)传递给该方法。该 map 对象中的每一个键-值对，代表了将要被添加或修改的属性： 

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

当设置多个属性时，不需要使用引号包裹属性名。

警告: 当设置 'class' 属性时,必须使用引号！

注意: jQuery 不允许在任何浏览器中修改 <input> 和 <button> 元素的 type 属性，否则会抛出异常。这是因为在 IE 下，type 属性不能被修改。

经过计算的属性值

当使用一个函数设置属性值时，可以根据该元素上的其它属性值返回最终所需的属性值。例如，可以将一个新值与原有的属性值结合起来，作为返回值：

$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});

这种通过一个函数返回计算后的属性值的方法，特别适用于一次性修改多个元素的属性的场合。

注意: 如果给定的函数什么都没有返回(例如， function(index, attr){}), 或者返回的是 undefined，那么该属性的属性值不会被修改。适用于只有满足特定的条件时，有选择性的设置属性值的情况。

示例:

为页面上所有的 <img> 设置一些属性。

<!DOCTYPE html>
<html>
<head>
<style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>


  <img />
  <img />
  <img />

  <div><B>Attribute of Ajax</B></div>


<script>


$("img").attr({ 
  src: "images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));


</script>
</body>
</html>

演示:

示例:

根据 div 在页面上的位置，设置 id 属性。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
        </style>
<script src="jquery.min.js"></script>
</head>
<body>


  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>


<script>


$("div").attr("id", function (arr) {
  return "div-id" + arr;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});


</script>
</body>
</html>

演示:

示例:

根据图像的 title 属性，设置 src 属性。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>


<img title="hat.gif"/>


<script>


$("img").attr("src", function() { 
    return "images/" + this.title; 
});


</script>
</body>
</html>

演示: