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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
js获取视频时长代码
2014/04/10 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Django获取应用下的所有models的例子
2019/08/30 Python
简单叙述一下MYSQL的优化
2016/05/09 面试题
造型师求职自荐信
2013/09/27 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电