JQuery .attr()用法及代码示例

获取匹配元素集中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

用法一

.attr( attributeName ) => String

说明：获取匹配元素集中第一个元素的属性值。

添加的版本：1.0.attr( attributeName )
- attributeName
  
  类型：String
  
  要获取的属性的名称。

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

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

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

注意：属性值是字符串，除了一些属性，例如 value 和 tabindex。

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

属性与属性

attributes 和properties 之间的区别在特定情况下可能很重要。 Before jQuery 1.6 ，.attr() 方法有时会在检索某些属性时考虑属性值，这可能会导致行为不一致。 As of 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"` (String) 复选框的初始状态；不变
`$( elem ).attr( "checked" )` `(1.6+)`	`"checked"` (String) 复选框的初始状态；不变
`$( elem ).attr( "checked" )` `(pre-1.6)`	`true`(布尔值)随复选框状态更改

根据W3C 表格规范，这checked属性是一个boolean attribute，这意味着相应的属性是真的如果该属性完全存在 - 例如，即使该属性没有值或设置为空字符串值，甚至是 "false"。所有布尔属性都是如此。

然而，关于checked 属性要记住的最重要的概念是它不对应于checked 属性。该属性实际上对应于defaultChecked 属性，应该只用于设置复选框的initial 值。 checked 属性值不会随复选框的状态而变化，而 checked 属性会。因此，cross-browser-compatible 确定是否选中复选框的方法是使用属性：

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

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

其他注意事项：

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

例子：

在复选框更改时显示选中的属性和属性。

<!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-3.5.0.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 属性。

<!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-3.5.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

说明：为一组匹配的元素设置一个或多个属性。

添加的版本：1.0.attr( attributeName, value )
- attributeName
  
  类型：String
  
  要设置的属性的名称。
- value
  
  类型：String 或 Number 或 Null
  
  为属性设置的值。如果 null ，指定的属性将被删除(如 .removeAttr() )。
添加的版本：1.0.attr( attributes )
- attributes
  
  类型：PlainObject
  
  要设置的attribute-value 对的对象。
添加的版本：1.1.attr( attributeName, function )
- attributeName
  
  类型：String
  
  要设置的属性的名称。
- function
  
  类型：Function(Integer 索引，String attr)=> String 或 Number
  
  返回要设置的值的函数。 this 是当前元素。接收集合中元素的索引位置和旧属性值作为参数。

.attr() 方法是设置属性值的便捷方法，尤其是在设置多个属性或使用函数返回的值时。考虑下图：

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

设置一个简单的属性

要更改 alt 属性，只需将属性名称及其新值传递给 .attr() 方法：

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

Add 一个属性同理：

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

一次设置多个属性

要同时更改alt 属性并添加title 属性，请使用纯JavaScript 对象一次将两组名称和值传递给方法。对象中的每个键值对添加或修改一个属性：

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

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

警告：设置'class' 属性时，必须始终使用引号！

注意：试图改变type一个属性input或者button通过创建的元素document.createElement()将在 Internet Explorer 8 或更早版本上引发异常。

计算的属性值

通过使用函数设置属性，您可以根据元素的其他属性计算值。例如，要将新值与现有值连接：

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

当一次修改多个元素的属性时，使用函数计算属性值特别有用。

注意：如果在 setter 函数中没有返回任何内容(即。function(index, attr){})，或者如果undefined返回时，当前值不变。这对于仅在满足某些条件时有选择地设置值很有用。

例子：

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

<!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-3.5.0.js"></script>
</head>
<body>
 
<img>
<img>
<img>
 
<div><b>Attribute of Ajax</b></div>
 
<script>
$( "img" ).attr({
  src: "/wp-content/uploads/2022/05/jquery-demos/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$( "div" ).text( $( "img" ).attr( "alt" ) );
</script>
 
</body>
</html>

演示：

根据页面中的位置设置 div 的 id。

<!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-3.5.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>

演示：

从图像上的标题属性设置 src 属性。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<img title="hat.gif">
 
<script>
$( "img" ).attr( "src", function() {
  return "/wp-content/uploads/2022/05/jquery-demos/" + this.title;
});
</script>
 
</body>
</html>

演示：

相关用法

注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .attr()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。

JQuery .attr()用法及代码示例

用法一

`.attr( attributeName ) => String`

添加的版本：1.0`.attr( attributeName )`

属性与属性

其他注意事项：

例子：

演示：

演示：

用法二

`.attr( attributeName, value ) => jQuery`

添加的版本：1.0`.attr( attributeName, value )`

添加的版本：1.0`.attr( attributes )`

添加的版本：1.1`.attr( attributeName, function )`

设置一个简单的属性

一次设置多个属性

计算的属性值

例子：

演示：

演示：

演示：

用法一

.attr( attributeName ) => String

添加的版本：1.0.attr( attributeName )

属性与属性

其他注意事项：

演示：

演示：

用法二

.attr( attributeName, value ) => jQuery

添加的版本：1.0.attr( attributeName, value )

添加的版本：1.0.attr( attributes )

添加的版本：1.1.attr( attributeName, function )

设置一个简单的属性

一次设置多个属性

计算的属性值

演示：

演示：

演示：

`.attr( attributeName ) => String`

添加的版本：1.0`.attr( attributeName )`

`.attr( attributeName, value ) => jQuery`

添加的版本：1.0`.attr( attributeName, value )`

添加的版本：1.0`.attr( attributes )`

添加的版本：1.1`.attr( attributeName, function )`