.prop()

Contents:

.prop( propertyName ) 返回: String

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

  • version added: 1.6.prop( propertyName )

    propertyName要得到的属性的名称

.prop()方法只获得第一个匹配元素的属性值 。元素的一个属性没有设置,或者如果没有匹配的元素。它返回undefined值。为了让每个元素单独的值,使用一个循环结构的如jQuery .each().map()方法。

attributesproperties之间的差异在特定情况下是很重要。jQuery 1.6之前.attr()方法有时检索时考虑到了一些属性的属性值,这可能导致不一致的行为。在jQuery 1.6, .prop()方法提供了一种明确检索属性值,同时.attr()检索的属性而已。

例如,考虑一个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")(pre-1.6) true (Boolean)

根据W3C的表单规范 ,在checked属性是一个布尔属性,这意味着如果属性相应的属性就为真,例如,属性没有值或空字符串值。首选的跨浏览器兼容的方法来确定一个复选框被选中的是检查一个“truthy”的元素的使用以下一个属性值:

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

另一方面,代码if ( $(elem).attr("checked") ),将获得一个属性 ,它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。

其他注意事项:

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

Example:

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

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 20px 0 0 }
  b { color: blue; }
</style>
  <script src="http://code.jquery.com/jquery-git.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>

Demo:

.prop( propertyName, value ) 返回: jQuery

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

  • version added: 1.6.prop( propertyName, value )

    propertyName要设置的属性的名称

    value一个值来设置属性值。

  • version added: 1.6.prop( map )

    map一个用于设置的对象 {属性:值} 对 .

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

    propertyName要设置的属性的名称

    function(index, oldPropertyValue)用来设置返回值的函数。接收到集合中的元素和属性的值作为参数旧的索引位置。在函数中,关键字this指的是当前元素。

.prop()方法是一种方便的方式来设置属性的函数值,尤其是当设置多个属性或通过使用返回值。一般在不影响性能的改变属性的序列化的HTML DOM元素的动态。例子包括value属性的input元素, disabled属性的inputs和按钮,或checked属性的复选框。大多数情况下, .prop()应该用于设置 disabled 和 checked,而不是.attr()方法。.val()方法应该用于获取值。

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

还要注意的是.removeProp()方法不应该被用来设置这些属性为false。一旦本地财产被删除,不能再次添加。见.removeProp()获取更多信息。

其他注意事项:

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

Example:

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

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://code.jquery.com/jquery-git.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>

Demo:

jQuery 1.6 API 中文版脚本之家整理、修订 (2011年6月)