文档章节

jq的attr获取不到checkbox的属性,总是undefined

佳炜
 佳炜
发布于 2016/06/14 20:53
字数 1794
阅读 49
收藏 0

jq的attr获取不到checkbox的属性,总是undefined

 

   jq官网说明:

      As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop()method.

 

  .attr() 不能用于普通对象,数组,窗口,文档等,要重新获取改变dom属性,用.prop()方法。

 

 

 

下面是网上找的

链接:http://www.tuicool.com/articles/3uuQRr6

 

DOM的 attr ibute和 prop erty

今天讲一个JS的小话题,就是DOM节点的 attr ibute和 prop erty的区别,这个点看起来很小,其实背后别有洞天。如果面试一个 前端 ,听他讲讲对这个问题的理解,基本能分辨是不是菜鸟。下面的内容请各位细心体会。

页面有一个INPUT输入框

这个比较简单,没什么好说的,两个值都是’1′。现在  把输入框的值改成100,然后重新取一遍值:

为什么两个值不同了?这就是 attr ibute和 prop erty在作怪。

Attibute

这 个INPUT节点有很多属性(attribute):’type’,’id’,’value’,’class’以及自定义的’ data - explain’。 javascript 的DOM模型提供了两个方法getAttribute()和setAttribute() 读写DOM树节点属性(attribute)值。注意这里的getAttribute()方法有个潜规则:部分特殊属性(比如INPUT的value和 checked ),getAttribute取到的是初始值,这就解释了修改输入框值为100后,v1取到的还是初始值’1′。

Property

Javascript 获取到的DOM节点对象,比如a,你可以把它看作一个基本JS对象(尽管某些浏览器实现上并不完全是),这个对象实现了很多属性 (property):’value’,’className’等,以及一些方法还有前面说的 getAttribute,setAttribute,onclick等。注意这个对象的’value’属性(property)取的值是输入框内的当前 值。所以v2的值是’100′。

推荐大家尽量使用property,这样事情处理起来简单一下,attribute的值永远是字符串,比如:

另 外,由于浏览器实现细节的差异,也存在一些坑,比如:在Chrome,Firefox及IE8之后,标签的attribute名是大小写不敏感 的,DOM.setAttribute(‘myname’,’xxx’)可以通过DOM.getAttribute(‘MyName’)来取,另外在 XHTML文档模式下,设置’tabIndex’为任意值会将’tabindex’值置为0。

对于attribute和property, jquery 中的实现其实挺纠结的,大家应该知道jQ的跟他们相关的三个方法 .attr()、.prop()以及. data (),这三个背后也有渊源。

jQuery .attr() .prop() . data ()

首先看看三个方法的解释:

.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property。

.prop(),此方法jq1.6引入,读/写DOM的property。

.data(),此方法在jq1.2.3引入,作用是把任意的值读取/存储到DOM元素对应的jq对象上。

先说.attr()和.prop(),在jq1.6版之前,没有.prop()方法,而.attr()混淆了attribute和property的概念,导致使用时不小心就会出现bug,如果不读jq源码,还真说不清楚.attr()设置的是attribute还是property。

至于jq为什么这样设计,众说纷纭。有人说jq开发团队自己也没搞清楚attribute和property的区别,也有人说这是过度设计,jq认为用户没必要了解attribute和property的区别,干脆封装到一起了。不管原因是什么,jq这个设计确实不好。

2011年5月份,jq在新版本1.6版中引入新的API .prop()方法,不过升级过程挺痛苦,1.6版对比1.5.2版在.attr()的引入上没有做好向下兼容,一些人升级jq到1.6之后,发现自己的代码挂了。紧接着jq发布1.6.1版解决了兼容问题。

对于加入 .prop() 方法,jq的解释是:首先,给一些DOM对象属性property(比如nodeName,selectedIndex)的获取提供了更简洁的方案,情况前后的对比:

// 不用 .prop()var elem = $("#foo")[0];
if ( elem ) {
    index = elem.selectedIndex;
}
// 用 .prop()
index = $("#foo").prop("selectedIndex");

另外还有一个原因是.prop()的效率好于.attr()。

下 面说说.data(),我们知道 html 5里面DOM标签可以加以一些data-xxx的属性,你可以把.data()看作是存取data-xxx这样DOM附加信息的方法。当 然,.data()存取的内容不仅是字符串,还可以包含数组和对象。从jq1.4.3起, html5 的data-xxx属性会自动被添加到jq的data对象里,比如有下列代码:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"noahlu"}'></div>

下面的等式都成立:

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "noahlu";

