Contents:
-
.prop( propertyName )
- .prop( propertyName )
-
.prop( propertyName, value )
- .prop( propertyName, value )
- .prop( properties )
- .prop( propertyName, function(index, oldPropertyValue) )
.prop( propertyName )返回: String
描述: 获取匹配的元素集中第一个元素的属性(property)值
.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属性显示一个复选框,因为它的变化和属性。
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
|
|
Demo:
.prop( propertyName, value )返回: jQuery
描述: 为匹配的元素设置一个或多个属性(properties)。
-
添加的版本: 1.6.prop( propertyName, value )
-
propertyName类型: String要设置的属性(properties)的名称
-
value一个值来设置属性值。
-
-
添加的版本: 1.6.prop( properties )
-
properties类型: PlainObject用来设置的 属性 - 值对 的对象。
-
-
添加的版本: 1.6.prop( propertyName, function(index, oldPropertyValue) )
.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 值。
1
2
3
|
|
还要注意的是.removeProp()
方法不应该被用来设置这些属性为false
。一旦原生的属性被移除,就无法再被添加。见.removeProp()
获取更多信息。
Computed property values(计算的属性值)
通过使用一个函数来设置属性,你可以根据其他的元素的属性计算它的值。例如,根据单独的值切换所有复选框:
1
2
3
|
|
注意:
如果设置的函数没有返回(即 function(index, prop){})
),或者返回undefined
,当前值不会被改变。
这当某些条件得到满足选择性元素设定属性值(比如 复选框,单选等),是非常有用的。
Additional Notes(其他注意事项):
- 在Internet Explorer之前的版本9,使用
.prop()
设置DOM元素的属性进行赋值时,若所赋值的类型不是基本类型(number, string, 或 boolean),而且也没有使用.removeProp()
方法在 DOM 元素从文档中被移除之前。为了安全的在 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
|
|