jquery中attr和prop的区别

简介: 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

 

上面的描述也许有点模糊,举几个例子就知道了。 

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

 

再举一个例子:

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

全文完。

 

作者:Tyler Ning
出处:http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址williamningdong@gmail.com  联系我,非常感谢。

目录
相关文章
|
Java 编译器 Go
Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序
Go 语言 入门 && 基于 GoLand 2023.1 创建第一个Go程序
423 0
|
关系型数据库 MySQL 数据安全/隐私保护
使用 Docker 部署一个文档管理系统,让宝贵文档不在丢失!
使用 Docker 部署一个文档管理系统,让宝贵文档不在丢失!
|
数据可视化 Python
【PyQt5桌面应用开发】2.可视化界面编程步骤(超级详细)
【PyQt5桌面应用开发】2.可视化界面编程步骤(超级详细)
1761 1
|
机器学习/深度学习 PyTorch 算法框架/工具
通过实例学习Pytorch加载权重.load_state_dict()与保存权重.save()
通过实例学习Pytorch加载权重.load_state_dict()与保存权重.save()
286 0
|
机器学习/深度学习 存储 数据采集
m基于强化学习的永磁同步电机位置控制器simulink仿真,对比传统的PI控制器和模糊PI控制器
m基于强化学习的永磁同步电机位置控制器simulink仿真,对比传统的PI控制器和模糊PI控制器
587 1
|
人工智能 自然语言处理 算法
AIGC创作的一些思路和方法
AIGC创作的一些思路和方法
475 2
|
前端开发 JavaScript Go
Python3+Flask结合Socket.io配合前端Vue实现简单全双工在线客服系统
在之前的一篇文章中:[为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统](https://v3u.cn/a_id_67),详细介绍了websocket协议以及结合Django如何实现各种功能,本次我们尝试采用Socket.io这个库和Flask来配合使用,完成一个简易的在线客服聊天系统,看看二者有什么区别。
Python3+Flask结合Socket.io配合前端Vue实现简单全双工在线客服系统
|
网络协议 Java 应用服务中间件
【高并发】高并发环境下如何优化Tomcat性能?看完我懂了!
Tomcat作为最常用的Java Web服务器,随着并发量越来越高,Tomcat的性能会急剧下降,那有没有什么方法来优化Tomcat在高并发环境下的性能呢?
691 1
【高并发】高并发环境下如何优化Tomcat性能?看完我懂了!
|
算法 安全 Java
44个Java代码性能优化总结
代码优化的最重要的作用应该是:避免未知的错误。在代码上线运行的过程中,往往会出现很多我们意想不到的错误,因为线上环境和开发环境是非常不同的,错误定位到最后往往是一个非常小的原因。然而为了解决这个错误,我们需要先自验证、再打包出待替换的class文件、暂停业务并重启,对于一个成熟的项目而言,最后一条其实影响是非常大的,这意味着这段时间用户无法访问应用。因此,在写代码的时候,从源头开始注意各种细节,权衡并使用最优的选择,将会很大程度上避免出现未知的错误,从长远看也极大的降低了工作量。
44个Java代码性能优化总结