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

时间: 2016-12-19

jQuery .attr() .prop() .data()用法详解的相关文章

JS、jQuery中select的用法详解_javascript技巧

1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

jQuery表格插件datatables用法详解_jquery

一.Datatables简介DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格.主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 二.如何使用在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTables插件来帮助我们完

jQuery旋转插件jqueryrotate用法详解_jquery

本文实例讲述了jQuery旋转插件jqueryrotate用法.分享给大家供大家参考,具体如下: CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(filter),但不全面,而且效果和性能都不好. 今天介绍一款 jQuery 插件--jqueryrotate,它可以实现旋转效果.jqueryrotate 支持所有主流浏览器,包括 IE6.如果你想在低版本

jQuery日历插件datepicker用法详解_jquery

 jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件. 一般MIS系统的前端,尤其是用户注册页面,都会有诸如"出身年月"的日期输入框,最简单的做法就是使用一个<input type="text"/>标签,这样做的弊端有很多:首先是与数据库字段类型的匹配.其次是输入日期的合法性如"13月"或者闰年等等问题,如果深入

基于jQuery.ajax之post()用法详解

$.post(url,[data],[callback],[type]) 说明:这个函数跟$.get()参数差不多,多了一个type参数,type为请求 的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就 和$.get()返回的格式一样,都是字符串的  代码如下 复制代码 $.post("data.php",$("#firstName.val()"),function(data){

jQuery validate验证插件用法详解

一.可选项( options ) [1]  debug      类型:Boolean    默认:false 说明:开启调试模式.如果为true,表单不会提交,而且会在控制台显示一些错误消息(需要Firebug或者Firebug lite).当要阻止表单默认提交事件,尝试去开启它. Js代码 $(".selector").validate({    debug: true }) [2]  submitHandler      类型:Callback    默认:default (na

jQuery中deferred对象用法详解

它解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口.它的主要功能,可以归结为四点.下面我们通过示例代码,一步步来学习. 二.ajax操作的链式写法 首先,回顾一下jQuery的ajax操作的传统写法:  代码如下 复制代码 $.ajax({ url: "test.html", success: function(){ alert("哈哈,成功了!"); }, error:function(){ alert("出错啦!"

jquery事件delegate()方法用法详解

语法很简单 $(selector).delegate(childSelector,event,data,function) 参数说明 childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件.   data 可选.规定传递到函数的额外数据. function 必需.规定当事件发生时运行的函数. delegate 的函数是被某一类型的共同父元素调用,  代码如下 复制代码 listNod

jquery hide(),show()方法用法详解

语法 $(selector).hide(speed,callback) speed带有三个效果参数 •毫秒 (比如 1500) •"slow" •"normal" •"fast" 在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度.宽度.外边距.内边距和透明度. 例  代码如下 复制代码 <html> <head> <script type="text/javascript" src