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?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...
随机推荐
- Hadoop-2.x的源码编译
由于在Hadoop-2.x中,Apache官网上提供的都是32位版本,如果是生产环境中则需要自行编译64位,编译Hadoop-2.x版本方法如下: 安装编译源码所依赖的底层库 yum install ...
- Easyui获取数据库date数据的显示
众所周知Oracle数据库中的date与众不同,在Easyui中显示数据库的date类型如果不经过转化为显示为Object.因此需要经过处理. 1.首先你要写转化date的JavaScript < ...
- linux内存管理--slab及其代码解析
Linux内核使用了源自于 Solaris 的一种方法,但是这种方法在嵌入式系统中已经使用了很长时间了,它是将内存作为对象按照大小进行分配,被称为slab高速缓存. 内存管理的目标是提供一种方法,为实 ...
- (原)Mac下Apache添加限制IP线程模块:mod_limitipconn.so
1.下载:http://dominia.org/djao/limit/mod_limitipconn-0.24.tar.bz2 解压到一个目录:我的是~/Download/mod_limitipcon ...
- Java Web的数据库操作(一)
一.JDBC技术 1.JDBC简介 JDBC是Java程序与数据库系统通信的标准API,它定义在JDK的API中,通过JDBC技术,Java程序可以非常方便地与各种数据库交互,JDBC在Java程序与 ...
- Jquery autocomplete 插件使用
轻松实现类似百度输入框联想功能: autocomplete 是一个很厉害的插件,该插件基于jquery,在jquery官网能下载到最新版本. 首先,jQuery UI 是基于 jQuery 的,所以, ...
- NHibernate——基本映射(5)
一.映射定义概括 1.1 映射定义(Mapping declaration) 对象和关系数据库之间的映射是用一个XML文档(XML document)来定义的.这个映射文档被设计为易读的,并且可以手工 ...
- arcmap从excel坐标数据生成点shp文件
概述 今天试图在ArcMap中将excel数据转成点文件,在"Display XY Data"的时候,无法选择X,Y字段,很是纳闷,原来Excel中列的格式是文本,导致无法选择.有 ...
- spring 配置文件 引入外部的property文件的两种方法
spring 的配置文件 引入外部的property文件的两种方法 <!-- 引入jdbc配置文件 方法一 --> <bean id="propertyConfig ...
- HTML 学习网站
http://www.w3school.com.cn/tiy/t.asp?f=html_intro