今天在看JQuery文档的时候偶然看到了data()方法,觉得挺好用的,这里做个记录。

  这个方法用于在元素上存放数据,返回jQuery对象。在文档中提到V1.4.3 新增用法NEW data(obj) 可传入key-value形式的数据。这个方法的用法如下:

  (1)在一个div上存取数据

 //HTML代码:
<div></div> //JQuery代码:
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined

  (2)在div上存取键值对

 //HTML代码:
<div></div> //JQuery代码:
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;

  这个方法用来在前端存取数据看起来很方便,实际使用时还需注意以下问题:

  (1)如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。

  (2)当使用.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)来获取相应的值,代码示例如下:

1 var bieh = $(div).attr(“data-”+bieh)

繁星——jquery的data()方法的更多相关文章

  1. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  2. html5的自定义data-*属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  3. html5的自定义data-*属性与jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  4. html5的自定义data-*属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  5. jQuery 的.data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  6. 对 jQuery 中 data 方法的误解

    一直以来都认为新版本中 data 是调用 dataset 实现的,对于低版本IE则采用 getAttribute其实一直是我误解了,也不知道最初这个想法是怎么来的.难道我被盗梦了? 今天 谢亮 兄弟和 ...

  7. jQuery的data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  8. jQuery中data()方法用法实例

    语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...

  9. jQuery中使用data()方法读取HTML5自定义属性data-*实例

    如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...

随机推荐

  1. msql 实现sequence功能增强

    create table sequence (      seq_name        VARCHAR(50)  NOT NULL COMMENT '序列名称',    min_val        ...

  2. MySQL显示中文

    http://www.cnblogs.com/livingintruth/p/3433259.html 这两天在学习webpy,把webpy的一个blog例子扒下来学习一下,默认创建的table当存入 ...

  3. CentOS安装cacti

    1.安装软件包 yum install -y httpd php php-mysql \ php-snmp mysql mysql-server \ perl-DBD-MySQL php-pdo ne ...

  4. SVN服务器搭建和使用(二)

    SVN服务器搭建和使用(二) 上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及Tortois ...

  5. 用Python生成组织机构代码,附源码

    #!/usr/bin/python import random def haoma(): ww = [3,7,9,10,5,8,4,2]#suan fa yin zi cc = [] dd=0 for ...

  6. 监狱3D指纹门禁系统解决方案

    由于监狱的行业特殊性,其安全性对社会的安定团结具有重大影响力.因此,采用高新技术来建立监狱的安全屏障,提高监狱安全的规范化.科学化管理水平.用高效的技术防范手段对监狱安全实行事前的主动的防范,保障社会 ...

  7. python http代理代码

    googlecode :https://code.google.com/archive/p/python-proxy/source/default/source # -*- coding: cp125 ...

  8. Android sdk目录介绍

    android sdk目录介绍 build-tools 各版本SDK编译工具 docs 离线开发者文档Android SDK API参考文档 extras 扩展开发包,如兼容架包. platforms ...

  9. System.Data.SqlClient.SqlError:无法对过程'XXX' 执行 删除,因为它正用于复制。消息 3724,级别 16

    遇到这么一个错误,想对[northwindcs]这个数据库搭建复制,从B服务器发布订阅到C服务器,采用备份还原进行初始化,但是在数据库还原时,报无法对过程‘XXX’执行删除,因为它正用于复制.表面上一 ...

  10. c#什么时候使用virtual什么时候使用abstract

    一.C#中virtual与abstract的区别(引用"姓吕名布字子乔"的文章) C#的virtual & abstract经常让人混淆,这两个限定词都是为了让子类进行重新 ...