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 在网页中的运用(asp.net)
Nov 23 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
Oct 19 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
Python内置函数OCT详解
2016/11/09 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python实时监控cpu小工具
2018/06/21 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
车辆维修工自我评价怎么写
2013/09/20 职场文书
战友聚会邀请函
2014/01/18 职场文书
环保倡议书500字
2014/05/15 职场文书
党员自我剖析材料
2014/08/31 职场文书
代理人委托书
2014/09/16 职场文书
护士年终个人总结
2015/02/13 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
2015教师节通讯稿
2015/07/20 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang