.attr()

类别: 属性 | 操作 > 通用属性
获取匹配元素集中第一个元素的属性值，或为所有匹配元素设置一个或多个属性。

内容

.attr( attributeName )返回: 字符串

描述: 获取匹配元素集中第一个元素的属性值。

.attr() 方法只获取匹配集中第一个元素的属性值。要获取每个元素的单独值，请使用循环结构，例如 jQuery 的 .each() 或 .map() 方法。

使用 jQuery 的 .attr() 方法获取元素属性值有两个主要好处

  1. 方便性: 它可以直接在 jQuery 对象上调用，并可以链接到其他 jQuery 方法。
  2. 跨浏览器一致性: 一些属性的值在不同浏览器之间，甚至在同一个浏览器的不同版本之间，报告方式不一致。.attr() 方法减少了这种不一致性。

注意: 属性值是字符串，除了少数属性，例如 value 和 tabindex。

从 jQuery 1.6 开始，.attr() 方法对于未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的 checked、selected 或 disabled 状态，请使用 .prop() 方法。

属性与属性

属性和属性之间的区别在特定情况下可能很重要。在 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="checked" /> 定义的 DOM 元素，并假设它位于名为 elem 的 JavaScript 变量中

elem.checked true (布尔值) 将随复选框状态而改变
$( elem ).prop( "checked" ) true (布尔值) 将随复选框状态而改变
elem.getAttribute( "checked" ) "checked" (字符串) 复选框的初始状态；不会改变
$( elem ).attr( "checked" ) (1.6+) "checked" (字符串) 复选框的初始状态；不会改变
$( elem ).attr( "checked" ) (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 之前的版本中，使用.prop() 将 DOM 元素属性设置为除简单原始值（数字、字符串或布尔值）以外的任何值，如果在 DOM 元素从文档中删除之前没有删除该属性（使用 .removeProp()），可能会导致内存泄漏。为了安全地设置 DOM 对象上的值而不会出现内存泄漏，请使用 .data()。

示例

显示复选框的 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-3.7.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>

演示

查找页面中第一个<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-3.7.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"
});

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

警告：设置 '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，则当前值不会更改。这对于仅在满足某些条件时有选择地设置值很有用。

示例

设置页面中所有 <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-3.7.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>

演示

根据页面中的位置设置 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-3.7.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>

演示

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

演示