JS

最新推荐文章于 2023-12-14 09:31:24 发布

HHarvey

最新推荐文章于 2023-12-14 09:31:24 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HHarvey/article/details/89503397

JS引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第二种引入方式-->
    <script src="js.js"></script>
</head>
<body>
    <!-- 第一种引入方式，建议放在body最后一行，位置影响不大-->
    <script>
        alert(123)
    </script>
</body>
</html>

JS基础语法

var x   /* 声明变量，此时变量x已经存在了 */
        x = 12
        y = 20
        x = 15
        alert(x) /* 15，会顶掉上一个同变量名的值 */
        console.log(x)  //将x的值打印在控制台中

        var name = 'harvey',age = '18'
        MyFirstName = 'h'   //一般组合型变量名我们首字母都大写，美观

        function f() {      //定义一个f函数，函数内容是打印123
            console.log(123)
        }

        if (2>1) {          //if条件句
            console.log('2')
        }
        if(1){
             alert(111)
         }else {
             alert(222)
         }

        console.log(true + 1)//可以直接用布尔值与整型运算

        var x;
        console.log(x); //undefined，没有实际意义的变量

        //直接将文本(标签)插入到html的页面中
        function f() {
                     document.write("<h1>hello H!</h1>")
                 }
        console.log(typeof f()) //查看它的类型

        //Undefined:undefined     //Undefined这个数据类型就只有一个值就是undefined
        //null:null               //针对对象用的 var Person() =  person 实例化出的person是空的，此时的person类型就是null

强制转换对象

console.log("hello"+2); //hello2
console.log("hello"+true); //hellotrue
console.log(2+true);       //3
console.log(parseInt(6.9234454)); // 6
//NAN: not a number,属于Number的一种
console.log(parseInt("hello"));    //NAN
console.log(parseInt("123"));     //123
console.log(parseInt("123abc"));  //123
console.log(parseInt("abc1234")); //NAN

var n=NaN;
console.log(n>5) ; //f
console.log(n<5) ; //f
console.log(n==5) ;//f
console.log(n==NaN) ;//NAN只要参与比较，布尔值一定是false,除非！=
console.log(n!=NaN) ;//t

typeof :区分基本数据类型

console.log(typeof 123);      //number
console.log(typeof "hello");  //string
console.log(typeof true);     //boolean
console.log(typeof null);     //object
console.log(typeof undefined);//undefined

console.log(typeof [12,3,4]); //object
console.log(typeof {"name":"123"}); //object

运算符

++i,--i,i++,i--

var i = 10;
i++;
console.log(i)      //11
console.log(i++)    //11,先输出结果，之后再加
console.log(++i)    //13，先加后输出

逻辑运算符

与(&&),或(||),非(!)

console.log("hello" && 4)   //4
console.log(2==2);          //true
console.log("2"==2);        //true
console.log(2==="2")        //false

console.log(3>20);          //false
console.log(3>"20");        //false,z只要有一个是数字类型，其他的也会转换成数字类型进行比较
console.log("3">"28")       //true,比最高位，3>2

控制语句

--if

<script>
    var name = 'harvey'
        if (name = '翠花'){
            alert('真俗')
        }
        else if (name = 'Tyrion'){
            alert('偶像')
        }
        else {
            alert('harvey is me')
        }
</script>

--switch
在<head>中加入 <meta charset="UTF-8"> ，可解决中文乱码问题。

应对多种情况下执行不同的代码

<script>
        var week = 'Monday';
        var week = 'Wednesday';

        switch (week){
            case 'Monday' : alert('周一');break;  //每一种情况必须有break，否则将一次性运行多个alert直到break或全部运行完
            case 'Tuesday' : alert('周二');break;
            case 'Wednesday' : alert('周三');break;
            case 'Thursday' : alert('周四');break;
            case 'Friday' : alert('周五');break;
            case 'Saturday' : alert('周六');break;
            case 'Sunday' : alert('周日');break;
            default : alert('nothing');           //以上情况之外运行的代码
        }
</script>

for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello the Hound</p>
<p>hello kingslayer</p>
<p>hello snow</p>
<p>hello Tyrion</p>
    <script>
        for (var i = 0;i<10;i++){
            document.write('第' + i + '个i' + '<br>') //字符串拼接和换行符br
        }

        var attr = [111,222,333];
        //方法一：
        for (var i = 0;i < attr.length;i++){
            document.write(i);
            document.write('<br>');
            document.write(attr[i]);
            document.write('<br>');
        }
        //方法二：
        for (var i in attr){
            document.write(i);
            document.write('<br>');
            document.write(attr[i]);
            document.write('<br>');
        }
        var ppp = document.getElementsByTagName('p');   //拿出p标间中的值
        console.log(ppp);
