812笔记（排他思想，自定义属性操作）

排他思想

排除其他人，然后设置自己的样式，这种排除其他人的思想称为排他思想

• 给所有元素全部清除样式（干掉其他人）
• 给当前元素设置样式（留下自己）
• 顺序不能颠倒，先干掉其他人，再设置自己

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>
<script>
    //获取所有按钮元素
    var oBtns = document.querySelectorAll('button')
    //oBtns得到的是伪数组，里面的每一个元素是oBtns[i]
    //循环遍历
    for (i = 0; i < oBtns.length; i++) {
        //给每一个元素循环添加点击事件
        oBtns[i].onclick = function () {

            //先把所有按钮的背景颜色去掉
            for (var j = 0; j < oBtns.length; j++) {
                oBtns[j].style.backgroundColor = '';
                //给当前点击的元素设置背景颜色为粉色
                this.style.backgroundColor = 'pink'
            }
        }
    }
</script>

实例：换皮肤

• 给四个小图片利用循环注册点击事件
• 当我们点击了这个图片，让页面背景改为当前图片
• 把当前图片的src路径取过来，设置为body的背景

    <ul class="box">
        <li><img src="./img/1.jpg" alt=""></li>
        <li><img src="./img/2.jpg" alt=""></li>
        <li><img src="./img/3.jpg" alt=""></li>
        <li><img src="./img/4.jpg" alt=""></li>
    </ul>
    <script>
        //获取元素
        var imgArr = document.querySelector('.box').querySelectorAll('img')
        //循环注册事件
        for (var i = 0; i < imgArr.length; i++) {
            imgArr[i].onclick = function () {
                //this就是点击的当前图片 this.src就是当前图片的路径
                //this.src赋值给body
                document.body.style.backgroundImage = 'url(' + this.src + ')'
            }
        }
    </script>

实例：隔行变色

        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        tr {
            height: 30px;
        }

        td {
            border-bottom: 1px solid;
        }

        .bg {
            background-color: pink;
        }
        
------------------

<script>
        //鼠标事件：鼠标经过，omouseover  鼠标离开 omouseout
        // 鼠标经过tr，当前行变背景颜色。鼠标离开去掉当前行的颜色

        //1 获取所有的行tr
        var trArr = document.querySelectorAll('tr')
        //循环注册事件
        for (var i = 0; i < trArr.length; i++) {
            //鼠标经过
            trArr[i].onmouseover = function () {
                this.className = 'bg'
            }
        };
        //鼠标离开
        tr.trArr[i].omouseout = function () {
            this.className = ''
        }
    </script>

实例：全选反选

    <table>
        <tr>
            <th><input type="checkbox" id="checkall"></th>
            <th>商品</th>
            <th>价钱</th>
        </tr>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>iphone8</td>
                <td>8000</td>
            </tr>
        </tbody>
    </table>
    <!--     
    1 点击上面权限复选框，下面所有的复选框都选中（全选）
    2 再次点击全选复选框，下面所有的复选框都不选中（取消全选）
    3 如果下面的复选框全部选中，上面的全选按钮就自动选中 
    4 如果下面复选框有一个没选中，上面的全选按钮就不选中
    5 所有复选框一开始默认都是没有选中的状态

    复选框的checked属性
-->
    <script>
        //1 全选和取消全选的做法 让下面所有的复选框的checked属性（跟全选按钮的状态一致）
        //获取元素
        var checkall = document.querySelector('#checkall')
        var inps = document.querySelector('tbody').querySelectorAll('input')  //如果不加tbody会把全选的input一起选上

        //全选按钮注册事件
        checkall.onclick = function () {
            //当前点击的全选按钮的状态  返回的true/false
            //下面所有的复选框都和全选框一致
            for (var i = 0; i < inps.length; i++) {
                inps[i].checked = this.checked
            }
        }

        //2 给所有下面的复选框注册点击事件  
        for (var i = 0; i < inps.length; i++) {
            inps[i].onclick = function () {
                //定义一个变量flag控制全选按钮是否选中
                var flag = true  //默认全部选中
                //每次点击下面的复选框，都要循环检查四个小按钮是否全部被选中
                for (var j = 0; j < imps.length; j++) {
                    //只要有一个不选中，flag的值就会变成false
                    if (!inps[j].checked) {
                        flag = false
                        break
                    }
                }
                //设置全选按钮的状态
                checkall.checked = flag
            }
        }
    </script>

自定义属性操作

获取属性值

element.属性   获取内置的属性值（元素本身自带的属性）
element.getAttribute('属性')    主要获取自定义的 属性（标准），我们程序员自定义的属性

    <div id="demo" index='2' class="nav"></div>
    <!-- index是程序员自己定义的属性 -->
    <script>
        var oDiv = document.querySelector('div')
        //获取元素的属性值
        //element.属性
        console.log(oDiv.id)  //demo

        //element.getAttribute('属性')
        console.log(oDiv.getAttribute('id'))   //demo
        console.log(oDiv.getAttribute('index'))   //2
    </script>

设置属性值

element.属性='值'  设置内置属性值
element.setAttribute('属性',值)   设置自定义的属性值

        oDiv.id = 'test'
        oDiv.className = 'navs'　　　　//className
        oDiv.setAttribute('index', 23)
        oDiv.setAttribute('class', 'footer')    //class

移除属性

element.removeAttribute('属性')

        oDiv.removeAttribute('index')

案例：tab栏切换

思路：tab栏切换有两个大的模块
上的模块是选项卡，点击某一个，当前这一个改变样式，其余不变（排他思想）
下面的模块内容会跟随上面的选项卡做一个变化，所以下面模块变化要写到点击事件里面
下面模块显示内容和上面选项卡一一对应
给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始
当我们点击tab_list里面的某个小li，让tab_con 对应序号的内容做一个显示，其余的隐藏

           * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .tab {
            width: 500px;
            margin: 100px auto;
        }

        .tab_list {
            height: 30px;
            background-color: brown;
        }

        .tab_list ul {
            display: flex;
            align-items: center;
            justify-content: space-around;
            line-height: 30px;
            color: #fff;
        }

        .tab_con item {
            display: none;

        }

        .tab_list ul.current {
            color: yellow;
        }
   
   --------------------------
   
   <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">商品介绍</div>
            <div class="item">规格与包装</div>
            <div class="item">售后保障</div>
            <div class="item">商品评价</div>
            <div class="item">手机社区</div>
        </div>
    </div>
    <script>
        //1 获取元素
        var tab_list = document.querySelector('.tab_list')
        var lis = tab_list.querySelectorAll('li')
        var items = document.querySelectorAll('.item')

        //给每个li循环注册事件
        for (var i = 0; i < lis.length; i++) {
            //给给上面的tab_list中的所有小li添加自定义属性，属性值从0开始
            lis[i].setAttribute('index', i)
            lis[i].onclick = function () {
                //所有的li清除样式
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = ''
                }
                //留下自己
                this.className = 'current'
                //下面的显示内容模块
                var index = this.getAttribute('index')
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'block'
                }
                //让所有的item全隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none'
                }
                //让对应的item显示
                items[index].style.display = 'block'
            }
        }
    </script>