jquery中dom元素的attr和prop方法的理解

一、背景

　　在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候，经常不知道dom元素的attr和prop方法到底有什么区别？各自有什么应用场景，什么时候使用attr方法更合适？什么时候使用prop方法更加方便？今天我就结合自己平常的使用来谈谈这些问题以及我个人的理解。

二、举例说明

　　1.我们经常会在自己的页面中使用a标签来进行链接到不同的页面

<a id="link" href="http://www.baidu.com" target="_black" class="btn">百度主页</a>

在上面这个例子中，href、target、class、id这些dom属性，是a元素本身就具有的。也是W3C里本身就包含的几个属性，换句话说是IDE中能够自动提示的属性，这些属性就被称为dom元素的固有属性，这种情况下，我建议使用prop方法。

　　2.我们经常会使用a标签进行触发自定义事件

<a href="#" id="link" action="delete">删除文章</a>

这个例子中该DOM元素的属性有：href、id、action.那么很明显前两个是该dom元素的固有属性，最后一个是我们自己定义的属性。a标签中的固有属性中并不包含该属性。这些属性被称为dom元素的自定义属性，这种情况下，我建议使用attr方法。此时若使用prop方法进行设置和获取该属性的值时就会返回undefined值。

　　3.我们经常会使用到checkbox/radio/selector来进行选择

<input type="checkbox" id="se" value="3">是否选中
<input type="radio" id="sel" checked="checked"/>是否选中
<select id="selector">
<option id="op" value="1" selected="selected">选择1</option>
<option value="2">选择2</option>
<option value="3">选择3</option>
<option value="4">选择4</option>
</select>

像上面这个例子中的checkbox、radio、select等元素的选中属性"checked"和"selected"，这些属性也是dom元素的固有属性，因此使用prop方法才能正确的进行获取和设置。

$("#se").prop("checked") == false
$("#sel").prop("checked") == true
$("#op").prop("selected") == true

如果使用attr方法会出现下面的结果

$("#se").attr("checked") == 'undefined'
$("#sel").attr("checked") == 'checked'
$("#op").attr("selected") == 'selected'

但网上也有说官方的建议是：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。

以上是个人理解，欢迎提出不同意见哈~