jQuery函数attr()与prop()的区别

1.介绍

在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同，但是他们之间还是存在区别，我们下面区别一下：

2.区别

2.1 操作对象不同

"attr"和"prop"分别是单词"attribute"和"property"的缩写，并且它们均表示"属性"的意思。不过，在jQuery中，"attribute"和"property"却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。

如果把DOM元素看成是一个普通的Object对象，这个对象在其定义时就具有一些属性（property），比如把select的option当做一个对象：

var option = {
selected:false，
disabled:false，
attributes:[],
...
}

现在，我们一目了然了，attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，它是一个类数组的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性，是一个以名值对(name=”value”)的形式存放在Object中的属性。

2.2 版本区别

attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。

2.3 设置的属性值类型

由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

比如：

从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回"checked"、"selected"或"disabled"，否则(即元素节点没有该属性)返回undefined。
property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

2.4 使用场景

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：

 •对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

•对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

3 实例说明

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"