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 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
js加解密 脚本解密
2008/02/22 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
详解package.json版本号规则
2019/08/01 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
在keras里实现自定义上采样层
2020/06/28 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
护理学专业求职信
2014/06/29 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
财产分割协议书
2016/03/22 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