一直都以为jQuery中获取html标签属性就是用attr方法,今天碰巧看到一篇文章,才发现还有一个prop方法,就想着查一下两个方法有什么区别。 结果还真挖出来个坑。
先做个实验,把以下代码保存成html文件,跑一遍(写这篇博客时jQuery版本为1.9.1)
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
这是jQuery官方文档的对prop方法做的一个例子,展示prop和attr的区别。先说结果:
JavaScript
1 2 |
|
为什么会有这种结果?jQuery为什么要提供attr和prop两个类似的方法?这得从html说起。
html中的attribute和property
虽然在中文里这两个词差不多的意思,但html中对此的定义却有严格区别。先大致解释下:
- attribute是html文本层面的,我们在写html时看到的 key=”value” 就是attribute。其值始终是html元素定义时的值,除非html文本改变。
- property是dom层面的,可以理解成用原生JavaScript函数获取的dom对象的属性。并且会随着我们对dom树的操作而改变。 有的property是attribute在dom对象中的一种呈现。所以property和attribute有一定的交集。
看个例子:
HTML
1 |
|
这是一个checkbox,默认是勾选状态的。它的attribute有id,type,class,name和checked。这些attribute的值都不会改变。 即使取消了勾选状态,其checked属性也是”checked”
再看dom层面,id,type,name和checked都有同名的property。class这个attribute对应property的叫className。另外,作为一个dom元素,它还有nodeName这个property。 上面那个checkbox元素的dom对象可以通过JavaScript获取。你可以把property看成JavaScript里面dom对象的属性。
JavaScript
1 2 3 4 5 |
|
明白了这些后,就不难理解jQuery的prop和attr方法的区别了。但事情还没完。
jQuery中的attr和prop
为了遵守html规范,jQuery对attribute和property分别提供了封装方法attr和prop。但因为prop是jQuery 1.6版本才引进的,而且jQuery 1.9之前的版本为了考虑老代码的兼容性问题, 对attr和prop的界限划得有点模糊。
还是拿上面那个checkbox举例子,看看jQuery中各版本的区别,先拿checked属性做个实验
JavaScript
1 2 3 4 5 |
|
然后看看其他属性,attr和prop获取的值是否有区别:
JavaScript
1 2 3 |
|
可以看到这里并没有什么区别,为什么?因为attribute针对的是html文本改变,以上代码,改变name的时候,相应的html文本也产生了变化(用开发工具可以看到)。 所以这里attr和prop获取的都是改变后的值。
最后个人总结一下什么时候适合用什么方法:
- 改变property就会改变html的,不管用prop还是attr都可以。大多数的property都属于此列,比如type,name,src。 你可以用JavaScript改变property后再用开发工具看看html是否产生了变化。
- 改变property不会改变html的,适合用prop,或者jQuery针对该属性专门提供的方法 举个例子,文本框里的value属性,可以通过用户输入,或者用JavaScript改变,prop和val都可以获取正确的值,但优先推荐val。 这种情况attr返回的值就完全不对了。
- 不属于attribute对应的property,适合用prop,比如nodeName。
- 表示true/false含义的attribute,适合用prop,比如checked,disabled,方便做判断。
参考文档
-
jQuery: Test/check if checkbox is checked
这篇文章列举了几种判断checkbox是否被选中的方法,例子挺多。 -
HTML: The difference between attribute and property
这篇文章讲了attribute和property的区别,但对attribute的定义并不正确,attribute并不是始终以在html定义时的初始状态为准,而是始终跟html文本的变化保持同步。 -
jQuery API: prop
官方API,说明了为什么要加入prop这个方法,和在不同版本中的差异。
http://darkbaby123.github.io/blog/2013/02/19/jquery-prop-and-attr/
相关推荐
主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下
官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢
主要介绍了jquery中attr、prop、data区别与用法,结合实例形式分析了jQuery中attr、prop、data的区别、功能、使用方法及相关注意事项,需要的朋友可以参考下
1、.prop( propertyName ) 获取....attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用 Attributes模块的变化是移除了attributes和properties之间模棱两可的东
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?...下面这篇文章主要给大家介绍了Jquery中attr与prop区别的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?关于它们两个的区别,这里谈谈我的心得,我的心得很简单:对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己...
下面小编就为大家带来一篇详谈jQuery中使用attr(), prop(), val()获取value的异同。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes。prop应运而生了。 既然我们想知道他们两的区别,最好就看看他们的源代码,不要被代码长度所吓到,...
主要介绍了jQuery checkbox选中问题之prop与attr注意点,结合form表单实例形式分析了针对火狐浏览器下checkbox失效情况的处理技巧,需要的朋友可以参考下
今儿是脚本之家小编给大家总结的jquery中attr()和prop()方法的区别,感兴趣的朋友参考下
prop()定义和用法 prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时,则返回第一个匹配元素的值。 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。 注意:prop() 方法...
主要介绍了jQuery获取attr()与prop()属性值的方法及区别介绍的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
Prop和attr的作用类似,相同点:两者都可以获取属性值和设置属性值,下面为大家介绍下具体的使用
本文实例讲述了jQuery中attr()与prop()函数用法。分享给大家供大家参考,具体如下: 一、jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常...
jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式