jquery中的attr和prop深度理解

DOM的 attr ibute和 prop erty

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()总是最优的。