jquery中prop和attr的区别

最近开发过程中，遇到处理复选框的值，留意下 attr，props 的区别

---

1、用于设置的属性值类型不同

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

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

2、其他细节问题

在 jQuery 1.6 之前，只有 attr()函数可用，该函数不仅承担了 attribute 的设置和获取工作，还同时承担了 property 的设置和获取工作。例如：在 jQuery 1.6 之前，attr()也可以设置或获取 tagName、className、nodeName、nodeType 等 DOM 元素的 property。

直到 jQuery 1.6 新增 prop()函数，并用来承担 property 的设置或获取工作之后，attr()才只用来负责 attribute 的设置和获取工作。

此外，对于表单元素的 checked、selected、disabled 等属性，在 jQuery 1.6 之前，attr()获取这些属性的返回值为 Boolean 类型：如果被选中 (或禁用) 就返回 true，否则返回 false。

但是从 1.6 开始，使用 attr()获取这些属性的返回值为 String 类型，如果被选中 (或禁用) 就返回 checked、selected 或 disabled，否则 (即元素节点没有该属性) 返回 undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中 (或禁用) 状态，对应的属性值也不会发生改变。

因为 jQuery 认为：attribute 的 checked、selected、disabled 就是表示该属性初始状态的值，property 的 checked、selected、disabled 才表示该属性实时状态的值(值为 true 或 false)。

因此，在 jQuery 1.6 及以后版本中，请使用 prop()函数来设置或获取 checked、selected、disabled 等属性。对于其它能够用 prop()实现的操作，也尽量使用 prop()函数。

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

<script type="text/javascript">
// 当前 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
</script>