文档章节

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

佳炜
 佳炜
发布于 2016/06/14 20:53
字数 1794
阅读 40
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

7 个致命的 Linux 命令

导读 如果你是一个 Linux 新手,在好奇心的驱使下,可能会去尝试从各个渠道获得的命令。以下是 7 个致命的 Linux 命令,轻则使你的数据造成丢失,重则使你的系统造成瘫痪,所以,你应当竭力避...

问题终结者
今天
0
0
设计模式:工厂方法模式(工厂模式)

工厂方法模式才是真正的工厂模式,前面讲到的静态工厂模式实际上不能说是一种真正意义上的设计模式,只是一种变成习惯。 工厂方法的类图: 这里面涉及到四个种类: 1、抽象产品: Product 2、...

京一
今天
0
0
区块链和数据库,技术到底有何区别?

关于数据库和区块链,总会有很多的困惑。区块链其实是一种数据库,因为他是数字账本,并且在区块的数据结构上存储信息。数据库中存储信息的结构被称为表格。但是,区块链是数据库,数据库可不...

HiBlock
今天
0
0
react native 开发碰到的问题

react-navigation v2 问题 问题: static navigationOptions = ({navigation, navigationOptions}) => ({ headerTitle: ( <Text style={{color:"#fff"}}>我的</Text> ), headerRight: ( <View......

罗培海
今天
0
0
Mac Docker安装流程

久仰Docker大名已久,于是今天趁着有空,尝试了一下Docker 先是从docker的官网上下载下来mac版本的docker安装包,安装很简易,就直接拖图标就好了。 https://www.docker.com/products/docker...

writeademo
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部