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 ""