BOM预习

目录

1.BOM概述

1.1什么是 BOM

1.2DOM的构成

2.window对象的常见事件

2.2 调整窗口大小事件

​编辑

 3.定时器

3.1定时器

 回调函数

 3.3停止setTimeout()定时器

3.4setInterval()定时器

 3.5停止setInterval()定时器

3.6this 

4.JS执行机制

4.1JS是单线程

 4.2同步和异步

 4.4JS执行机制

5. location对象

5.2URL

               ​编辑

5.4location常见方法

                     ​编辑

6.navigator对象（判断是PC端还是手机）

 7.history

---

1.BOM概述

1.1什么是 BOM

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM是一系列相关的对象构成，并且每个对象都提供了很多方法与属性

DOM是浏览器厂商自己在浏览器上定义的，兼容性较差

1.2DOM的构成

BOM比DOM更大，它包含DOM

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

1.它是JS访问浏览器的一个接口

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

 在调用的时候，可以省略window，前面学习的对话框都属于window对象方法，如alert（），prompt（）等；

注：window下的一个特殊属性window.name 

2.window对象的常见事件

window.onload =function(){}
或者
window.addEventListener("load",function(){});

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，CSS文件等）

注：

1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容完全加载完毕，再去执行处理函数。

2.window.onload传统注册方式只能写一次，如果有多个，会以最后一个window.onload为准

3.如果使用addEventListener,则没有限制

2.2 调整窗口大小事件

window.onresize = function(){}

window.addEventListener("resize",finction(){});

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数

注：1.只要窗口大小发生像素变化，就会触发这个事件

        2.经常利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度。

 3.定时器

3.1定时器

window对象给我们提供了两个方法-定时器

• setTimeout()
• setInterval()

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

//setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

 

 回调函数

 3.3停止setTimeout()定时器

window.clearTimeout(timeout ID)

3.4setInterval()定时器

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

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

 3.5停止setInterval()定时器

3.6this 

• 在全局作用域或者普通函数this关键字指向全局对象window（定时器中的this指向的是window）
• 方法调用中谁调用this就指向谁
• 构造函数中this指向构造函数的实例

4.JS执行机制

4.1JS是单线程

 4.2同步和异步

 本质区别：这条流水线上各个流程的执行顺序不同

 

 4.4JS执行机制

1. 先执行执行栈中的同步任务
2. 异步任务（回调函数）放入任务队列中
3. 一旦执行栈中所有同步任务执行完毕，系统就按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进去执行栈，开始执行。

5. location对象

window对象飞我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

5.2URL

组成	说明
protocol	通信协议，常用的http.ftp,matio等
host	主机域名www.itheima.com
port	端口号 可选 省略时使用方案的默认端口 如http的默认端口为80
path	路径 由0或者多个‘/’符号隔开的字符串，一般用来表示主机的一个目录或者文件地址
query	参数 以键值对的形式 通过&符号分隔开来
fragment	片段 #后边的内容 常见于锚点链接

               

                   重点：herf和path

5.4location常见方法

location对象方法	返回值
location.assign	跟href一样，可以跳转页面（也称重定向页面）
location.replace	替换当前页面，因为不记录历史，所以不能后退页面
location.reload	重新加载页面，相当于刷新按钮或者f5 如果参数为true 强制刷新Ctrl+f5

                     

6.navigator对象（判断是PC端还是手机）

 

 7.history

window对象我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

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