javascript里的对象

一、ECMA对象
instanceof方法

<script>
    var s="hello";
    // typeof 只能判断基本数据类型;
    alert(typeof (s));//string

    var s2=new String("hello");
    alert(typeof(s2));//object
    alert(s2 instanceof String);//instanceof可以判断实例对象是不是string true

    var n=new Number(2);
    alert(typeof(n));//object
    alert( n instanceof String);//false
</script>

1.String对象

<script>
    // 创建方式一
    var s="HellO";
    // 创建方式二
    var s=new String("HellO");
    //String对象的属性 length
    alert(s.length);//5

    //遍历字符串：
    for (var i in s){console.log(s[i])};//i表示索引

    //String方法
    //编排方法：
    document.write(s.italics());//斜体
    document.write(s.bold());//加粗
    document.write(s.anchor("zxy"));//a标签 name=zxy 锚

    //大小写转换：
    console.log(s.toUpperCase());//全大写
    console.log(s.toLowerCase());//全小写

    //获取指定字符：
    console.log(s.charAt(3));//从0开始 索引为3的值l
    console.log(s.charCodeAt(3));//l的ascii码的值

    // 查询字符串match() search()
    console.log(s.search("e"));   //返回的第一个匹配结果的索引值
    console.log(s.match("l"));   // 返回数组["l", index: 2, input: "HellO", groups: undefined]
    console.log(s.indexOf("l"));   //取索引值
    console.log(s.lastIndexOf("l"));

    // replace concat split
    console.log(s.replace("e","E"));//E代替e
    console.log(s.split("e"));//分割
    console.log(s.concat("world"))//s后面添加world

    // 截取字符串
    console.log(s.substr(1,1));//从索引为1的位置截取一个字符
    console.log(s.substring(1,4));//从索引为1取到索引为3
    console.log(s.slice(1,-1));//从索引为1取到索引为倒数第一,不取倒数第一个
</script>

2.Array对象

<script>
    //创建方式一
    var arr=[1,2,3,6];
    //创建方式二
    var arr2=new Array(5,"hello",true,[1,3]);
    console.log(arr.length); //4
    console.log(arr2.length); //4
    console.log(arr2);

    var arr3=new Array();
    console.log(arr3);//[]

    var arr4=new Array(3); //采用初始化对象方式创建数组，如果里面只有一个值而且是一个数字，那么数字表示的是长度而不是内容
    console.log(arr4[0]); //undefined
    console.log(arr4); //[empty × 3]
    arr4[5]=10; //数组自动加长，可变长
    console.log(arr4.length) //6

    //二维数组
    alert(arr2[1][1]);//e

    //数组对象的方法
    //join方法：将数组内的字符串拼接成一个字符串,join方法的对象在js是Array
    var ret=["hello"," xixi"].join("+++++");
    alert(ret);

    //栈操作shift unshift (队尾)pop push (队头)
    //队列：先进先出  栈：先进后出
    var arr5=[1,4,6];
    arr5.push(13);
    arr5.push("hello",7);
    console.log(arr5);//[1, 4, 6, 13, "hello", 7]
    var ret=arr5.pop();//7出栈，并把7给ret
    alert(ret);

    arr5.unshift(45);
    console.log(arr5);//[45, 1, 4, 6, 13, "hello"]
    arr5.shift();
    console.log(arr5);//[1, 4, 6, 13, "hello"]

    //sort reverse
    var arr6=["3a",1,6,6,3,"3",7];
    arr6.reverse();
    console.log(arr6);//[7, "3", 3, 6, 6, 1, "3a"]
    console.log(arr6.sort());//按每个元素的ascii码比较

    var arr7=[100,1,6,5,3,8,7];
    function mysort(a,b) {
        return a-b //b-a逆序排列  a-b顺序排列
    }
    console.log(arr7.sort());//按每个元素的ascii码比较) [1, 100, 3, 5, 6, 7, 8]
    console.log(arr7.sort(mysort));//[1, 3, 5, 6, 7, 8, 100]
    console.log(arr7.concat(4,5));// [1, 3, 5, 6, 7, 8, 100, 4, 5]
