.attr()

类别：特性 | 文档处理 > 一般特性
针对匹配的元素集合中的第一个元素，取得一个特性的值，或者对每个匹配的元素设置一个或多个特性。

内容：

.attr( attributeName )返回类型：String

描述：针对匹配的元素集合中第一个元素，取得某个特性的值。

.attr()方法史什对匹配集合中第一个元素取得特性的值。若要取得各个元素的值，请使用循环构造，譬如jQuery的.each()方法或.map()方法。

使用jQuery的.attr()方法来取得一个元素的特性的值，具有两大好处：

  1. 方便：它可以在jQuery对象上直接调用，并连缀到其它jQuery方法。
  2. 跨浏览器一致性：有些元素的值被报告为跨浏览器不一致，然后同一浏览器不同的版本也不一致。.attr()方法缩小了这种不一致性。

注意：特性值都是字符串，也有一些例外，譬如value和tabindex。

自从jQuery 1.6以来，对于没有设置的特性，.attr()方法返回undefined。若要检索并改变DOM属性，譬如表单元素的checked、selected或disabled状态，请使用.prop()方法。

特性对比属性

attributes和properties之间的差异，在一些情况下可能是比较重要的。在jQuery 1.6以前，.attr()方法在检索特性值时，有时取用了属性值，这会导致一些不一致的行为。从jQuery 1.6以来，.prop()方法提供了一个明确检索属性值的方式，与此同时，.attr()检索特性。

例如，将用.prop()方法来检索和设置selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected值。在jQuery 1.6以前，这些属性是用.attr()方法检索的，但是这并不在attr的作用范围里面。 这些没有对应的特性，只有属性。

关于布尔属性，考虑用HTML标签<input type="checkbox" checked="checked" />定义的DOM元素，假定它在一个JavaScript变量elem中：

elem.checkedtrue (Boolean) 将改变勾选框的状态
$( elem ).prop( "checked" )true (Boolean) 将改变勾选框的状态
elem.getAttribute( "checked" )"checked" (String) 勾选框的初始状态，没有改变
$( elem ).attr( "checked" )(1.6)"checked" (String) 勾选框的初始状态，没有改变
$( elem ).attr( "checked" )(1.6.1+)"checked" (String) 将改变勾选框的状态
$( elem ).attr( "checked" )(pre-1.6)true (Boolean) 与勾选框的状态一起改变

根据W3C表单规范文档，checked特性是boolean属性，它意味着如果存在此特性，则对应的属性是true，甚至，如果此特性没有值或被设置为一个空字符甚至是“false”，对应的属性依然是true。所有布尔特性这都是true。

无论如何，最重要的概念是记住关于checked特性是，它不对应于checked属性。此特性实际上对应于defautChecked属性，只有在设置勾选框的初始值时才必须使用。checked特性值并不与勾选框的状态一起改变，与此同时checked属性是随勾选框的状态一起改变。因此，确定勾选框是否被勾选中的跨浏览器兼容的方法是使用属性：

  • if ( elem.checked )
  • if ( $( elem ).prop( "checked" ) )
  • if ( $( elem ).is( ":checked" ) )

其它动态特性也是如此，譬如selected和value。

补充说明：

  • 在Internet Explorer 9以前版本中，如果在从文档中删除DOM元素之前，没有删除属性的话（使用 .removeProp()），使用.prop()来设置DOM元素属性到任何值，除非是简单原始值（数字、字符串或布尔值），否则将导致内存泄漏，若要安全设置DOM对象上的值，而不产生内存泄漏，请使用.data()。.

示例：

显示一个构选框的checked特性和checked属性，如它所改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" )
  .change(function() {
    var $input = $( this );
    $( "p" ).html( ".attr( 'checked' ): <b>" + $input.attr( "checked" ) + "</b><br>" +
      ".prop( 'checked' ): <b>" + $input.prop( "checked" ) + "</b><br>" +
      ".is( ':checked' ): <b>" + $input.is( ":checked" ) + "</b>" );
  })
  .change();
</script>
 
</body>
</html>

演示：

找到网页中第一个<em>的title特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

.attr( attributeName, value )返回类型：jQuery

描述：针对匹配的元素集合，设置一个或多个特性。

.attr()方法是一个设置特性值的便利的方式——特别是在设置多个特性的时候，或者是利用函数返回的值的时候。请考虑下面的图像：

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

设置单个特性

若要改变alt特性，只需要把特性的名称和它的新值传递给.attr()方法：

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

用同样的方式添加一个特性

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

一次性设置若干个特性

若要改变alt特性并同时加上title特性，可以利用扁平JavaScript对象，把名称和值的集合一次性传递给此方法。对象中的每个键值对都添加或修改了一个特性：

1
2
3
4
 
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

当设置多个特性时，包围特性名称的引号是可有可无的。

警告：当设置“class”特性时，你必须始终使用引号！

注意：尝试在通过document.createElement()创建的input元素或button元素上修改type属性，将在Internet Explorer 8或以前版本中抛出一个异常。

计算特性值

通过使用函数来设置特性，你可以基于其它元素的属性来计算值。例如，若要用已有的值串联一个新值：

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

计算特性值的函数的用法在一次性修改多个元素的特性时特别有用。

注意：如果在设置器函数（亦即，function(index, attr){}）中没有返回东西，当前的值也不会改变。这对满足特定条件才修改值很有用。

示例：

对网页上的所有<img>设置一些特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  img {
    padding: 10px;
  }
  div {
    color: red;
    font-size: 24px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<img>
<img>
<img>
 
<div><b>Attribute of Ajax</b></div>
 
<script>
$( "img" ).attr({
  src: "http://api.jquery.com/resources/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
 
</body>
</html>

演示：

基于网页中的定位，针对div设置id。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  b {
    font-weight: bolder;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<img title="hat.gif">
 
<script>
$( "img" ).attr( "src", function() {
  return "http://api.jquery.com/resources/" + this.title;
});
</script>
 
</body>
</html>

演示：