H5新特性之data-*

Posted 2021-01-16 xuchao0506

简单介绍：html5的data-*能够为标签添加一些自定义的属性和值，并且这种自定义的属性和值可以通过js来获取，十分的便捷

代码：

//html代码
<tr th:each="plan : ${list}" th:id="${plan.planId}"
    th:attr="data-plan-status=${plan.planStatus}，data-name=${plan.planName}">
　　<td></td>
　　<td></td>
</tr>

//js代码取值
<script type="text/javascript">
　　//获取table选中的tr行的节点 .active 被选中  类似class选择器
　　var nodes = $(‘#table1‘).DataTable().rows(".active").nodes();
　　var statusArray = new Array();
　　var nameArray = new Array();
　　var idArray = new Array();
　　if(CommnUtil.notNull(nodes)){
　　　　for(var i = 0; i，nodes.length; i++ ){
　　　　　　var planStatus = $(nodes[i]).data(‘planStatus‘);
　　　　　　var planName = $(nodes[i]).data(‘name‘);
　　　　　　var id = $(nodes[i]).attr(‘id‘);
　　　　　　statusArray[i] = planStatus;
　　　　　　nameArray[i] = planName;
　　　　　　idArray[i] = id;
　　　　}
　　}
　　//后边省略
</script>

说明:data-name取值就是普通的那种取值data(‘name‘)   而 data-plan-status取值的话就必须是data(‘planStatus‘),第二个符号“-”后边的首字母会自动转为驼峰(大写)，h5的新特性之一。

另外 attr这个玩意儿用来设置或者取得某个属性的值，如果标签中有某个属性，js要获得这个属性的值，直接.attr(‘属性名‘),想为标签设置自定义的属性，直接在标签中attr = "data-xxx"就行