html5的自定义data-*属性和jquery的data()方法的使用
人们总喜欢往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-*"
数据
html5的自定义data-*属性和jquery的data()方法的使用的更多相关文章
- html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- HTML 5:你必须知道的data属性
原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...
- Intent的属性及Intent-filter配置——Data、Type属性与intent-filter配置
Data属性通常用于向Action属性提供操作的数据,Data属性接受一个Uri对象,一个Uri对象通常通过如下形式的字符串来表示: content://com.android.contacts/co ...
- Ajax请求($.ajax()为例)中data属性传参数的形式
首先定义一个form表单: <form id="login" > <input name="user" type="text&quo ...
- html5的自定义data-*属性与jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- js(jQuery)获取自定义data属性的值
有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- html5 data属性的使用
html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...
随机推荐
- Handler没法取出消息队列中的数据的一个原因
主线程发送消息到工作线程,工作线程的步骤是固定为3步的. Looper.prepare();//步骤1,线程里使用handler必须这样写, handler = new Handler(){//步骤2 ...
- ognl--数据运转的催化剂
原文链接:http://struts2.group.iteye.com/group/wiki/1353-ognl-catalyst-for-data-operation-in-struts2 首先让我 ...
- linux 学习:环境变量设置
一.临时环境变量 临时环境变量,只对当前打开的shell生效,shell关闭后,环境变量失效. 设置方法一: 分两步 MYPARA=hello export MYPARA 设置方法二:一步完成 exp ...
- poj2676解题报告
题意:有一个9*9的格子 分成了9个3*3的小子格,一些位置上的已有一些数字..现在要求你把没有数字的位置填上数,要求这个数没有出现在这个位置所在的行.列以及所在的子格 分析: 那么我们对于所有的未填 ...
- 基于visual Studio2013解决C语言竞赛题之0506选择排序
题目
- 网络授时服务 NTP
NTP --- Network Time Protocol 网络授时服务,他解决的主要问题就是实现两台或者多台机器的时间同步问题,而传统的格林尼治时间不是标准的时间,因为地球自转的不是规则的. 网络 ...
- JVM-如何判断一段数据是真正的数据,还是对象的引用
JVM 判断一段数据到底是数据还是引用类型,首先要看JVM选择用什么方式.通常这个选择会影响到GC的实现. 一.保守式 如果JVM选择不记录任何这种类型的数据,那么它就无法区分内存里某个位置上的数据到 ...
- poj 1155 TELE (树形背包dp)
本文出自 http://blog.csdn.net/shuangde800 题目链接: poj-1155 题意 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构, ...
- Python 3语法小记(四)字典 dictionary
字典是Python里面一种无序存储结构,存储的是键值对 key - value.关键字应该为不可变类型,如字符串.整数.包含不可变对象的元组. 字典的创建很简单,用 d = {key1 : value ...
- android apk打包之后js调用失效的解决办法
现在android下应用开发的界面用html5+css3写,交互用javascript和java沟通,但是用上混淆后发现javascript调用java类定义的方法老说找不到这个方法.一番折腾后发现是 ...