JavaScript基础 一

javascript组成

/*
javascript组成:
    ECMAScript(当前学习版本6) 规定了JS的基本语法
    BOM (浏览器对象模型)
    DOM (文档对象模型)
*/    
/*
javascript常用场景:
    行为交互
    数据交互
    逻辑交互
*/
/*
javaScript的学习阶段
    基础语法结构
    页面元素操作
    深入学习---数据交互、组件实现、框架使用等
*/

特效交互的原理

特效交互：用js改变 我们的样式 或者 html结构 1. 写出结构 2. 找到需要修改的样式 3. 先手动模拟一下JS的操作 1) 排除布局问题 2) 大概形成思路 4. 写js btn2 点击: 找到box 给box 设置样式 display： none;

<button id="btn1" onclick="document.getElementById('box').style.display='block'">显示</button>
<button id="btn2" onclick="document.getElementById('box').style.display='none'">隐藏</button>
<div id="box"></div>

/* 获取元素 */
document.getElementById("btn1");
/*
document.getElementById("idName");    
在文档中通过id来获取元素
document 文档
get 获取
Element 元素
By 通过
Id
console.log(); //在控制台输出信息
事件：与文档元素或浏览器发生的一些特定的交互瞬间，
会产生事件事件由系统事先设定的、
能被对象识别和响应的动作，如果click,mouseover...
可以绑定一个事件处理函数，当事件发生时，执行相对应的代码
onclick 点击事件(当用户点击这个元素的时候，我们要做的一些事情)
*/    

函数

function fn(){
 alert(1);
}    
fn();
fn();
document.getElementById("btn1").onclick = fn;
/*
   function 函数名(){
      执行代码
   }    
   函数名(); 正常调用函数
   元素.onclick = 函数名; 在事件中调用函数 
*/
document.getElementById("btn1").onclick = function(){
   document.getElementById("box").style.display = "block";
};

变量

/*
   变量:用来储任意类型的数据
   变量声明: var 变量名字;
   变量赋值: 变量名字 = 变量的值 
   变量使用：变量名字
   注意： 使用变量前要先声明，否则程序会报错
*/
// var a;
// a = 1;
var a = 10;
a = 100;
alert(a);
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var box = document.getElementById("box");
/*
    函数：
        匿名函数
        有名字函数
    命名:
        由数字、字母、下划线和美元符($)组成
        首字符不能使数字 
        不能使用JS的关键字和保留字
*/
btn1.onclick = function(){
    box.style.display = "block";
};
btn2.onclick = function(){
    box.style.display = "none";
};
btn3.onclick = function(){
    box.style.width = "200px";
    box.style.height = "200px";
};

命名

var miaovIndex = 1;
var MiaovIndex = 2;
console.log(miaovIndex,MiaovIndex);
/*
    函数：
        匿名函数
        有名字函数
    命名:
        由数字、字母、下划线和美元符($)组成
        首字符不能使数字 
        不能使用JS的关键字和保留字
    关键字：js语法中正在使用的单词
    保留字：将来可能在语法中使用的单词
    大驼峰 --- 多个单词组合，从第一单词开始首字母大写
    小驼峰 --- 多个单词组合，从第二单词开始首字母大写
*/

元素获取

<div id="box"></div>

var box = document.querySelector('.box');
console.log(box);
/*
    document.querySelector('css 选择器'); 
    根据一个 css 选择器 来获取元素
    注意事项：
    1) 当选择器匹配多个元素时，只能找到第一个
    2) querySelector 是 h5 中 新增的方法，不支持IE8及以下
*/

属性操作

<div id="box" class="box">box1</div>

var box = document.querySelector('.box');
console.log(box.id);
box.id = "box2";
/*
    属性的读操作
        el.属性名

    属性的写操作
        el.属性名 = val    
*/    

属性操作注意事项

//1.
box.style.background = "blue";//样式的设置
//操作 style 属性，操作是元素的行间样式
//2.
console.log(box.className);
//在 js 中 元素的class 不叫 class 叫 className
//3.
console.log(box.innerHTML);
//el.innerHTML 元素从 开始标签到结束标签之间的内容 

数字和字符串

var a = "1";
var b = "2";
console.log(a + b);
/*
在 js 中，放在一对引号之间的 0 到多个字符叫做字符串
+ 碰倒字符串的话，会进行字符串连接
*/

