操作元素--排他思想

$\color{rgba(254, 67, 101, .8)}{排他思想：}$

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.所有元素全部清除样式
2.给自己(当前元素)设置样式
3.顺序不能颠倒，首先清除样式，再给自己设置样式

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        //给5个按钮都绑定点击事件
        //1.获取所有按钮元素
        //btns得到的是伪数组，获取里面的每一个元素用btns[i]
        //单纯只用for循环取每一个按钮，然后添加点击事件是没用的
        //因为没点一个都会变色，但是点下一个按钮上一个按钮的颜色不会取消
        //所以用双重for循环，外层循环用于获取按钮，而内层循环用于去掉每一个按钮的颜色
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //1.先把所有的按钮背景色去掉
                for (var i = 0; i < btns.length; i++) {
                    //点谁this就指向谁
                    btns[i].style.backgroundColor = '';
                }
                //2.颜色去掉后让当前点击事件绑定的那个按钮背景颜色为pink
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{案例：百度换肤}$

分析：
1.这个案例练习是给一组元素注册事件
2.给4个小图片利用循环注册点击事件
3.当我们点击了这张图片，让我们的页面背景改为当前的图片
4.核心思路：把当前图片(this)的src路径取过来，给body作为背景即可

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
    </style>
</head>

<body>
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>

    <script>
        //1.获取元素： 4张图片
        var imgs = document.querySelector('.baidu').querySelectorAll('img');

        //2.循环注册时间
        for (i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                //this.scr就是点击的那张图片的路径
                //把这张图的路径给body就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{案例：表格隔行变色}$

案例分析：
1.用到新的鼠标事件鼠标经过 onmouseover 鼠标离开 onmouseout
2.核心思路：鼠标经过tr行，当前行变背景颜色，鼠标离开去掉当前的背景色
3.注意：第一行(thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行

    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>


<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>



    <script>
        //1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');

        //2.循环注册，绑定事件
        for (var i = 0; i < trs.length; i++) {
            //3. 鼠标经过 onmouseover 
            trs[i].onmouseover = function() {
                    //写一个背景色的类.bg，鼠标经过每一行换成bg设定好的颜色pink
                    this.className = 'bg';
                }
                //4.鼠标离开事件 onmouseout
                //鼠标离开后颜色为空
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>

image.png