脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jQuery $.data()

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

 更新时间：2012年12月31日 11:47:33   投稿：whsnow  
前段时间同事在群里对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中toLocaleString()和toString()的区别实例分析

    JavaScript中toLocaleString()和toString()的区别实例分析

    这篇文章主要介绍了JavaScript中toLocaleString()和toString()的区别,结合实例形式对比分析了toLocaleString()和toString()针对字符串、数组与日期操作过程中的区别与使用技巧,需要的朋友可以参考下
    2018-08-08
  • 详解ES6数组方法find()、findIndex()的总结

    详解ES6数组方法find()、findIndex()的总结

    这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JavaScript动态绑定详解

    JavaScript动态绑定详解

    这篇文章主要为大家详细介绍了JavaScript动态绑定，关于JavaScript中为元素绑定的事件失效的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JS数据结构与算法中的队列结构详解

    JS数据结构与算法中的队列结构详解

    队列指的是一种受限的线性表，先进先出，今天通过本文带领大家认识队列及队列的应用，对JS数据结构与算法-队列结构相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • JS的时间格式化和时间戳转换函数示例详解

    JS的时间格式化和时间戳转换函数示例详解

    这篇文章主要介绍了JS的时间格式化和时间戳转换函数，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • JS设置cookie、读取cookie

    JS设置cookie、读取cookie

    js设置cookie有很多种方法，包括JS设置cookie、读取cookie，工作中常会用到！下面是详细代码，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Meta 标签生成器

    Meta 标签生成器

    非常不错的可以生产标签的小东西
    2008-04-04
  • JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()

    JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()

    这篇文章主要介绍了JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的相关资料,需要的朋友可以参考下
    2016-08-08
  • JavaScript多级判定代码优化浅析

    JavaScript多级判定代码优化浅析

    这篇文章主要介绍了JavaScript多级判定代码优化，JavaScript用二元运算符和if拆分优化多级判定结构, 用JavaScript逻辑运算符替换if-else结构判定
    2023-02-02
  • javascript导出csv文件（excel）的方法示例

    javascript导出csv文件（excel）的方法示例

    这篇文章主要给大家介绍了关于javascript导出csv文件（excel）的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-08-08

最新评论