</script>

3.Date对象

<script>
    //创建方式1
    var date_obj= new Date();
    alert(date_obj.toLocaleString())//当前时间 2020/9/1 下午2:18:39
    //创建方式
    var date_obj2= new Date("2020 2 20 12:20");
    alert(date_obj2.toLocaleString())//2020/2/20 下午12:20:00

    var date_obj3= new Date(5000); //5000毫秒
    alert(date_obj3.toLocaleString()) //1970/1/1 上午8:00:05
    alert(date_obj3.toUTCString()) //世界标准时间 Thu, 01 Jan 1970 00:00:05 GMT

    function getTime() {
        var date_obj= new Date();
        console.log(date_obj.toLocaleString())//2020/9/1 下午4:37:42
        console.log(date_obj.getFullYear());//年 2020
        console.log(date_obj.getMonth());//月-1 8
        console.log(date_obj.getDate());//日 1
        console.log(date_obj.getDay());//周 2
        console.log(date_obj.getHours());//时 16
        console.log(date_obj.getMinutes());//分 37
        console.log(date_obj.getSeconds());//秒 42
        console.log(date_obj.getMilliseconds());//毫秒(0-999)
        var year=date_obj.getFullYear();
        var month=date_obj.getMonth()+1;
        var day=date_obj.getDate();
        var hour=date_obj.getHours();
        var minute=date_obj.getMinutes();
        var seconds=date_obj.getSeconds();
        var week=date_obj.getDay();
        return year+"年"+month+"月"+f(day)+"日"+" "+hour+": "+minute+" :"+seconds+" "+num_week(week)
    }
    alert(getTime());

    function f(num) {
        if (num<10){
             return "0"+num;
        }
        return num;
    }
    function num_week(n) {
        week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
        return week[n]
    }

    var date_obj= new Date();
    alert(date_obj.getTimezoneOffset())//时区差 东八区 8个时区×15度×4分/度=480;
    //设置日期和时间
    var x=new Date();
	x.setFullYear (1997);	
</script>

4.RegExp对象

<script>
    //方式一
    var re_obj=new RegExp("\d+","g"); //全局通用g 不区分大小写i
    alert(re_obj.test("asdf3245lsdk")) //匹配成功返回true
    //方式二
    var re_obj2=/\d+/g;
    alert(re_obj2.test("fjaks532jksfald"));

    var s="hello545dfsg45534";
    alert(s.match(/\d+/g)); //取出所有匹配的内容放到数组里 545,45534
    alert(s.search(/\d+/g));// 取出第一个结果的索引值 5
    alert(s.split(/\d+/g));// 分割
    alert(s.replace(/\d+/g,"*"));//替换 hello*dfsg*
</script>

5.Math对象
内置对象–拿来即用
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x)对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。

<script>
    alert(Math.random()) //(0,1)的随机数
    alert(Math.round(2.8)) // 近似值 四舍五入 3

    var num=100*Math.random();
    num=Math.round(num);
    alert(num);//0-100的随机数
    
    alert(Math.pow(2,4))//2**4
</script>

二、BOM对象
BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
1.window对象
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。

