HTML5 自定义属性 data-* 和 jQuery.data 详解
程序员文章站
2022-03-24 16:36:44
...
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存
新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。
HTML5 Dataset 存储的例子
为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的名称,我们为其HTML标签里直接预置这首歌的更多信息,在HTML源码上看起来可以这样来写:data-date="2013" data-genre="Electronic" data-album="Settle (Deluxe)" data-artist="Disclosure" data-composer="Howard Lawrence & Guy Lawrence"> Latch (feat. Sam Smith)
推荐阅读
-
html5的自定义data-*属性与jquery的data()方法的使用
-
HTML5新增form控件和表单属性实例代码详解
-
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
-
C#创建自定义控件及添加自定义属性和事件使用实例详解
-
jQuery中使用data()方法读取HTML5自定义属性data-*实例
-
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
-
HTML5新增属性data-*和js/jquery之间的交互及注意事项
-
Html5之自定义属性(data-,dataset)
-
JavaScript中的this指向和自定义属性详解
-
详解HTML5 data-* 自定义属性