html5 新元素!!!! 非常有用…..

就是给元素附加额外数据用的

<div>
    {% for post in site.posts reversed %}
        <li class="allPostsList" data-cate="{{post.categories}}" data-tag="{{post.tags}}">
          <a href="{{ post.url }}">
             {{ post.title }} 
        </a>
        </li>
    {% endfor %}
</div>

给 每篇文章 都加上自己对应的 大类自定义属性: data-cate 标签自定义属性: data-tag

然后就可以用 jquery 来实现 隐藏/显示了

$(function (){
    $('[data-cate="CSS"]').hide()
    $('[data-cate="jQuery"]').hide()
});

这个会隐藏 所有大类是CSS 和 jQuery 的文件名. 也就是过滤了… 配合上 this .就ok了!!!!!

https://segmentfault.com/a/1190000005770912

data-: HTML5 新增…

用法: <element data-*="somevalue">

作用: 给html元素添加额外的属性.

储存自定义数据.直接提供给js使用. 这样很多操作就不用 ajax 或者数据库了.

通过dataset属性访问

//HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj"></div>
//js代码
var div = document.getElementById("myDiv");
var appId = div.dataset.appid;//获取data-appid的值
var myName = div.dataset.myname;//获取data-myname的值
//设置值
div.dataset.appid = 456;
div.dataset.myname = "newname";
//最终HTML结果 <div id="myDiv" data-appid="456" data-myname="newname"></div>

传统获取方式 getAttribute

还是上述的例子。获取data- 的方法可使用如下方法: var appId = div.getAttribute("data-appid");

jQuery获取方法

    data()方法
//HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>
//获取属性
var appid = $("#myDiv").data("appid"); //123
var app-id = $("#myDiv").data("app-id"); //456
//属性赋值 $("#myDiv").data("appid","666");
//最终HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj" data-app-id="456" data-my-name="secondname"></div>