+=

var a = 1;
//a = a + 2;
a += 2; //自身再加2
console.log(a);

函数表达式

var a = function(){
    alert("a");
};
a();    

CssText

<div id="box"></div>
<input type="button" id="btnBg" value="background">
<input type="button" id="reset" value="重置">

var btnBg = document.querySelector('#btnBg');
var reset = document.querySelector('#reset');
btnBg.onclick = function(){
   box.style.background = "blue";
};
reset.onclick = function(){
    //box.style.cssText += "width:200px";
    /*
        box.style.cssText = "width:200px";
        直接设置cssText 会把之前行间的所有样式都覆盖掉
    */
    //console.log(box.style.cssText);
    box.style.cssText = "";
};

属性操作的第二种写法

<select id="select">
    <option>width</option>
    <option>height</option>
    <option>background</option>
</select>
<input type="text" value="300px" id="val">
<input type="button" value="设置" id="setBtn">
<div id="box"></div>

var box = document.getElementById('box');
var select = document.querySelector('#select');
var val = document.querySelector('#val');
var setBtn = document.querySelector('#setBtn');
setBtn.onclick = function(){
    var attr = select.value;
    var value = val.value;
    //box.style.attr = value;
    box.style[attr] = value;
    /*
        使用 . 操作属性时，属性名不能用变量
        如果 属性名 是一个变量调用 请用 第二种写法 []
        [] 属性操作第二种写法，在[] 接收是个字符串
    */
    /*
    加法运算
    如果两边都为数字，做加法运算
        字符串拼接
    如果有一边为字符串，会把另一边转成字符串，做字符串拼接
    */
};

ClassList

<div id="box" class="box2 box3 box4"></div>

var box = document.querySelector('#box');
console.log(box.classList[2]);
//length 个数下标第几个: js 中从0开始计数

box.classList.add("box5","box6")
//向元素中添加class，每个class之间以, 号隔开

box.classList.remove("box2")
//删除元素中的某个class

box.onclick = function(){
   box.classList.toggle("box5");
};
/*
   toggle: 
   如果是一个已有的 class 就删除
   如果是新的class 就添加
*/

box.onclick = function(){
    console.log(box.classList.contains("box2"));
};
/*
contains 判断是否有这个class, 
当元素中有这个class 就返回true，
否则返回false
布尔值：true(真，正确),false(假，错误)    
*/

模拟复选框

#box {
    margin: 100px auto; 
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    padding: 4px;
    background-clip: content-box;
}
.checked {
    background: #000;
}

<div id="box" class="checked"></div>

var box = document.querySelector('#box');
box.onclick = function(){
    box.classList.toggle("checked")
};

if语句

/*
if(布尔值，判断条件的执行结果){
    true 的时候执行里边的代码
}    

*/    
// if(false){
//     console.log(1);
// }

/*
if(布尔值，判断条件的执行结果){
    true 的时候执行里边的代码
} else {
    false 的时候执行里边的代码 
}    
*/

if(true){
    console.log(1);
} else {
    console.log(2);
}

比较运算符

/*
    常用比较运算符:
    > 大于，< 小于, == 等于
    >= 大于等于，<= 小于等于
    比较运算符的运算结果 是 我们的 布尔值 true 或者 false
*/    
var a = 1;
var b = 2;
console.log(a > b);

案例-图片切换

<img src="img/img01.jpg" class="show">

var img = document.querySelector('img');
var isFirst = true;// 里边 isFirst 记录当前显示的是哪一张，如果true代表显示第1张，false 代表显示第2张
img.onclick = function(){
    if(isFirst){
        // 如果为true 代表显示的第1张
        img.src = "img/img02.jpg";
        // 已经显示了 第二张，把 isFirst 改成 false 
        isFirst = false;
    } else {
        // false 代表显示第2张
        img.src = "img/img01.jpg";    
        // 已经显示了 第1张，把 isFirst 改成 true 
        isFirst = true;    
    }
};
/*
    自定义判断条件(开关)
    没有特别的合适判读条我们可以人为去添加一些条件
*/

数字加减

<input type="button" value="+" id="next">
<input type="button" value="-" id="prev">

