jquery attr和prop区别 attr选中checkbox不起作用

问题再现

使用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	必需。您希望添加的属性值。