html自定义data属性

可以在HTML标签上添加任意以 "data-"开头的属性，这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。

例子：<div class="my-data" data-category="motion">test data</div>

如何读取自定义data属性数据呢？

jquery已经有现成的方法：

var myData = $(".my-data")data("category");//这样就能返回对应的值

你也可以在data-*属性中使用json语法：

例如：<div id="my-data" data-category=‘{"game":"on"}‘></div>

你可以通过js直接访问这个数据，通过json的key值，你能得到相应的value：

var gameStatus= $(".my-data").data("category").game;

通过自定义data属性，可以让交互变得更简单：

例如：

<ul class="video-aside" id="video-nav">
 ???<li class="video-aside-item nav-selected" data-category="all">
 ???????<span class="video-aside-text">全部视频</span>
 ???</li>
 ???<li class="video-aside-item" data-category="motion">
 ???????<span class="video-aside-text">运动视频</span>
 ???</li>
 ???<li class="video-aside-item" data-category="navigation">
 ???????<span class="video-aside-text">导航视频</span>
 ???</li>
 ???<li class="video-aside-item" data-category="steer">
 ???????<span class="video-aside-text">舵机视频</span>
 ???</li>
 ???<li class="video-aside-item" data-category="visual">
 ???????<span class="video-aside-text">视觉视频</span>
 ???</li>
</ul>

<div class="video-item" data-category="motion">
　　<video src=""></video>
</div>

<div class="video-item" data-category="navigation">
　　<video src=""></video>
</div>

<div class="video-item" data-category="navitation">
　　<video src=""></video>
</div>

<div class="video-item" data-category="motion">
　　<video src=""></video>
</div>

<div class="video-item" data-category="steer">
　　<video src=""></video>
</div>

<div class="video-item" data-category="visual">
　　<video src=""></video>
</div>

jQ控制：

$(".video-aside-item").click(function (e) {
 ???var _this = e.currentTarget;
 ???$(_this).addClass("nav-selected").siblings().removeClass("nav-selected");
 ???var dataCategory = $(_this).data("category");
 ???if(dataCategory == ‘all‘){
 ???????$(".video-item").show();
 ???????return;
 ???}
 ???$(".video-item").each(function () {
 ???????var itemCategory = $(this).data("category");
 ???????if(dataCategory == itemCategory){
 ???????????$(this).show();
 ???????}else{
 ???????????$(this).hide();
 ???????}
 ???});
});
这样在进行切换的时候，就不需要进行ajax数据请求，从而达到交互更流畅