乐趣区

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>

退出移动版