API---BOM

BOM

BOM 概述

BOM Browser Object Model 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准 JavaScript 语法的标准化组织是ECMA，DOM的标准化组织是W3C



这里的注意里 window的一个特殊属性window.name 因此 在声明字面量的时候 不用name

页面加载

document.addEventListener(‘DOMContentLoaded’,function() {});
DOMContentLoaded 事件触发时，先加载DOM 再加载样式 图片 ，etc

调整窗口大小事件

window.addEventListener(‘load’,function() {
script写在这里面 ，就不会局限script的位置
})

定时器

（1）setTimeout（回调函数，延迟时间（ms））
语法规范： window.setTimeout(callback,ms)

（2） 停止setTimeout（）定时器
clearTimeout()(函数名）
所以 用这个停止定时器，必须先给setTimeout（）给它一个变量名

setTimeout() 和 clearTimeout() 使用 example
(点击按钮，停止该定时器）

var btn =document.querySelector('#btn');
var timer =setTimeout(function() {
alert('BOOOOOOM');
,5000};//这个setTimeout（）定时器一写出来，就执行
btn.addEventListener('click',function() {
clearTimeout(timer);//clearTimeout() 括号里就写 要停止的定时器
})

setTimeout () & clearTimeout() 搭配一起使用
set/clear -Timeout()

（3）setInterval() 定时器
window.setInterval(callback, 间隔ms数）;

(4)清除定时器Interval()
window.clearInterval(函数名);

example:

var btn =document.getElementById('btn');
var Interval = setInterval(function() {
alert('time is up');
},5000);
btn.addEventListener('click',function() {
clearInterval(Interval);
});

this 的指向问题

This 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下，this的最终指向是那个调用它的对象
（1）全局作用域或者普通函数中this指向全局对象window （注意定时器里面的this指向window）
（2）方法调用中 谁调用 this指向谁
（3）构造函数中this指向构造函数的实例

Js的同步和异步

同步异步区别：这条流水线上各个流程的执行顺序不同

注意：时间到了，定时器函数才会被写到异步任务里去
由于主线程不断地重复获得任务，执行任务，再获得任务，再执行，所以这种机制被称为 事件循环（event loop）

location 对象

window 对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。
该属性返回 location对象

location对象的方法

Navigator 对象

可以判断用户用哪个终端打开页面，实现跳转

history 对象

btn.oncick=function() {
history.go(1);
}

元素偏移量 offset系列

offset 翻译过来就是 偏移量 ，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：数值返回都不带单位！！！

offsetparent返回的是 最近一级带有定位的祖先
而 parentnode 返回的是 亲爸爸
offsetTop/offsetLeft 以带有定位的父亲为准，如果没有父亲，或者父亲没有定位，则以body为准

offset和style的区别

元素可视区client系列

和offset的区别 ：不包含边框

scroll 系列

mouseenter和 mouseover的区别

当鼠标移到元素上时，就会触发mouseenter事件

类似mouseenter 两者的差别是：
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发
mouseeneter 只会经过自身盒子触发，之所以这样，是因为 mouseenter不会冒泡

动画封装函数

（1）动画实现原理

(2)缓动动画
原理：

function animate(obj,target) {
    obj.timer = setInterval(function() {
        var step =(target - obj.offsetLeft) / 10;
        step =step > 0? Math.ceil(step) :Math.floor(step);
        if(obj.offset == target) {
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    },15)
}
})
animate(span,300);

（3）动画函数添加回调函数
回调函数原理： 函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调

function animate(obj,target,callback) {
    obj.timer = setInterval(function() {
        var step =(target - obj.offsetLeft) / 10;
        step =step > 0? Math.ceil(step) :Math.floor(step);
        if(obj.offset == target) {
            clearInterval(obj.timer);
            if(callback)//	如果回调函数存在,如果不存在就不要这个形参
            callback ();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    },15)
}
animate(div,800,function () {
alert('yes');
});

滚动窗口至文档中的特定位置

Window.scroll(x,y)
（x，y）返回的位置
x和y 不跟单位

本地存储

（1）window.sessionStorage
将数据存储在浏览器中

数据可在application的sessionStorage中查看

（2）Window.localStorage

//存储数据
set.addEventListener('click',function() {
var val =ipt.value;
localStorage.setItem('username',val);
})
//获取数据
get.addEventListener('click',function() {
console.log(localStorage.getItem('username'));
})
//清除数据
remove.addEventListener('click',function() {
localStorage.removeItem('username');
})
//清除所有数据
del.addEventListener('click',function() {
localStorage.clear();
})

都是 localStorage.xxxItem();
若是想要只能是手动删除 关闭页面 不能删除的话 就把local改成session即可