H5 api

1. querySelector() 獲取符合選擇器的第一個元素
2. querySelectorAll() 獲取符合選擇器的所有元素

類選擇器

1. jquery操作類的方法：addClass() removeClass() toggleClass() hasClass()
2. h5也有類似的api 基於一個物件classList的方法 add() remove() toggle() contains()

讓我們來利用這個選擇器做一個 小案例

    <style>
        ul {
            list-style
 
: none;
        }

        li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: green;
            float: left;
            cursor: pointer;
        }

        li.active {
            background
 
: red;
        }
    </style>

<ul>
    <li>選單1</li>
    <li class="active">選單2</li>
    <li>選單3</li>
    <li>選單4</li>
</ul>

<script>
    window.onload = function () {
        /*切換當前樣式的效果*/
        document.querySelector('ul').onclick =
 
 function (e) {
            /*當前的LI*/
            var currentLi = e.target;
            /*如果已經選中 程式停止*/
            if(currentLi.classList.contains('active')) return false;
            /*如果沒有選中*/
            /*之前的去除*/
            document.querySelector('li.active').classList.remove('active');
            /*在給當前的加上*/
            currentLi.classList.add('active');
        }
    }
</script>

效果

自定義屬性

1.自定義屬性 data-* 自定義屬性
2.獲取元素的自定義屬性 jquery獲取方式 $(‘div’).data('自定義屬性的名稱)
3.自定義屬性的名稱是什麼？ data-user==>user data-user-name==>userName
4.命名規則 遵循駝峰命名法
5.獲取元素的自定義屬性 h5的方式 dataset 自定義屬性的集合

自定義屬性——和js自定義屬性的區別

• jquery的data() 操作記憶體
• H5的dataset 操作dom

讓我們對上面那一個案例做一個加工
他是通過自定義屬性名繫結事件的 並不依賴序號 所以在我們改變li的順序也不會發生錯亂的情況

小案例v1.0

    <style>
        ul:first-child {
            list-style: none;
        }

        ul:first-child li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background: green;
            float: left;
            cursor: pointer;
        }

        ul:first-child li.active {
            background: red;
        }

        .box li{
            width: 400px;
            height: 400px;
            background: pink;
            display: none;
        }
        .box li.show{
            display: block;
        }
    </style>

<ul class="nav">
    <!--在渲染的時候  大小的屬性會轉換成小寫 -->
    <li data-content-id="content01">選單1</li>
    <li data-content-id="content02" class="active">選單2</li>
    <li data-content-id="content03">選單3</li>
    <li data-content-id="content04">選單4</li>
</ul>
<ul class="box">
    <li id="content01">內容1</li>
    <li id="content03">內容3</li>
    <li id="content04">內容4</li>
    <li id="content02" class="show">內容2</li>
</ul>

<script>
    /*tab切換*/
    window.onload = function () {
       document.querySelector('.nav').onclick=function (e) {
           var currentLi=e.target;
           //已經選中停止操作
           if (currentLi.classList.contains('active'))return false;
           // 1更改樣式
            var oldLi=document.querySelector('.nav li.active');
           oldLi.classList.remove('active');
           currentLi.classList.add('active');
           // 2根據選中頁籤去顯示對應的內容
           //隱藏之前的
           var oldContent=document.querySelector('#'+oldLi.dataset.contentId);
           oldContent.classList.remove('show');
           //顯示當前的
           var currentContent=document.querySelector("#"+currentLi.dataset.contentId);
            currentContent.classList.add('show');
       }
    }
</script>

效果圖