作用：獲取自定義屬性
命名規則：駝峰命名法 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>