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的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
js charAt的使用示例
Feb 18 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
js实现简单的倒计时
Jan 28 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
第十一节 重载 [11]
2006/10/09 PHP
一个显示天气预报的程序
2006/10/09 PHP
第一节--面向对象编程
2006/11/16 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php构造函数的继承方法
2015/02/09 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
js验证密码强度解析
2020/03/18 Javascript
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
python绘制双柱形图代码实例
2017/12/14 Python
dpn网络的pytorch实现方式
2020/01/14 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
2014年小学植树节活动方案
2014/03/02 职场文书
租车协议书
2015/01/27 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
python 如何用terminal输入参数
2021/05/25 Python
vue3不同环境下实现配置代理
2022/05/25 Vue.js