Contents:
-
.attr( attributeName )
- .attr( attributeName )
-
.attr( attributeName, value )
- .attr( attributeName, value )
- .attr( attributes )
- .attr( attributeName, function(index, attr) )
.attr( attributeName )返回: String
描述: 获取匹配的元素集合中的第一个元素的属性的值。
.attr()
方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值, 我们需要依靠jQuery的 .each()
或者.map()
方法循环。
使用 jQuery的 .attr()
方法得到了一个元素的属性值主要有两个好处:
- 方便:它可以直接被jQuery对象访问并且链式调用其他jQuery方法。
-
浏览器兼容:一些属性在不同浏览器中得到不同的值。 甚至在同一个浏览器的不同版本中。
.attr()
方法减少了兼容性问题。
注意: 除少数属性意外,属性值都是字符串,如value和tabindex。
在jQuery 1.6中,当属性没有被设置时候,.attr()
方法将返回undefined
。
另外,
若要检索和更改DOM属性,比如元素的.attr()
不应该用在普通的对象,数组,窗口(window)或文件(document)上。checked
, selected
, 或 disabled
状态,请使用.prop()方法。
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
.
Additional Notes(其他注意事项):
- 在Internet Explorer 9之前的版本,使用
.prop()
设置DOM元素的属性进行赋值时,若所赋值的类型不是基本类型(number, string, 或 boolean),而且也没有使用.removeProp()
方法在 DOM 元素从文档中被移除之前。为了安全的在 DOM 对象上进行赋值而不用担心内存泄露问题,请使用.data()
方法 。
例子:
在页面的第一个<em>中找到title属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
|
Demo:
.attr( attributeName, value )返回: jQuery
描述: 设置每一个匹配元素的一个或多个属性。
-
添加的版本: 1.0.attr( attributeName, value )
-
attributeName类型: String要设置值的属性名。
-
value要设置的属性值。如果为
null
, 指定的属性将被删除(就像.removeAttr()
一样)。
-
-
添加的版本: 1.0.attr( attributes )
-
attributes类型: PlainObject一个要设置的 属性-值 集合对象。(译者注:例如{ alt: '', title: 'WEB前端开发-https://www.0133.cn })
-
-
添加的版本: 1.1.attr( attributeName, function )
-
attributeName类型: String要设置值的属性名。
-
function这个函数返回用来设置的值。
this
指向当前的元素。接收该元素在集合中索引位置(index)和 原来属性值(attr)作为参数。
-
这个 .attr()
方法 是一个设置属性值的方便而且强大的途径—特别是当设置多个属性或使用值来自函数。 让我们考虑下面的图片:
1
|
|
Setting a simple attribute(设置一个简单的属性)
我们可以通过.attr()
方法非常简单的改变 alt
属性并附上新值:
1
|
|
我们可以用同样的方法 添加 一个属性:
1
2
|
|
Setting several attributes at once(一次设置多个属性)
同时改变alt
属性 和 添加 title
属性, 我们可以使用一个“名/值”形式的对象 (JavaScript object literal)传递给这个方法。 每个 key-value 对象将增加或者修改一个属性:
1
2
3
4
|
|
当设置多个属性,包裹属性名的引号是可选的。
警告: 当设置样式名(“class”)属性时,必须使用引号!
注意: 试图改变 由document.createElement()
创建的input
或 button
的type
属性,在Internet Explorer 8或更老的版本中将抛出一个例外。
Computed attribute values(推算属性值)
通过使用一个函数来设置属性, 可以根据该元素上的其它属性值返回最终所需的属性值。例如,我们可以把新的值与现有的值联系在一起:
1
2
3
|
|
当前运用一个函数来计算属性的值,当我们修改了多个元素的属性,特别有用。
注意 如果setter函数没有返回任何数据(例如:function(index, attr){}
),属性的当前值返回值是undefined,作为一个getter行为。实际上,如果不进行任何更改的setter函数不返回的东西。
例子:
Example: 为页面中全部的 <img>设置一些属性。
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
27
28
29
30
31
32
33
34
35
|
|
Demo:
Example: 使第二个后面的按钮disabled
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
27
|
|
Demo:
Example: 通过图片的title属性设置src属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
|