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 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
javascript回调函数详解
Feb 06 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
layui动态加载多表头的实例
Sep 05 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php不写闭合标签的好处
2014/03/04 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
Javascript中神奇的this
2016/01/20 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python基于multiprocessing的多进程创建方法
2015/06/04 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python如何进入交互模式
2020/07/06 Python
Django中ORM的基本使用教程
2020/12/22 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
函授本科自我鉴定
2014/02/04 职场文书
社区灵活就业证明
2014/11/03 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
Python数据结构之队列详解
2022/03/21 Python