Web API——DOM（2）

最新推荐文章于 2024-07-04 16:37:43 发布

Lotus_fragrance

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量483

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/124965848

版权

#博学谷IT学习技术支持#

1、操作元素

1.1排他思想

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

1. 所有元素全部清除样式（干掉其他人）

2. 给当前元素设置样式（留下我自己）

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

代码演示:

<style>
        .box {
            margin-top: 100px;
            text-align: center;
        }

        button {
            width: 80px;
        }
    </style>
</head>

<body>
    <div class="box">
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
    </div>
    <script>
        // 1. 所有元素全部清除样式（干掉其他人）
        // 2. 给当前元素设置样式 （留下我自己）
        // 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己

        //获取元素
        var box = document.querySelector('.box');
        //获取子节点元素对象集和
        var btn = box.children;
        // console.log(btn);
        //遍历btn伪数组，获取每个元素对象
        for (var i = 0; i < btn.length; i++) {
            //注册事件
            btn[i].onclick = function () {
                //干掉其他人
                for (var i = 0; i < btn.length; i++) {
                    btn[i].style.backgroundColor = '';
                }
                //保留我自己
                this.style.backgroundColor = 'pink';
            }
        }

    </script>

演示结果：

1.2表格隔行变色案例

1.用到新的鼠标事件鼠标经过 onmouseover 鼠标离开 onmouseout

2.核心思路：鼠标经过 tr 行，当前的行变背景颜色，

2.鼠标离开去掉当前的背景颜色

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 () {
                // console.log(11);
                this.className = 'bg';
            }
            // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function () {
                this.className = '';
            }
        }
    </script>

演示结果：

1.3表单全选取消全选案例

1. 点击上面全选复选框，下面所有的复选框都选中（全选）

2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选）

3. 如果下面复选框全部选中，上面全选按钮就自动选中

4. 如果下面复选框有一个没有选中，上面全选按钮就不选中

5. 所有复选框一开始默认都没选中状态

代码演示：

<style>
        table {
            border: 1px solid #ccc;
            margin: 100px auto;
            width: 300px;
            border-collapse: collapse;
            text-align: center;
        }

        thead tr {
            height: 40px;
            background-color: deepskyblue;
            color: #fff;
        }

        tr {
            height: 40px;
        }

        td,
        th {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>Java课程</td>
                <td>22000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>前端</td>
                <td>22000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Python</td>
                <td>22000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>人工智能</td>
                <td>25000</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 1.全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
        // 2.下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都
        // 3.要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
        // 4.可以设置一个变量，来控制全选是否选中

        //获取元素
        var input1 = document.querySelector('thead').querySelector('input');
        var input2 = document.querySelector('tbody').querySelectorAll('input');
        //1.给全选按钮注册事件
        input1.onclick = function () {
            //遍历伪数组，操作每个元素对象
            for (var i = 0; i < input2.length; i++) {
                input2[i].checked = this.checked;
            }
        }
        for (var i = 0; i < input2.length; i++) {
            //给每个复选框按钮元素对象注册事件
            input2[i].onclick = function () {
                // flag控制全选按钮是否被选中
                var flag = true;
                //判断复选框是否被选中
                for (var j = 0; j < input2.length; j++) {
                    if (!input2[j].checked) {
                        flag = false;
                    }
                }
                input1.checked = flag;
            }
        }
    </script>

演示结果:

1.4自定义属性的操作

1. 获取属性值

最低0.47元/天解锁文章

Lotus_fragrance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API——DOM（2）

1、操作元素1.1排他思想如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法： 1. 所有元素全部清除样式（干掉其他人） 2. 给当前元素设置样式（留下我自己） 3. 注意顺序不能颠倒，首先干掉其他人，再设置自己代码演示:<style> .box { margin-top: 100px; text-align: center; }
复制链接

扫一扫