【转】jQuery的attr与prop
原文:《jQuery的attr与prop》
jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东西的缩写。
attribute与property
attribute和property都可以翻译为属性,为了以示区别,通常把这两个单词翻译为属性与特性。
<div id="test">Click Here</div>
上面这段HTML语句中有三个节点,分别是Element “div”、attribute “id”、Text “click here”,我们最常见的attribute正式指的attribute类型节点,在JavaScript有专门处理attribute的函数 .getAttribute(name) / setAttribute(name,value)。当然attribute不只是我们能够在HTML文档上看到的这几个,我们可以自定义attributed加到DOM节点中
<div id="test">123</div> <script type="text/javascript">
var t=document.getElementById('test');
t.setAttribute('class','active');
t.setAttribute('customizedAttr','customized');
</script>
这样可以div被修改为
<div id="test" class="active" customizedattr="customized">123</div>
通过方法 setAttribute设置的attribute最终都会反映到元素的attribute类型的节点中
property是DOM对象的字段,跟我们平常使用的一些对象一样,包含很多字段,这些字段就是property,取值或者设置值和普通字段一样通过”对象.字段“的方式。
看起来attribute和property应该没有什么关系才对,怎么会。。。attribute和property容易混倄是因为很多attribute节点还有一个相对应的property属性,比如上面div的”id“ attribute 同样可以用t.id取到(实际上绝大部分人都是这样获取的),通过property更改id后,用getAttibute获取的id是更新后的id。
t.id='test1';
console.log(t.getAttribute('id'));//test1
同样我们也可以自定义property
t.customizedProp='customized prop';
区别
1. 于build-in属性,attribute和property共享数据,attribute更改了会对property造成影响,反之亦然,但是两者的自定义属性是独立的数据,即使name一样,也互不影响,看起来是下面这张图,但是IE6、7没有作区分,依然共享自定义属性数据
2. 并不是所有的attribute与对应的property名字都一致,比如刚才使用的attribute 的class属性,使用property操作的时候应该是这样className
t.className='active2';
3. 对于值是true/false的property,类似于input的checked attribute等,attribute取得值是HTML文档字面量值,property是取得计算结果,property改变并不影响attribute字面量,但attribute改变会一向property计算
<input id="test3" type="checkbox"/>
var t=document.getElementById('test3');
console.log(t.getAttribute('checked'));//null
console.log(t.checked);//false; t.setAttribute('checked','checked');
console.log(t.getAttribute('checked'));//checked
console.log(t.checked);//true t.checked=false;
console.log(t.getAttribute('checked'));//checked
console.log(t.checked);//false
4. 对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute取得是字面量,property取得是计算后的完整路径
<a id="test4" href="#">Click</a>
var t=document.getElementById('test4');
console.log(t.getAttribute('href'));//#
console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#
关于浏览器(IE)造成的兼容性问题可以看看IE 混淆了 DOM 对象属性(property)及 HTML 标签属性(attribute),造成了对 setAttribute、getAttribute 的不正确实现
attr和prop
相信看完上面内容,大家就明白为什么jQuery要添加prop方法了,在jQuery API中也有专门解释
Attributes VS. Properties
在一些特殊的情况下,attributes和properties的区别非常大。在jQuery1.6之前,.attr()方法在获取一些attributes的时候使用了property值,这样会导致一些不一致的行为。在jQuery1.6中,.prop()方法提供了一中明确的获取property值得方式,这样.attr()方法仅返回attributes。
比如,selectedIndex
, tagName
, nodeName
, nodeType
, ownerDocument
, defaultChecked
, 和defaultSelected应该使用.prop()方法获取/设置值。
在jQuery1.6之前这些不属于attribute的property需要用.attr()方法获取。这几个并没有相应的attibute,只有property。
关于布尔类型 attributes,比如一个这样的HTML标签,它在JavaScript中变量名为elem
<input type="checkbox" checked="checked" />
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
根据W3C forms specification,checked属性是一个布尔值,这就意味着只要checked属性在HTML中表现出来了,那么相应的property就应该是true,即使checked没有值,这点儿对其它布尔类型的属性一样适用。
然而关于checked 属性需要记住的最重要的一点是:它和checked property并不是一致的。实际上这个attribute和defaultChecked
property一致,而且只应该用来设置checkbox的初始值。checked attribute并不随着checkedbox的状态而改变,但是checked property却跟着变。因此浏览器兼容的判断checkebox是否被选中应该使用property
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
这对其它一些类似于selected、value这样的动态attribute也适用。
在IE9之前版本中,如果property没有在DOM元素被移除之前删除,使用.prop()方法设置DOM元素property(简单类型除外:number、string、boolean)的值会导致内存泄露。为了安全的设置DOM对象的值,避免内存泄露,可以使用.data()方法。
使用场景
其实明白了上面讲的内容,什么时候该使用.attr()什么时候该使用 .prop()就很清楚了,不过还是传一张坊间很流行的图
【转】jQuery的attr与prop的更多相关文章
- 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()理解
jquery1.6版本后引入了prop()方法,很多时候总是混淆attr()与prop()这俩,下面分析一下这俩的区别 在此之前,先来了解一下html 的attribute和property,因为jq ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jquery中attr和prop的区别分析
这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...
- tips:Jquery的attr和prop的区别
Jquery的attr和prop的区别 描述:想做一个复选框checkbox全选的功能,当勾选全选后,将子项的复选框状态设置成一致的, 但遇到了一个问题,就是attr函数并不能改变子项的checkbo ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jQuery的attr()与prop()的区别
jQuery的attr()与prop()都是用于获取与设置属性的,但它们又各有不同. attr()一般是用于设置默认值,prop()一般是用于设置属性值,即对于像“diabled”,"che ...
随机推荐
- vSphere虚拟机磁盘热扩容
1.添加硬盘 2.刷新服务器文件系统 新添加的硬盘需要刷新文件系统,要不然不能识别新添加的硬盘. 对scsi_host进行重新扫描,查找 scsi 驱动器的号 驱动号为scsi后面的数字,即为2,此时 ...
- MFC中使用用户剪贴板
代码逻辑: 拷贝功能: 1.从编辑控件中获取文本. 2.打开并清空剪贴板.(OpenClipboard,EmptyClipboard) 3.创建一个全局缓冲区.(GlobalAlloc) 4.锁定缓冲 ...
- 新手怎么读懂一个中型的Django项目
[前言]中型的项目是比较多的APP,肯会涉及多数据表的操作.如果有人带那就最好了,自己要先了解基本的django框架(MTV ,ORM等)师傅可以给讲解一下框架怎么组织url.py,model.py, ...
- LocalActivityManager与ActivityGroup
Helper class for managing multiple running embedded activities in the same process. This class is no ...
- java7(3)——增强的catch之自动释放资源
跟mutilcatch一样,java7提供了自动释放资源的方法,但还是很少看到人使用,估计是麻烦去重写close方法.不过jdk内部一些类已经改成使用增强的catch来释放资源的写法,所以我们有必要了 ...
- Jmeter(五)mysql的增删改查
一.导入jdbc的jar包,因为jmeter本身不能直接连接mysql,所以需要导入第三方的jar包,来连接mysql jar包下载地址:https://pan.baidu.com/s/17qQZPF ...
- usb-tooltip 重写.tooltip { word-break: break-all; }解决单词内换行
<div style="padding: 5px 10px; font-size: 16px; text-align: left" class="truncate& ...
- CentOS 6.4中yum安装配置LAMP服务器(Apache+MySQL+PHP5)
准备篇: 1.配置防火墙,开启80端口.3306端口 vim /etc/sysconfig/iptables -A INPUT -m state --state NEW -m tcp -p tcp ...
- MySQL高可用架构之MHA(转)
简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是 ...
- springboot 整合 CXF 版本异常 java.lang.NoClassDefFoundError:ServletRegistrationBean
在使用SpringBoot 项目整合webservice组件 CXF的时候,在启动时,抛出异常如下,查阅资料初步判断为版本问题.升级到高版本后正常启动. cxf 刚开始使用版本 3.1.7 后更新为 ...