1、在jQuery中attr()和prop()两种方法都可以获取和操作元素的节点属性和属性。attr操作元素的节点属性,prop操作元素的属性,但是两者在使用时也存在差别。
2、attr()方法操作节点属性,attr()可以传入字符串也可以传入对象。
- 传入一个字符串参数时表示获取元素对应的属性,例如:
("div").attr("class");表示获取
(
"
d
i
v
"
)
.
a
t
t
r
(
"
c
l
a
s
s
"
)
;
表
示
获
取
(“div”)元素中的第一个div的class属性的值。
- 传入两个字符串参数时表示设置所有获取到的元素的对应的属性,例如:
("div").attr("class","div1");表示将
(
"
d
i
v
"
)
.
a
t
t
r
(
"
c
l
a
s
s
"
,
"
d
i
v
1
"
)
;
表
示
将
(“div”)获取到的所有元素的class属性设置为div1。
- 传入对象时表示设置所获取到的元素的多个属性,例如:$(“div”).attr({“class”:”odiv”,”name”:”my”});表示将所获取到的所有的div的class设置为odiv,那么设置为my。
代码展示:
<script type="text/javascript" src="jQuery Core 1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 传入一个参数时
// var res=$("div").attr("class");
// console.log(res);//返回的值是first,只获取第一个div的class
// 传入两个参数时
// var res=$("div").attr("class","third");
// console.log(res);//返回被操作的元素和改变之后的属性jQuery.fn.init(2) [div.third, div.third,
// 传入的是对象时
var res=$("div").attr({
"class":"fifth",
"name":"odiv"
})//设置结果<div class="fifth" name="odiv"></div>
console.log(res);
})
</script>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
2、prop()方法用于获取和设置元素的属性,它也可以传入一个参数、两个参数或者对象,与attr用法相似。
- 传入一个字符串参数时表示获取元素对应的属性,例如:
("div").prop("class");表示获取
(
"
d
i
v
"
)
.
p
r
o
p
(
"
c
l
a
s
s
"
)
;
表
示
获
取
(“div”)元素中的第一个div的class属性的值。
- 传入两个字符串参数时表示设置所有获取到的元素的对应的属性,例如:
("div").prop("class","div1");表示将
(
"
d
i
v
"
)
.
p
r
o
p
(
"
c
l
a
s
s
"
,
"
d
i
v
1
"
)
;
表
示
将
(“div”)获取到的所有元素的class属性设置为div1。
- 传入对象时表示设置所获取到的元素的多个属性,例如:$(“div”).prop({“class”:”odiv”,”name”:”my”});表示将所获取到的所有的div的class设置为odiv,那么设置为my。
代码展示:
<script type="text/javascript" src="jQuery Core 1.12.4.js"></script>
<script type="text/javascript">
$(function(){
// 传入一个参数时
var res=$("div").prop("class");
console.log(res);//返回的值是first,只获取第一个div的class
// 传入两个参数时
// var res=$("div").prop("class","third");
// console.log(res);//返回被操作的元素和改变之后的属性jQuery.fn.init(2) [div.third, div.third,
// 传入的是对象时
// var res=$("div").prop({
// "class":"fifth",
// "id":"odiv"
// })//设置结果<div class="fifth" name="odiv"></div>
// console.log(res);
})
</script>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
3、attr和prop的差别
attr和prop一个设置节点属性一个用于设置属性,两者都可以获取元素的属性和节点属性,但是在获取某一些属性时两者返回的值是不同的,例如在获取checked、selected和disabled的值时存在差异。例如checked如果默认是没选中那么用attr获取到的是undefined,prop获取该属性的值获取到的就是false,如果是选中的状态那么attr获取到的值就是checked,prop获取到的是true。在用if语句判断属性的状态是prop就更加有用,attr相对麻烦。
实例1:当input标签默认为未选中状态时。
<script type="text/javascript">
$(function(){
var res=$("input").attr("checked");
console.log(res);//返回undefined
var res=$("input").prop("checked");
console.log(res);//返回false
})
</script>
</head>
<body>
<input type="checkbox" name="">
</body>
实例2:当input标签默认为选中状态时。
<script type="text/javascript" src="jQuery Core 1.12.4.js"></script>
<script type="text/javascript">
$(function(){
var res=$("input").attr("checked");
console.log(res);//返回checked
var res=$("input").prop("checked");
console.log(res);//返回true
})
</script>
</head>
<body>
<input type="checkbox" checked="checked" name="">
</body>
在需要使用if判断时属性的值时用prop来取值。
4、补充知识:
1)、属性节点:在HTML标签中添加的属性就是属性节点,在浏览器的attributes属性中保持所有内容都是属性节点。
如何操作属性节点?
设置对象的属性节点:DOM元素.setAttribute(“属性名称”,“值”);
获取对象的属性节点:DOM元素.getAttribute(“属性名称”)。
2)、属性:对象身上保存的变量。
如何操作属性?
设置对象的属性:对象.属性名称=值;对象[“属性名称”]=值;
获取对象的属性:对象[“属性名称”];对象.属性名称。