<body>
    <input type="text" id="clock" style="width:249px">
    <input type="button" value="begin" onclick="begin_click()">
    <input type="button" value="End" onclick="End()">
    <input type="button" value="timeout" onclick="f1()">
    <script>
        window.alert(123) //alert为window对象方法
        //alert confirm  prompt
        var ret=confirm("内容是否保存！") //选择确认ret为true 取消ret为false
        alert(ret)
        var ret=prompt("hello")//显示可提示用户输入的对话框。hello为提示,返回值ret为输入的东西
        alert(ret);

        //定时器
        function getTime() {
        var date_obj= new Date();
        var year=date_obj.getFullYear();
        var month=date_obj.getMonth()+1;
        var day=date_obj.getDate();
        var hour=date_obj.getHours();
        var minute=date_obj.getMinutes();
        var seconds=date_obj.getSeconds();
        var week=date_obj.getDay();
        return year+"年"+month+"月"+f(day)+"日"+" "+hour+": "+minute+" :"+seconds+" "+num_week(week)
        }
        function f(num) {
            if (num<10){
                 return "0"+num;
            }
            return num;
        }
        function num_week(n) {
            week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
            return week[n]
        }

        function begin() {
            var stime=getTime();
            var ret=document.getElementById("clock");//拿到clock
            ret.value=stime;//修改clock里的值
        }
        var ID;
        function begin_click() {
            if (ID==undefined){//防止多次点击begin而对前面的ID覆盖
                begin();
                ID=setInterval(begin,1000);//按照指定的周期（以毫秒计）1000来调用函数
            }
        }

        function End() {
            clearInterval(ID);//取消由setInterval()设置的ID。
            ID=undefined;
        }

        function Timeout() {
            alert("time out！");
            clearTimeout(ID)//取消由 setTimeout()方法设置的timeout。
        }
        function f1() {
            var ID=setTimeout(Timeout,3000);//在指定的毫秒数后调用函数或计算表达式。
        }
    </script>
</body>

2.history
window.history
三种方法：forward back go
一个属性：length
forward和back互逆操作

<body>
    <input type="button" value="前进" onclick="func1();">
    <a href="histroy_lesson2.html">lesson2</a>
    <script>
          function func1() {
                history.forward();
          }
    </script>
</body>

<body>
    <input type="button" value="后退" onclick="func2();">
    <script>
        function func2() {
            history.back();
            alert(history.length);//2个url
        }
    </script>
</body>

里面的back和forward可以通过history.go(*)替换。1，-1表示前进和后退。

3.location

<body>
    <input type="button" value="重载" onclick="location.reload()">
    <!--刷新整个页面-->
    <input type="button" value="跳转" onclick="location.href='http://www.baidu.com'">
    <!--在本窗口跳转到百度-->
</body>

三、DOM对象
DOM 定义了访问 HTML 和 XML 文档的标准
HTML DOM - 针对 HTML 文档的标准模型。定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

• 整个文档是一个文档节点(document对象)
• 每个HTML元素是元素节点(element 对象)
• HTML元素内的文本是文本节点(text对象)
• 每个HTML属性是属性节点(attribute对象)
• 注释是注释节点(comment对象)

HTML 文档中的所有内容都是节点(NODE)，节点包含节点属性和导航属性。
节点(自身)属性:
attributes - 节点的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点的文本值
导航属性:
parentNode - 节点的父节点 (推荐)
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点的子节点
nextElementtSibling - 下一个兄弟标签元素
previousElementSibling - 上一个兄弟标签元素
为了对文档树进行导航

<body>
    <div id="div1">
        <div>hello div </div>
        <p>hello p</p>
    </div>

    <script>
        var ele=document.getElementById("div1");
        alert(ele);  //[object HTMLDivElement]
        console.log(ele.nodeName);  //DIV
        console.log(ele.nodeType);  //1
        console.log(ele.nodeValue);  //null
        //会将标签之间的空格和换行也当做孩子节点
        var ele2=ele.firstChild;  //为两个div之间的空格
        alert(ele2.nodeName);  //#text
        var ele3=ele.lastChild;  //为div和p之间的空格
        alert(ele3.nodeName);  //#text
        var ele3=ele.childNodes;  //找到孩子节点存储在数组中
        alert(ele3.length);  //5
        var ele3=ele.parentNode;  //BODY
        alert(ele3.nodeName);

        //推荐方式
        var ele=document.getElementById("div1");
        var ele_son=ele.firstElementChild;
        alert(ele_son.nodeName)  //DIV
        var ele_son=ele.lastElementChild;
        alert(ele_son.nodeName);  //P
        var ele_sons=ele.children;
        alert(ele_sons.length);  //2
        for (var i=0;i<ele_sons.length;i++){
            console.log(ele_sons[i])  //取孩子节点
        }

        var ele=document.getElementById("div1").firstElementChild;  //div标签
        var sib=ele.nextElementSibling;  //下一个兄弟标签
        alert(sib.nodeName);
    </script>
