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?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...
随机推荐
- 消除JavaScript闭包的一般方法
JavaScript 的闭包是一个其主动发展的特性, 也是一个被动发展的特性. 也就是说, 一方面, JS 有了闭包能更好解决一些问题. 另一方面, JS 为了解决某些问题, 而不得不使用闭包勉强来解 ...
- HBase 事务和并发控制机制原理
作为一款优秀的非内存数据库,HBase和传统数据库一样提供了事务的概念,只是HBase的事务是行级事务,可以保证行级数据的原子性.一致性.隔离性以及持久性,即通常所说的ACID特性.为了实现事务特性, ...
- Cortex-M3 FLASH 日志文件系统
本文简要介绍一下本人在Cortex-M3系统的STM32F10x芯片上开发的一个日志文件系统(与其说是系统,不如说是小小的库).该库的特点是将在STM32F10x芯片上处理数据(历史记录)变得简单可靠 ...
- Eclipse Tomcat : Project facet Java version 1.7 is not supported.
在Eclipse打开一个项目,并用Tomcat运行时,报错:Project facet Java version 1.7 is not supported. 大致的截图如下: "项目中的jd ...
- Javascript的模块化编程
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- security Export/import
export [-k keychain] [-t type] [-f format] [-w] [-p format] [-P passphrase] [-o outfile] Export one ...
- MVC文件上传 - 使用Request.Files上传多个文件
控制器 1: using System; 2: using System.Collections.Generic; 3: using System.IO; 4: using System.Linq; ...
- 读取oracle页面或者进程卡住不动(死锁)
oracle最坑爹的地方:你insert update delete之后 或者kill死锁的时候记得一定要提交事务不然就是死锁卡在那里了 记住 kill死锁也是要提交事务的 select * ...
- SICP 阅读笔记(二)
Chapter 1: Building Abstractions with Procedures 2015-09-29 016 Preface of this chapter QUOTE: The a ...
- for语句应用:乘法表
乘法表: for语句应用: 1: 2: public class chengfa { 3: public static void main(String[] args) { 4: //int i; 5 ...