//      不推荐用此方法拿值，会多打印三个无用数据length,item,namedItem
        for (var i in ppp){
            console.log(i)
        }
        for (var i=0;i<ppp.length;i++){
                console.log(i);
                console.log(ppp[i]);
        }

    </script>
</body>
</html>

while循环

<script>
//        while
        var sum = 0;
        var i = 1;
        while (i<=100){
            sum += i;
            i++;
        }
        console.log(sum)

//        for循环
        var sum = 0;
        for (var i = 1;i <= 100;i++){
            sum += i;
        }
        console.log(sum)
    </script>

异常处理

<script>
        try {
            console(123);
            throw Error("define error")
        }
        catch (e){                      //拿到错误详情
            console.log(e)
        }
        finally {                       //无论如何都会运行
            console.log('结束')
        }
    </script>

字符串对象

//创建字符串对象两种方式
        var str1="hello";

        var str2=new String("hello2");

        console.log(typeof str1);
        console.log(typeof str2);

        //字符串的属性
        console.log(str1.length);
        // 字符串的方法
        //编排方法
        console.log(str1.italics());  //     <i>hello</i>
        console.log(str1.bold());    //      <i>hello</i>
        console.log(str1.anchor());  //      <i>hello</i>
        //查询字符串索引
        var str="welcome to the world of JS!";

        var str2=str.indexOf("l");   //取第一个l
        var str3=str.lastIndexOf("l");//取最后一个l
        alert(str2);
        //结果为2，查看l的索引
        alert(str3);
        //结果为18

        //substr substring
        console.log(str1.substr(1,3));   //从第一个索引位置开始，取三个
        console.log(str1.substring(1,3));//左取右不取
        //切片
        console.log(str1.slice(1,4));    //ell,从第一个切到第四个
        console.log(str1.slice(-3,-1))   //ll 也可以从后面取
        
//创建方式
        var arr1=[1,"hello",[11,2],{"name":"Yuan"}];
        var arr2=new Array(3);
        var arr3=new Array(1,"world",true,[1,2,3]);

        console.log(typeof arr1);   //都是object类型
        console.log(typeof arr2);
        console.log(typeof arr3);

        var arr4=new Array(10)      //10是size，可以限制size
        console.log(arr1.length);

        //Array对象的方法
        //join()
        var arr5=[1,2,3,4,"1234"];
        var ret=arr5.join("**");    //1**2**3**4**1234
        console.log(ret);
        console.log(typeof ret)     //string
        //toString()
        var ret2=arr1.toString();
        console.log(ret2);
        console.log(typeof ret2);
        //concat()拼接
        var arr5=[1,2,3];
        var ret3=arr5.concat([5,66]); //[1, 2, 3, 5, 66]
        console.log(ret3);
        console.log(typeof ret3);     //object
        //reverse排序
        var arr6=[23,45,37,88];
        var arr6=[10,45,100,88];
        console.log(arr6.reverse());  //[88, 100, 45, 10]使列表反序
        console.log(arr6.sort()) ;    //[10, 100, 45, 88]比最高位，100比10多一位

        //自制排序，从小到大
        function f(a,b){
            if (a>b){
                return 1
            }
            else if (a<b){
                return -1
            }
            else {
                return 0
            }
        }
        console.log(arr6.sort(f2))
        //简化版
        function f2(a,b) {
            return a-b
        }
        console.log(arr6.sort(f2))

栈操作

push，pop

//push,pop
var arr = [1,2,3];
arr.push([7,8,9]);    //[1, 2, 3, [7, 8, 9]]，将其整体放入
console.log(arr.length);//4
arr.push('hello',55);  // [1, 2, 3, Array(3), "hello", 5] 用逗号隔开可以放入单个对象
console.log(arr);
console.log(arr.length);//6
console.log(arr.pop()); //55，取出值，先进后出，后进先出
console.log(arr.pop()); //hello
console.log(arr.length);//4

unshift，shift

