custom data attributes

HTML 5 增加了一项新功能是 自定义数据属性 ，也就是 data- 自定义属性。 data- 自定义属性的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。 data-* 自定义属性能够更加有序直观的进行数据预设或存储。 下面介绍HTML5 Dataset 存储的实际应用，以及包括jQuery在内的四种存取方式。

HTML5 Dataset 存储的例子

<span id="music-latch"
data-date="2013年3月"
data-album="中国话"
data-artist="S.H.E">
波斯猫
</span>

这样，我们就很简单的为这首歌在span标签里直接内嵌了其专辑的艺术家和专辑信息。data-XX，可以提供人工翻译。

利用 getAttribute、setAttribute 存取 dataset

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

var album = document.getElementById('music-latch').getAttribute("data-album");
console.log(album);
document.getElementById('music-latch').setAttribute('data-la','chinese');

利用 dataset API 存取 dataset

通过dataset API，我们可以更方便的获取元素的所有data字段，并以对象的方式，方便存取和遍历。

var album = document.getElementById('music-latch').dataset;
var albumA = album.album;
console.log(albumA);
document.getElementById('music-latch').dataset.des = "2013最流行音乐";//set 和 add

直接利用.dataset.name就可以访问到。

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

<span id="music-latch"
data-date="2013年3月"
data-album="中国话"
data-artist="S.H.E"
data-en-us="Peiking Duck">
波斯猫
</span>

其中en-us要写成enUs：

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

利用 jQuery.attr 方法存取 dataset

var album = $("#music-latch").attr("data-album");
console.log(album);
$("#music-latch").attr("data-album","Beijing Stuffed Duck");

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

利用 jQuery.data 方法存取 dataset

jQuery从1.4.2版本开始支持$.data()方法来直接访问data属性。但是需要注意，jQuery.data对data数据做出的更改，不会反映到HTML元素data属性上。也就是说，jQuery现在认为#music-latch元素的data-album为"Beijing Stuffed Duck"，但是在HTML元素上，其值还是没有改变，仍为"Peking Duck"。

 $('#music-latch').data('album',"Beijing Stuffed Duck");
 console.log($('#music-latch').data('album'));
 //log:"Beijing Stuffed Duck"
 console.log( document.getElementById("music-latch").dataset.album);
// log: "Peking Duck"
//jquery.data解析dataset 的json信息
data-meta='{"name":"Latch", "album":"Disclosure", "date":"2013"}'>
var jsn = $("#music-latch").data("meta");
console.log( jsn.album );
// log: "Disclosure"
这样，你就可以不必写一堆 data-album、 data-date、data-artist了，你可以直接把所有歌曲信息全部写到JSON里放到一个单独的data标签里！

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

在CSS选择器里，我们可以这样去匹配

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

在jQuery里，也可以通过中括号[]用以下方式去轻松匹配

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

HTML5 Dataset 浏览器支持情况

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

Internet Explorer: 11+

Chrome: 8+

Firefox: 6+

Opera: 11.1+

Safari: 6+

Android Browser: 4+

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

results matching ""

    No results matching ""