β

HTML5 自定义属性 data-* 和 jQuery.data 详解

NetS H 230 阅读
html5 dataset新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。

HTML5 Dataset 存储的例子

为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的名称,我们为其HTML标签里直接预置这首歌的更多信息,在HTML源码上看起来可以这样来写:
<span id="music-latch" class="musique" data-date="2013" data-genre="Electronic" data-album="Settle (Deluxe)" data-artist="Disclosure" data-composer="Howard Lawrence & Guy Lawrence"> Latch (feat. Sam Smith) </span>
这样,我们就很简单的为这首歌在span标签里直接内嵌了其专辑、艺术家和流派信息。
继续围观此文
作者:NetS H
式微, 式微, 胡不归?
原文地址:HTML5 自定义属性 data-* 和 jQuery.data 详解, 感谢原作者分享。

发表评论