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 相关文章推荐
jQuery自定义事件的简单实现代码
Jan 27 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
javascript变量声明实例分析
Apr 25 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
js导出excel文件的简洁方法(推荐)
Nov 02 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
详解Angular2响应式表单
Jun 14 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
Vue SSR 即时编译技术的实现
May 06 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
php页面函数设置超时限制的方法
2014/12/01 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
django框架中间件原理与用法详解
2019/12/10 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
土木工程专业个人求职信
2013/12/05 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
导游个人求职信
2014/04/25 职场文书
计算机求职信
2014/07/02 职场文书
植物生产学专业求职信
2014/08/08 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书