BOM

BOM   ---- 浏览器对象模型  内容与浏览器窗口的交互   核心对象是window
JS —— 标准化组织是 ECMA   DOM —— 标准化组织是 W3C   BOM —— 最初是网景浏览器的一部分
比较：
    dom——文档当做一个对象   
        顶级对象是document
        主要学习操作页面元素
    bom——浏览器对象模型
         把浏览器当做一个对象
         兼容性较差
         顶级对象是window
         学习的是浏览器窗口交互的一些对象
    bom比dom更大   bom包含dom
BOM：
    1.是一个全局变量  定义在全局作用域中的变量，函数都会变成window对象的属性和方法  可以省略window
    2.顶级对象是window

window对象常见事件：
    1.window.οnlοad=function(){}     ------>窗口加载事件
        放在页面任意地方  只能写一次，重复以最后一个为准
        使用addEventListener没有限制

        load等页面内容全部加载完毕，包含dom元素
        documentLoaded 是dom加载完毕 不包含图片……
    2.调整窗口大小事件
        window.onresize
            只有窗口像素发生变化就触发这个事件
        window.innerWidth      响应式布局

【回调函数：回调——回头调用{上一件事干完，在回头调用这个函数}】

定时器：
    window.setTimeout(调用函数，[延迟的毫秒数])    -----动一下(青蛙)
        window在调用的时候可以省略
        延迟时间单位是ms  可以省略  如果省略默认为0
        这个调用函数可以直接写函数，也可以直接写函数名   也可以'函数名()'不提倡这个写法
        页面中可能有很多定时器，需要给定时器加标识符{名字}
    window.clearTimeout(timeout ID)
        停止定时器
        window可以省略
    setInterval(回调函数，[间隔的毫秒数])   ------一直动(多动症)
        重复调用一个函数，每隔这个时间，就去调用一个回调函数
        window可以省略
        延迟时间单位是ms  可以省略  如果省略默认为0
        这个调用函数可以直接写函数，也可以直接写函数名   也可以'函数名()'不提倡这个写法
        页面中可能有很多定时器，需要给定时器加标识符{名字}
    clearInterval(intervalid)

this指向问题   ------- 谁调用指向谁
    1.全局作用域或者普通函数中this指向全局对象window
    2.方法调用中谁调用this指向谁
    3.构造函数中this指向构造函数实例

JS执行机制
    同步 ： 执行结果和排列顺序一致
        回调函数不属于同步任务
    异步 ： 同时做多个任务
        是通过回调函数实现的
        1.普通事件，如click，resize等
        2.资源加载，如load,error等
        3.定时器，包括setInterval,setTimeout等

    先执行执行栈中的同步任务
    异步任务(回调函数)放入到队列中
    所有同步任务执行完，在执行异步任务
    事件循环     event loop

location对象：
    用于获取或者设置窗体的url，并且可以用于解析url       属性返回值是一个对象
    协议  域名  文件
    location.href ----->获取或设置整个url
    location.search---->获取参数
    location.port  ---->返回接口  如果没写，返回空字符串
    location.host  ---->返回域名--主机名
    location.hash  ---->获取锚点
    常用方法：
        location.assign() ----> 跳转页面 记录浏览历史 有回退功能
        location.replace() ----> 不记录浏览历史 无回退功能
        location.reload() ---->  重新加载页面 true强制刷新

navigator对象：

history对象：
    back()  回退
    forward() 前进
    go(参数)  如果参数为1，前进1个页面，如果是-1，后退一个页面

offset  ----- 元素偏移
    获得元素距离带有定位父元素的位置
    获得元素自身的大小
    返回值都不带单位
    offsetTop/Left/Width/Height
    offsetPrent   -----返回的是带有定位的父亲   否则返回body
    parentNode   -----返回父亲， 最近一级的父亲 亲爸爸 不管父亲有没有定位

offset和style区别：
    style只能得到行内样式表
         带单位的字符串
         不包含padding和border
         可以更改值
    offest可以获得任意样式
        获得的是数值
        包含padding，border
        只读属性

client ---- 元素可视区
    返回元素大小 边框大小
    不含边框  
    得到的是内容的大小
    返回数值都不带单位
    clientTop/Left/Width/Height

scroll --- 元素滚动
    高度是内容的大小
    scrollTop/Left/Width/Height

mouseenter事件和mouseover事件
    mouseover事件：鼠标经过自身盒子会触发，经过子盒子也会触发  
    mouseenter事件：只经过自身盒子会触发   (不会冒泡)

动画原理：
    通过定时器setInterval()不断移动盒子的位置
    1》获得盒子当前的位置
    2》在当前位置加一个移动的距离
    3》利用定时器不断重复这个操作
    4》加一个结束定时器的条件
    5》注意：此元素需要添加定位，才能使用element.style.left
    动画函数：
    1>动画函数封装：
        需要传递两个参数：动画对象和移动的距离
        动画函数给不同元素记录不同定时器(优化，不占内存)
        function animate(obj,target){
            obj.timer=setInterval(function(){
                if(obj.offsetLeft>=target){
                    clearInterval(obj.timer)
                }
                obj.style.left=obj.offsetLeft+10+'px';
            },30)
        }