HTML5自定义属性
趁着难得的一个双休折腾了一下jQuery Mobile，（虽然后面发现其中有几个坑并且还不能用在现在的项目中），里面的data-*属性简直不要太多。
最初接触BootStrap的时候也碰到过data-自定义属性，某次面试题里面也有这个知识点，却一直没有深入理解。
学习jqm，虽然不大能用得上，也不能再使用“拿来主义”了，现在整理一下这个自定义属性。
作用
HTML5规定可以为元素添加非标准的属性，目的是为元素提供与渲染无关的信息和语义信息，因此，如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。
Data-*存储的数据能够被页面上的JS利用，而在此之前主要依靠class（指定浏览器渲染当前元素规则）和rel（指定当前文档与被链接文档之间的关系）。
元素自身的其他特性就容易与上述两个属性的功能相违背（虽然也能达到部分效果，比如给类取一个语义性的名称），而通过自定义的属性，就可以达到对其元素进行搜寻、过滤以及分组等动作。
设置
只需要在属性名前加上”data-”开头即可设置标签的自定义属性，然后将整个属性放在对应的标签下。里面的内容可以是任意的相关属性。
W3Cschool上面说data-后面的属性名不能包含大写字母，但是我试了一下，用该属性控制CSS样式仍旧是会生效的，只是观察到浏览器会自动将大写转换成小写字母，因此这里应当是自定义属性不区分大小写，至于为什么会说属性名不要包含大写字母，大概是DOM中的dataset属性（马上就会谈到），其属性都是忽略”data-”开头的，与font-size等属性一样采用驼峰命名法的方式获取的。
因此为了不产生歧义，如果只有一个单词，最好采用全小写的写法，且自定义属性的修饰名词不要过长，毕竟并没有对其数量的限制，大不了多写两个属性嘛！下面是关于命名大小写的例子。
<style type="text/css">
[data-name="t"] { background-color: #ccc}
</style>
<div id="t" data-name="t">
Hello World!
</div>普通的情况下，div元素背景会变成灰色；然后将自定义属性名改成data-Name,其余不作变动，可以看见容器的背景颜色仍然为灰色，然而通过DOM获取到的属性就会发现：
var t = document.getElementById("t");
alert(t.dataset.name); //tang
alert(t.dataset.Name); //undefined此外还发现一个有趣的现象，当更改的是HTML中的属性名为Name，CSS中的属性仍为name时，将会在脚本执行完毕之后再将容器背景渲染为灰色；当更改的是CSS中的属性名为Name，HTML中的属性仍为name时，将在脚本执行之前将背景渲染为灰色，这个大概跟浏览器的渲染流程有关系（使用的是chrome）; 当以短横线连接的属性名时，DOM获取属性遵循的是驼峰命名法：
<div id="t" data-name-t="t">
Hello World!
</div>
<script>
alert(t.dataset.nameT); //tang
</script>使用
上面巴拉巴拉说了一些，其实都是些无关痛痒的话，到底发该怎么使用自定义属性呢？
其实jQuery Mobile中大量使用了自定义属性，并使用JS动态设置样式。
其原理就是：脚本检测容器的自定义属性，并在具有某自定义属性的容易上动态添加对应的样式类；这样就成功地将样式类与容器标签给分开了，相当于事先准备好了大量的样式并在设置自定义属性的时候调用这些样式，虽然仅仅使用类名也可以达到这样的目的。
顺便吐槽一下jqm的默然data-ajax属性，以及只能在服务器环境下使用，以及不太流畅的体验...）关于自定义属性在jqm中的用法可以看看这篇文章。
好了，那就到这里了吧，jquery中的data方法貌似更加好用，且解决了兼容性的问题噢。
你要请我喝一杯奶茶？
版权声明：自由转载-非商用-保持署名和原文链接。
本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。
