前言:
在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,只需要用到attr()这个函数就可以了。attr是attribute(属性)的缩写。
语法:
1、attr(“属性名”); //获取属性的值(取得第一个匹配元素的属性。通过这个方法可以方便的从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回undefined)
2、attr(“属性名”,“属性值”); //设置属性的值(为所有匹配的元素设置一个属性值)
3、attr(“属性名”,“函数值”); //设置属性的函数值(为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数家孙的值作为属性值)
4、attr(properties); //给指定元素设置多个属性值,即:{属性名1:“属性值1”,属性值2:”属性值2”}(这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意,如果你要设置的对象的class属性,你必须使用className作为属性名,或者你可以直接使用 class 或者 id )
注意:所有的标点符号都是英文符号,在给指定元素设置多个属性值的时候,注意双引号“”的使用!
举例如下:
你最喜欢的明星是?
- 刘亦菲
- 李易峰
- 杨洋
alert(
(
"
u
l
l
i
"
)
.
a
t
t
r
(
"
t
i
t
l
e
"
)
)
;
/
/
结
果
刘
亦
菲
a
l
e
r
t
(
("ul li").attr("title"));//结果刘亦菲 alert(
("ulli").attr("title"));//结果刘亦菲alert((“ul li:eq(0)”).attr(“title”));//结果:刘亦菲
alert(
(
"
u
l
l
i
:
e
q
(
1
)
"
)
.
a
t
t
r
(
"
t
i
t
l
e
"
)
)
;
/
/
结
果
:
李
易
峰
(
吾
里
峰
峰
)
a
l
e
r
t
(
("ul li:eq(1)").attr("title"));//结果:李易峰(吾里峰峰) alert(
("ulli:eq(1)").attr("title"));//结果:李易峰(吾里峰峰)alert((“ul li”).attr(“value”));//结果:undefined
alert($(“ul li:eq(1)”).attr(“value”));//结果:123
1
2
3
4
5
2、attr(name,value) //设置属性的值
(
"
u
l
l
i
:
e
q
(
2
)
"
)
.
a
t
t
r
(
"
t
i
t
l
e
"
,
"
胡
歌
"
)
;
a
l
e
r
t
(
("ul li:eq(2)").attr("title","胡歌"); alert(
("ulli:eq(2)").attr("title","胡歌");alert((“ul li:eq(2)”).attr(“title”));//结果:胡歌
1
2
3、attr(name,fn) //设置属性的函数值
(
"
u
l
l
i
:
e
q
(
1
)
"
)
.
a
t
t
r
(
"
t
i
t
l
e
"
,
f
u
n
c
t
i
o
n
(
)
r
e
t
u
r
n
t
h
i
s
.
v
a
l
u
e
)
;
a
l
e
r
t
(
("ul li:eq(1)").attr("title",function(){ return this.value}); alert(
("ulli:eq(1)").attr("title",function()returnthis.value);alert((“ul li:eq(1)”).attr(“title”));//123
1
2
4.attr(properties) //将一个“名/值”形式的对象设置为所有匹配元素的属性
(1) 获取
- 里第2个
- 设置title和value属性。
1
2
3
4
5
6
7
8
9
(2)获取
- 里第2个
- 设置class。
结果:
第二个li的html:
- 橘子
1
2
3
4
5
(3)获取- 里第2个
- 设置id。
结果:
第二个li的html:- 橘子
1
2
3
4
5
(4)获取- 里第2个
- 设置style。
结果:李易峰的字体颜色是红色
1
2
3
4
题外话:删除属性:removeAttr();$(“ul li:eq(1)”).removeAttr (“title”);
————————————————
版权声明:本文为CSDN博主「buling girl」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u013746071/article/details/52449925