巧用 HTML5 data 属性
kea-socket-tr-fs8.png
巧用 HTML5 data 属性
HTML 5 之前，需要使用其他的数据时，是非常糟糕的。为了使一切正常有效，你不得不将数据填充到 rel 或 class 属性。
有些开发者，甚至创建自己的自定义属性。
自从 HTML5 自定义 data 属性出现，你可以存储任意数据，通过一种简单，符合标准的方式。
1、如何使用 data 属性呢？
一个 data 属性，本质就是：一个用于保存数据的自定义属性。它们总是以 data- 作为前缀，后面跟随着描述性的（只允许小写字母和连接字符-hyphens）。参考：http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute
一个元素可以有任意数量的 data 属性。
一个使用 list 保存用户数据的案例，如下：
<li data-id="1234" data-email="calvin@example.com" data-age="21">Calvin</li>
当然，这数据对于一个访客并没有多大的用处，因为这数据是看不见的。但是，创建 web 应用是非常有用。
想象在你应用有一个删除按钮：
<button type="button" data-cmd="delete" data-id="1234">Delete</button>
所有你需要的数据，都已经准备好，只需发送给你的后台脚本了。不需要 rel 或 解释其他属性获得 IDs 和 actions。
Data URLs 让你的生活变得更简单。
2、你可以保存什么数据？
使用 data 属性，需要记住一点，data 属性不能保存对象。如果你真的想要保存对象，可通过对象序列化。
3、使用 JavaScript 读/写 data 属性
使用删除按钮作为例子，看看如何使用 JavaScript 访问数据。
// 这是我们的按钮
var button = document.getElementById('your-button-id');
// 取值
var cmd = button.getAttribute('data-cmd');
var id = button.getAttribute('data-id');
// 重新赋值
button.setAttribute('data-cmd', yourNewCmd);
button.setAttribute('data-id', yourNewId);
相当简单，是吧？现在你可以传送 cmd 和 id 给你的应用，通过 AJAX 请求即可。或者你可以任何你想要做的处理了。
4、使用 jQuery 读/写 data 属性
使用 jQuery 的 .attr() 方法：
（或者可以使用 .data() 方法）
// 取值
var cmd = $("#your-button-id").attr('data-cmd'); // $("#your-button-id").data('data-cmd');
var id = $("#your-button-id").attr('data-id');
// 赋值
$("#your-button-id").attr('data-cmd', yourNewCmd).attr('data-id', yourNewId);
注意，不要将上面的方式，与 jQuery 的 .data() 弄混了。尽管 data 属性和 .data() 的运作原理有些重叠，它们是两个完全不同的东西。
如果你对 .data() 不熟悉，那么就牢记住 .attr() 就好了。
5、使用 dataset API
HTML5 有一个用于与这类型数据的 API。唉，IE10 和 低于IE10 并没有完全支持这一特性。
再次以按钮案例，让我们看看如何使用 dataset API 来设置 data 属性的：
// here's our button
var button = document.getElementById('your-button-id');
// Get the values
var cmd = button.dataset.cmd;
var id = button.dataset.id;
// Change the values
button.dataset.cmd = youNewCmd;
button.dataset.id = yourNewId;
这里没有 data - 前缀或破折号。类似于 CSS 属性工作在 JavaScript ，你将必须使用驼峰命名法。
dataset API 转换每一个，你总是会在 HTML 使用 data-some-attribute-name，而 JavaScript 中是 dataset.someAttributeName。
6、其他
以上的案例都是很基础的，你可以使用自定 data 属性做到更多。几个其他用法案例，如下：
6.1 过滤（Filtering）
假如你有一个数据列表，并且你想要通过关键词过滤。将关键词放入到一个 data 属性，而后写一个脚本循环遍历，根据情况来展示或隐藏它们。
HTML 代码
<input type="text" id="filter">
<ul class="cars">
<li data-models="mustang, f150, 500, fusion">Ford</li>
<li data-models="corvette, silverado, impala, cavalier">Chevrolet</li>
...
</ul>
遍历脚本
$('#filter').on('keyup', function() {
var keyword = $(this).val().toLowerCase();
$('.cars > li').each( function() {
$(this).toggle( keyword.length < 1 || $(this).attr('data-models').indexOf(keyword) > -1 );
});
});
6.2 添加样式
争议倾认为，使用 classes 是更好的，可是你也可以通过 data 属性来添加样式。如何通过元素的一个固定 data 属性来应用样式呢？
首先，HTML
<span class="label" data-warning>
再就是样式
[data-warning] {
background: red;
}
如果想要通过 data 属性值，来添加样式呢？这可以应用到任何包含有 error 的 data-warning 属性。
[data-warning*=error] {
color: red;
}
6.3 配置
Bootstrap 使用 data 属性，经由 JavaScript 作为 HTML 交互来配置插件。
下面就是一个 popover 的案例：
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
参考文章：
https://www.abeautifulsite.net/working-with-html5-data-attributes
http://html5doctor.com/html5-custom-data-attributes/