<script>
        //shift,unshift
        var arr = [5,6,7];
        arr.unshift([98,99]);   //[[98,99],5,6,7]除了放的位置不同，其他和push一样
        arr.unshift(true,'yes');//[true,'yes',[98,99],5,6,7]从列表开始的位置放
        arr.shift();//["yes",[11,22],5,6,7]，直接拿走第一个
        console.log(arr);
        console.log(arr.length)
    </script>

函数

<script>
        //函数创建方式一
        function f(a,b){
            alert('hello');
            return a+b;     //如果没有返回值默认返回null
        }
        console.log(f(99,1));

        f2('harvey',18);    //js中将会优先运行所有函数，所以调用在函数之前也无妨
        function f2(name,age) {
            console.log('hello'+ name);
        }
        //函数的创建方式二 只是为了更好地理解函数也是一个对象，不推荐使用
        var obj=new Function("name","console.log(\"hello\"+name)")
        //var 函数名=new Function('参数','函数内容')
        obj("武大");
        console.log(obj.length)

        // 函数的调用
        function add(x,y,z) {
            return x+y+z
        }
        console.log(add(1,2,3,4,5,6));      //多余的会剩下，只拿前三个
        console.log(add(1,2));              //NaN
        console.log(add("hello","world"));  //helloworldundefined
    </script>

面试题

//面试题
function f(x,y){
    return x+y;
        }
//如果再重新定义f
var f = 1;
var b = 2;
//下面的调用能否执行呢？
f(f,b)      //肯定不能啊，f函数已经被f=1覆盖了，1(1,b),怎么执行？

arguments

function f() {
          console.log(arguments)
      }
        f(1,2,45,6,7,78);   //可以获取所有参数

        //可以通过它计算所有参数的累加和
        function add() {
            var sum = 0;
            for (var i = 1;i < arguments.length;i++){
                sum += arguments[i]
            }
            return sum   //注意要放在for循环之外，这是函数的返回值
        }
        console.log(add(1,2,6,9))

匿名函数

        //匿名函数
        //不会被优先运行的函数，调用放在函数内容之前将不会运行
        var func = function (arg) {
            alert(arg)
        };
        func('hello');
        //也可以这样定义
        (function(arg){
            alert(arg)
            })("harvey")

DOM节点

setInterval(func,1000)，clearInterval()，func函数隔一段周期（单位为毫秒）运行一次，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="text1" onclick="Begin()">  <!-- 建立一个输入框，点击即运行begin函数-->
<button onclick="end()">停止</button>             <!-- 建立一个按钮，点击即运行end函数-->
    <script>
        function ShowTime() {
            var current_time = new Date().toLocaleString(); //获取时间并字符串形式
            var box = document.getElementById('text1');      //用document方式通过id拿到标签
            box.value = current_time;                        //将当时的时间当作标签的value，就可以在输入框显示了
        }

        //如果重复点击输入框将会生成多个clock1,关闭只能关闭有值的那个clock1，其他的多余的无值clock1仍会运行，无法关闭
        //所以当点击第一次时，clock1的值应该是undefined，空值，之后Begin的触发clock1已经有值，都不会再生成clock1，而是空操作了
        var clock1;
        function Begin() {
            if (clock1 == undefined){
                ShowTime();
                clock1 = setInterval(ShowTime,1000);
            }
        }
        function end() {
            clearInterval(clock1);
            clock1 = undefined;     //彻底清除这个定时器
        }
    </script>
</body>
</html>

setTimeout(f,1000),1秒之后调用函数，clearTimeout(),取消定时启动函数的setTimeout方法

<script>
    function f() {
        console.log("hello...")
    }
    var c = setTimeout(f,1000);
    clearTimeout(c)
</script>

window是对象方法

<script>
        //alert 只是因为window是全局变量，所以省略也可以调用
        window.alert('hello')

        //confirm 弹窗中有确定和取消两个选项，点击其中一个可以执行不同的代码
        var ret1 = window.confirm('hello,harvey');
        console.log(ret1);

        //prompt 弹窗中有文本框，根据输入内容可做不同的操作
        var ret2 = window.prompt('hello,harvey');
        console.log(ret2);

        //在新标签中打开特定网页
        open("http://www.baidu.com")
    </script>

history

<body>
<!--2.html文件中有我们写好的back方法，在forward页面下进入2文件，2文件中的后退按钮可以回到forward页面中，
同样只要有了浏览历史，我们在forward页面中不用超链接，通过前进按钮也可以回到back页面了-->
<a href="2.html">2</a>
<button onclick="history.forward()">前进</button>
<!--通过go也可以实现前进后退-->
<button onclick="history.go(1)">>>>>> </button>
</body>

