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


Posted in Javascript onApril 11, 2014

主要的方法如下:

.data( key, value )
.data( obj )
.data( key )
.data()

从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。
例如HTML:
<div data-role = "page" data-last-value = "43" data-hidden = "true" data-options = '{"name":"John"}' > </div>

下面的 jQuery代码都是返回 true 的:
$ ( "div" ) . data ( "role" ) === "page" ;
$ ( "div" ) . data ( "lastValue" ) === 43 ;
$ ( "div" ) . data ( "hidden" ) === true ;
$ ( "div" ) . data ( "options" ) . name === "John" ;

和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。

如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON 将其解析成字符串;它必须遵循 有效的JSON的语法 ,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。

如果想将取出的属性值直接当作字符串的话,请使用 attr() 方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用 .data() 时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的 .data(obj) 操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。

Javascript 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 #Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 #Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 #Javascript
js获取视频时长代码
Apr 10 #Javascript
js转化毫秒为时间格式代码
Apr 10 #Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 #Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 #Javascript
You might like
聊天室php&amp;mysql(二)
2006/10/09 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
jQuery 表格工具集
2010/04/25 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python实现句子翻译功能
2017/11/14 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
相亲大会策划方案
2014/06/05 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
答谢词范文
2015/01/05 职场文书
销售助理岗位职责
2015/02/11 职场文书
幼师辞职信范文
2015/02/27 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android