BOM简介

2.2.1 BOM概述

BOM是浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心是window（在写的时候window都可以省略）

window对象是浏览器的顶级对象，它具有双重角色。

• 它是JS访问浏览器窗口的一个接口

• 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法

2.2.2 window对象的常见事件

1、窗口加载事件

• window.onload = function() {}

• 经常使用：window.addEventListener("load",function(){})

• ie9以上支持（DOMContentLoaded事件触发时，仅当DOM加载完成，不包含样式表、图片、flash等）：document.addEventListener('DOMContentLoaded',function(){})

2、调整窗口大小事件

• window.onresize = function(){}

• window.addEventListener("resize",function(){})

2.2.3 定时器

1、两种定时器

• setTimeout()

• setInterval()

2、setTimeout()定时器

（1）设置setTimeout()定时器

window.setTimeout(调用函数，[延迟的毫秒数])

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后之行调用函数，它是一个回调函数

函数写法：直接写函数、写函数名、'函数名()'

（2）停止setTimeout()定时器

window.clearTimeout(id);

id为定时器的名字

3、setInterval()定时器

（1）设置setInterval()定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间就去调用一次回调函数

（2）停止setInterval()定时器

window.clearInterval(id);

4、this

（1）全局作用域或者普通函数中this指向全局对象window（定时器里面的this指向window）

（2）方法调用中谁调用this指向谁

（3）构造函数中this指向构造函数的实例

2.2.4 JS执行队列

1、同步和异步

同步：前一个任务结束后再执行后一个任务

异步：在做这件事的同时做另外的事

2、同步任务和异步任务

同步任务：同步任务都在主线程执行，形成一个执行线

异步任务：JS的异步是通过回调函数实现的

异步任务三种类型：

• 普通事件，如click、resize等

• 资源加载，如load、error等

• 定时器，包括setInterval、setTimeout等

3、JS执行机制

• 先执行同步任务，再执行异步任务

• 由于主线程不断地重复获得任务、执行任务、在获取任务、再执行，所以这种机制称为事件循环

2.2.5 location对象

1、location对象简述

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

2、URL

protocol://host[:port]/path/[?query]#fragment

protocol：通信协议，常用的http、ftp、maito

host：主机（域名）www.itheima.com

port：端口号（可选），省略时使用方案的默认端口，如http的默认端口是80

path：路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址

query：参数，以键值对的形式，通过&符号分隔开来

fragment：片段，#后面内容常见于链接、锚点

3、location对象的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号（如果未写返回，则是空字符串）
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段（#后面内容常见于链接、锚点）

4、location对象的方法

location对象方法	返回值
location.assign()	和href一样，可以跳转页面（可以后退页面）
location.replace()	替换当前页面（不能后退页面）
location.reload()	重新加载页面，相当于刷新按钮或者f5，如果参数为true则强制刷新ctrl+f5

2.2.6 navigator对象

其中的userAgent属性返回客户机发送服务器的值，是移动端还是PC端

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";//手机
}else{
    window.location.href = "";//电脑
}

2.2.7 history对象

history对象是与历史记录进行交互，该对象包含用户访问过的URL

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1前进1个页面，如果是-1后退1个页面