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

新的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标签里直接内嵌了其专辑、艺术家和流派信息。

再举一个例子,比如说一个本地化翻译的嵌入:

<h2 id="food-pkd" class="food" data-en="Peking Duck" data-available data-ja="北京ダック" data-fr="Canard laqué de Pékin" data-de="Pekingente"> 北京烤鸭 </h2>

这样一来,在不改变网页外观的情况下,我们可以在设定机器翻译的同时检测data-XX,来人工提供更准确精准的翻译。

其中data-available没有值,允许空值,例如在这个情况下,它仅代表该食物可以订购,所以不需要有值。

利用 getAttribute、setAttribute 存取 dataset

作为HTML元素的标签,dataset的存取也服从getAttribute、setAttribute,而且这两个方法兼容性也最广。

例如对于上面的两个例子,我们可以运行

//get var album = document.getElementById("music-latch").getAttribute("data-album"); console.log(album); //set document.getElementById("food-pkd").setAttribute("data-en","Beijing Stuffed Duck");

这样就可以以一种更兼容的方式,来存取dataset数据。所做出的任何更改,都是可以实时反映到元素data属性上的。

但是这种方法比较低端,如果遇到多个data-*自定义字段,想要一次全部获取所有的data属性并包装成对象的话,还必须做一个循环,很麻烦。不过我们还有Dataset API可用。

利用 dataset API 存取 dataset

通过.dataset API,我们可以更方便的获取元素的所有data字段,并以对象的方式,方便存取和遍历。例如,对于上面的例子,可以运行

//get var songd = document.getElementById("music-latch").dataset; var album = songd.album; console.log(album); //set document.getElementById("food-pkd").dataset.en = "Beijing Stuffed Duck"; //add document.getElementById("food-pkd").dataset.es = "Pato laqueado a la pekinesa";

这时候我们在访问data时,就不需要"data-"关键词了,直接利用.dataset.name就可以访问到。这比上面的方法更方便。所做出的任何更改,都是可以实时反映到元素data属性上的。

如果涉及到连字符"-",可以采取驼峰化的方法来存取:

<span id="en" data-en-us="Peiking Duck"></span>

其中en-us要写成enUs:

var en = document.getElementById("en").dataset.enUs;

利用 jQuery.attr 方法存取 dataset

jQuery有着出色的兼容性。类似get、setAttribute,jQuery的.attr()方法同样可以用在这样的情况下,例如,对于上面的例子,可以运行

window.jQuery && (function($){ //get var album = $("#music-latch").attr("data-album"); console.log(album); //set $("#food-pkd").attr("data-en","Beijing Stuffed Duck"); })(window.jQuery);

这与jQuery.attr运用在其他属性上时的情况完全一样,并且所做出的任何更改,都是可以实时反映到元素data属性上的。

利用 jQuery.data 方法存取 dataset

jQuery从1.4.2版本开始支持$.data()方法来直接访问data属性,同时也不需要写"data-"关键词了,例如,对于上面的例子,可以运行

window.jQuery && (function($){ //get var album = $("#music-latch").data("album"); console.log(album); //set $("#food-pkd").data("en","Beijing Stuffed Duck"); })(window.jQuery);

这样的方法也能出色的存取data属性,但是需要注意,jQuery.data对data数据做出的更改,不会反映到HTML元素data属性上。

也就是说,jQuery现在认为#food-pkd元素的data-en为"Beijing Stuffed Duck",但是在HTML元素上,其值还是没有改变,仍为"Peking Duck":

window.jQuery && (function($){ //set $("#food-pkd").data("en","Beijing Stuffed Duck"); console.log( $("#food-pkd").data("en") ); // log: "Beijing Stuffed Duck" })(window.jQuery); console.log( document.getElementById("food-pkd").dataset.en ); // log: "Peking Duck"

jQuery.data 解析 Dataset 的 JSON 信息

事实上,jQuery还可以很聪明的从data里提取出json信息转换为对象:

<span id="song-jsn" data-meta='{"name":"Latch", "album":"Disclosure", "date":"2013"}'> Latch (feat. Sam Smith) </span>

window.jQuery && (function($){ var jsn = $("#song-jsn").data("meta"); console.log( jsn.album ); // log: "Disclosure" })(window.jQuery);

这样,你就可以不必写一堆 data-album、data-lyrics、data-artist了,你可以直接把所有歌曲信息全部写到JSON里放到一个单独的data标签里!

CSS、jQuery 查找 data 属性对应元素

如果我想要所有专辑名(data-album)为Disclosure的歌曲名显示为红色,在CSS选择器里,我们可以这样去匹配

.musique[data-album='Disclosure'] { color:red; }

这样,上面的例子中的span文字就会显示为红色。

如果我想要所有的现在可订购的食物在点击后弹出对话窗,在jQuery里,也可以通过中括号[]用以下方式去轻松匹配

window.jQuery && (function($){ $(".food").filter("[data-available]").each(function(){ $(this).click(function(){ alert("It's Available!"); }); }); })(window.jQuery);

怎么样,是不是感觉这种自由简便的存储方式可以带来很强大的效果?

HTML5 Dataset 浏览器支持情况

HTML5 Data属性的支持情况在IE上很糟糕:

Internet Explorer: 11+

Chrome: 8+

Firefox: 6+

Opera: 11.1+

Safari: 6+

Android Browser: 4+

因此,如果要考虑兼容性,可以考虑利用 getAttribute、setAttribute存取dataset。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

jquery中dom元素的attr和prop方法的理解

  在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和pro...

9520
来自专栏数据小魔方

数据地图系列9|excel(VBA)数据地图!

今天要跟大家分享的是数据地图系列的第九篇——excel(VBA)数据地图! 关于VBA在excel中的应用非常广泛,本篇仅仅是给出示例代码,不会对基础操作做太过...

57760
来自专栏拂晓风起

Cocos2d-js 3.0 颜色变换(调整sprite/图片的色调)

15720
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

30340
来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

16060
来自专栏carven

利用canvas实现毛笔字帖(一)

最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列ca...

21920
来自专栏我杨某人的青春满是悔恨

仿【每天】首页动画

最近工作一直挺忙,偶有闲暇时都在翻看《iOS Animations by Tutorials》,受益良多,尤其是让我对Core Animation有了更深入的理...

8820
来自专栏偏前端工程师的驿站

语义化HTML:p、h1-6、q、blockquote、hr、address、code、pre、var、cite、dfn和samp

一、元素语义                         p标签   W3C草案: The p element represents a paragrap...

26550
来自专栏Python小屋

Python使用tkinter打造自定义对话框完整代码

问题来源:前一阵发过一个技术文章Python编写抽奖式随机提问程序,其中有个弹出式对话框,好像上海科技大学宋老师在群里当时问了一句对话框中中奖姓名是否能显示的大...

57640
来自专栏较真的前端

关于事件的前端面试题总结

31350

扫码关注云+社区

领取腾讯云代金券