var next = document.querySelector('#next');
var prev = document.querySelector('#prev');
var nub = 0;
// next 点击的时候 nub + 1;
// prev 点击的时候 nub - 1;
/*
    当 nub > 5 就 停止自增 
    当 nub < 0 就 停止自减
*/
next.onclick = function(){
    //nub = nub + 1;
    nub++;//自增 在自身的基础上 +1;
    if(nub > 5){
        nub = 5;
    }
    console.log(nub);
};
prev.onclick = function(){
    //nub = nub - 1;
    nub--;//自减 在自身的基础上 -1;
    if(nub < 0){
        nub = 0;
    }
    console.log(nub);
};

数组

var arr = [
    "img/img01.jpg",
    "img/img02.jpg",
    "img/img03.jpg",
    "img/img04.jpg"
];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);    
/*
    length
    下标
    length - 1;
*/
console.log(arr[arr.length-1]);

多张图片切换-数组版

<div id="wrap">
    <input type="button" value="prev" id="prev">
    <input type="button" value="next" id="next">
    <p id="page">0/0</p>
    <img src="img/img01.jpg">    
</div>

var next = document.querySelector('#next');
var prev = document.querySelector('#prev');
var img = document.querySelector('img');
var page = document.querySelector('#page');
var nub = 0;
var arr = [
    "img/img01.jpg",
    "img/img02.jpg",
    "img/img03.jpg",
    "img/img04.jpg"
];
page.innerHTML = (nub+1)+"/"+arr.length;
/*
0 - 2
获取数组的最后一位
*/
var toNext = function(){
    nub++;
    if(nub > arr.length - 1){
        // 走过了最后一张，我们需要让他回到 0 张
        nub = 0;
    }
    img.src = arr[nub];
    page.innerHTML = (nub+1)+"/"+arr.length;
};
next.onclick = toNext;
prev.onclick = function(){
    nub--;
    if(nub < 0){
        //走过了第一张，我们需要让他回到 最后一张
        nub = arr.length - 1;
    }
    img.src = arr[nub];
    page.innerHTML = (nub+1)+"/"+arr.length;
};

元素获取更多

// 在头部获取元素，由于代码还没有解析到下边的结构所以，找不到元素
// var box = document.getElementById("box");
// alert(box);
// console.log(box);
// null 空(空对象，找不到对象)
/*
    window 是JS中的顶层对象
    onload 加载完成
    window.onload 页面上所有的资源加载完成之后，执行
*/
window.onload = function(){
    var box = document.getElementById("box");
    alert(box);
    console.log(box);
};    
var box = document.querySelectorAll('.box');

box[0].onclick = function(){
    alert(1);
};
box[1].onclick = function(){
    alert(1);
};
/*
    parent.querySelectorAll('css选择器');
    通过 css 选择器获取一组元素（类数组）

    parent.getElementsByTagName('标签名');
    通过 标签获取一组元素（类数组）

    parent.getElementsByClassName('类名');
    通过 class 获取一组元素（类数组）

    一组元素在js中，不能直接操作哪怕，这组元素只有一个

    操作一组元素的时候，需要使用使用下标，每次操作一个

    如果我们想要批量操作一组元素的时候，需要使用 循环

*/

Parent

<div id="wrap">
    <ul class="list">
        <li>
            <button>1</button>
        </li>
        <li>
            <button>2</button>
        </li>
        <li>
            <button>3</button>
        </li>
        <li>
            <button>4</button>
        </li>
    </ul>
</div>    

/*
    document.getElementById("id名字")
    parent.querySelector("css 选择器");
    parent.querySelectorAll("css 选择器");
    parent.getElementsByTagName("标签名字")
    parent.getElementsByClassName("class名字")
*/
var wrap = document.getElementById('wrap');
var list = wrap.querySelector('.list');
var lis = list.getElementsByTagName("li");
var btns = list.querySelectorAll('button');    
console.log(wrap,list,lis,btns);

//合法的CSS选择器
var wrap = document.getElementById('wrap');
var list = wrap.querySelectorAll('.list li:nth-of-type(2n)');
console.log(list);

循环

<div id="wrap">
    <ul class="list">
        <li>
            <button>1</button>
        </li>
        <li>
            <button>2</button>
        </li>
        <li>
            <button>3</button>
        </li>
        <li>
            <button>4</button>
        </li>
    </ul>
</div>    

