jQuery 1.6+ 中attr()与prop() 区别
最近在写一个关于checkbox全选与取消全选的优化方法时,看到很多高手用到了.prop()。
于是在jquery的帮助文档查了一下,才知道这是在jquery 1.6.1中新加的方法,用来设置属性。但已经有了attr(),为何还要加入prop()呢?于是查阅了一下相关文档,总结一下。
下面主要写一下它们在何种情况下被使用: 一、checked,selected,readonly和disabled在1.6.1中和1.6之前的处理相同,也就是说还是直接用attr()即可,如
$(“:checkbox”).attr(“checked”, true);
$(“option”).attr(“selected”, true);
$(“input”).attr(“readonly”, true);
$(“input”).attr(“disabled”, true);
甚至是这样的代码:
if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }
都是可以在1.6以上的jquery中正常运行的,但有一些bug,在下面讲到。 二、下面的.attr()的例子,虽然在jQuery 1.61之前的版本中能正常工作,但是现在必须使用.prop()方法代替:
.attr .prop
$(window).attr() $(window).prop()
$(document).attr() $(document).prop()
$(':checkbox').attr('checked',true) $(':checkbox').prop('checked',true)
$('option').attr('selected',true) $('option').prop('selected',true)
首先,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”>
但它仅表示checked属性在页面加载的时候被设置成默认值或初始值,而不管checkbox元素是否被选中。 而通常 properties 是一个浏览器用来记录当前属性值的东西。正常情况下,properties反映它们相应的attributes。
所以,当用户点击一个checkbox元素或选中一个select元素的一个option时,使得properties保持最新,但对应的attributes却不一定,它仅被浏览器用来保存该属性的初始值。
在jQuery1.6中,如果使用下面的方法设置checked:
$(“:checkbox”).attr(“checked”, true);
将不会检查checkbox元素,因为它是用来设置属性的,但是设置的都是初始值。
综合,我觉得,在设置这些prioerties时,使用prop(),而在获取初始化的值是使用attr()。
下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表: autofocus, autoplay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected 当然,代码仍然可以在jQuery1.6.1中正常运行,还是建议使用.prop()方法来设置这些boolean attributes/properties.
jQuery 1.6+ 中attr()与prop() 区别的更多相关文章
- jQuery中attr()与prop()区别介绍
.attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. •.attr( attributeName ) •.attr( attributeName ) ...
- jquery中attr()与prop()区别
我们知道jquery中获取元素属性有两种常见的方法,一个是attr()方法,这个是用的比较多的,也是我们第一个想到的.另外一个就是prop()方法了,这个方法之前很少用到,它是jquery1.6之后新 ...
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jquery中attr和prop的区别(转)
在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jquery中attr和prop的区别分析
这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- Jquery学习笔记(6)--jquery中attr和prop的区别【精辟】
jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...
随机推荐
- Eclipse默认配色的恢复方法
Eclipse默认配色的恢复方法 很多搞开发的同学一开始不喜欢默认的eclipse白底配色,去网上千辛万苦搜到了很多黑底暗色的各种eclipse配色然后import上了,之后却发现并不适合自己,想找默 ...
- Stack & Heap in Java
Stack and Heap 都是Java用来在RAM中存放数据的地方.Java自动管理堆和栈,用户不能直接的设置堆或栈. Stack:存在于栈中的数据,其大小与生存周期是确定的,栈中的数据可以共享 ...
- hdu 4277 USACO ORZ(dfs+剪枝)
Problem Description Like everyone, cows enjoy variety. Their current fancy is new shapes for pasture ...
- js函数收藏:获取cookie值
//先设置一段子cookie var d = new Date(); d.setMonth(d.getMonth() + 1); d = d.toGMTString(); var a = " ...
- (转)pem, cer, p12 and the pains of iOS Push Notifications encryption
转自:http://cloudfields.net/blog/ios-push-notifications-encryption/ The serious pains of setting up a ...
- 数据库和linq中的 join(连接)操作
sql中的连接 sql中的表连接有inner join,left join(left outer join),right join(right outer join),full join(full o ...
- spring技术翻译开始
从今天开始,我会坚持每天花费两个小时来翻译一本英文书(当然自己觉得绝对算得上是经典),可能我英文水平有限,但也请路过的高人予以指点. 如果有翻译的出入很大,望各位告知,本人一定更改.决定翻译的目的有两 ...
- [React] React Router: activeStyle & activeClassName
react-router provides two props for setting a specific style on a Link component whose path matches ...
- [Falcor] Building Paths Programmatically
model.setValue('genreList[0].titles[0].rating', 5) .then(function (value) { model.get('genreList[0.. ...
- Linux - Eclipse CDT + GCC 安装(2014.10.2)
Eclipse CDT + GCC 安装 (2014.10.2) 本文地址:http://blog.csdn.net/caroline_wendy 1. 安装Eclipse,在官方站点下载Eclips ...