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

tyheist 发布于2019-08-02 18:15 / 3332人阅读

摘要：所做出的任何更改，都是可以实时反映到元素属性上的。但是这种方法比较低端，如果遇到多个自定义字段，想要一次全部获取所有的属性并包装成对象的话，还必须做一个循环，很麻烦。

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

HTML5 Dataset 存储的例子

为一个元素分配data属性存储数据，例如这是一个span元素，它的内容是一首音乐的名称，我们为其HTML标签里直接预置这首歌的更多信息，在HTML源码上看起来可以这样来写：



Latch (feat. Sam Smith)

这样，我们就很简单的为这首歌在span标签里直接内嵌了其专辑、艺术家和流派信息。

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

北京烤鸭

这样一来，在不改变网页外观的情况下，我们可以在设定机器翻译的同时检测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属性上的。

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

其中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信息转换为对象：



Latch (feat. Sam Smith)


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。

文章来自：http://1ke.co/course/364

服务器托管超融合服务器自定义菜单详解自定义属性值 dom自定义属性 html5自定义报表

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55261.html

js,jQuery获取html5的data-*属性

摘要：今天做项目的时候发现一个坑，关于获取属性的方法，特写此篇来记录。获取的方式通过属性访问代码代码获取的值获取的值设置值最终结果属性的值是的一个实例，名值对的映射。的本质其实是将一个附加到了对象上，并使用了一个特殊的属性名称。今天做项目的时候发现一个坑，关于jQuery获取data-*属性的方法data()，特写此篇来记录。 data-*自定义数据属性 HTML5规定可以为元素添加非标...

y1chuan 2019-08-19 18:35 评论0 收藏0
js,jQuery获取html5的data-*属性

摘要：今天做项目的时候发现一个坑，关于获取属性的方法，特写此篇来记录。获取的方式通过属性访问代码代码获取的值获取的值设置值最终结果属性的值是的一个实例，名值对的映射。的本质其实是将一个附加到了对象上，并使用了一个特殊的属性名称。今天做项目的时候发现一个坑，关于jQuery获取data-*属性的方法data()，特写此篇来记录。 data-*自定义数据属性 HTML5规定可以为元素添加非标...

adam1q84 2019-08-05 17:50 评论0 收藏0
js,jQuery获取html5的data-*属性

摘要：今天做项目的时候发现一个坑，关于获取属性的方法，特写此篇来记录。获取的方式通过属性访问代码代码获取的值获取的值设置值最终结果属性的值是的一个实例，名值对的映射。的本质其实是将一个附加到了对象上，并使用了一个特殊的属性名称。今天做项目的时候发现一个坑，关于jQuery获取data-*属性的方法data()，特写此篇来记录。 data-*自定义数据属性 HTML5规定可以为元素添加非标...

用户84 2019-08-01 15:22 评论0 收藏0
HTML5中的 `data-*` 如何处理数据详解

摘要：删除这个简单的使用场景就描述了如何工作。如果你将一个对象直接存储在其中是不行的，但对对象进行序列化处理后，还是可以的。写过HTML5页面，或者做过H5开发的同学或多或少都接触过data-*这个自定义Attribute（对Attribute和property还分不太清的同学，可以看一看傻傻的分也分不清楚的property和attribute）这篇文章。在做微信公众号开发的时候你一定看...

dreamtecher 2019-08-05 12:40 评论0 收藏0
HTML5中的 `data-*` 如何处理数据详解

摘要：删除这个简单的使用场景就描述了如何工作。如果你将一个对象直接存储在其中是不行的，但对对象进行序列化处理后，还是可以的。写过HTML5页面，或者做过H5开发的同学或多或少都接触过data-*这个自定义Attribute（对Attribute和property还分不太清的同学，可以看一看傻傻的分也分不清楚的property和attribute）这篇文章。在做微信公众号开发的时候你一定看...

khlbat 2019-08-21 18:24 评论0 收藏0