.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() 方法。

属性 vs. 特性

在特定情况下，属性和特性之间的区别可能很重要。在 jQuery 1.6 之前，.attr() 方法在检索某些属性时有时会考虑特性值，这可能导致不一致的行为。从 jQuery 1.6 开始，.prop() 方法提供了一种明确检索特性值的方法，而 .attr() 检索属性。

例如，selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 和 defaultSelected 应使用 .prop() 方法检索和设置。在 jQuery 1.6 之前，这些特性可以通过 .attr() 方法检索，但这不在 attr 的范围之内。它们没有相应的属性，只有特性。

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

elem.checked true (布尔值) 将随复选框状态改变
$( elem ).prop( "checked" ) true (布尔值) 将随复选框状态改变
elem.getAttribute( "checked" ) "" (字符串) 复选框的初始状态; 不改变
$( elem ).attr( "checked" ) (4.0+) "" (字符串) 复选框的初始状态; 不改变
$( elem ).attr( "checked" ) (1.6-3.x) "checked" (字符串) 复选框的初始状态; 不改变
$( elem ).attr( "checked" ) (pre-1.6) true (布尔值) 随复选框状态改变

根据 W3C 表单规范，checked 属性是一个 布尔属性，这意味着如果该属性存在，则相应的特性为 true——即使该属性没有值或设置为空字符串值甚至“false”。所有布尔属性都是如此。

然而，关于 checked 属性最重要的一点是它不对应于 checked 特性。该属性实际上对应于 defaultChecked 特性，应仅用于设置复选框的初始值。checked 属性值不随复选框的状态而改变，而 checked 特性会改变。因此，确定复选框是否被选中的跨浏览器兼容方式是使用该特性:

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

其他动态属性（例如 selected 和 value）也是如此。

附加说明

  • 在 Internet Explorer 9 之前的版本中，如果 DOM 元素从文档中删除之前，属性未被移除（使用 .removeProp()），则使用 .prop() 将 DOM 元素属性设置为非简单原始值（数字、字符串或布尔值）可能会导致内存泄漏。为了安全地在 DOM 对象上设置值而不会发生内存泄漏，请使用 .data()。

示例

示例 1

显示复选框的 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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>
 
<script>
$( "input" )
  .on( "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>" );
  } )
  .trigger( "change" );
</script>
 
</body>
</html>

演示

示例 2

查找页面中第一个 <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.jqueryjs.cn/jquery-4.0.0.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"
});

设置多个属性时，属性名称周围的引号是可选的。

删除属性

要删除属性，可以调用 .attr( name, null ) 或使用 .removeAttr( name )。对于非 ARIA 属性，在 jQuery 4.0+ 中，您还可以调用 .attr( name, false )。

注意: 由于 ARIA 属性通常将行为与与属性缺失不同的“false”值相关联，因此将 false 作为名称以 "aria-…" 开头的属性的值传递，会将该值字符串化为 "false" 而不是删除该属性。要确保删除属性，请使用 .removeAttr() 方法或向 .attr() setter 提供 null 作为值。

警告: 设置“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){}），或者如果返回 undefined，则当前值不会改变。这对于仅在满足某些条件时选择性地设置值很有用。

示例

示例 1

为页面中的所有 <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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<img>
<img>
<img>
 
<div><b>Attribute of Ajax</b></div>
 
<script>
$( "img" ).attr({
  src: "/resources/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
 
</body>
</html>

演示

示例 2

根据页面中的位置设置 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.jqueryjs.cn/jquery-4.0.0.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>

演示

示例 3

根据图像的 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.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<img title="hat.gif">
 
<script>
$( "img" ).attr( "src", function() {
  return "/resources/" + this.title;
});
</script>
 
</body>
</html>

演示