</body>

页面查找：
getElementById() 方法
getElementsByTagName() 方法
getElementsByClassName() 方法
getElementsByName() 方法

<body>
    <div id="div1">hello
        <div class="div2">hello 2</div>
        <div class="div3" name="ala">hello 3
            <p>hello inner</p>
            <p id="ppp">hello inner2</p>
            <p class="ppp">hello inner3</p>
            <p name="ala">hello inner4</p>
        </div>
        <p>hello p</p>
    </div>
    <script>
        //全局查找
        //通过ID
        var temp=document.getElementById("div1"); //ID唯一
        alert(temp.nodeName)  //DIV
        //通过class
        var ele=document.getElementsByClassName("div2")[0]; //classname可能不唯一
        alert(ele.nodeName)  //DIV
        var ele2=ele.nextElementSibling;
        alert(ele2.innerHTML);  //节点的文本值
        //通过tag
        var tag=document.getElementsByTagName("p");
        alert(tag[0].innerHTML)
        //通过Name
        var Name=document.getElementsByName("ala");
        for(var i in Name){
            console.log(Name[i].innerHTML)
        }

        //局部查找
        var ele=document.getElementsByClassName("div3")[0];
        //局部查找可以通过TagName
        var ele2=ele.getElementsByTagName("p")[0];
        alert(ele2.innerHTML)
        var ele2=ele.getElementsByTagName("p");
        alert(ele2.length)  //4
        //局部查找可以通过 class
        var ele4=ele.getElementsByClassName("ppp")[0];
        alert(ele4.innerHTML); 
        //局部查找不可以通过getElementsByName
        //局部查找不可以通过getElementById 因为ID唯一
    </script>
</body>

DOM Event(事件)
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得鼠标焦点。
onblur 元素失去焦点。用户离开某个输入框时,代表已经输入完了,可以对它进行验证

<body>
    <p ondblclick="alert(123)">ppppp</p>
    <input class="keyword" type="text" onfocus="func1()" onblur="func2()" value="请输入用户名">
    <script>
        function func1() {
            console.log(111)
            var ky=document.getElementsByClassName("keyword")[0];
            ky.value=""; //Dhtml
        }
        function func2() {
            var ky=document.getElementsByClassName("keyword")[0];
            if (ky.value.trim().length==0){//去掉空格
                ky.value="请输入用户名";
            }
        }
    </script>
</body>

onchange 域的内容被改变。 通常用于表单元素,当元素内容被改变时触发

<body>
    <select  onchange="fun3()">
        <option>上海</option>
        <option>北京</option>
        <option>河北</option>
    </select>
    <script>
        function fun3() {
            alert(1234);//选择非默认的城市即会触发
        }
    </script>
</body>

onkeydown 某个键盘按键被按下。当用户在最后一个输入框按下回车按键时，表单提交。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。

<body>
    <input type="button" value="press" onkeydown="fun1(event)" onkeyup="fun2()" >
    <script>
        function fun1(e) {
            console.log(e.keyCode); //每个键都有对应的ASCII码
        }
        function fun2() {
            console.log(11)
        }
    </script>
</body>

onload 一张页面或一幅图像完成加载。
当js放在head标签里时使用。 希望页面加载完立刻执行,那么可以使用该事件属性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>//等加载完成后执行
        window.onload=function(){
            var p=document.getElementById("id1")
            alert(p.nodeName);
        }
    </script>
</head>
<body>
    <p id="id1">hello p</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun1() { //body执行完后操作
            var p=document.getElementById("id1")
            alert(p.nodeName);
        }

    </script>
