Web API及DOM介绍(二) ——排他思想（多案例）

2023-11-02 08:46:28

本篇博客的主要内容就是排他思想。

一、排他思想

一、排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

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

案例代码：

 <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

上图就是利用排他思想的一个小案例，这种例子在网页中十分常见，所以我们需要熟练掌握排他思想。

案例1：模拟百度换肤效果

效果要求：点击小图片更换对应的背景图片

思路：

1.先给一组元素注册事件

2.给4张小图片循环注册点击事件

3.当我们点击了这张图片，就将页面背景改为当前的图片

4.核心算法：获取当前图片的src，给body作为背景

案例代码：

<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. 获取元素 
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2. 循环注册事件 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径   images/2.jpg
                // console.log(this.src);
                // 把这个路径 this.src 给body 就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

案例2：表格隔行换色

效果要求：当鼠标移动到表内的某一行时，该行有背景颜色方便查看

思路：

1.使用新的鼠标事件-鼠标经过、鼠标离开

2.当鼠标经过tr行时，改变当前行的背景颜色，当鼠标离开时，清除该行的背景颜色

3.第一行（表头）不需要改变颜色，所以我们获取的是tbody里面的行

案例代码：

<head>
    <title>隔行换色t</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 866px;
            margin: 100px auto;
        }

        table thead {
            height: 40px;
            background-color: #7fc8ed;
        }

        table tbody {
            color: #333;
            font-size: 12px;
        }

        table tbody tr th {
            height: 30px;
            border-bottom: 1px solid #ccc;

        }

        .bg {
            background-color: rgb(165, 225, 248);
        }
    </style>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
                <th>公布日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>003526</th>
                <th>农银金穗3个月定期开放债务</th>
                <th>1.075</th>
                <th>1.079</th>
                <th>1.074</th>
                <th>+0.047%</th>
                <th>2019-01-11</th>
            </tr>
            <tr>
                <th>270047</th>
                <th>广发理财30天债券B</th>
                <th>0.903</th>
                <th>3.386</th>
                <th>0.000</th>
                <th>0.000%</th>
                <th>2019-01-16</th>
            </tr>
            <tr>
                <th>163417</th>
                <th>兴全合宜混合A</th>
                <th>0.860</th>
                <th>0.860</th>
                <th>0.863</th>
                <th>-0.382%</th>
                <th>2019-01-16</th>
            </tr>
            <tr>
                <th>003929</th>
                <th>中银证券安进债券A</th>
                <th>1.034</th>
                <th>1.088</th>
                <th>1.034</th>
                <th>+0.077%</th>
                <th>2019-01-16</th>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onm ouseover
            trs[i].onmouseover = function () {
                this.className = 'bg';
            }
            // 4. 鼠标离开事件 onm ouseout
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>
</body>

案例3：全选操作

效果要求：

1.点全选复选框，下面所有的复选框都会被选中，取消全选，下面所有都会取消

2.如果下面有一个复选框没有被选中，则取消上面的全选框

3.如果下面的复选框全部选中，则上面的全选复选框会自动选中

4.所有复选框一开始默认都不选中

思路：

1.先给上面的复选框绑定注册事件，上面被选中，下面的全部选中，上面取消下面也取消

2.下面的复选框需要全部选中，上面全选才选中--循环查看下面的复选框是否选中，若全部选中，则上面的选中

3.设置一个变量，来控制全选是否选中

案例代码：

<head>
    <title>全选</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 400px;
            margin: 100px auto;
        }

        thead {
            height: 40px;
            background-color: #7fc8ed;

        }

        thead tr th {
            border: 1px solid #ccc;
        }

        tbody {
            color: #333;
            font-size: 12px;
        }

        table tbody tr td {
            height: 30px;
            border: 1px solid #ccc;
            text-align: center;

        }
    </style>
</head>

