返回值:Stringprop(propertyName)
取得所有匹配的元素中,第一个元素的属性值(property)。
-
1.6 新增prop(propertyName)
propertyName (String) 将要取得的属性名(property)。
.prop()
方法仅取得所有匹配元素中,第一个元素的属性值(property)。如果元素上没有该属性,或者指定的元素不存在,那么该方法会返回 undefined
。若要取得每个匹配元素的属性值(property),请使用循环结构,例如 jQuery 的 .each()
或 .map()
方法。
在特定的场合,要注意留意 attributes 和 properties 之间的区别。在 jQuery 1.6 之前,
.attr()
方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()
方法返回 property 的值,而 .attr()
方法返回 attributes 的值。
例如, selectedIndex
, tagName
, nodeName
, nodeType
, ownerDocument
, defaultChecked
, 和 defaultSelected
应该使用 .prop()
方法进行取值或赋值。而在 jQuery 1.6 之前, 这些属性是通过 .attr()
方法取得的,虽然这不是 attr
的职责范围。因为它们没有对应的 attributes,只是 properties 而已。
关于布尔属性(boolean attributes),考虑到一个 DOM 元素是通过 HTML 标记定义的,例如 <input type="checkbox" checked="checked" />
,假设该对象在 JavaScript 中对应的变量叫 elem
:
elem.checked
|
true (Boolean) 随 checkbox 状态的改变而改变
|
---|---|
$(elem).prop("checked")
|
true (Boolean) 随 checkbox 状态的改变而改变
|
elem.getAttribute("checked")
|
"checked" (String) checkbox 的初始状态,该值不会变
|
$(elem).attr("checked")
(1.6)
|
"checked" (String) checkbox 的初始状态,该值不会变
|
$(elem).attr("checked")
(1.6.1+)
|
"checked" (String) 随 checkbox 状态的改变而改变
|
$(elem).attr("checked")
(pre-1.6)
|
true (Boolean) 随 checkbox 状态的改变而改变
|
根据 W3C 表单规范, checked
属性应该是一个
boolean attribute(布尔属性)
, 这意味着只要该 attribute 存在,即使它没有值,或是一个空字符串,该属性对应的 property 就是 true。以下推荐的是兼容浏览器方式,判断 checkbox 元素的 checked 属性是否为"真" 的方法:
-
if ( elem.checked )
-
if ( $(elem).prop("checked") )
-
if ( $(elem).is(":checked") )
如果使用 jQuery 1.6 的话,if ( $(elem).attr("checked") )
会返回 attribute 的实际内容并且不会改变 checkbox 的状态。这意味着它只是存储 checked 属性(property)的默认值或是初始值。出于向后兼容性的考虑,.attr()
方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop()
来改变其值。推荐使用上述方法之一,来取得 checked 的值。要想知道在最新的 jQuery 版本中,它们是如何工作的,请点击下例中的 check。
补充说明:
- 在 IE 9 之前,使用
.prop()
对一个 DOM 元素的属性进行赋值时,若所赋值的类型不是基本类型(number, string, 或 boolean),而且也没有使用.removeProp()
方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题,请使用.data()
方法 。
示例:
当 checkbox 状态改变时,显示 checkbox 的 checked property(属性值)和 attribute(属性值)。
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 20px 0 0 }
b { color: blue; }
</style>
<script src="jquery.min.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>