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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python 求10个数的平均数实例
2019/12/16 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Python如何实现机器人聊天
2020/09/10 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
捐献物资倡议书范文
2014/05/19 职场文书
临床专业自荐信
2014/06/22 职场文书
战略合作意向书
2014/07/29 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
二年级作文之动物作文
2019/11/13 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python