<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th><input type="checkbox" name="" id="ckall"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="ck">
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>iPhone13</td>
                <td>8999</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>iPad Pro</td>
                <td>6999</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>iPad Air</td>
                <td>4999</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>Apple Watch</td>
                <td>2999</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 获取元素
        var  ckall = document.getElementById('ckall');
        var  cks = document.getElementById('ck').querySelectorAll('input');
        ckall.onclick = function(){
            for(var i = 0;i<cks.length;i++ ){
                cks[i].checked = this.checked;
            }
        }
        // 给所有的子复选框注册单击事件
        for (var i = 0; i < cks.length; i++) {
            cks[i].onclick = function () {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < cks.length; i++) {
                    if (!cks[i].checked) {
                        flag = false;
                        break;
                    }
                }
                // 设置全选按钮的状态
                ckall.checked = flag;
            }
        }
    </script>
</body>

二、自定义属性操作

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

1.获取属性值

element.属性 //获取属性值

element.getAttribute('属性')；

区别：

element.属性获取内置属性（即元素本身自带的属性）

element.getAttribute('属性')；主要获得自定义的属性（标准）

2.设置属性值

element.属性 = '值' //设置内置属性值

element.setAttribute('属性','值')；

区别：

element.属性设置内置属性（即元素本身自带的属性）

element.getAttribute('属性')；主要设置自定义的属性（标准）

3.移出属性

element.removeAttribute('属性')；

4.H5自定义属性

有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。于是H5给我们新增了自定义属性。

4.1设置H5自定义属性

H5规定自定义属性以data-开头作为属性名并且赋值如： <div data-index = "1"></div>

或者使用js设置如：element.setAttribute('data-index','2')；

4.2获取H5自定义属性

1.element.getAttribute('属性')；

2.H5新增：element.dataset.属性或者element.dataset['属性'] //ie11才支持

案例4：Tab栏切换

思路：

1.Tab栏切换有两个模块

2.上面的选项卡，点击某一个，当前的底色会改变，其余不变（排他思想）

3.下面的模块内容，跟随上面的选项卡进行变化，所以写到点击事件里面

4.下面的显示内容和上面的选项卡一一对应

5.给上面的选项卡添加自定义属性data-index属性从0开始编号

6.当我们点击上面的选项卡，让下面li里面对应序号的内容显示，其余隐藏（排他思想）

案例代码：

<head>
    <title>tab栏切换</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 1000px;
            height: 500px;
            margin: 50px auto;
        }

        ul {
            list-style: none;
        }

        .title {
            float: left;
            width: 1000px;
            height: 40px;
            background-color: #f1f1f1;
            border: 1px solid #ccc;

        }

        .title li {
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            cursor: pointer;
        }

        .cor {
            background-color: #ec4141;
            color: #fff;

        }

        .tbody {
            width: 1000px;
            height: 400px;
        }

        .tbody li {
            display: none;
            width: 100%;
            height: 100%;
        }

        .tbody li:first-child {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="title">
            <li class="cor">首页</li>
            <li>娱乐</li>
            <li>体育</li>
            <li>国内</li>
            <li>国际</li>
        </ul>
        <ul class="tbody">
            <li>首页页面</li>
            <li>娱乐页面</li>
            <li>体育页面</li>
            <li>国内页面</li>
            <li>国际页面</li>
        </ul>
    </div>
    <script>
        var tt = document.querySelector('.title');
        var tlis = tt.querySelectorAll('li');
        var lis = document.querySelector('.tbody').querySelectorAll('li');

        // 上面的变化
        for (var i = 0; i < tlis.length; i++) {
            // 设置index
            tlis[i].setAttribute('data-index', i);
            // 鼠标点击版
            tlis[i].onclick = function () {

                for (var i = 0; i < tlis.length; i++) {
                    tlis[i].className = '';
                    lis[i].style.display = 'none';
                }
                this.className = 'cor'
                var index = this.getAttribute('data-index');
                lis[index].style.display = 'block';
            }
        }

    </script>

</body>

看完本篇博客，排他思想你get了吗？

码农公寓

一、排他思想

案例1：模拟百度换肤效果

案例2：表格隔行换色

案例3：全选操作

二、自定义属性操作

1.获取属性值

2.设置属性值

3.移出属性

4.H5自定义属性

案例4：Tab栏切换

相关文章