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值, 使用这个属性的时候, 所有的祖先元素不要有定位,有定位就不好用了