1、BOM：Browser Object Model

BOM：Browser Object Model（浏览器对象模型）

提供了专门用于操作浏览器的API - 没有标准

2、BOM对象

window（定时器）、history、location、navigator、event、screen...

3、window对象

window扮演的对象：

（1）浏览器中，window代替了ES的Global充当全局作用域，包含了所有的全局对象、变量、函数

（2）指代当前浏览器的窗口

1、网页打开新链接的方式

（1）替换当前页面，可以后退：

HTML：<a href="url">文字</a>
JS：open("url","_self");

（2）替换当前页面，禁止后退

使用场景：电商网页：结账完毕后，不允许用户后退

history对象：保存了当前窗口的历史记录，功能：前进后退

location：保存了当前窗口正在打开的url

location.replace("新url");//替换当前网址、不会产生历史记录

3、在新窗口打开，可以打开多个：

HTML：<a href="url" target="_blank">文字</a>
JS：open("url","_blank");

4、在新窗口打开，只能打开一个

使用场景：电商网页：跳转到支付结账页面，只允许用户打开一个

HTML：<a href="url" target="自定义">文字</a>
JS：open("url","自定义");
自定义：窗口的底层都有一个名字，如果出现重复的名字则新窗口会替换掉原来的旧窗口

a标签可以做的事？

①跳转
②锚点
③下载：<a href="xx.rar/zip/exe">文字</a>
④打开图片、txt：<a href="xx.图片后缀/txt">文字</a>
⑤直接书写js：<a href="javascript:js代码;">文字</a>

2、window对象：属性和方法

1、属性：

获取浏览器窗口的大小：

文档显示区域的大小：body部分innerWidth/innerHeight

完整的浏览器大小：outerWidth/outerHeight

屏幕的大小（桌面应用才用的）：screen.width/height

2、方法：

（1）打开新窗口：

var newW=open("url","自定义name","width=,height=,left=,top=");

特殊：如果没传入第三个参数，新窗口会和浏览器并为一体

如果传入第三个参数，新窗口会脱离浏览器

建议宽高不小于200,因为有可能会被浏览器拦截

（2）关闭窗口：

窗口.close();

（3）修改窗口的大小：

新窗口.resizeTo(newW,newH);

（4）修改窗口的位置：

新窗口.moveTo(x,y);

（5）*****定时器：2种

①周期性定时器：先等待，在执行一次，在等待，在执行一次...

开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);

②一次性定时器：先等待，在执行一次，结束

开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);

两种定时器底层相同，可以互换

扩展

获取鼠标的坐标：

1、事件中传入一个形参e->获得到事件对象event（其中一个作用获取鼠标的坐标）

2、获取：

e.screenX/Y;//相对于屏幕
e.clientX/Y;//相对于浏览器客户端
*e.pageX/Y;//相对于网页的

鼠标跟随效果：

1、绑定事件：window.onmousemove
2、图片位置一定和鼠标位置一起
3、图片的加载速度比js的执行速度要慢:
    img.onload=function(){
            //最后才会执行
    }

JS第四周——day5