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


Posted in HTML / CSS onJuly 02, 2014

人们总喜欢往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-*" 数据。

HTML / CSS 相关文章推荐
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 #HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 #HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 #HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 #HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 #HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 #HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 #HTML / CSS
You might like
php5 图片验证码实现代码
2009/12/11 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
解决vue热替换失效的根本原因
2018/09/19 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
Linux下Python获取IP地址的代码
2014/11/30 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
python实现图像全景拼接
2020/03/27 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
活动经费申请报告
2015/05/15 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers