排他思想

目录

1、排他算法思想

2、按钮切换

3、鼠标经过单元格变化 


1、排他算法思想

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

  1. 所有元素全部清除样式(干掉其他人)
  2. 给当前元素设置样式(留下我自己)
  3. 注意顺序不能颠倒,首先干掉其他人,再设置自己

案例演示:在同一组元素中,想要某一个元素实现某种样式,使用循环的排他思想算法来实现。

2、按钮切换

//编写HTML结构代码

<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
</body>
//编写JS代码,单击按钮,改变当前按钮背景色
<script>
  // 1. 获取所有按钮元素, btns得到的是类数组对象
  var btns = document.getElementsByTagName('button');
  for (var i = 0; i < btns.length; i++) { // 里面的每一个元素btns[i]
     btns[i].onclick = function () {
      for (var i = 0; i < btns.length; i++) { // (1) 先把所有的按钮背景颜色去掉
        btns[i].style.backgroundColor = '';
      }
      this.style.backgroundColor = 'pink'; // (2) 然后设置当前的元素背景颜色
    }
  }

 展示效果:

 

 案例分析:当表格中的单元格比较多时,可以在用户鼠标指针经过时把当前行添加背景色,使表格内容显得清晰和一目了然,容易阅读。

接下来,使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。

3、鼠标经过单元格变化 

① 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
② 核心思路:鼠标经过 tr 行,当前的行变背景颜色, 鼠标离开去掉当前的背景颜色
③ 注意: 第一行(thead里面的行)不需要变换颜色,因此我们获取的是 tbody 里面的行
//编写HTML结构代码

<div style="margin: 50px auto;">
    <table border="1">
        <thead>
            <tr>
                <th width='50'>学号</th>
                <th width='50'>姓名</th>
                <th width='50'>性别</th>
                <th width='50'>年龄</th>
                <th width='50'>地址</th>

                
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1001</td>
            <td>张三</td>
            <td>男</td>
            <td>26</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>里斯</td>
            <td>女</td>
            <td>30</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>刘柳</td>
            <td>女</td>
            <td>26</td>
            <td>上海</td>
        </tr>
    </tbody>
    </table>
</div>
 //编写JS代码,鼠标指针经过时背景变色
//1.获取tbody里所有tr
    var trs=document.querySelector('tbody').querySelectorAll('tr');
   
    //2.利用循环绑定事件
    for(var i=0;i<trs.length;i++){
        trs[i].onmouseover=function(){
            this.className='bg';   //鼠标经过,class名为bg
        }
        trs[i].onmouseout=function(){
            this.className='';
        }
    } 

效果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值