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 三种不同位置代码的写法
Oct 25 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
jQuery返回定位插件详解
May 15 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
vue的基本用法与常见指令
Aug 15 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
微信小程序用户授权最佳实践指南
May 08 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 获取本机外网/公网IP的代码
2010/05/09 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
Java基础知识面试题
2014/03/25 面试题
入党积极分子思想汇报范文
2014/01/05 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
优秀员工获奖感言
2014/03/01 职场文书
六一儿童节主持词
2014/03/21 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
旅行社优秀创业计划书
2014/08/16 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
2014年度思想工作总结
2014/11/27 职场文书
银行求职信模板
2015/03/20 职场文书
2015年宣传工作总结
2015/04/08 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书