</head>
<body onload="fun1()">
    <p id="id1">hello p</p>
</body>
</html>

onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            background-color: #84a42b;
            width: 200px;
        }
    </style>
</head>
<body>
    <div onmousedown="down()" onmousemove="move()" onmouseout="out()" onmouseover="over()">div1</div>
    <script>
        function down() {
            console.log("down");//按下
        }
        function move() {
            console.log("move");//在上面移动
        }
        function out() {
            console.log("out");//移开
        }
        function over() {
            console.log("over");//移入
        }
    </script>
</body>
</html>

onselect 文本被选中。
onsubmit 确认按钮被点击。当表单在提交时触发。该属性也只能给form元素使用。

<body>
    <form id="form" onsubmit="return check(event)">
         <input type="text" name="username">
         <input type="submit" value="submit">
    </form>
    <script>
        function check(event) {
            alert("验证失败 表单不会提交!");
            event.preventDefault();
        }
        //方法二
        function check() {
            alert("验证失败 表单不会提交!");
            return false; //true为可以提交
        }
    </script>
</body>

<body>
    <form id="form">
         <input type="text" name="username">
         <input type="submit" value="submit">
    </form>
    <script>
        //第三种：
        var Form=document.getElementById("form");
        Form.onsubmit=function (event) {
            alert("验证失败 表单不会提交!");
            return false;
        }
    </script>
</body>

绑定事件两种方式

<body>
    <div id="div1" onclick="func1()">hello duv
        <p class="ppp">hello p</p>
    </div>
    <script>
        function func1(){
            alert("func1")
        }
    </script>
</body>

<body>
    <div id="div1">hello duv
        <p class="ppp">hello p</p>
    </div>
    <script>
        var obj=document.getElementsByClassName("ppp")[0];
        obj.onclick=function () {
            alert(123);
        }
    </script>
</body>

事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 300px;
            height: 200px;
            background-color: #84a42b;
        }
        #div2{
            height: 100px;
            width: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div id="div1" onclick="alert('div1')">
        <div id="div2" onclick="func1(event)"></div>
    </div>
    <script>
        function func1(e) {
            alert('div2');
            e.stopPropagation();//点击div2区域时div1不发生响应，阻止传播
        }
    </script>
</body>
</html>

标签的增删

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            height: 200px;
            background-color: #84a42b;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">hello div2</div>
        <p>hello p</p>
        <p><em>hello ppppp</em></p>
    </div>
    <input type="button" value="添加p" onclick="add();">
    <input type="button" value="删除p" onclick="remove();">

    <script>
    function remove() {
        var ele=document.getElementById("div1");
        var last_son=ele.lastElementChild; //找到p
        ele.removeChild(last_son); //删除 hello ppppp
    }
    function add() {
        var ele=document.getElementById("div1");
        var son=document.createElement("p");
        son.innerHTML="<em>hello ppppp</em>" //文本内容 设置斜体
        //son.innerText="<em>hello ppppp</em>"; //文本内容<em>也为内容
        ele.appendChild(son);
    }
    </script>
</body>
</html>

改变 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML ，innerText。

改变 CSS 样式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";                        
document.getElementById("p2").style.fontSize='30px';

改变 HTML 属性

elementNode.setAttribute(name,value)
elementNode.getAttribute(name)
elementNode.value(DHTML)

<body>
    <div class="div1">hello div</div>
    <input id="add" type="button" value="add">
</body>
<script>
    var ele=document.getElementById("add");
    ele.onclick=function () {
        var div1=document.getElementsByClassName("div1")[0];
        var img=document.createElement("img");
        //img.setAttribute("src","56.jpg");
        img.src="56.jpg"     //dynamic html(Dhtml：增强html)
        div1.appendChild(img);
    }
</script>

创建新的 HTML 元素

createElement(name)

删除已有的 HTML 元素

elementNode.removeChild(node)

关于class的操作

