js排他思想以及相关案例

  • 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想
<body>
   <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>
</body>

案例：换肤效果

案例分析

①这个案例练习的是给一组元素注册事件
②给4个小图片利用循环注册点击事件
③当我们点击了这个图片,让我们页面背景改为当前的图片
④核心算法:把当前图片的src路径取过来,给body做为背景即可

<style>
       *{
           margin: 0;
           padding: 0;
       }
       body{
           background: url(../images/1.jpg) no-repeat center top;
       }
       li{
           list-style: none;
       }
       .baidu{
           overflow: hidden;
           margin: 100px auto;
           background-color: #fff;
           width: 410px;
           padding-top: 3px;
       }
       .baidu img{
           width: 100px;
       }
   </style>
</head>
<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');
       //2.循环注册事件
       for(var i=0; i<imgs.length; i++){
           imgs[i].onclick = function(){
               //把这个路径 this.src给body 就可以了
              document.body.style.backgroundImage = 'url('+ this.src +')';
           }
       }
   </script>
</body>

案例：表格隔行变色

案例分析：

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

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

案例：表单全选取消案例

案例分析：

①全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可

②下面复选框需要全部选中，上面全选才能选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的， 上面全选就不选中。

<script>
       //1.获取元素
       var j_cbAll = document.getElementById('j_cbAll');    //全选按钮
       var j_tbs = document.getElementById('j_tb').getElementsByTagNameNS('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++){
           j_tbs[i].onclick = function(){
               //flag控制全选按钮是否选中
               var flag = true;
               //每次点击下面的复选框都要循环检查这4个小按钮是否全被选中
               for(var i=0;i<j_tbs.length;i++){
                   if(!j_tbs[i].checked){
                       flag = false;
                       break;//退出for循环  这样可以提高执行效率  因为只要有一个没选中，剩下的就无需循环判断
                   }
               }
               j_cbAll.checked = flag;
           }
       }
 </script>