.prop()
Contents:
-
prop( propertyName )
- .prop( propertyName )
-
prop( propertyName, value )
- .prop( propertyName, value )
- .prop( map )
- .prop( propertyName, function(index, oldPropertyValue) )
.prop( propertyName ) 返回: String
描述: 获取在匹配的元素集中的第一个元素的属性值。
-
version added: 1.6.prop( propertyName )
propertyName要得到的属性的名称
.prop()
方法只获得第一个匹配元素的属性值 。元素的一个属性没有设置,或者如果没有匹配的元素。它返回undefined
值。为了让每个元素单独的值,使用一个循环结构的如jQuery .each()
或.map()
方法。
attributes和properties之间的差异在特定情况下是很重要。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>