我们都知道,一般在jquery中设置属性时要用到attr()
方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html
代码:
<input type="checkbox" id="check">
<label>复选框</label>
<input type="button" value="切换" id="btn">
js
代码:
<script>
$(function(){
var flag=false;
$("#btn").click(function(){
if(flag==false){
$("#check").attr("checked",true);
flag=true;
}else{
$("#check").removeAttr("checked");
flag=false;
}
});
});
</script>
我们发现当点击按钮时,第一次点击时复选框会选中,第二次时点击复选框会取消选中,但以后再点击时复选框将不会有任何效果。更奇怪的是,打开调试工具,点击按钮时html
代码中会有相应的checked="checked"
代码段,但页面却没效果。
当我们用prop()
方法替换attr()
方法时,一切将变得正常:
<script>
$(function(){
var flag=false;
$("#btn").click(function(){
if(flag==false){
$("#check").prop("checked",true);
flag=true;
}else{
$("#check").removeAttr("checked");
flag=false;
}
});
});
</script>
这是为什么呢,jquery1.6
中新加了一个方法prop()
,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled
,checked
就可以了,而有的要写成disabled = "disabled",checked="checked"
,比如用attr("checked")
获取checkbox
的checked
属性时选中的时候可以取到值,值为"checked
"但没选中获取值就是undefined
。
jq
提供新的方法“prop
”来获取这些属性,就是来解决这个问题的,以前我们使用attr
获取checked
属性时返回"checked
“和”",现在使用prop
方法获取属性则统一返回true
和false
。
那么,什么时候使用attr()
,什么时候使用prop()
?
1.添加属性名称该属性就会生效应该使用prop()
;
2.是有true,false
两个属性使用prop()
;
3.其他则使用attr()
;
以下是官方建议attr(),prop()
的使用:
Jquery中attr
与prop
的区别详解
前一段时间在做项目的时候,效果是这样的
当点击左上方那个checkBox
时,要将下面的checkBox
全部选中,我写的代码是这样的
$("input[name='checkbox']").attr("checked",true);
然而并没有起作用,后来换成下面那样就可以了
$(function(){
$("#all").click(function(){
if($("#all").prop("checked")){
$("input[name='checkbox']").prop("checked",true);
}else{
$("input[name='checkbox']").prop("checked",false);
}
});
});
于是上官方的文档查了下attr
和prop
的区别,发现根本看不懂,如下图
于是,我做了个一个测试
c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
c5:<input id="c5" name="checkbox" type="checkbox" /></br>
c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>
var a1=$("#c1").attr("checked");
var a2=$("#c2").attr("checked");
var a3=$("#c3").attr("checked");
var a4=$("#c4").attr("checked");
var a5=$("#c5").attr("checked");
var a6=$("#c6").attr("checked");
var p1=$("#c1").prop("checked");
var p2=$("#c2").prop("checked");
var p3=$("#c3").prop("checked");
var p4=$("#c4").prop("checked");
var p5=$("#c5").prop("checked");
var p6=$("#c6").prop("checked");
console.log("a1:"+a1);
console.log("a2:"+a2);
console.log("a3:"+a3);
console.log("a4:"+a4);
console.log("a5:"+a5);
console.log("a6:"+a6);
console.log("p1:"+p1);
console.log("p2:"+p2);
console.log("p3:"+p3);
console.log("p4:"+p4);
console.log("p5:"+p5);
console.log("p6:"+p6);
结果是这样的(chrome
浏览器下)
发现attr
的返回值要么是checked
要么是undefined
,prop
的返回值只有true
和false
。
总结:
prop()
函数的结果:
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是空字符串。
attr()
函数的结果:
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是undefined
。
对于HTML
元素本身就带有的固有属性,在处理时,使用prop
方法。
对于HTML
元素我们自己自定义的DOM
属性,在处理时,使用attr
方法。
具有 true
和 false
两个属性的属性,如 checked, selected
或者 disabled
使用prop()