var wrap = document.getElementById('wrap');
var btns = wrap.querySelectorAll('button');    
/*
    在js不能直接操作一组元素，
    如果我们想要批量操作一组元素，请使用循环
*/
// btns[0].onclick = function(){
//     console.log(1);
// };
// btns[1].onclick = function(){
//     console.log(1);
// };
// btns[2].onclick = function(){
//     console.log(1);
// };
// btns[3].onclick = function(){
//     console.log(1);
// };

for(var i = 0; i < 4; i++){

    btns[i].onclick = function(){
        console.log(1);
    }
}

/*
    1. 给 btns 这些按钮统一添加一个点击事件
    2. 点击之后，弹出自己的value
*/

循环语句的执行流程

// 1. 初始值
// 2. 判断条件 
// 3. 执行语句
// 4. 自增
/*
for (初始值; 判断条件;自增) {
    执行语句
}
*/

/*
    for循环过程
    1. 初始化变量
    2. 条件判断
    3. 成立，执行循环体
    4. 循环体执行完，条件变化
    5. 进行2、3、4、2、3、4步骤
    直到条件判断不成立，for循环停止

*/

for (var i = 0; i < 4;i++) {
    console.log(i);
}    

// for (var i = 1; i < 5;i += 2) {
//     console.log(i);//1 3
// }    
for(var i = 1; i <= 7; i += 3){
    // 1 4 7
}
// 10
console.log(i);

通过for循环生成元素

#box {
    width: 500px;
    border: 1px solid #000;
    overflow: hidden;
}    
#box div {
    float: left;
    width: 98px;
    height: 98px;
    border: 1px solid #fff;
}

<div id="box"></div>

window.onload = function(){
    var box = document.getElementById("box");
    var inner = "";
    for(var i = 0; i < 10; i++){
        if(i < 5){
            inner += '<div style="background:red;">'+i+'</div>';
        } else {
            inner += '<div style="background:yellow;">'+i+'</div>';    
        }
    }
    box.innerHTML = inner;
    // 操作完innerHTML 之后，再去获取元素
    var divs = box.querySelectorAll('div');
    for(var i = 0; i < divs.length; i++){
        // 循环是在页面加载完之后执行的
        divs[i].onclick = function(){
            /* 
            点击事件中的代码是在 用户点击之后才会执行，
            这会外边的循环已经执行完了，所以在这里使用
            外边循环中 i，只能拿到循环之后结果    
            */
            alert(i);
        }
    }
};    

this

window.onload = function(){
    var box = document.getElementById("box");
    var inner = "";
    for(var i = 0; i < 10; i++){
        if(i < 5){
            inner += '<div style="background:red;">'+i+'</div>';
        } else {
            inner += '<div style="background:yellow;">'+i+'</div>';    
        }
    }
    box.innerHTML = inner;
    var divs = box.querySelectorAll('div');
    for(var i = 0; i < divs.length; i++){
        divs[i].onclick = function(){
            console.log(this.innerHTML);
            /*
                在事件函数中，需要拿到当前的事件发生在
                哪个元素 我们就需要用 this

                this 在事件函数中，代表的是调用这个事件的元素
            */
        }
    }
};    

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = sayThis;// 事件调用中，this指向当前事件发生的元素
    function sayThis(){
        console.log(this);
    }
    sayThis();//非事件调用 this 指向 window
};    

选项卡头部&单选模拟

.nav {
    width: 300px;
    height: 30px;
    border: 1px solid #000;
}
.nav a {
    float: left;
    width: 98px;
    font: 14px/28px "宋体"; 
    text-align: center;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}
.nav .active {
    color: #fff;
    background: #000;
}

<nav class="nav">
    <a href="javascript:;" class="active">选项一</a>
    <a href="javascript:;">选项二</a>
    <a href="javascript:;">选项三</a>
</nav>    

var nav = document.querySelector('.nav');
var navs = nav.querySelectorAll('a');
for(var i = 0; i < navs.length; i++){
    navs[i].onclick = fn;
}
function fn(){
    // 点击的时候 先清除所有
    for(var i = 0; i < navs.length; i++){
        navs[i].classList.remove("active");
    }
    this.classList.add("active");
}

一组多选模拟器

.nav {
    width: 300px;
    height: 30px;
    border: 1px solid #000;
}
.nav a {
    float: left;
    width: 98px;
    font: 14px/28px "宋体"; 
    text-align: center;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}
