加载中...

prop()1.6+

概述    .prop( propertyName )

返回值：String

描述：获取匹配的元素集中第一个元素的属性（property）值

  • V : 1.6.prop( propertyName )

    • propertyName
      类型: String
      要得到的属性的名称

.prop()方法只获得第一个匹配元素的属性值 。如果元素上没有该属性，或者如果没有匹配的元素。那么该方法会返回undefined值。若要取得每个匹配元素的属性值（property），请使用循环结构，如jQuery .each()或.map()方法。

注意: 试图改变通过HTML创建的，或已经在HTML文档中的input元素的type属性（property）（或特性attribute），在Internet Explorer 6, 7, or 8下将会抛出一个错误。

Attributes vs. Properties

attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。 在jQuery1.6之前，这些属性使用.attr()方法取得，但是这并不是元素的attr属性。他们没有相应的属性（attributes），只有特性(property)。

例如，考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ，并假设它是一个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属性是一个布尔属性， 这意味着,如果这个属性（attribute）是目前存在， 即使，该属性没有对应的值，或者被设置为空字符串值，或甚至是"false"，相应的属性（property）为true。 这才是真正的所有布尔属性（attributes）。

然而，要记住的最重要的概念是checked特性（attribute）不是对应它checked属性（property）。特性（attribute）实际对应的是defaultChecked属性（property），而且仅用于设置复选框最初的值。checked特性（attribute）值不会因为复选框的状态而改变，而checked属性（property）会因为复选框的状态而改变。因此，  跨浏览器兼容的方法来确定一个复选框是否被选中，是使用该属性（property）：

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

对于其他的动态属性，同样是true，比如 selected 和 value.

如果你使用jQuery 1.6 ，代码if ( $(elem).attr("checked") )，将获得一个属性(attribute) ，它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容，.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外，还会更新 property 属性，因此 boolean attribute（布尔属性）不需要通过 .prop() 来改变其值。推荐使用上述方法之一，来取得 checked 的值。要想知道在最新的 jQuery 版本中,它们是如何工作的，请点击下例中的 check。

Additional Notes（其他注意事项）:

  • 在Internet Explorer 9之前的版本，使用.prop()设置DOM元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有使用 .removeProp() 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 .data() 方法 。

示例

实例

Checked属性显示一个复选框，因为它的变化和属性。 

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

描述：为匹配的元素设置一个或多个属性（properties）。

  • V : 1.6.prop( propertyName, value )

    • propertyName
      类型: String
      要设置的属性（properties）的名称
    • value
      类型: Anything
      一个值来设置属性值。

  • V : 1.6.prop( properties )

    • properties
      类型: PlainObject
      用来设置的 属性 - 值对 的对象。

  • V : 1.6.prop( propertyName, function(index, oldPropertyValue) )

    • propertyName
      类型: String
      要设置的属性（properties）的名称
    • function
      类型: Function( Integer index, Anything oldPropertyValue ) => Anything
      一个函数，返回将要被设置的值。index 参数表示集合中元素的索引位置。oldPropertyValue 参数表示原有的属性值。this 指向当前的元素。

.prop()方法设置属性值非常方便，尤其是对于需要使用一个函数设置多个属性值或是一次性设置多个属性值的情况。当设置selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或 defaultSelected必须使用这个方法。从jQuery1.6开始，这些属性可以不再使用.attr()方法来设置。他们没有相应的属性（attributes），只有属性(property)。

Properties 属性一般影响 DOM 元素的动态状态并不会改变序列化的 HTML attribute 属性。例如，input 元素的 value 属性，input 和 按钮 元素的 disabled 属性, 以及 checkbox 的 checked 属性。应该使用 .prop() 方法设置 disabled 和 checked 属性，而不是使用 .attr() 方法。 .val() 方法应该用于存取 value 值。 

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

还要注意的是.removeProp()方法不应该被用来设置这些属性为false。一旦原生的属性被移除，就无法再被添加。见.removeProp()获取更多信息。

Computed property values（计算的属性值）

通过使用一个函数来设置属性，你可以根据其他的元素的属性计算它的值。例如，根据单独的值切换所有复选框： 

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

注意: 如果设置的函数没有返回（即 function(index, prop){})），或者返回undefined ，当前值不会被改变。 这当某些条件得到满足选择性元素设定属性值（比如 复选框，单选等），是非常有用的。

Additional Notes（其他注意事项）:

  • 在Internet Explorer之前的版本9，使用.prop()设置DOM元素的属性进行赋值时，若所赋值的类型不是基本类型(number, string, 或 boolean)，而且也没有使用 .removeProp() 方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题，请使用 .data() 方法 。

示例

实例

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

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

运行一下

还没有评论.