jquery 中 attr 和 prop 的区别

问题：在jQuery引入prop方法后，什么时候使用attr，什么时候使用prop，两者区别。

判断：

对于HTML元素本身所有的固有属性，在处理的时候，使用prop方法

对于HTML元素后来我们自己定义的dom属性，在处理的时候，使用attr方法

什么是固有属性呢？

举个例子： <a href='http://www.baidu.com' target="_blank" class="btn">百度一下</a>

在这里，<a>元素的dom属性有 'href,target,class',这些属性就是<a>元素本身带有的属性，也是w3c标准中就包含的属性，这些就叫做固有属性，处理这些属性时，建议使用prop方法。

再举个例子：<a href="http://www.baidu.com" id="save" action='save'>保存</a>

在这里，<a>元素的dom属性有 'href,id,action',同理，前面两个href和id是固有属性，而后面的action是我们自定义添加上去的，<a>元素本身是没有这个属性的。像这种自定义的dom属性，处理时建议使用attr方法。使用prop方法取值或者设置值的时候会返回undefined值。(其实在这里没有太大区别，固有属性同样可以使用attr方法操作，只不过自定义属性需使用attr方法操作)

最后一个例子，也是一般情况下区分attr和prop方法的直观表示：（表单元素才能明显区分prop和attr方法的区别）

<input type='checkbox' id='chk1' />

<input type='checkbox' id='chk2' checked="checked" />

（如果不熟悉表单元素的话可以自行查看w3c）像checkbox，radio，select这样的元素，选中属性对应‘checked’，‘checked’和‘selected’，这些属性也属于固有属性，因此需使用prop方法操作才能返回正确的结果。

结果分析：

使用attr方法，打印结果返回：

$("#chk1").attr("checked");　　//undefined

$("#chk2").attr("checked");　　//“checked”

如果使用prop方法，其结果为：

$("#chk1").prop("checked");　　//false

$("#chk2").prop("checked”);　　//true