在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")); // falseconsole.log($("#chk2").prop("checked")); // true
使用attr()函数返回的结果:
console.log($("#chk1").attr("checked")); // undefined
console.log($("#chk2").attr("checked")); // checked上海尚学堂java原作,欢迎阅读上海尚学堂更多相关文章,转载请说明出处。获取更多资料或支持请加薇 java8733