复习-BOM

1. window对象

1.1 BOM

• BOM(Browser Object Model)浏览器对象模型, 是JS与浏览器窗口交互的接口
• 一些与浏览器改变尺寸, 滚动条滚动相关的特效, 都需要借助BOM技术

1.2 window对象

• window对象是当前JS脚本运行的窗口, 而这个窗口包含DOM结构, window.document属性就是document对象.
• 每一个标签页都有自己的window对象, 同一个窗口不同标签页不会共用一个window对象.

1.3 全局变量是window的属性

• 全局变量会变成window对象的属性
• 这意味着, 多个js文件之间是共享全局作用域的

为什么JS要把全局变量定义成window的属性呢?
因为这样就方便多个JS文件之间使用一个域, 所以是多个JS文件会被同一个HTML引入, 为了让这些JS之间能够配合工作, JS就设置成了window管理所有全局变量这样一种机制, 这种机制是JS特有的一种机制.

1.4 内置函数普遍是window对象的方法

如setInterval(), alert()等内置函数, 普遍是window的方法.

console.log(window.alert == alert); //true
console.log(window.setInterval ==setInterval);   //true
window.console.log('你好');

这说明我们平时直接调用的这些方法, 本质上讲都是window对象的方法

1.5 window对象属性中与窗口尺寸相关的属性

属性	意义
innerHeight	浏览器内容区域的高度,包括水平的滚动条(如果有)
innerWidth	浏览器内容区域的宽度,包括垂直的滚动条(如果有)
outerHeight	浏览器窗口的外部高度
outerWidth	浏览器窗口的外部宽度

获得不包含滚动条的窗口宽度, 要用:
document.documentElement.clientWidth

• document.documentElement表示HTML标签, 就是根元素
• clientWidth / clientHeight表示原始内部的宽度和高度

console.log('浏览器窗口的内宽(包括滚动条)', window.innerWidth);
console.log('浏览器窗口的外宽', window.outerWidth);
console.log('浏览器窗口的内宽(不包括滚动条', document.documentElement.clientWidth);

1.6 resize事件–window.οnresize=function(){…}

当窗口大小发生改变之后, 就会触发resize事件, 可以使用window.onresize或者**window.addEventListener(‘resize’)**来绑定事件处理函数

1.7 window.scrollY属性已卷动高度

window.scrollY属性表示在垂直方法已滚动的像素值(不是指的这块的物理像素 它指的是网页被真实的卷了多少像素)

1.8 document.documentElement.scrollTop已卷动高度–主要应用于返回顶部

• document.documentElement.scrollTop也表示窗口的卷动高度

窗口的卷动高度	区别	应用
window.scrollY	只读的
document.documentElement.scrollTop	不是只读的(可以设置这个值来改变卷动的高度)	返回顶部

• 为了更好的浏览器兼容性, 我们可以这么写:var scrollTop = window.scrollY || document.documentElement.scrollTop;

1.9 scroll事件 --window.οnscrοll= function(){…}

在窗口被卷动之后, 就会触发scroll事件, 可以使用window.onscroll或者window.addEventListener(‘scroll’)来绑定事件处理函数
经典应用场景: html5的落地页(滚动到哪儿突然出现了一个图)

2.Navigator对象–主要应用获取浏览器的信息

window.navigator属性可以检索navigator对象, 它内部含有用户此次活动的浏览器的相关属性和标识.

console.log('浏览器品牌', navigator.appName);
console.log('浏览器版本', navigator.appVersion);
console.log('浏览器的用户代理', navigator.userAgent);
console.log('用户操作系统', navigator.platform);

3. History对象 --主要应用回退按钮

window.history对象提供了操作浏览器会话历史的接口
常用作用就是模拟浏览器返回按钮
history.back(); //等同于点击浏览器的回退按钮
history.go(-1); //等同于history.back();负1标识回退上一级,正1就表示前进

应用-返回按钮(两方法) --见笔记

4. location对象 --朱啊哟应用页面跳转和刷新

4.1 location对象, 可以赋值, 进行页面跳转

window,location 标识当前所在网址, 可以通过给这个属性赋值, 命令浏览器进行页面跳转

window.location = "http://www.csdn.net";
window.location.href = "http://www.csdn.net";

4.2 重新刷新加载页面

可以通过location的reload方法以重新加载当前页面, 参数true表示强制从服务器强制加载.
window.location.reload(true);

4.3 GET请求查询参数

window.location.search属性即为当前浏览器的GET请求查询参数.
比如网址: https://www.imooc.com/?a=1&b=2

console.log(window.location.search); //"?a=1&b=2"

BOM特效开发(1)(2)

案例1-返回顶部按钮制作

原理--改变document.documentElement.scrollTop属性, 通过定时器逐步改变此值, 则用动画形式返回顶部.

案例2-楼层导航制作

需要使用到offsetTop属性

• DOM元素都有offsetTop属性, 表示此元素到定位祖先元素的垂直距离
• offsetTop属性非常好用, 它可以得到这个元素到顶部的净top值, 在没有定位祖先元素的情况下, 得到的是元素到页面顶部总距离(净top值)
• 净top值, 使用这个属性的时候, 所有的祖先元素不要有定位,有定位就不好用了