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制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 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
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php发送与接收流文件的方法
2015/02/11 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
Python open读写文件实现脚本
2008/09/06 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python简单贪吃蛇开发
2019/01/28 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
老师自我鉴定范文
2013/12/25 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
2014年度党员自我评议
2014/09/13 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
党员转正意见怎么写
2015/06/03 职场文书
初三毕业感言
2015/07/31 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