繁星——jquery的data()方法
今天在看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()方法的更多相关文章
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- html5的自定义data-*属性与jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- html5的自定义data-*属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- jQuery 的.data()方法
jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...
- 对 jQuery 中 data 方法的误解
一直以来都认为新版本中 data 是调用 dataset 实现的,对于低版本IE则采用 getAttribute其实一直是我误解了,也不知道最初这个想法是怎么来的.难道我被盗梦了? 今天 谢亮 兄弟和 ...
- jQuery的data()方法
jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...
- jQuery中data()方法用法实例
语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代 ...
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...
随机推荐
- JS 拼接字符串数组
1.格式1 1.1例子 [ {name: '北京',value: Math.round(Math.random()*1000)}, {name: '天津',value: Math.round(Math ...
- 年终汇报、总结、述职:教你做一场B格满满的技术大会演讲
什么样的演讲和呈现最受听众欢迎,内容干货?逻辑清晰?长相帅气? 偶尔被邀作为speaker参加一些圈内的技术大会进行演讲.这里我分享下自己的经验,如何做一场B格满满的技术大会演讲,希望给做汇报.总结. ...
- 蚁群算法简介(part3: 蚁群算法之更新信息素)
信息素的局部更新策略 每只蚂蚁在构造出一条从起点到终点的路径后,蚁群算法还要求根据路径的总长度来更新这条路径所包含的每条边上信息素的浓度(在旅行商问题中每座城市是图中的一个节点,城市两两间有一条边 ...
- 聊聊 virtualenv 和 virtualenvwrapper 实践
各位 Python 的小伙伴肯定多多少少接触过 virtualenv.本文将介绍 virtualenv 以及如何更科学更优雅地使用 virtualenv. virtualenv 首先来聊一下 virt ...
- ahk之路:利用ahk在window7下实现窗口置顶
操作系统:win7 64位 ahk版本:autohotkey_L1.1.24.03 今天安装了AutoHotkey_1.1.24.03.SciTE.PuloversMacroCreator,重新开始我 ...
- sql连表分页查询(存储过程)
1.平时分页查询都比较多针对一个表的数据 而这个分页查询是针对连表查询的 ,这也是我网上改版别人的sql语句 先在数据库新建一个存储过程 拷贝以下代码 CREATE PROCEDURE [dbo].[ ...
- js 睡觉
js睡觉 function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMilli ...
- css3——新盒子定义box-sizing
css3对盒子有了新定义,以前的 盒子实际宽(高) = padding + width(height) + ( border * 2); 使用了box-sizing之后盒子实际宽(高) 就等于 wid ...
- web-app子元素
?表示可选,最多一个:*表示0个或多个. web-app (icon?, display-name?, description?, distributable?, context-param*, fi ...
- 配置sublime text 3 的Python开发环境
为了在sublime实现像Python自带idle一样的F5交互功能: 首先安装package control然后install Sublime REPL:然后配置 Preference-->P ...