欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JS排他思想、属性操作及案例

程序员文章站 2022-07-04 20:07:31
...

JSday7

文章目录

操作元素(排他思想)

若有同一组元素，我们想要某一元素实现某种样式，需要用到循环的排他思想

  1. 所有元素全部清除样式(干掉其他人)
  2. 给当前元素设置样式(仅留一个)
  3. 顺序不可颠倒
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>
        // 获取元素
        var btns = document.getElementsByTagName('button');
        // btns获得的是一个伪数组，里面每一个元素btns[i]
        for(var i=0; i<btns.length; i++){
            btns[i].onblur = function(){
                // 去掉按钮的背景颜色
                for(var i=0; i<btns.length; i++){
                    btns[i].style.backgroundColor = '';
                }
                // 再修改当前按钮背景颜色
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>

案例1：表格隔行变色

分析

  • 鼠标事件，鼠标经过onmouseover 鼠标离开 onmouseout

  • 鼠标经过tr行，当前行变背景颜色，鼠标离开去掉当前的背景颜色

  • 第一行不必变色，获取的是具体的行信息

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table {
                width: 500px;
                border: 1px solid black;
                font-size: 17px;
                text-align: center;
            }
            table tr td{
                border: 1px solid black;
            }
            .bg{
                background-color: aqua;
            }
        </style>

    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <td>名字</td>
                    <td>学号</td>
                    <td>地址</td>
                    <td>学院</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>1</td>
                    <td>621</td>
                    <td>计算机</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>2</td>
                    <td>621</td>
                    <td>计算机</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>3</td>
                    <td>621</td>
                    <td>计算机</td>
                </tr>
            </tbody>
        </table>

        <script>
            // 获取元素
            var trs = document.querySelector('tbody').querySelectorAll('tr');
            // 鼠标经过事件
            for(var i=0; i<trs.length ;i++){
                trs[i].onmouseover = function(){
                    this.className = 'bg';
                }
                // 鼠标离开事件
                trs[i].onmouseout = function(){
                    this.className = '';
                }
            }
        </script>
    </body>
</html>

案例2：全选和取消全选按钮

  • 全选和取消全选：让下面所有复选框的checked属性跟随全选按钮即可
  • 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选按钮就不选中。
<script>
    // 1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll');  // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementByTagName('input');  // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function() {
        // this.checked 它可以得到当前复选框的选中状态，如果是true就是选中，如果是false就是未选中
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }

    // 2. 下面复选框需要全部选中，上面全选按钮才能选中。给下面所有复选框绑定点击事件
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].checked = function() {
            // flag控制全选按钮是否选中
            var flag = true;
            // 每次点击下面的复选框都要循环检查这4个小按钮是否全被选中
            for (var j = 0; j < j_tbs.length; j++) {
                // 如果有一个复选框没选中，则flag为false
                if (!j_tbs[j].checked) {
                    flag = false;
                    break;
                }
            }
            j_cbAll.checked = flag;
        }
    }
</script>

自定义属性操作

获取属性的方式

  • element.属性
  • element.getAttribute(‘属性’)

区别

  • element.属性 获取内置属性值（元素本身自带的属性）
  • element.getAttribute(‘属性’) 获得自定义属性(标准，一般是自定义的属性)

设置属性值

  • element.属性 = ‘值’ //内置属性
  • element.setAttribute(‘属性’,‘值’); //主要针对于自定义属性

移除属性

  • element.removeAttribute(‘属性’);

案例3：tab栏切换(重点)

①Tab栏切换有2个大的模块

②上面的选项卡模块，点击某一个，当前这个底色会是红色，其余不变（排他思想），用修改类名的方式

③下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面

④规律：下面的模块显示内容和上面的选项卡一一对应相匹配。

⑤核心思路：给上面的tab_list里面的所有小li添加自定属性index，属性值从0开始编号

⑥当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）

<style>
    *{
        margin:0;
        padding:0;
    }
    .tab_list li{
        width:160px;
        height:45px;
        list-style:none;
        line-height:45px;
        text-align: center;
        float:left;
    }
    .tab_list .current{
        background-color:#c81623;
        color:#fff;
    }
    .item{
        width:800px;
        height: 200px;
        padding-top:40px; 
        /*line-height:200px;*/
        font-size: 30px;
        color:#fff;
        text-align: center;
        text-shadow:2px 2px 4px #000000;
        background: #efefef;
        /*opacity: 0.8;*/
        top:47px;
        position:absolute;
    }
</style>
<body>
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>商品评价（50000）</li>
            <li>售后保障</li>
            <li>手机社区</li>
        </ul>
    </div>    
    <div class="detail_tab_con" style="display: block;">
        <div class="item">与商品介绍的内容相对应</div>
        <div class="item">与规格与包装的内容相对应</div>
        <div class="item">与商品评价（50000）的内容相对应</div>
        <div class="item">与售后保障的内容相对应</div>
        <div class="item">与手机社区的内容相对应</div>
    </div>

    <script>
        // 1.上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想），修改类名的方式
        // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li设置索引号（自定义属性）
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 首先清除其余li的当前选中的class类样式
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 然后再给当前选中的li添加当前选中的class类样式
                this.className = 'current';
                // 下面的显示内容模块
                var index = this.getAttribute('index');
                // 首先隐藏其他item的内容
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 然后只显示当前选中的tab栏内容
                // display: block不仅有转换为块元素的意思，也有显示的意思
                items[index].style.display = 'block';
            }
        }
    </script>
</body>
相关标签： 学习记录JavaScript B站学习记录 javascript css js

上一篇： STM8 IAP升级程序设计详解 - IAR环境

下一篇： stm32F4 IAP实现原理讲解以及中断向量表的偏移

推荐阅读