<body>
<button onclick="history.back()">后退</button>
<button onclick="history.go(-1)">back</button>
</body>

作用域

<script>
//    if(1){
//        var x=10;
//    }
//    console.log(x);
//
//    function f() {
//        var y=12;
//    }
//
//    console.log(y)


//    var city = 'beijing';
//
//    function func(){
//        var city = 'shanghai';

//        function inner(){
//            var city = 'shenzhen';
//            console.log(city);
//        }
//        inner();
//    }
//    func();


var city = 'beijing';

function Bar(){
    console.log(city);
}
function func(){

    var city = 'shanghai';
    return Bar;
}
var ret = func();

ret();

</script>

location

<body>
<button onclick="f()">click</button>

<script>
    function f() {
        location.reload()                         //刷新页面
        location.assign("http://www.baidu.com")   //跳转至某页面，是可以后退的
        location.replace("http://www.baidu.com")  //某页面将覆盖当前页面，不可后退
    }

</script>
</body>

DOM属性

<body>
<div class="div1">
    <p name="littleP" class="p1">hello p</p>
    <div class="div2">hello div
        <div>div3</div>
        <a href="">click</a>
    </div>
    <span>span</span>
</div>
<script>
    //var ele0 = document.getElementById()
    var ele1 = document.getElementsByClassName('p1')[0]; //如果有多个class=p1，可以通过索引拿某一个的文本内容
    console.log(ele1);//hello p
    //节点的属性
    //    console.log(ele1.nodeName); p
    //    console.log(ele1.nodeType); 1
    //    console.log(ele1.nodeValue);null
    console.log(ele1.innerHTML);    //只需记住这个，获取中间的文本
    ele1.innerHTML="hello world"    //可以重新赋值
    //取父级标签名
    //var p_ele = ele1.parentNode;
    //console.log(p_ele.nodeName) //DIV

    //取同胞的标签名
    var b_ele = ele1.nextSibling;
    console.log(b_ele.nodeName);  //#text，如果同胞不在同一行内，将会取到中间空的部分(回车后的空白)
    //所以通过node方法无法达到效果，但是可以限定只拿对象
    var b_ele2 = ele1.nextElementSibling;//这样就会跳过空白部分
    console.log(b_ele2.nodeName);

    //取子标签名
    var ele3=document.getElementsByClassName("div1")[0];//拿到一个class=div1
    console.log(ele3.children[1].children)  //[div, a] 拿div1的第二个子标签里的全部子标签

    //练习
    var ele4=document.getElementsByName("littleP")[0]; //拿到第一个id=littleP的标签
    var ele5=ele4.nextElementSibling;   //拿到该标签的兄弟标签
    console.log(ele5.innerHTML);        //<div>div3</div>,<a href="">click</a> 全家一个不剩全拿来
    console.log(ele5.innerText);        //hello div,div3,click，只拿标签内容，不拿其他的

    //局部查找
    //由于id是唯一的，所以并不会重复，并不支持在局部内通过id查找，多此一举，另外name也是不支持的
    var ele6=document.getElementsByClassName("div1")[0];
    var ele7=ele6.getElementsByTagName("span");
    console.log(ele7[0].innerHTML)

</script>
</body>

焦点

<body>
<input type="text" id="search" value="请输入用户名" onfocus="f1" onblur="f2">

<script>
    var ele = document.getElementById('search');
    function f1() {
        if (ele.value == '请输入用户名'){       //如果获取焦点时value是默认的，那么将删除默认，将输入框清空
            ele.value = '';
        }
    }
    function f2() {
        if (!ele.value.trim())
        ele.value = '请输入用户名'; //如果用户输入一半取消焦点额那不应该将其更换为默认值，此处的trim相当于
    }                              //strip,去除空格，判断如果去掉空格之后还为空，那说明输入的只是空格，失去焦点将重回默认值
</script>

</body>

onload,当页面加载完成后才会执行的函数

<body onload='f()'>
<div class="div1">hello div</div>

<script>

    function f() {
        var ele=document.getElementsByClassName("div1")[0];
        console.log(ele.innerHTML);
    }

</script>

</body>

事件绑定

第一种(拿标签对象)

<body>
<div class="v1">
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <p id="p1">pppppp</p>
</div>

<script>
    //用此方法可以做到html和js代码完全分离，建议使用
    var ele = document.getElementById("p1");
    ele.onclick=function () {
        alert(123)
    };

    //js不会自己做便利
    var ele2 = document.getElementsByClassName('v2');
    for (var i = 0;i < ele2.length;i++) {
        ele2[i].onclick = function () {
            alert(666)
        }
    }

</script>

</body>

第二种(this参数)

<body>
<div class="v1">
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <div class="v2">dddd</div>
    <p id="p1" onclick="func(this)">pppppp</p>
</div>
<script>
    //标签中的func有参数后，定义的func也得有参数，而有this参数的标签，就可以可以拿到这个标签对象
    function func(self) {
        console.log(self)
        alert(1234)
    }
</script>
</body>

onsubmit

<body>
<form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

<script>
    var ele = document.getElementById('form1');
    ele.onsubmit = function (e) {
        console.log('hello');//点击提交后将会先弹框，后提交表单，弹框属于前端操作
        alert(666);          //用这一特性，我们可以在前端做简单的格式限定，对于格式乱填的用户也就省下提交后端的步骤了
        //return False 假设上面有一段判断逻辑，当输入内容不符合我们的第一道门槛时，用此方法阻止发送表单到后端。
        //阻止后一般会接个弹窗说明，例如‘您输入的格式有误’

        //第二种阻止方式，将会阻止onsubmit默认会发生的事件。此处的默认发生事件就是上传表单
        //e.preventDefault()
    }

</script>

</body>

阻止事件传播

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="outer" onclick="func()">
    <div class="inner"></div>
</div>
<script>
    //当标签嵌套时，子标签的绑定触发可能会导致父标签的绑定事件也会触发
    //此处的onclick事件要如何只触发inner的不触发outer的呢？
    var ele = document.getElementsByClassName('inner')[0];
    ele.onclick = function (e) {
        alert('I am inner');
        //阻止事件传播，要加在子标签中，相当于把自己的门窗全关好，不让爸爸知道自己在干什么不可描述的事情
        // e.stopPropagation()
    };
    function func(e) {
        alert('I am outer');
    }
</script>

</body>
</html>

DOM节点增删改查

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1,.div2,.div3,.div4{
            width: 300px;
            height: 100px;
        }
        .div1{
            background-color: green;
        }
        .div2{
            background-color: yellow;
        }
        .div3{
            background-color: rebeccapurple;
        }
        .div4{
            background-color: deeppink;
        }
    </style>
</head>

<body>
<div class="div1">
    <button onclick="add()">add</button>
    hello div1
</div>
<div class="div2">
    <button onclick="del()">del</button>
    <p>不要删我呀</p>
    hello div2
</div>
<div class="div3">
    <button onclick="change()">change</button>
    <p>hello div3</p>
</div>
<div class="div4">hello div4</div>

<script>
    //增
    function add(){
        var ele = document.createElement('p');  //增加一个标签<p></p>
        ele.innerHTML = '<h1>hello p</h1>';     //标签的内容是h1格式的hello p
        //ele.innerText = '<h1>hello p</h1>';   //标签内容是<h1>hello p</h1>
        ele.style.color = 'red';
        ele.style.fontSize="10px";
        var father_ele = document.getElementsByClassName('div1')[0]; //必须通过找到父标签后添加
        father_ele.appendChild(ele)
    }
    //删
    function del() {
        var father_ele = document.getElementsByClassName('div2')[0];//同样必须先找到父标签
        var son_ele = document.getElementsByTagName('p')[0];//然后找到要删除的标签
        father_ele.removeChild(son_ele)
    }
    //改
    function change() {
        var img_ele = document.createElement('img'); //建立一个img标签<img src=''>
        img_ele.src = 'timg.jpg';   //为img标签添加路径
        //img.setAttribute("src","GTAV.jpg"),其实js标准格式是这样，优化后才有上面的格式
        var ele = document.getElementsByTagName("p")[1];//找到原标签
        var father_ele = document.getElementsByClassName('div3')[0];//同样拿到父标签
        father_ele.replaceChild(img_ele, ele);    //将前者代替后者
    }
</script>
</body>

class属性

body>
<div class="div1 div2">div1</div>
<script>
    var ele=document.getElementsByTagName("div")[0];

    console.log(ele.className);     //div1 div2
    console.log(ele.classList[0]);  //div1
    console.log(ele.classList[1]);  //div2
    ele.classList.add("hide");
    console.log(ele.className);     //div1 div2 hide
</script>
</body>

classList之模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .content{
            height: 1800px;
            background-color: white;
        }
        /*阴影部分，沾满全屏，不跟随滚轮滑动，透明度0.7*/
        .shade{
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: gray;
            opacity: 0.7;
        }
        /*top和left居中的是这个盒子的左上角的点居中，利用margin让整个盒子居中*/
        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;

        }
        /*class有hide的标签都隐藏不显示*/
        .hide{
            display: none;
        }
    </style>
</head>

<body>
<div class="content">
    <button onclick="show()">show</button>
    hellohellohellohellohellohellohellohellohellohellohellohello
</div>

<div class="shade hide"></div>

<div class="model hide">
    <button onclick="cancel()">cancel</button>
</div>

<script>
    function show(){
        var ele_shade = document.getElementsByClassName('shade')[0];
        var ele_model = document.getElementsByClassName('model')[0];
        //点击show之后原本隐藏的标签从class列表中删除hide，取消隐藏
        ele_shade.classList.remove('hide');
        ele_model.classList.remove('hide');
    }
    function cancel(){
        var ele_shade = document.getElementsByClassName('shade')[0];
        var ele_model = document.getElementsByClassName('model')[0];
        //点击cancle之后原本显示的标签在class列表中添加hide，隐藏
        ele_shade.classList.add('hide');
        ele_model.classList.add('hide');
    }
</script>

</body>
</html>

正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>

<table border="1px">
    <tr>
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>44</td>
        <td>55</td>
        <td>66</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>777</td>
        <td>888</td>
        <td>999</td>
    </tr>
</table>

<body>
<script>
    function selectAll() {
        var ele = document.getElementsByTagName('input'); //通过标签拿到的是一个类似数组的结构
        for (var i = 0;i < ele.length;i++){
            var input = ele[i];     //拿到这个数组中的每一个对象
            input.checked = true;   //让每一个对象都被选中
        }
    }
    function cancel(){
        var ele = document.getElementsByTagName('input');
        for (var i = 0;i < ele.length;i++){
            var input = ele[i];
            input.checked = false;
        }
    }
    function reverse(){
        var ele = document.getElementsByTagName('input');
        for (var i = 0;i < ele.length;i++){
            var input = ele[i];
            input.checked = !input.checked;     //拿到的每一个将其选中状态取反
//          或者做判断取反
//          if(input.checked){
//                input.checked=false
//            }else {
//                input.checked=true
//            }
            }
    }
</script>
</body>
</html>

二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<select id="province">
    <option value="">请选择省份</option>     <!--后面的内容动态添加-->
</select>
<select id="cities">
    <option value="">请选择城市</option>
</select>

<script>
    data = {"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","宝鸡"]};
    var p_ele = document.getElementById('province');
    var c_ele = document.getElementById('cities');
    //拿到父标签对象后，我们需要给这两个对象添加option标签，option标签就是data中的键
    for (var i in data) {
        var ele = document.createElement('option'); //首先遍历，遍历出的每一个都应当创建一个option
        ele.innerHTML = i;  //将每一个遍历出的对象赋值给option当内容
        p_ele.appendChild(ele); //现在的ele已经是有内容的option标签了，添加到父标签中
    }

    //动态添加就是用户选哪个省，哪个省对应的城市才会添加到cities中，所以我们需要知道用户的选择
    p_ele.onchange = function () {
        console.log(this.selectedIndex); //选河北为1，山西2，陕西3，0为'请选择城市'
        console.log(this.options[this.selectedIndex]);
        //this.selectedIndex;         //this就是绑定onchange的标签 select,此处可以获得被选中的option的索引
        //this.options[this.selectedIndex]; //这样我们就通过索引拿到了具体的省份
        var city = data[this.options[this.selectedIndex].innerHTML]; //data[河北]
        c_ele.options.length=1;  //解决bug，二次选省份上次省份的城市不清除
        // 此处length=0为清空，length=1为显示'请选择城市'

        //拿到省份对应的城市后，是这一个类似数组的形式，需要遍历每一个城市
        for (var i = 0;i < city.length;i++) {
            var ele = document.createElement('option');//每一个遍历出的对象都要有一个option
            ele.innerHTML = city[i]; //将每一个遍历出的对象赋值给option当内容
            c_ele.appendChild(ele);  //现在的ele已经是有内容的option标签了，添加到父标签中
        }
    }
</script>
</body>
</html>