今天在看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. async和await

    总结下博客园中看到的async和await public static class TaskAsyncHelper { /// <summary> /// 将一个方法function异步运 ...

  2. Android BinderService 过程

    步骤:建立服务器端服务,暴露接口 1.BinderService /** * @Title BinderService.java * @package cn.boxai.binderservice * ...

  3. adnroid 监听软键盘的显隐

    首先注明出处,我只是想做个笔记:http://www.jb51.net/article/64820.htm 第一眼看到的时候,觉得不太可靠,因为之前都是看到这样处理的,根据监听一个根布局的size,可 ...

  4. 定长循环队列C语言实现

    #ifndef _CONST_H_#define _CONST_H_ #include <stdio.h>#include <stdlib.h> typedef enum { ...

  5. PHP5.5.13 + Apache2.4.7安装配置流程详解

    ---恢复内容开始--- 自学PHP的这段时间里,真是倍感辛酸,相信广大的菜鸟们应该很我感同身受吧,在查阅了网上和众多数资料后,总结出来想当比较全面的安装方法,拿出来与广大的编程爱好者一起分享哈. 首 ...

  6. Mac环境brew安装

    curl -L https://get.rvm.io | bash -s stable //RVM安装 source ~/.rvm/scripts/rvm rvm -v //版本检测 rvm list ...

  7. C# 实现 Excel文件的数据导入

    前台 <asp:FileUpload ID="fuFile" runat="server" /> 后台 public string GetExcel ...

  8. 【算法】Hough变换

    终于看懂点了霍夫变换,以下内容来源为吉大的硕士论文,作者王阳阳 上图引用自 http://www.cnblogs.com/Ponys/p/3146753.html

  9. i.

    史上最全web.xml配置文件元素详解 一.web.xml配置文件常用元素及其意义预览 <!--servlet API的版本2.3增加了对事件监听程序的支持,事件监听程序在建立.修改和删除会话或 ...

  10. python3 实现简单信用卡管理程序

    1.程序执行代码: #Author by Andy #_*_ coding:utf-8 _*_ import os,sys,time Base_dir=os.path.dirname(os.path. ...