js之排他思想及案例

案例一：五个按钮，点击谁谁的背景颜色变成粉色

  var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //先把所有的背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                //然后再让当前的元素按钮变色
                this.style.backgroundColor = 'pink';
            }
        }

案例二百度换肤效果

  var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                //点击图片的路径给body
                // console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')'

            }
        }

案例三表格经过变色

  //获得
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            //鼠标经过
            trs[i].onmouseover = function() {
                    this.className = 'bg';
                }
                //鼠标离开恢复 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';

            }
        }

案例四：表单全选取消全选

//1.全选和取消全选 
        //获取元素
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        //绑定事件
        j_cbAll.onclick = function() {
                //可以得到当前复选框的选中状态
                // console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                    //这里不用++‘’是因为this.checked被识别为一个关键字
                }

            }
            //2.复选按钮影响上面的
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                //控制全选按钮是否选中
                var flag = true;
                // console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        //只要有一个没被选择中就不用判断剩下的了
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }