博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery中attr()与prop()的区别
阅读量:5884 次
发布时间:2019-06-19

本文共 2121 字,大约阅读时间需要 7 分钟。

在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原作,欢迎阅读上海尚学堂更多相关文章,转载请说明出处。获取更多资料或支持请加薇 java8733

你可能感兴趣的文章
exchange 2016 安装开源垃圾邮件网关
查看>>
javascript鼠标事件【部分】
查看>>
SSH 通过密钥登录
查看>>
今天只是一个开始
查看>>
Mycat读写分离以及拆库拆表综合实验2:部署配置mycat读写分离与拆库拆表
查看>>
程序至上
查看>>
Linux系统详细启动流程
查看>>
高性能golang后端处理网络模块包
查看>>
android面试题
查看>>
test
查看>>
郭宇:Airpub - 纯前端博客引擎实践
查看>>
Progress Image View
查看>>
开源 免费 java CMS - FreeCMS1.5-数据对象-job
查看>>
开源 java CMS - FreeCMS2.3字典管理
查看>>
开源 java CMS - FreeCMS2.4 模板管理
查看>>
理解HTTP session原理及应用
查看>>
JNI学习积累之三 ---- 操作JNI函数以及复杂对象传递
查看>>
maven环境快速搭建
查看>>
什么是单链表插入排序?
查看>>
mycncart 商品筛选 filter 模组设定教程
查看>>