.prop()

类别：特性 | 文档处理 > 一般特性
针对匹配的元素集合中第一个元素取得一个属性的值，或者针对每个匹配的元素设置一个或多个属性。

内容：

.prop( propertyName )返回类型：Anything

描述：针对匹配的元素集合中的第一个元素，取得某属性的值。

.prop()方法取得了针对匹配集合中第一个元素的此属性值。如果此属性没有被设置值，它就返回undefined。若要取得每个元素的该属性值，请用一个循环构造，譬如jQuery的.each()或.map()方法。

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

特性对比属性

attributes和properties之间的差异，在一些情况下可能是比较重要的。在jQuery 1.6以前，.attr()方法在检索特性值时，有时取用了属性值，这会导致一些不一致的行为。自从jQuery 1.6以来，.prop()方法提供了一个明确检索属性值的方式，与此同时，.attr()检索特性。

例如，必须利用.prop()方法来检索或设置selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected。在jQuery 1.6以前，这些属性是利用.attr()方法被检索的，但是这并不在attr的作用范围里面。这些没有对应的特性，只有属性。

关于布尔特性，考虑用HTML标签<input type="checkbox" checked="checked" />定义的DOM元素，假定它在一个JavaScript变量elem中：

elem.checked true (Boolean) 将改变勾选框的状态
$( elem ).prop( "checked" ) true (Boolean) 将改变勾选框的状态
elem.getAttribute( "checked" ) "checked" (String) 勾选框的初始状态，没有改变
$( elem ).attr( "checked" )(1.6) "checked" (String) 勾选框的初始状态，没有改变
$( elem ).attr( "checked" )(1.6.1+) "checked" (String) 将改变勾选框的状态
$( elem ).attr( "checked" )(pre-1.6) true (Boolean) 与勾选框的状态一起改变

根据W3C表单规范文档，checked特性是boolean属性，它意味着如果存在此特性，则对应的属性是true，甚至，如果此特性没有值或被设置为一个空字符甚至是“false”，对应的属性依然是true。所有布尔特性这都是true。

无论如何，最重要的概念是记住关于checked特性是，它不对应于checked属性。此特性实际上对应于defautChecked属性，只有在设置勾选框的初始值时才必须使用。checked特性值并不与勾选框的状态一起改变，与此同时checked属性是随勾选框的状态一起改变。因此，确定勾选框是否被勾选中的跨浏览器兼容的方法是使用属性：

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

其它动态特性也是如此，譬如selected和value。

补充说明：

  • 在Internet Explorer 9以前的版本中，一个DOM元素，如果在把它从文档中删除之前，还没有删除它的某个属性（使用.removeProp()），如果使用.prop()把该属性设置为简单原始值（数字、字符或布尔值）之外的其他任何东西，可能导致内存泄漏。若要安全DOM对象上设置值，而不会内存泄漏，请用.data()。

示例：

当一个勾选框有变化时，显示它的chceked属性和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.jquery.com/jquery-1.10.2.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>

演示：

.prop( propertyName, value )返回类型：jQuery

描述：针对一些匹配的元素集合，设置一个或多个属性。

.prop()方法是一个设置属性值的便利的方式——特别是在设置多个属性的时候，或者是利用函数返回的值的时候。在设置selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked或defaultSelected的时候必须使用它。自从jQuery 1.6以来，不再使用.attr()方法设置这些属性。它们没有对应的特性，只有属性。

属性通常影响DOM元素的动态状态，而不改变序化的HTML特性。示例包括<input>元素的value属性、<input>元素和<button>元素的disabled属性或者勾选框的checked属性。应该用.prop()方法而不是.attr()方法来设置disabled属性和checked属性。应该使用.val()方法来取得或设置值。

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

重点：不应该使用.removeProp()方法把这些属性设置为false。一旦原生属性被删除了，就不能再次添加了。请参阅.removeProp()以了解更多信息。

计算属性值

通过利用函数来设置属性，你可以基于元素的其它属性来计算值。例如：根据每个勾选框各自的值来切换所有勾选框：

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

注意：如果设置器函数中没有返回任何东西（亦即，function( index, prop ){})），或者返回了undefined，则当前值不会改变。这对只有满足特性条件时才选择性地设置值很有用。

补充说明：

  • 在Internet Explorer 9以前的Internet Explorer 版本中，使用.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.jquery.com/jquery-1.10.2.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>

演示：