尽管.data()用来存数据挺方便,它也是有过不堪回首的过去,请看:

<button id="foo" data-key="1.4000">Click me</button><script>typeof $('#foo').data('key'); </script>

jQuery 1.8之前的版本输出’number’,1.8版本之后输出为’string’。1.8版之前,data会把值转换成基本类型,其实我们这里想要的是’1.4000′并不是1.4。

从.data()的实际用途来看,跟.prop()似乎很像,都可以给DOM对象附加上一些自定义的值。我只能说,他们定位不同,看看他们的各自的方法名,再想想什么场景用什么方法吧。

最后,从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()总是最优的。

参考资料

上面的内容转自: http://www.noahlu.com/blog/javascript-note/jquery-attr-prop-data/

上面的区别导致经常在做 全选 与全不选时等问题,所以在设置 selectedIndex , tagName ,  nodeName ,  nodeType ,  ownerDocument , Checked , 或者defaultSelected时应该使用prop方法,而不是用attr方法。

查询官方API得到解释如下:

The  .prop()  method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting  selectedIndex , tagName ,  nodeName ,  nodeType ,  ownerDocument ,  defaultChecked , or defaultSelected . Since jQuery 1.6, these properties can no longer be set with the .attr()  method. They do not have corresponding attributes and are only properties.

.prop()方法是一种简便的设置值得方式,特别是多属性、使用函数返回值或者一次性在多个elements中设置数值。在设置 selectedIndex ,  tagName ,  nodeName , nodeType ,  ownerDocument ,  defaultChecked , 或者 defaultSelected时应该使用本方法。从jQuery1.6起,这些属性不再能够用.attr()方法设置了,它们没有相当的attributes,只有properties。

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the  value  property of input elements, the  disabled property of inputs and buttons, or the  checked  property of a checkbox. The  .prop()  method should be used to set disable d and checked instead of the  .attr()  method. The  .val() method should be used for getting and setting value.

Properties可以改变DOM元素的动态站台,不适用序列化的attribue。比如input的value属性、input和button 的disabled属性,或者checkbox的checked属性。这时应该使用.prop()来替代.attr()来设置disabled和 checked。.val()用于获取或者设置其value值。

 

来源: <http://www.tuicool.com/articles/3uuQRr6>

 

 

来自为知笔记(Wiz)

 

 

 

© 著作权归作者所有

共有 人打赏支持
佳炜
粉丝 6
博文 10
码字总数 2779
作品 0
嘉兴
jquery 1.6+ 获取checkbox的checked属性总是undefined

项目中用的jquery1.9 今天需要检测一个checkbox的选中状态,想当然的用 .attr("checked") ,结果发现,无论是否选中,这个值都是 undefined 未定义。 折腾了半天,无奈,只能取jq官网看看文档...

吾爱
2013/03/05
0
5
JQUERY控制INPUT 标签 全选和反选案例

大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,...

陈映亮
2016/09/30
57
0
jquery中prop()方法和attr()方法的区别浅析

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成dis...

JackMo2015
2016/08/30
7
0
Jquery 1.6+ .prop()与.attr()方法比较

今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined. 解决这个文章我参考了这个帖子: http:/...

yufenghang
2013/09/27
0
0
jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop(...

i33
2012/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

emoji

前言:随着iOS系统版本的升级,对原生emoji表情的支持也越来越丰富。emoji表情是unicode码中为表情符号设计的一组编码,当然,还有独立于unicode的另一套编码SBUnicode,在OS系统中,这两种编...

HeroHY
37分钟前
2
0
rabbitmq学习(二)

生产者消费者初级案列 ChannelUtils package com.hensemlee.rabbitmq;import com.rabbitmq.client.Channel;import com.rabbitmq.client.Connection;import com.rabbitmq.client.Connecti......

hensemlee
47分钟前
1
0
MarkDown入门简介

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易,而且功能比纯文本更强,因此有很多...

一零贰IV
51分钟前
1
0
druid配置db2参考记录

Driver Name:COM.ibm.db2.jdbc.app.DB2 Driver Type 4 Driver URL Pattern:jdbc:db2://ServerIP:50000/databasename ${driverClassName} 这个参数没有在spring相关的properties文件中配置 ......

tonyfox
54分钟前
1
0
用户体验要素——以用户为设计中心

一、用户体验是什么 产品会与外界发生联系,人们如何去使用产品,人们使用产品无非解决两种问题,一,提高效率;二娱乐。而用户体验兼顾着功能和界面两个方面,为的是“提高人们的工作效率”...

铸剑为犁413
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部