jQuery中attr()和prop()的区别

在jQuery中，attr()函数和prop()函数都可以用来设置或获取指定的属性，它们的参数和用法几乎相同，但也有它们的不同之处。

1.操作对象不同

在jQuery中，attr()函数用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)，
prop()函数则用于设置或获取指定DOM元素(JS对象，Element类型)上的属性(property)。

2.设置的属性值类型不同

由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。

而prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型

3.其他

<input id="uid" type="checkbox" checked="checked" value="1">

 // 当前jQuery版本为1.11.1
 var uid = document.getElementById("uid");
 var $uid = $(uid);

 document.writeln( $uid.attr("checked") ); // checked
 document.writeln( $uid.prop("checked") ); // true

 // 取消复选框uid的选中(将其设为false即可)
 // 相当于 uid.checked = false;
 $uid.prop("checked", false);

 // attr()获取的是初始状态的值，即使取消了选中，也不会改变
 document.writeln( $uid.attr("checked") ); // checked
 // prop()获取的值已经发生变化
 document.writeln( $uid.prop("checked") ); // false

从1.6版本开始，对于表单元素的checked、selected、disabled等属性,通过attr()获取到的这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。

从上面可以看出，attribute的”checked”、”selected”、”disabled”就是表示该属性初始状态的值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变,而property的”checked”、”selected”、”disabled”才表示该属性实时状态的值(值为true或false)。所以对于能够用prop()实现的操作，也尽量使用prop()函数。