jQuery $.data()方法使用注意细节


Posted in Javascript onDecember 31, 2012

前段时间同事在群里对jQuery里的.data()方法大发牢骚:
XXX(NNNNNNN) 15:11:34
<a id="a" data-xxx="00123" />
alert($('#a').data('xxx'));//123
data方法不靠谱
XXX(NNNNNNN) 15:13:17
老老实实用attr('data-xxx')吧细研究了下jQuery文档对.data()方法的描述:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. 
The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 
specification.

针对如下示便
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 
$("div").data("role") === "page"; 
$("div").data("lastValue") === 43; 
$("div").data("hidden") === true; 
$("div").data("options").name === "John";

即当使用.data()获取值时,jQuery会首先尝试将获取的字符串值转化成JS类型,包括布尔值,null,数字,对象,数组:
若值是”true|false”,则返回相应的布尔值;
若值是”null”,则返回null;
若值是纯数字构成的字符串(+data + ”” === data),则返回相应的数字(+data);
若值是由(?:\{[\s\S]*\}|\[[\s\S]*\])$,比如”{key:value}“或[1,2,3],则尝试使用jQuery.parseJSON解析之;
否则返回字符串值
当然文档里也特意说明了——如果就是想获取字符串值而不想获得自动转换的值,可以使用.attr(“data-”+key)来获取相应的值:
To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

如下为jQuery源码
function dataAttr( elem, key, data ) { 
// If nothing was found internally, try to fetch any 
// data from the HTML5 data-* attribute 
if ( data === undefined && elem.nodeType === 1 ) { 
// rmultiDash = /([A-Z])/g 
var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase(); 
data = elem.getAttribute( name ); 
if ( typeof data === "string" ) { 
try { 
/*.data(key)方法尝试将获取的值转化成JS类型,包括布尔值,null,数字,对象,数组*/ 
data = data === "true" ? true : 
data === "false" ? false : 
data === "null" ? null : 
// Only convert to a number if it doesn't change the string 
+data + "" === data ? +data : 
/*rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,*/ 
rbrace.test( data ) ? jQuery.parseJSON( data ) : 
data; 
} catch( e ) {} 
// Make sure we set the data so it isn't changed later 
jQuery.data( elem, key, data ); 
} else { 
data = undefined; 
} 
} 
return data; 
}
Javascript 相关文章推荐
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
vue实现循环切换动画
Oct 17 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 #Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 #Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 #Javascript
javascript中的缓动效果实现程序
Dec 29 #Javascript
通过正则格式化url查询字符串实现代码
Dec 28 #Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 #Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 #Javascript
You might like
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
php强制下载文件函数
2016/08/24 PHP
php封装一个异常的处理类
2017/06/08 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python3中详解fabfile的编写
2018/06/24 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
2014年审计工作总结
2014/11/17 职场文书
家属答谢词
2015/01/05 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA