前端自学学习笔记——JS(BOM)

前端自学学习笔记——JS(BOM)

第一章 BOM简介

BOM（浏览器对象模型）提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM将浏览器中的各个部分转换成了一个一个的对象， 我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。

BOM提供了独立于内容与浏览器窗口进行交互的对象，核心对象是window。

window对象是浏览器的顶级对象，是JS访问浏览器窗口的一个接口，是一个全局对象（全局变量、函数是window对象的属性和方法）。

第二章 window对象的常见事件

2.1 窗口加载事件（window.onload）

当文档内容（图像、脚本文件、css、falsh等）全部加载完会触发该事件。

使用传统注册方式window.onload只能写一次，若有多个，以最后一个为准；使用window.addEventListener(‘load’,function(){})则无限制。

document.addEventListener(‘DOMContentLoaded’,function(){})常用于图片多的页面；DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等。

2.2 调整窗口大小事件（window.onresize）

只要窗口大小像素发生了变化，就会触发该事件。利用该事件完成响应式布局。

window.innerWidth：当前屏幕宽度

window.innerHeight：当前屏幕高度

第三章 定时器

3.1 setTimeout()定时器

开启定时器语法：window.setTimeout(回调函数[，延迟的毫秒数])

停止定时器语法：window.clearTimeout(定时器标识符)

设置一个定时器，在定时器到期后执行回调函数，只调用一次

注：页面中可能有多个定时器，记得给每个定时器加标识符

3.2 setInterval()定时器

开启定时器语法：window.setInterval(回调函数[，延迟的毫秒数])

停止定时器语法：window.clearInterval(定时器标识符)

重复调用一个函数，每隔这个时间，就调用一次回调函数。

3.3 this指向

一般情况下，this的最终指向时那个调用它的对象

1. 全局作用域或普通函数中，this指向全局对象window（定时器中也是）。
2. 方法调用中，谁调用this就指向谁。
3. 构造函数中，this指向构造函数的实例。

第四章 JS执行机制

1. JS是单线程的，同一时间只能做一件事情。

2. HTML5提出Web Worker标准，允许JS创建多线程（同步、异步）。

3. 同步任务：在主线程上执行，形成一个执行栈。

4. 异步任务：通过回调函数实现，添加在任务队列中，常见有：普通事件、资源加载、定时器。

5. 执行顺序：①先执行执行栈中的同步任务。

   ​ ②异步任务（回调函数）放入任务队列中

   ​ ③一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，将异步任务放入执行栈中，开始执行。

6. 事件循环Eventloop：主线程不断重复获得任务，执行任务，再获取任务，再执行。异步进程处理失败异步任务是否调用，再放入异步队列中。

第五章 location对象

location对象是window对象提供的一个属性，用于获取或设置窗体的URL，并可用于解析URL，由于返回值为一个对象，所有成为location对象。

5.1 URL组成

protocol://host[:port]/path/[?query]#fragment
通信协议    主机   端口   路径   参数    片段
注：默认端口为8080

5.2 location对象属性

location对象属性	含义
location.href	获取或设置整个URL
location.host	返回主机名（域名）
location.port	返回端口号，若未写，返回空串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段

5.3 location对象方法

location对象方法	含义
location.assign	可以跳转页面，能后退
location.replace	可以跳转页面，不能后退
location.reload	重新加载页面，相当于刷新；若无参数或为false直接刷新，为true强制刷新。

第六章 navigator对象

navigator对象包含浏览器有关的信息，常用userAgent属性，该属性返回由客户机发送服务器的user-agent头部的值。

使用navigator.userAgent判断用户哪个终端打开页面。

第七章 history对象

history对象与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的URL。

history对象方法	含义
back()	后退
forward()	前进
go()	前进后退。参数为正表示前进，参数为负表示后退。

如果觉得对你有帮助的话，点个赞呗~

如需转载，请注明出处Hoki802