elementNode.className
elementNode.classList.add
elementNode.classList.remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bigger{
            font-size: 34px;
        }
    </style>
</head>
<body>
    <div class="div1 div2" id="ID">
        hello
        <div>hello2</div>
        <p>hello p</p>
    </div>
    <script>
        var ele=document.getElementById("ID");
        alert(ele.className) //div1 div2
        ele.classList.add("bigger")  //class="div1 div2 bigger"
        ele.classList.remove("bigger");  //class="div1 div2"
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bigger{
            font-size: 40px;
            color: #84a42b;
        }
        .small{
            font-size: 10px;
            color: rebeccapurple;
         }
    </style>
</head>
<body>
    <div id="div1">fhslajkdfhsdjfsdasadfhlakjsdfhkjl</div>
    <input type="button" onclick="change('bigger')" value="big">
    <input type="button" onclick="change('small')" value="small">
    <script>
        function change(a) {
            var ele=document.getElementById("div1");
            //ele.style.fontSize='30px';
            ele.classList.add(a);
        }
    </script>
</body>
</html>

补充 href="javascript:void(0)"

<body>
    <a href="javascript:void(0)">hello</a>
    <!--不跳转且url不变-->
    <a href="#">hello</a>
    <!--不跳转但url后会加#-->
    <a href="javascript:show()">hello</a>
    <!--点击执行函数-->
    <div>hello1
        <div>hello2
            <div onclick="show1(this)" val="123">hello3</div>
            <!--this指代当前触发的标签div-->
        </div>
        <a href="#">hello</a>
    </div>
    <SCRIPT>
        function show(){
            alert(12)
        }
        function show1(self){
            console.log(self.getAttribute("val"))
            console.log(self.innerHTML)
        }
    </SCRIPT>
</body>

div改变样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        #div1{
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            height: 2000px;
            background-color: #b4b4b4;
        }
        #div2{
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: red;
            opacity: 0.1;
        }
        #div3{
            height: 200px;
            width: 200px;
            background-color: blueviolet;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        .hide{
             display: none;
        }
    </style>
</head>
<body>
    <div id="div1" >
        <input type="button" value="click" onclick="show()">
    </div>
    <div id="div2" class="div hide"></div>
    <div id="div3" class="div hide">
        <input type="button" value="cancel" onclick="cancel()">
    </div>
    <script>
        function show() {
            var ele=document.getElementsByClassName("div")
            for (var i=0;i<ele.length;i++){
                ele[i].classList.remove("hide")
            }
        }
        function cancel() {
            var ele=document.getElementsByClassName("div")
            for (var i=0;i<ele.length;i++){
                ele[i].classList.add("hide")
            }
        }
    </script>
</body>
</html>

盒子的正反选

<body>
    <input type="button" onclick="selectall()" value="全选">
    <input type="button" onclick="cancel()" value="取消">
    <input type="button" onclick="reverse()" value="反选">
    <hr>
    <table border="1" class="box">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
            <td>112</td>
            <td>113</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>121</td>
            <td>122</td>
            <td>123</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>131</td>
            <td>132</td>
            <td>133</td>
        </tr>
    </table>
    <script>
         function selectall() {
             var ele=document.getElementsByClassName("box")[0];
             alert(ele.children[0].innerHTML)
             var inputs=ele.children[0].getElementsByTagName("input");
             for (var i in inputs){
                 inputs[i].checked =true;
             }
         }

         function cancel() {
             var ele=document.getElementsByClassName("box")[0];
             var inputs=ele.children[0].getElementsByTagName("input");
             for (var i in inputs){
                 inputs[i].checked =false;
             }
         }

         function reverse() {
             var ele=document.getElementsByClassName("box")[0];
             var inputs=ele.children[0].getElementsByTagName("input");
             for (var i in inputs){
                 if(inputs[i].checked){
                      inputs[i].checked =false;
                 }else {
                     inputs[i].checked =true;
                 }
             }
         }
    </script>
</body>