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

 更新时间:2012年12月31日 11:47:33   作者:  
前段时间同事在群里对jQuery里的.data()方法大发牢骚,接下来介绍jQuery $.data()方法使用注意细节,需要了解的朋友可以参考下
前段时间同事在群里对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显示中文日期的方法

    这篇文章主要介绍了javascript显示中文日期的方法,涉及javascript针对日期与字符串操作技巧,需要的朋友可以参考下
    2015-06-06
  • js 调用本地exe的例子(支持IE内核的浏览器)

    js 调用本地exe的例子(支持IE内核的浏览器)

    js 调用本地exe程序.我实验了一下 : 使用IE内核的浏览器 都支持 火狐好像不行,感兴趣的碰可以研究下
    2012-12-12
  • javascript制作网页图片上实现下雨效果

    javascript制作网页图片上实现下雨效果

    这里给大家分享的是一则使用javascript实现在网页图片上下雨的特效,效果非常炫酷,推荐给小伙伴们。
    2015-02-02
  • Javascript动画效果(2)

    Javascript动画效果(2)

    这篇文章主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • layui select 禁止点击的实现方法

    layui select 禁止点击的实现方法

    今天小编就为大家分享一篇layui select 禁止点击的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js中最容易被忽视的事件问题大总结

    js中最容易被忽视的事件问题大总结

    下面小编就为大家带来一篇js中最容易被忽视的事件问题大总结。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-05-05
  • js clearInterval()方法的定义和用法

    js clearInterval()方法的定义和用法

    clearInterval()方法能够取消setInterval()方法设置的定时器,本文给大家详解clearInterval()方法的定义和用法,感兴趣的朋友参考下。
    2015-11-11
  • Javascript柯里化实现原理及作用解析

    Javascript柯里化实现原理及作用解析

    这篇文章主要介绍了Javascript柯里化实现原理及作用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • js获取元素在浏览器中的绝对位置

    js获取元素在浏览器中的绝对位置

    其原理就是利用HTMLElement.offsetParent属性,需要的朋友可以参考下。
    2010-07-07
  • 关于Javascript回调函数的一个妙用

    关于Javascript回调函数的一个妙用

    相信在刚开始学习JavaScript的时候,很多人感到最困惑的就是回调函数了。本文通过一个小小的例子来分析回调函数的用法。对大家学习Javascript回调函数很有帮助,有需要的可以来参考学习。
    2016-08-08

最新评论