.nav .active {
    color: #fff;
    background: #000;
}

<nav class="nav">
    <a href="javascript:;">选项一</a>
    <a href="javascript:;">选项二</a>
    <a href="javascript:;">选项三</a>
</nav>    

var nav = document.querySelector('.nav');
var navs = nav.querySelectorAll('a');
for(var i = 0; i < navs.length; i++){
    navs[i].onclick = fn;
}
function fn(){
    this.classList.toggle("active");
}

选项卡

.wrap {
    margin: 50px auto;
    width: 302px;
}
.nav {
    height: 30px;
    border: 1px solid #000;
}
.nav a {
    float: left;
    width: 98px;
    font: 14px/28px "宋体"; 
    text-align: center;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}
.nav .active {
    color: #fff;
    background: #000;
}
.cons {
    border: 1px solid #fff;
}
.cons img {
    width: 100%;
    display: none;
}
.cons .show {
    display: block;
}

<div class="wrap">
    <nav class="nav">
        <a href="javascript:;" class="active">选项一</a>
        <a href="javascript:;">选项二</a>
        <a href="javascript:;">选项三</a>
    </nav>
    <div class="cons">
        <img src="img/img01.jpg" class="show">
        <img src="img/img02.jpg">
        <img src="img/img03.jpg">
    <div>
</div>    

/*
事件： onmouseover 鼠标移入 onmouseout 鼠标移出 

    1. 清除其他选中的
    2. 给当前操作的加上选中状态
    3. 鼠标移入 第 0 项 第0张img 显示，鼠标输入第1项，第1张显示..
*/

var navs = document.querySelectorAll('.nav a');
var imgs = document.querySelectorAll('.cons img');
for(var i = 0; i < navs.length; i++){
    navs[i].index = i;// 想要在事件中知道，当前操作的是哪一个
    navs[i].onmouseover = function(){
        /* 去掉所有项的选中 或显示 */
        for(var i = 0; i < navs.length; i++){
            navs[i].classList.remove("active");
            imgs[i].classList.remove("show")
        }

        /* 选中当前项 */
        this.classList.add("active");
        //console.log(this.id);
        /* 把当前项对应的内容显示出来 */
        imgs[this.index].classList.add("show");
    };
} 

自定义属性

var btn = document.querySelector('input');
btn.妙味课堂 = "大家都棒棒的";
console.log(btn.妙味课堂);
btn.onclick = function(){
    alert(this.妙味课堂);
};
/*
    内置属性：标准中已经给元素规定的属性
    自定义属性：我们自己给元素设置的标准以外的属性
*/

##百度音乐全选

.wrap {
    width: 764px;
    height: 800px;
    margin: 0 auto;
    position: relative;
    background: url(../img/bg.png) no-repeat center center;
    overflow: hidden;
}

.baidu {
    width: 480px;
    height: 300px;
    background: #fff url(../img/logo.png) no-repeat center center;
    margin: 100px auto;
    border-radius: 5px;
    box-shadow: 2px 2px 3px rgba(0,0,0,.3);
}

#list {
    width: 100%;
    background: rgba(255,255,255,.9);
    border-radius: 5px;
    padding: 19px 0;
}
#list li {
    height: 36px;
    padding: 0 30px;
    box-sizing: border-box;
    color: #000000;
}
#list li div,.select .selectAll {
    float: left;
    width: 12px;
    height: 12px;
    -border: 1px solid #cacaca;
    position: relative;
    top: 11px;
    margin-right: 20px;
    font: 14px/12px arial;
    cursor: pointer;
}
#list li span {
    height: 100%;
    font: 14px/36px "微软雅黑";
}
#list li span:nth-of-type(1) {
    float: left;
}
#list li span:nth-of-type(2) {
    float: right;
}

.select {
    width: 100%;
    height: 46px;
    background: #e15671;
    box-sizing: border-box;
    padding: 0 30px;
    font: 14px/46px "微软雅黑";
    color: #eee;
    border-radius: 0 0 5px 5px;
}

