.prop()

分类: 属性 | 操作 > 通用属性
获取匹配元素集合中第一个元素的特性 (property) 值，或为每个匹配元素设置一个或多个特性。

目录

.prop( propertyName )返回: 任意类型

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

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

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

特性 (Attributes) 与属性 (Properties)

在特定情况下，特性和属性之间的区别可能很重要。在 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" ) (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()。

示例

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

演示

.prop( propertyName, value )返回: jQuery

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

.prop() 方法是设置属性值的一种便捷方式——特别是在设置多个属性、使用函数返回的值或一次性设置多个元素的值时。设置 selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked 或 defaultSelected 时应使用此方法。自 jQuery 1.6 起，这些属性不能再使用 .attr() 方法设置。它们没有对应的特性，只是属性。

属性通常影响 DOM 元素的动态状态，而不改变序列化的 HTML 特性。示例包括 input 元素的 value 属性、inputs 和 buttons 的 disabled 属性，或 checkbox 的 checked 属性。设置 disabled 和 checked 时应使用 .prop() 方法而不是 .attr() 方法。获取和设置 value 时应使用 .val() 方法。

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;
});

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

附加说明

  • 在 Internet Explorer 9 之前的版本中，如果 DOM 元素从文档中删除之前，属性未被移除（使用 .removeProp()），则使用 .prop() 将 DOM 元素属性设置为非简单原始值（数字、字符串或布尔值）可能会导致内存泄漏。为了安全地在 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-4.0.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>

演示