Html5 DataSet
一.简单介绍二.简单示例三.传值场景1.点赞2.本地化翻译
四.值的存取1.getAttribute、setAttribute 存取 dataset2.dataset API 存取 dataset3.类似“data-star-count”该如何处理？4. jQuery.attr 方法存取 dataset5. jQuery.data方法存取 dataset6.jQuery.data 解析 Dataset 的 JSON 信息
一.简单介绍
新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。微信小程序有用这个玩意，方便传值，data-属性是允许js动态修改的 也可以允许 CSS选择器进行样式设置 地址：dataset学习地址
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset
二.简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>
</body>
<script>
var el = document.querySelector('#user');
let id = el.id
let dataid = el.dataset.id
let datauser = el.dataset.user
console.log(id);
console.log(dataid);
console.log(datauser);
console.log('数据类型:' + typeof el.dataset.dateOfBirth, '数据:' + el.dataset.dateOfBirth);
//逻辑运算符说明：
//|| 或的关系，如果前面的值等于false就会自动执行第二个值
// && 且的关系，如果前面的值等于true就会自动执行第二个值
console.log(isEmpty(el.dataset.dateOfBirth) && "ss");
// 设置数据，遇到这种data-date-of-birth 用
el.dataset.dateOfBirth = '1960-10-03';
console.log(el.dataset.dateOfBirth);
function isEmpty(obj) {
if (typeof obj == "undefined" || obj == null || obj == "") {
return true;
} else {
return false;
}
}
</script>
</html>
三.传值场景
1.点赞
比如我们要做一个文章点赞的功能，1是点赞，0是不点赞，通过ajax传递，这时就可以直接在标签上
2.本地化翻译
<h2 id="food-pkd" class="food" data-en="Peking Duck" data-ja="北京ダック" data-fr="Canard laqué de Pékin" data-de="Pekingente"> 北京烤鸭 </h2>
四.值的存取
1.getAttribute、setAttribute 存取 dataset
<script>
//get
var user = document.getElementById("name").getAttribute("data-user");
console.log(user);
//set
document.getElementById("name").setAttribute("data-user","拜登");
//get
var user = document.getElementById("name").getAttribute("data-user");
console.log(user);
</script>
该方法不适用要同时获取多个data-xx的值，很麻烦
2.dataset API 存取 dataset
<script>
//返回一个DOMStringMap 类型
var stringmp = document.getElementById('name').dataset;
//get
console.log(stringmp.user);
//set/add 是一样的操作
stringmp.age = 74;
console.log(stringmp.age);
</script>
3.类似“data-star-count”该如何处理？
4. jQuery.attr 方法存取 dataset
这与get、setAttribute 方法一样，所做出的任何更改，都是可以实时反映到元素data属性
5. jQuery.data方法存取 dataset
虽然已经修改了，但是不会实时反映到元素data属性
6.jQuery.data 解析 Dataset 的 JSON 信息