.select .selectAll {
    top: 16px;
    position: relative;
}
.select .selectAll span {
    position: absolute;
    top: 0px;
    right: -48px;
    cursor: pointer;
}
.select .selectAll:hover {
    color: #fff;
}
.select div {
    float: right;
    height: 100%;
    width: 300px;
}
.select div span {
    display: inline-block;
    height: 100%;
    margin-right: 42px;
}
.select div span:nth-child(3) {
    margin: 0;
}
.select div span em {
    display: inline-block;
    width: 24px;
    height: 20px;
    background: url(../img/1.png) no-repeat;
    margin-right: 10px;
    position: relative;
    top: 5px;
}
.select div span:nth-of-type(1) em {
    background-position: 0 0;
}
.select div span:nth-of-type(2) em {
    background-position: 0 -21px;
    height: 24px;
    top: 6px;
}
.select div span:nth-of-type(3) em {
    background-position: 0 -46px;
    height: 24px;
}

<div class="wrap">
    <div class="baidu">
        <ul id="list">
            <li>
                <div><input type="checkbox" /></div>
                <span>泡沫</span>
                <span>邓紫棋</span>
            </li>
            <li>
                <div><input type="checkbox" /></div>
                <span>说爱你</span>
                <span>蔡依林</span>
            </li>
            <li>
                <div><input type="checkbox" /></div>
                <span>稻香</span>
                <span>周杰伦</span>
            </li>
            <li>
                <div><input type="checkbox" /></div>
                <span>我的梦</span>
                <span>张靓颖</span>
            </li>
            <li>
                <div><input type="checkbox" /></div>
                <span>怎么说我不爱你</span>
                <span>萧敬腾</span>
            </li>
            <li>
                <div><input type="checkbox" /></div>
                <span>无处安放</span>
                <span>白若溪</span>
            </li>
        </ul>
        <div class="select">
            <span class="selectAll">
                <input type="checkbox" id="selectAll" />
                <span>
                全选
                </span>
            </span>
            <div class="others">
                <span><em></em>收藏</span>
                <span><em></em>添加</span>
                <span><em></em>删除</span>
            </div>
        </div>
    </div>
</div>

/*
    1. 隔行变色 %
    2. 绑定鼠标移入事件处理
        移入的元素background为yellow
    3. 绑定鼠标移出事件处理
        如果 当下的input被选中
            依然保持background为yellow
        否则
            还原之前移动隔行变色的颜色
    4. 点击全选
        如果 全选选中
            所有的button都被选中，并且background为yellow
        否则
            所有的button都不被选中，并且background为还原回隔行变色的颜色
    5. 点击单选
        利用计数的方式，如果每一个checkbox都选中，则加一
        如果 计的总数和checkbox总数相同
            全选选中
        否则
            全选不选中
*/

// 1.获取元素
var lis = document.querySelectorAll('#list li');
var checkboxs = document.querySelectorAll('#list input');
var n = 0;
var len = lis.length;
for( var i = 0; i < len; i++ ){
    // 2. 隔行变色
    lis[i].style.background = i % 2 == 0 ? '#fff' : 'red';

    // 5记录下标
    lis[i].index = i;

    // 3. 鼠标移入 背景颜色为 yellow
    lis[i].onmouseover = function(){
        this.style.background = 'yellow';
    }
    // 4. 移开 回到之前隔行变色的背景颜色
    lis[i].onmouseout = function(){

        // 5. 移开的时候，判断一下li中的checkbox是否是选中状态
        // ! 取反的意思
        if(!checkboxs[this.index].checked){
            this.style.background = this.index % 2 == 0 ? '#fff' : 'red';
        }
    }

    // 7. 单选 是否都选中 计数的方式 只要选中一个+1
    // 计数总数 和 len 比较 如果相同 都选中 如果不相同 没全选中
    checkboxs[i].onclick = function (){
        n = 0; // 重置一下
        // var n = 0;
        for( var i = 0; i < len; i++ ){
            if(checkboxs[i].checked){  // 如果checkbox选中
                n++;
            }        
        }

        if( n == len ){
            selectAll.checked = true;
        }else{
            selectAll.checked = false;
        }

    }

}



// 6全选 
var selectAll = document.querySelector("#selectAll");

selectAll.onclick = function (){
    for( var j = 0; j < len; j++ ){
        checkboxs[j].checked = this.checked;

        if(this.checked){  // 全选
            lis[j].style.background = 'yellow';
        }else{
            lis[j].style.background = j % 2 == 0 ? '#fff' : 'red';
        }
    }
}