吃喝玩乐在潮州(www.521000.wang) 潮州本地化社区!

jQuery .attr() .prop() .data()区别及全选等问题

技术分享 逃小七 1359℃ 3评论

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.css119.com/archives/1766

转载请注明:逃小七(Richard) » jQuery .attr() .prop() .data()区别及全选等问题

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 你好,你的网站不错,可以跟你交换链接嘛? 我的网站名称是:泉州SEO博客地址:http://www.lin58.com/ (博客专注SEO优化和SEM营销经验,分享网络营销实战推广) 网站情况是:PR2,快照每天最新,每天流量IP300,PV1500 目前已在各大站长论坛和知名博客投广告中 如果你的站能跟我交换链接,请联系我的QQ1010389494进行咨询 希望能长期合作,互利共赢!共同发展!
    SEO博客2016-01-26 00:06 回复
  2. 看了文章才知道觉得不错,非常喜欢
    净水器厂家2018-01-16 10:57 回复