js_document

    文档对象模型：dom
    浏览器对象模型：bom
    js是以时间驱动为核心的语言
    
    onkeyup:按下并且释放键盘出发的事件
    ondbclick:双击鼠标
    onfocus:获取焦点
    onblur:失去焦点
    onmouseover:鼠标悬停
    onmouseout:鼠标移出
    onload：网页文档加载事件
    onunload：网页关闭时
    onsubmit：表单提交事件
    onreset:表单重置事件
    oninput:文本框的内容发生变化就触发，不管是否失去焦点


    绑定标签：
        doucment.getElementById("id");
            返回值为一个标签可以直接使用。
            获取属性值，设置属性值。
        var a = doucment.getElementsByTagName("input");
            返回值为一个标签数组，习惯性遍历后直接使用,即便是一个元素那也是一个数组，没有元素就是一个空数组。
                a[0].className=="...";
        document.getElementsByClassName("aaa");
            返回值为一个标签数组，习惯性遍历后直接使用,即便是一个元素那也是一个数组，没有元素就是一个空数组。
        只有绑定id的时候不加s，因为id是独一无二的，其他时候Element都加s
    

    var div = document.getElementById("box");
    div.οnclick=function(){
        设置属性：
        
        div.className="aaa";
        设置样式
        注意格式：加引号，在css中没有引号，在js中全部要加引号；
        div.style.height="100px";

        js中不允许"-",所有的斜杠去掉，后面接大写字母；
        div.style.backgroundColor="red";



    window.οnlοad=function(){};
        页面加载完毕触动这个事件，页面加载完毕包括文本和图片。
        整个页面所有元素加载完毕，再执行onload的中的代码

    页面加载从上往下加载，如果这个js在中间，js操作的标签位置在后面，这个时候就会报错。
    js和html是同步加载的，从上往下依次加载
    如果使用元素在定义元素之前会报错。
        

    div.className="...";将原来的class属性先删除，然后在重新复制
    div.className +="..";原来的属性不删除，在class后面再追加一个属性    

    修改img标签的src图片路径
        img.src="jd.png";
        等价于
            img["src"]="jd.png";
        等价于    
            img.setAttribute("src",jd.png);
    }

    在函数中js指函数的调用者


    

    js父子兄节点啊关系：
        父节点：
            parentNode   该节点.parentNode
        兄弟节点：sibling就是兄弟的意思
            nextSibling   下一个节点
            nextElementSibling    下一个元素节点
            兼容性写法：
                下一个兄弟节点：该节点.nextSibling||该节点.nextElementSibling
            previousSibling        上一个节点
            previousElementSibling    上一个元素节点
        子节点：
            firstChild
            firstElementChild
            lastChild
            lastElementchild
        所有子节点：返回的是数组
            childNodes
            children

        火狐谷歌等高版本会把换行看作为子节点
        
        nodeType=1  元素节点
        nodeType=2    属性节点
        nodeType=3    文本节点

        创建节点：
            document.createElement("标签名");
                var aaa=document.createElement("li");

        插入节点：
            父节点.appendChild(新节点);父节点的最后插入一个几点
                父节点.appendChild(aaa);父节点的最后插入一个几点

            父节点.insertBefore(新节点,参考节点);在参考节点前插入
                父节点.insertBefore(aaa);

        删除节点：
            父节点.removeChild(子节点);
                var bbb=document.getElementById("aaa");
                var ccc=bbb.parentNode;
                ccc.removeChild(bbb);

        复制节点：
            新节点=要复制的节点.cloneNode(参数);参数可选复制节点
                可接受一个布尔值参数，
                    true表示深复制，复制节点本身及其所有的子节点
                    false表示浅复制，复制节点本身，不包括子节点
            

        属性操作：getAttribute();setAttribute();removeAttribute();
            div.getAttribute("");
            div.setAttribute("key","value");
            div.removeAttribute("");

        禁止a链接跳转
            a.οnclick=function(){
                return false;
            }    
            也可以用
                在a标签内加上οnclick=fn();return false;

        a链接中有onclick事件时，点击a链接先执行onclick中的事件然后在跳转a标签页面    

        修改某个标签的文字：btn.innerHTML="修改的内容";

        判断某个标签中的文字
            if{btn.innerHTML==""){}

        for(var i=0;i<arr.length;i++){
            arr[i].onclick(){
                img.src=this.href;//arr[i]不好使，要用this，this是函数调用者，和i没有关系所有不会出错
                return false;
            }
        }

        value：获取标签的value属性    var a = a.val

        innerHTML ：获取双闭合标签的内容，识别标签  a.innerHTML("");

        innerText：获取双闭合标签的内容，不识别标签 (原样输出)        a.innerText("");

        textContent

        p不能嵌套p
        a不能嵌套a
        h1不能嵌套h1
        

        oninput:文本框的内容发生变化就触发，不管是否失去焦点
        <input type="text" value="" name="" id="in">
        <script type="text/javascript">
            var in=document.getElementById("in");
            in.οninput=function(){
                console.log(this.value);
            }
        </script>

        <input type="text" name="" value="" οnblur="fn(this);">
        <script type="text/javascript">
            function fn(aaa){
                var a= aaa.value;
            }
        </script>
        fn在input中必须传递this,不能用this.value,因为这个时候this代表window，是input标签调用window然后window调用onblur，如果在括号你加上this，这是传递的就是input标签本身。

        select标签设置默认
            optionId.selected='true';
            如果去掉不能false，应该将selected属性移除
            optionId.removeAttribute("selected");


        全选全不选
            //this表示最上面的checkBox
            for(var i=0;i<check.length;i++){
                check.checked=this.checked;
            }        

        arguments和通过标签获取的数组都是伪数组，不能用every等方法，如果要用就得遍历通过push放入真正的数组中


        onselect:选中文本
        成员变量是window的一个方法和属性    

        var newWindow=window.open(url,target,param)
            url:要打开的地址
            target:新窗口的位置    _self _blank _parent
            param:新窗口的一些设置
            返回值新窗口的句柄
        //关闭窗口
            window.close()
            
        //移动窗口
            新窗口.moveTo(5,5)  
            newWindow.moveTo(5,5)

            新窗口.moveBy()  
            newWindow.moveBy(5,5)

        //改变窗口的大小
            新窗口.resizeTo()
            newWindow.resizeBy()
        
        name:新窗口的名字
        fullscreen:{yes/no/1/0}是否全屏，默认no
        channelmode:{yes/no/1/0}是否显示频道栏，默认no
        toolbar:{yes/no/1/0}是否显示工具条
        location:{yes/no/1/0}是否显示地址栏
        directories：{yes/no/1/0}是否显示转向按钮
        status：{yes/no/1/0}是否显示窗口状态条
        menubar:{yes/no/1/0}是否显示菜单
        scrollbars:{yes/no/1/0}是否显示滚动条，默认yes
        resizable:{yes/no/1/0}是否窗口调整大小，
        width
        height
        top
        left
        var json{"name":"新窗口",
                "fullscreen":"no",
                "":"",
                "":"",
                "":"",
                "":"",
                "":"",}
        window.open("http://www.baidu.com" "_blank",json)

        跳转：
            location.href="网址",
            window.open("网址","_blank");    


        location对象
            href
            hash:url中#后面的内容，包括#
            hostname：主机名
            host:主机名包括端口    
            pathname:url路径部分
            protocol:协议一般是指，http，https
            search：查询字符串

        navigator：获取客户端的一些信息
            userAgent:(系统浏览器)
            platform：浏览器支持的系统，win/mac/linux
            console.log(navigator.userAgent)
            console.log(navigator.platform)        

        history
            //后退一个
                history.back()
                history.go(-1)
            //刷新
                history.go(0)
            //前进
                history.go(1)
                history.forward()    

        定时器
            setTimeout(执行事件,间隔时间);//只执行一次，可以用递归调用，就是循环执行器了
                五秒后跳转到某个网站
                var timeOut=setTimeout(function(){
                    location.href="网址";
                },5000)
                setTimeout(方法,定时);                    

            setInterVal(执行事件,间隔时间);//循环执行器,一直执行下去
                //循环一秒钟执行一次
                var num=0;
                var interVal=setInterVal(function (){
                    alert(num++)
                },1000);

                setInterVal(fn,1000);//不带括号
                function fn(){
                    alert("111");
                }

                //如果要传递参数就一定要给函数加引号
                    setInterVal("fn(11)",1000);
                    function fn(aa){
                        alert("aa");
                    }    

            清除定时器:
                clearInterVal(定时器的名字);
                clearTimeOut(定时器的名字);
                    setTimeout,setInterVal的返回值就是定时器的名字
                    var num=0;
                    var timer=setInterVal(function (){
                        alert(num++)
                        if(num==10){
                            cleanInterVal(timer);
                        }
                    },1000);        
        透明度：
            opacity为1就是不透明，opacity为0表示完全透明
            css设置opacity为1--style="opacity:1"
                
                透明度递减  xx.style.opacity-=0.1;

                var timer=setInterVal(function(){
                    xxx.style.opacity-=0.1;
                    if(xxx.style.opacity==0){
                        xxx.style.display=none;
                        clearInterval(timer);
                    }
                },1000);
        向下取整
            Math.floor();
        向上取整
            Math.ceil();
        随机数    
            Math.random();
        绝对值    
            Math.abs();
        四舍五入
            Math.round();