jQuery学习之prop和attr的区别示例介绍


Posted in Javascript onNovember 15, 2013

1、.prop( propertyName )
获取匹配集合中第一个元素的Property的值
2、
.prop( propertyName, value )
.prop( map )
.prop( propertyName, function(index, oldPropertyValue) )
给匹配元素集合设定一个或多个属性

.prop()和 .attr()区别

下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用

Attributes模块的变化是移除了attributes和properties之间模棱两可的东西,但是在jQuery社区中引起了一些混乱,因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug,很难维护。jQuery1.6.1对Attributes模块进行了更新,并且修复了几个bug。

elem.checked true (Boolean) Will change with checkbox state
$(elem).prop("checked") true (Boolean) Will change with checkbox state
elem.getAttribute("checked") "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6) "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+) "checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6) true (Boolean) Changed with checkbox state

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

这三个都是返回Boolean值。

为了让jQuery1.6中的.attr()方法的变化被理解的清楚些,下面是一些使用.attr()的例子,虽然在jQuery之前的版本中能正常工作,但是现在必须使用.prop()方法代替:
jQuery学习之prop和attr的区别示例介绍 
首先,window或document中使用.attr()方法在jQuery1.6中不能正常运行,因为window和document中不能有attributes。它们包含properties(比如:location或readyState),必须使用.prop()方法操作或简单地使用javascript原生的方法。在jQuery1.6.1中,window和document中使用.attr()将被自动转成使用.prop,而不是抛出一个错误。

其次,checked,selected和前面提到的其它boolean attributes,因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上,一个attribute就是以下html中你看到的:

<input type=”checkbox” checked=”checked”>

boolean attributes,比如:checked,仅被设置成默认值或初始值。在一个checkbox的元素中,checked attributes在页面加载的时候就被设置,而不管checkbox元素是否被选中。

properties就是浏览器用来记录当前值的东西。正常情况下,properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时,boolean properties保持最新。但相应的boolean attributes是不一样的,正如上面所述,它们仅被浏览器用来保存初始值。

$(“:checkbox”).get(0).checked = true;

// Is the same as $(":checkbox:first").prop(“checked”, true);

在jQuery1.6中,如果使用下面的方法设置checked:

$(“:checkbox”).attr(“checked”, true);

将不会检查checkbox元素,因为它是需要被设置的property,但是你所有的设置都是初始值。

然而,曾经jQuery1.6被释放出来的时候,jQuery团队明白当浏览器仅关心页面加载时,设置一些值不是特别的有用。所以,为了保持向后兼容性和.attr()方法的有用性,我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。

最普通的attributes是checked,selected,disabled和readOnly,但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表:

autofocus, autoplay, async, checked, controls, defer, disabled,

hidden, loop, multiple, open, readonly, required, scoped, selected

还是建议使用.prop()方法来设置这些boolean attributes/properties,即使这些用例没有转换成使用.prop()方法,但是你的代码仍然可以在jQuery1.6.1中正常运行。

下面是一些attributes和properties的列表,正常情况下,应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法,但是.attr()方法可以运行在所有的attributes情况下。

注意:一些DOM元素的properties也被列在下面,但是仅运行在新的.prop()方法中
jQuery学习之prop和attr的区别示例介绍 
*例如: window.location

**如果需要在(if needed over) .width()

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行,就像1.6之前做的那样)

3、首选用法的概述

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

上面的概述已经描述的够清楚了,我也没有必要再总结了。

参考文献:
http://hxq0506.iteye.com/blog/1046334

Javascript 相关文章推荐
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 #Javascript
jquery+json实现数据列表分页示例代码
Nov 15 #Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 #Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 #Javascript
js螺旋动画效果的具体实例
Nov 15 #Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 #Javascript
JS读取XML文件示例代码
Nov 15 #Javascript
You might like
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
javascript时区函数介绍
2012/09/14 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python检测QQ在线状态的方法
2015/05/09 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
django rest framework serializers序列化实例
2020/05/13 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
浅析python连接数据库的重要事项
2021/02/22 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
技术人员面试提纲
2013/11/28 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python