作用：获取自定义属性
命名规则：驼峰命名法 data-user==>user data-user-name==>userName
区别：jQuery：操作内存 h5： 操作DOM
jQuery修改自定义属性后，在DOM看不到改变，而h5可以
用法：
使用场景：Tab切换（通过自定义属性与内容相关联，内容可以打乱顺序）
1 <body> 2 <ul class="nav"> 3 <!--在渲染的时候 大小的属性会转换成小写 --> 4 <li data-content-id="content01">菜单1</li> 5 <li data-content-id="content02" class="active">菜单2</li> 6 <li data-content-id="content03">菜单3</li> 7 <li data-content-id="content04">菜单4</li> 8 </ul> 9 <ul class="box"> 10 <li id="content01">内容1</li> 11 <li id="content03">内容3</li> 12 <li id="content04">内容4</li> 13 <li id="content02" class="show">内容2</li> 14 </ul> 15 <!-- css序号选择器伪类选择器 E:first-child--> 16 <!-- 查找顺序： 17 通过E确定父元素 18 通过父元素找到所有的子元素 19 再去找第一个子元素 20 找到第一个子元素之后再去匹配类型是不是E 不是：无效选择器 21 ul:last-child 22 --> 23 <script> 43 /*tab切换*/ 44 window.onload = function () { 45 document.querySelector('.nav').onclick = function (e) { 46 var currentLi = e.target; 47 /*已经选中 停止操作*/ 48 if(currentLi.classList.contains('active')) return false; 49 50 var oldLi = document.querySelector('.nav li.active'); 51 /*1.更改样式*/ 52 oldLi.classList.remove('active'); 53 currentLi.classList.add('active'); 54 /*2.根据选中的页签去显示对应的内容*/ 55 /*隐藏之前的*/ 56 var oldContent = document.querySelector('#'+oldLi.dataset.contentId); 57 oldContent.classList.remove('show'); 58 /*显示当前的*/ 59 var currentContent = document.querySelector('#'+currentLi.dataset.contentId); 60 currentContent.classList.add('show'); 61 } 62 } 63 </script> 64 </body>