原文见 HTML 5 data- Attributes http://ejohn.org/blog/html-5-data-attributes/
自定义数据属性是在HTML5中新加入的一个特性。对于规范来说,好像有点怪异–但他的确提供了一些便利。
简单来说,自定义数据属性规范规定任何以data-开头的属性都将被视为私有数据的存储区域(”私有”在这里的意思是最终用户无法看到他-他不会影响页面的布局和表现)
这允许你书写有效的HTML标记的同时,嵌入数据到你的网页中去。简单示例如下:
上面的代码完全符合HTML5的规范。对所有的javascript开发者来说这是一个很受欢迎的新特性。一直以来我们都在需求一种最好的用有效地方式添加元数据到htmL元素的方法,框架用各种不同的方式去解决这一问题。一下是两种解决方案:
1)使用HTML,但自定义DTD。
2)使用XHTML,与特定的命名空间。
The addition of this prefix completely routes around both issues (including any extra markup for validation or needing to be valid XHTML) with this effective addition.
On top of this a simple JavaScript API is presented to access these attribute values (in addition to the normal get/setAttribute):
这种.dataset用法看起来很像.attributes的用法(但是他只是作为key-value 对),由于现在还没浏览器实现这一DOM特性,对他的需求并不是很大-因此上面的代码可以被替代为:
我认为最令人兴奋的是我们可以在所有的浏览器去实现这些特性之前就可以使用它们。现在在你的网页上使用这种特性,那你可以很明确的知道他们在未来可以继续有效。当HTML验证完全整合到W3C的认证当中的时候,你的网站讲兼容他们(当然,假设你已经通过HTML5的验证并且正在使用HTML5的Doctype)
参考资料: http://www.w3ctech.com/w/index.php?doc-view-69
分享到:
相关推荐
而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义...
jQuery 的 data API 实现方式有缓存数据的效果 使用 IE 7 (IE8+ 在控制台切换至IE7 模式),当DOM 节点有自定义数据属性时,检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性,这便是 用于从数据存储...
HTML5 增加了一项新功能是 自定义数据属性 ,也就是 data-* 自定义属性。在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放
大家总是习惯使用HTML标签添加自定义属性来存储和操作数据,所以才在HTML5规范里增加了一个自定义data属性,这样使用更便捷,一起跟随小编过来看看吧
在WEB应用程序中,经常需要将数据从数据库中取... 在原有控件中增加自定义属性,这样,既能避免逻辑复杂,又能节省网络流量。 关于实例的说明,见:http://blog.csdn.net/redleaf1995/archive/2008/01/29/2072029.aspx
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据,这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情
Reveal是一个用于死掉的简单模态的jQuery插件,它带有一些性感的基本CSS并可以以编程方式实现,也可以使用新HTML5自定义数据属性(数据属性)实现。 注意:此版本的Reveal已被弃用,将不再开发或支持。 对于最新...
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是...
Web命名空间注册表用于自定义元素,数据属性,自定义属性和CSS属性的名称空间的注册表检查是否使用名称空间添加自己的框架开叉,扩展registry.v1.json并发出拉取请求。
主要的方法如下: 代码如下:.data( key, value ).data( obj ).data( key ).data()从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。例如HTML: 代码如下:...
AnalyticsDataHTML 书签以在Alma Analytics Columns属性中添加自定义HTML数据格式安装转到此网址,然后按照说明进行操作: 如何使用要添加和应用html格式的数据视图,只需打开“列”属性,转到“数据格式”选项卡,...
echarts自作地图高亮显示散点图 tooltip自定义内容。
JSP 自定义标签实现数据字典的实例 1.关于JSP标签的好处就不再罗嗦 数据字典就是使用的下拉框,只要定义使用那个字典就会将这个字典可用的内容显示出来 显示字典时只要定义那个字典和属性值就可以显示出字典的...
在HTML5中,<form></form>标记被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,<form></form>中的所有内容都会被提交给服务器。 描述 语法格式 地址" method="提交方式" name="表单名称"> 各种表单...
该插件允许使用 HTML 标签属性定义 Google Analitics 事件数据。可能的 HTML 元素属性名称解释例子data-ga-click-event-category 必需的视频数据-ga-点击-事件-动作可选的玩数据点击事件标签可选的Rick astley - ...
可使用 HTML5 数据属性和/或 JavaScript API 进行自定义。 带它去我们的转 有关完整的指南和工作演示,请参阅 CDN < script src =" https://cdn.cocreate.app/dnd/latest/CoCreate-dnd.min.js " > </ ...
12.4.5 tabindex属性 240 12.5 小结 240 12.6 习题 240 第13章 HTML 5的结构 242 视频讲解:20分钟 13.1 新增的主体结构元素 243 13.1.1 article元素 243 13.1.2 section元素 245 13.1.3 nav元素 ...
这允许从Web组件的属性和属性进行数据绑定。 这是用香草JavaScript编写的。 无需外部依赖项。 没有隐藏或内部属性/方法添加到您的课程。 不属于Web组件标准的唯一属性/方法是用于配置属性的static get properties...