Js_BOM

BOM :Browser Object Model 浏览器对象模型

浏览器对象模型中， window 对象是浏览器窗口中最顶端的对象
document.body 等同于 window.document.body
document.getElementById("") = window.document.getElementById("")
var a = 10;
console.log(a)
console.log(window.a)
总结： 在浏览器中， 一切都可以通过window去寻找，
声明的变量是直接属于window的， window这个关键字可以省略

浏览器内核：

功能：把代码和标签渲染到页面上
Trident内核：IE 
WebKit内核： Chrome, Safari
Gecko内核： FireFox
Presto内核：Opera
微信/qq 内置浏览器：基于WebKit封装的X5内核

window 对象操作

<script type="text/javascript">
    window对象： 现在基本所有的浏览器都支持window对象， window对象表示的是浏览器整个窗口
    window对象 最大的 甚至documnet 都只是window 的一个属性
</script>

window的常用属性

<input type="button" value="open"  onclick="window.open('close.html');" />
<input type="button" value="close" onclick="window.close();" />

    <button onclick="btn()">打开</button>
        <button onclick="closeNowWindow()">关闭</button>
        <button onclick="resizeToWindow()">测试resizeTo方法</button>
        <script type="text/javascript">

            window.innerHeight; //浏览器窗口高度 包含滚动条
            window.innerWidth;
            window.outerHeight;//整个浏览器窗口的宽度，包括控制台的宽度
            window.outerWidth;
            function btn(){
                window.open("http://www.baidu.com");//打开一个新窗口
            }
            function closeNowWindow(){
                if(confirm("确认关闭")){
                    window.close();//
                }
            }
            function resizeToWindow(){
                var w = window.open("http://www.baidu.com", "_top", "width = 100, height = 100");
                w.resizeTo(500,500);//调整大小
                w.moveTo(500,500);//调整位置  把窗口的左上角移动到一个指定的坐标。
            }
        </script>

URL解码

菜鸟location
URL解码

location 地 协 域 端 # 路 重

window.location.href = "http://www.baidu.com";
（1）location.href：返回完整的URL地址
    console.log(window.location.href);
    http://127.0.0.1:8020/E5%92%8CBOM.html
    表示的是URL编码，所以文件名 + 路径 不建议起中文
（2）location.protocol：返回网络安全传输协议名（http/https）
    console.log(location.protocol);
    当前文件所在的服务器用的协议（http: https: ftp)
    当前文件所在的服务器所在的域名和端口号  127.0.0.1 本机地址 
（3）location.hostname：返回主机的域名（127.0.0.1）
（4）location.port：返回端口号 
（5）location.hash：返回地址#号后的信息4
（6）location.pathname：返回文件路径信息
    console.log(location.pathname);
    返回当前URL的路径
（7）location.reload()：重新加载当前页面
    window.location.reload();   
    console.log(location.search);
    重要  获取地址栏中请求的参数 从？开始（不包括#号后面的部分
    例: 127.0.0.1:8020/shuqian/index.html?
    name=lidongxu&age=18#haha
    结果是 ?name=lidongxu&age=18

navigator

    <script type="text/javascript">
    console.log(navigator.appName);//Netscape  浏览器名称
    console.log(navigator.appCodeName);//Mozilla 浏览器编号
    console.log(navigator.userAgent);  //浏览器信息
    //Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) chrome/56.0.2924.87 Safari/537.36
    if(navigator.userAgent.indexOf("Mobile") != -1){
    //如果查找到Mobile字符串，则结果不等于 - 1，说明用户使用的是移动设备
    document.body.innerHTML = "欢迎使用";
    }else{
        document.body.innerHTML = "请使用移动设备";
    }
    console.log(navigator.appName);         //Netscape
    console.log(navigator.appName);         //Netscape
    console.log(navigator.appName);         //Netscape

        </script>

封装一次性动画

    <span id="mySpan">
            121321231321
        </span>
        <script type="text/javascript">

//          var  mySpan = document.getElementById("mySpan");
//          var speed = 1;
//          var max = 50;
//          var startValue = parseInt(getComputedStyle(mySpan, null).fontSize);
//          var timer = setInterval(function (){
//              startValue += speed;
//              if(startValue >= max){
//                  clearInterval(timer);
//              }
//              mySpan.style.fontSize = startValue + "px";
//          },100)

            function big(obj, attr, speed, max, theTimer){
                var startValue = parseInt((getComputedStyle(obj, null)[attr]));
                var timer = setInterval(function (){
                    startValue += speed;
                    if(startValue >= max){
                        clearInterval(timer);
                    }
                    obj.style[attr] = startValue + "px";
                },theTimer)
            }
            big(mySpan, "fontSize", 10, 500, 100);

        </script>