js--pink

关于排他思想

先干掉所有人，再给自己添加属性

/ 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        console.log(btns);
        for (let 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 = 'red'
            }
            
        }

关于表格隔行变色

先获取每一行元素，再给每一行添加点击事件，让鼠标经过时添加一个新的类，类里改变背景颜色
当鼠标离开时，改变类名为空，代码如下

  var ele = document.querySelector('tbody').querySelectorAll('tr');
        for(var i = 0; i <= ele.length ; i ++) {
            ele[i].onmouseover = function() {
                this.className = 'bg';
            }
            ele[i].onmouseout = function(){
                this.set
            }
        }

在jq中可以选择移除添加的类

  移除一个class：

$(".default").removeClass("default ");
`

5.     获取标签的所有class
   

var classname_module = $(".lv").attr("class");

全选与反选

 // 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 ;
                }



        // 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;
        //     }
        // }

关于tab栏切换那点事

 // 获取元素
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li 设置索引号 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 
                this.className = 'current';
                // 2. 下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }

重点还是运用了排他思想和为标签设置属性方法 ，可以让上下对应显示

生成表格

    // 获取按钮注册点击事件
    var btn = document.getElementById('btn');
    var btn = document.getElementById('btn');
    btn.onclick = function () {
		var flag = true;
		// 获取文本框
		var uname = document.getElementById('uname');
		var email = document.getElementById('email');
		if(uname.value == '' || email.value == ''){
			alert('请将数据填入完全')
		    return;
		}
	    // 创建一行
	    var trObj = document.createElement('tr');
	    // 把行加入到tbody中
	    var tbd = document.getElementById('tbd');
	    tbd.appendChild(trObj);
	    // 创建列，添加到行中
	    var td1 = document.createElement('td');
	    td1.innerHTML = uname.value;
	    var td2 = document.createElement('td');
	    td2.innerHTML = email.value;
	    trObj.appendChild(td1);
	    trObj.appendChild(td2);

    };