欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

jquery .attr() .prop() .data() 差别

更新时间: 2014-01-05 00:51:03 责任编辑: Author_N1

 

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()总是最优的。
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:51:03
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/550/
本文WWW.DOC100.NET DOC100.NET版权所有。