jQuery中设置和获取自定义属性的方法目前知道的有两种：attr()和data()；

使用data()方法给div设置的自定义属性，在页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。同时，命名的时候需要注意格式：data-* 。

而attr()方法设置的自定义属性，会直接显示在页面的dom中，可以直观的查看修改。

1.attr()

一、设置自定义属性

<div class="container">
    <div class="demo"></div>
</div>
<script type="text/javascript">
    $(function(){
        $(".demo").attr("test",'123');
        console.log($(".container").html());        //  <div class="demo" test="123"></div>
    });
</script>

二、获取自定义属性

<div class="container">
    <div class="demo"></div>
</div>
<script type="text/javascript">
    $(function(){
        $(".demo").attr("test",'123');
        var result = $(".demo").attr("test");
        console.log(result);        // 123（字符串）
    });
</script>

2.data()

一、设置自定义属性

<div class="container">
    <div class="demo"></div>
</div>
<script type="text/javascript">
    $(function(){
        $(".demo").data("test","123");
        console.log($(".container").html());	//<div class="demo"></div>
    });
</script>

二、获取自定义属性

<div class="container">
    <div class="demo" data-name='demo'></div>
</div>
</body>
<script type="text/javascript">
    $(function(){
        $(".demo").data("test","123");
        console.log($(".demo").data("test"));		//123 
  		console.log($(".demo").data("name"));		//demo
    });
</script>