H5 api选择器

版权声明：部分来源于网络仅供学习交流 https://blog.csdn.net/Chad97/article/details/83279886

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>

效果图