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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
el-form 多层级表单的实现示例
Sep 10 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
JS实现php的伪分页
2008/05/25 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
简单介绍Python中的几种数据类型
2016/01/02 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
分析Python中解析构建数据知识
2018/01/20 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python实现最大优先队列
2019/08/29 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
党旗在我心中演讲稿
2014/09/15 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