问题再现
使用jquery选中checkbox时,只有鼠标点击后,才起作用,之后就不起作用,$("#mycheckbox").attr("checked",true)
后来搜到很多说明,说是jquery版本的缘故,要用prop,这个理由很笼统,我还是没懂attr和prop之间的区别。看了很多帖子后,总结出以下原因。
分析
1、attr、prop分别是attribute、property的缩写,分别对应DOM和js对象的属性。
<div align="left" class="" customattr="myattr"></div>
align、class都属于DOM的attribute
var obj = document.getElementById("mydiv");
console.log(obj);
obj的align、className是 js对象的属性。
2、attr和prop既有各自的独立数据,也有共享数据。当操作独立数据时,互不影响,操作共享数据时,对对方有影响。
通过上例可以看到,有些DOM属性与js对象属性名字一样,有些不一样。DOM与js对象都有id属性,而DOM的class属性,在js对象中叫,className
var obj = document.getElementById("mydiv");
obj.setAttribute("class","value");//DOM方式
obj["className"]="value"; //js对象方式
3、使用版本不同,jquery1.6之前只有attr,jquery1.6之后才有prop。
attr的源代码是,obj.setAttribute(attrname,attrvalue),参数值都是string
prop的源码是, obj[property]=value,参数值可以使object
4、对于selected、checked、disabled等属性,使用prop。自jquery1.6后,attr用于获取dom属性的初始状态值,对于返回boolean类型的属性,比如selected、checked、disabled使用prop。
setAttribute API
语法
element.setAttribute(attributename,attributevalue)
参数
参数 | 类型 | 描述 |
---|---|---|
attributename | String | 必需。您希望添加的属性的名称。 |
attributevalue | String | 必需。您希望添加的属性值。 |