文档章节

HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

才华撑不起野心qwwe
 才华撑不起野心qwwe
发布于 2017/06/10 08:49
字数 567
阅读 6
收藏 0

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

本文转载自:

才华撑不起野心qwwe
粉丝 0
博文 6
码字总数 18
作品 0
长沙
私信 提问
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

HTML 5 的自定义 data-* 属性和jquery的data()方法的使用 Posted in 文档手册 | 7 Comments 人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有...

ihaolin
2014/04/14
111
0
jQuery中使用data()方法

jQuery中使用data()方法读取HTML5自定义属性data-*实例 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。

Canaan_
2016/03/30
34
0
了解 jQuery 技巧来提高你的代码

1.测试并提升你的jQuery选择器水平 这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQu...

鉴客
2010/08/12
1K
0
zepto和jquery的区别,zepto的不同使用7条小结

1. Zepto 对象 不能自定义事件 例如执行: $({}).bind('cust', function(){}); 结果: TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象......

你好明天ll
2018/06/26
0
0
创建定制的jQuery Mobile主题

jQuery Mobile 框架是一套JavaScript库,用来帮助你快速创建适合移动设备访问的网站。它可以把目前的页面转换成适合触摸操作的页面。jQuery Mobile可以让用户通过浏览器直接访问到触摸友好的...

虫虫
2011/12/07
9.1K
1

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
9
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部