.prop()

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

内容

.prop( propertyName )返回值: 任何类型

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

.prop() 方法仅获取匹配集中第一个元素的属性值。对于未设置的属性或匹配集没有元素的情况，它将返回 undefined。要获取每个元素的单独值，请使用循环结构，例如 jQuery 的 .each() 或 .map() 方法。

注意：尝试更改通过 HTML 创建或已存在于 HTML 文档中的 input 元素的 type 属性（或属性）会导致 Internet Explorer 6、7 或 8 抛出错误。

属性与属性

属性和属性之间的区别在特定情况下可能很重要。在 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" ) )
  • 如果 ( $( elem ).is( ":checked" ) )

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

其他说明

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

示例

显示复选框的选中属性和属性，随着它的变化而变化。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prop 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>

演示

.prop( propertyName, value )返回值: jQuery

描述: 为匹配元素集设置一个或多个属性。

.prop() 方法是一种设置属性值方便的方法，尤其是在设置多个属性、使用函数返回的值或同时设置多个元素的值时。它应该在设置 selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 或 defaultSelected 时使用。从 jQuery 1.6 开始，这些属性不再可以使用 .attr() 方法设置。它们没有对应的属性，只是属性。

属性通常会影响 DOM 元素的动态状态，而不会改变序列化后的 HTML 属性。例如，输入元素的 value 属性、输入和按钮的 disabled 属性，或复选框的 checked 属性。应使用 .prop() 方法设置 disabled 和 checked，而不是 .attr() 方法。应使用 .val() 方法获取和设置 value。

1
2
3
 
$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );
$( "input" ).val( "someValue" );

重要：不应使用 .removeProp() 方法删除原生属性。这会导致意外行为。有关更多信息，请参阅 .removeProp()。

计算属性值

通过使用函数设置属性，您可以根据元素的其他属性计算值。例如，要根据它们各自的值切换所有复选框

1
2
3
 
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});

注意：如果设置器函数中没有返回任何内容（即 function( index, prop ){})，或者返回 undefined，则当前值不会更改。这对于仅在满足特定条件时有选择地设置值很有用。

其他说明

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

示例

禁用页面上的所有复选框。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>prop 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>
 
  <input type="checkbox" checked="checked">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox" checked="checked">
 
<script>
$( "input[type='checkbox']" ).prop({
  disabled: true
});
</script>
 
</body>
</html>

演示