DOM-小技巧(更新中)

2周前 (09-12) 78次浏览 已收录 0个评论

排他思想

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

  • 所有元素全部清除样式(干掉其他人)
  • 给当前元素设置样式(留下自己人)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排他思想</title>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
       var btns=document.getElementsByTagName('button');
       for(var i = 0; i< btns.length;i++){
           btns[i].onclick=function(){
               //先把所有的按钮颜色去掉
               for(var j=0;j<btns.length;j++){
                   btns[j].style.backgroundColor='';
               }
               //然后再让当前元素改变背景颜色
               this.style.backgroundColor='blue';
           }
       }
    </script>
</body>
</html>
结果演示

表单全选反选

<script>
     // 1. 全选和取消全选做法:  让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
     // 获取元素
     var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
     var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
     // 注册事件
     j_cbAll.onclick = function() {
             // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中
             // console.log(this.checked);
             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++) {
         // 每次点击下面的任意一个复选框都要循环检查者4个小按钮是否全被选中
         j_tbs[i].onclick = function() {
             // flag 控制全选按钮是否选中
             var flag = true;
             //循环检查者4个小按钮是否全被选中
             for (var i = 0; i < j_tbs.length; i++) {
                 if (j_tbs[i].checked==false) {
                     flag = false;
                     break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
                 }
             }
             j_cbAll.checked = flag;
         }
     }
 </script>
结果演示

 


渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:DOM-小技巧(更新中)
喜欢 (2)

您必须 登录 才能发表评论!