前一阵，后台用ifelse表达式直接返回html片段,由于传值问题，我直接让他把值放在data-上，我自己来取，由于自定义私有值的特性，很好的解决了传值的问题。不过由于自己的粗心，导致测试当中，取值方式不当，发生取不到值的现象。现在小结一下，避免以后出现同样的错误。
首先列出data-属性名的几种情况：
<div data-username='zhd1' class='box box1'>data-username</div>
<div data-user-name='zhd2' class='box box2'>data-user-name</div>
<div data-userName='zhd3' class='box box3'>data-userName</div>
<div data-user-Name='zhd4' class='box box4'>data-user-Name</div>
<div data-Username='zhd5' class='box box5'>data-Username</div>
<div data-UserName='zhd6' class='box box6'>data-UserName</div>
<div data-USERNAME='zhd7' class='box box7'>data-USERNAME</div>
以上几种data-属性名的情况都是正确的。不过通过data()方法取值时属性名情况就不一样了。看下面：
//原生js是通过DOM对象的dataset来取data-值，取值后属性名格式同data()一样
$('.box').each(function(){
console.log($(this).data())
})
//{username: "zhd1"}
//{userName: "zhd2"}
//{username: "zhd3"}
//{userName: "zhd4"}
//{username: "zhd5"}
//{username: "zhd6"}
//{username: "zhd7"}
不同data-属性名的格式，取值后的属性名也不一样。data-属性名格式大概有以上7种情况。
从以上取值情况可以看出，区别就在data-属性名是否用-隔开：
如果属性名用-隔开，取值后的属性名是驼峰格式。
如果属性名是没有用-隔开的字符串，无论大小写，取值后的属性名是小写字符串。
以上是取data-值时需要注意的点。
众所周知，jquery提供了可以操作HTML标签属性的方法---attr(),对应的js也有getAttribute()和setAttribute()两种方法。如果说为了避免data()方法取值的属性名问题，可以直接用以上方法操作。
接下来说说data()改变值的情况，首先我用此方法改变class="box1"的属性值:
$('.box1').data('username','myname');
然后在控制台看一下这个标签data-值是否改变了：
WechatIMG928.jpeg
发现标签上的值并没有像我们预想的那样改变。
如果打印一下试试看呢？
console.log($('.box1').data('username'))
//myname
虽然标签上的属性值没有改变，但是通过以上操作，属性值确实发生改变，只是没有体现在标签上而已。所以，一旦标签上data-属性值写定，利用data()方法改变data-属性值，并不会直接改变标签上的属性值。如果想改变标签上的data-属性值，请用jquery提供的attr()或者js的setAttribute()。
以上是个人见解，如有错误，请指正。多谢！
