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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
js function定义函数使用心得
Apr 15 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
解决vue-router路由拦截造成死循环问题
Aug 05 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
php 三维饼图的实现代码
2008/09/28 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
婚礼司仪主持词
2014/03/14 职场文书
职称评定自我鉴定
2014/03/18 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
公司应聘求职信
2014/06/21 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python