Jquery中attr方法和prop方法的区别

今天遇到一个坑，那就是attr这个东东的使用。情况是这样的，第一次选中checkbox的时候可以展示它被选中时候的状态，可是在第二次的时候已经不显示被选中的状态了。原因就是属性值和状态值的问题。

下面将介绍属性值和状态值在Jquery 中的使用以及区别。

属性值 VS 状态值

在一些特殊的情况下，属性值和状态值的不同是有很大影响的。在jQuery 1.6之前的版本，.attr()方法在恢复一些属性时，有时会把状态值也考虑进去，这样的话，就会导致浏览器的兼容问题。在jQuery 1.6中，.prop()提供的方法可以避免恢复状态值，而.attr()方法会恢复状态值。

例如：selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked,和defaultSelected这些属性，就应该使用.prop()方法进行恢复属性值。在jQuery 1.6之前的版本，这些状态值都是可以通过.attr()获取的，虽然获取这些状态值并不是attr的工作范围。这些个状态值和属性是没有任何联系的，它们仅仅是一个状态。在IE9之前的浏览器版本中，使用.prop()方法，设置一个DOM元素的状态值，相较于那些原始的值（数字，字符串，或者布尔逻辑值）是不同的，如果这个DOM元素在被移除文档之前，没有使用.removeProp()移除这个状态值，那么它将会导致内存泄露，如果想要比较安全的在DOM对象上面设置属性值，而又不会导致内存泄露。

根据W3C的规范，“checked”属性，是一个布尔逻辑型的属性，这就意味着，如果该属性存在的话，那么它对应的状态值的取值结果是正确的，例如，即使该属性没有值，或者被设置成一个空字符串，或者设置为“false”,对于布尔逻辑型属性来说都是正确的。

然而，关于checked的属性，最重要的概念就是你要记住，它跟checked的状态值是毫无关系的，设置checked = "checked"或者checked = "true"等属性设置，和它的状态值true/false是无关的。，而这里的属性值，事实上只是和defaultChecked的状态值有关，并且只能用来设置checkbox的初始的值。checked的属性值并不会随着checkbox的的状态变化而变化，可是checkbox的状态值却会。因此，为了能更好的跨浏览器的兼容，决定了checkbox的checked的状态要使用状态值进行处理。

例如：

• if(elem.checked)
• if($(elem).prop("checked"))
• if($(elem).is(":checked"))

这些理论，对于那些动态的属性来说，效果是相同的，例如：selected和value属性。