jquery中attr和prop的区别分析


Posted in Javascript onMarch 16, 2015

在高版本的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"

全文完。

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
angular实现商品筛选功能
Feb 01 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 #Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 #Javascript
jQuery实现的支持IE的html滑动条
Mar 16 #Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 #Javascript
nw.js实现类似微信的聊天软件
Mar 16 #Javascript
JavaScript控制table某列不显示的方法
Mar 16 #Javascript
详解addEventListener的三个参数之useCapture
Mar 16 #Javascript
You might like
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php上传大文件设置方法
2016/04/14 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
angular.element方法汇总
2015/01/07 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python机器学习之随机森林(七)
2018/03/26 Python
python实现图片文件批量重命名
2020/03/23 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
如何运行带参数的python脚本
2019/11/15 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
淘宝活动策划方案
2014/02/06 职场文书
应聘英语教师求职信
2014/04/24 职场文书
销售工作决心书
2015/02/04 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL