Jquery中attr()与prop()的区别

在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。但是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。

1、操作对象不同

attr是单词attribute的缩写，prop是property的缩写，它们的都表示”属性”的意思。不过，在Jquery里面attribute和property是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。
我们来看个例子区分一下什么是HTML文档节点的属性和JS对象的属性：

 

2、应用版本不同

attr()是JQuery 1.0版本就有的函数，prop()是JQuery 1.6版本新增加的函数。也就是说，在JQuery 1.6版本之前，只能使用attr()函数。在JQuery 1.6版本后，可以根据不同的需求来选择使用的函数。

在JQuery 1.6版本之前，attr()函数不仅要对attribute进行设置和获取，还要对property进行设置和获取。在1.6版本之前，attr()可以设置和获取tagName、className、nodeName、nodeType等DOM元素的property。后来1.6版本之后出现了prop函数，可以通过它来对property进行获取和设置，attr()函数才只用来对attribute的进行设置和获取。
但是从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()函数。

3、设置属性值的类型不同

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

总结：
对于HTML元素本身就带有的固有属性，例如：id、name等属性，使用prop()函数。
对于HTML元素自定义的DOM属性，使用attr()函数。
返回值是true/false的属性，建议使用prop()
下面我们举例子解释一下：
"div1" class="class1">

在例子中
元素的DOM属性有”id、class”，这些属性就是
属性自带的属性，我们可以去参考W3C标准里包含的一些属性，这些属性就是固有属性。处理这些属性的时候我们就用prop()函数。
"div1" class="class1" data_id="1">

这里的例子，固有属性是”id、class”,然后又自定义了一个”data_id”的属性，
元素本身就没有这个属性的，这种就是自定义的DOM属性。处理这种属性时，就用attr()函数。如果使用了prop()函数去获取或设置值时，会返回undefinded。

我们再来看一个属性值返回true和false的例子：
"chk1" type="checkbox" />
"chk2" type="checkbox" checked="checked" />

checkbox、radio和select这三个元素，选中的属性对应的是”checked、checked和selected”，这些也是固有属性，因此我们尽量用prop()函数去处理。在1.6版本后，attr()获取的值返回的都是字符串，因此用attr()去获取返回值是true/false的属性，返回值是undefinded。

使用prop()函数返回的结果:
console.log($("#chk1").prop("checked")); // false
console.log($("#chk2").prop("checked")); // true

使用attr()函数返回的结果：

console.log($("#chk1").attr("checked")); // undefined
console.log($("#chk2").attr("checked")); // checked

上海尚学堂java原作，欢迎阅读上海尚学堂更多java技术相关文章，转载请说明出处。获取更多资料或支持请加薇 java8733