今天在看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. ubuntu安装

    今天在win10下安装Ubuntu,结果没经验导致win10找不回来了,我再好好整理些思路 安装前要做一个ghost,万一出现问题可以用来恢复系统! 1,我使用USB Installer 在http: ...

  2. ACM 杭电HDU 2084 数塔 [解题报告]

    数塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  3. ASP.NET中的文件操作(文件信息,新建,移动,复制,重命名,上传,遍历)(亲测详细)

    做了几天的文件操作,现在来总结一下,错误之处,还望指点!以文件为例,如果对文件夹操作,基本上将File换为Directory即可(例:FileInfo file = new FileInfo(Path ...

  4. 办公大楼3D指纹门禁系统解决方案

    随着人们对工作.生活的自动化水平也提出了越来越高的要求.以大楼安保对出入大楼的外来人员进行登记放行或以铁锁.钥匙和卡为代表的出入管理方式已无法满足需求. 利用科技的手段,实现办公大楼的安全现代化.管理 ...

  5. 利用JS制作简便计算器

    var d; var a=prompt("请输入数字"); a=parseInt(a); if(isNaN(a)){ alert("請輸入正確數字"); } e ...

  6. 译\Node.js应用的持续部署

    Node.js应用的持续部署 翻译前 翻译自:https://blog.risingstack.com/continuous-deployment-of-node-js-applications/ 正 ...

  7. JQ入门学习实战演练

    选择器是JQuery一大特色,所有的DOM操作.事件操作.Ajax操作都离不开选择器.熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作. JQuery的选择器很类似于样 ...

  8. 关于margin的一些问题

    引 在平时处理样式的过程中,会出现各种问题.比如: 包含在父元素中的子元素设置了浮动,子元素高度变化的时候父元素的高度没有随着变化,就是没有被撑高,父元素仍然是原来设置的那个高度 包含在父元素中的子元 ...

  9. 主流的单元测试工具之-JAVA新特性-Annotation 写作者:组长 梁伟龙

    1:什么是Annotation?Annotation,即“@xxx”(如@Before,@After,@Test(timeout=xxx),@ignore),这个单词一般是翻译成元数据,是JAVA的一 ...

  10. 01 ~ 03 headfirst php & mysql

    Question : 难道不是所有web页面原先都放在服务器上吗? 甚至存储在.html文件中的HTML页面? Answer : 没错, 网站的所有文件都存储在服务器上, html, css, php ...