Exclusive thoughts and cases of JS

Case a ： Five buttons , Click whose background color turns pink

  var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // First remove all the background colors 
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // Then change the color of the current element button 
                this.style.backgroundColor = 'pink';
            }
        }

Case 2 Baidu skin changing effect

  var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // Loop register events 
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // Click the path of the picture to body
                // console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')'

            }
        }

The table of case 3 has been changed

  // get 
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for (var i = 0; i < trs.length; i++) {
            // Mouse over 
            trs[i].onmouseover = function() {
                    this.className = 'bg';
                }
                // Mouse off recovery  onmouseout
            trs[i].onmouseout = function() {
                this.className = '';

            }
        }

Case four ： Select all form deselect all

//1. Select all and cancel all  
        // Get elements 
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        // The binding event 
        j_cbAll.onclick = function() {
                // You can get the selected status of the current check box 
                // console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    j_tbs[i].checked = this.checked;
                    // Here there is no ++‘’ Because this.checked Identified as a keyword 
                }

            }
            //2. The check button affects the above 
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function() {
                // Controls whether the select all button is selected 
                var flag = true;
                // console.log(this.checked);
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        // As long as one is not selected, there is no need to judge the rest 
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }