html5的自定义data-*属性和jquery的data()方法的使用示例


Posted in Javascript onAugust 21, 2013

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。

你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。

下面的一个代码片段是一个有效的HTML5标记:

<div id="awesome" 
data-myid="3e4ae6c4e">Some awesome data</div>

可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。

举个例子,你可以用下面的写法读取 data-myid属性值:

var myid= jQuery("#awesome").data('myid'); 
console.log(myid);

你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html:
<div id="awesome-json" data-awesome='{"game":"on"}'></div>

你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value:
var gameStatus= jQuery("#awesome-json").data('awesome').game; 
console.log(gameStatus);

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。

补充:尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据

Javascript 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JavaScript 中的日期和时间及表示标准介绍
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 #Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 #Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 #Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 #Javascript
jquery设置控件位置的方法
Aug 21 #Javascript
获取表单控件原始(初始)值的方法
Aug 21 #Javascript
You might like
一些使用频率比较高的php函数
2008/10/03 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python如何实现强制数据类型转换
2019/11/22 Python
linux面试题参考答案(4)
2013/01/28 面试题
商业房地产广告语
2014/03/13 职场文书
安全责任书模板
2014/07/22 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
公司感谢信范文
2015/01/22 职场文书
体育教师研修感悟
2015/11/18 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android