BOM

文章目录

• [1. BOM概述](#1. BOM概述)
• • [1.1 什么是BOM](#1.1 什么是BOM)
  • [1.2 BOM构成](#1.2 BOM构成)
• [2. window 的常见对象](#2. window 的常见对象)
• • [2.1 窗口加载事件](#2.1 窗口加载事件)
  • [2.2 调整窗口大小事件](#2.2 调整窗口大小事件)
• [3. 定时器](#3. 定时器)
• • [3.1 setTimeout()](#3.1 setTimeout())
  • [3.2 停止 setTimeout() 定时器](#3.2 停止 setTimeout() 定时器)
  • [3.3 setInterval()](#3.3 setInterval())
  • • *案例--倒计时效果
  • [3.4 清除setInterval() 定时器](#3.4 清除setInterval() 定时器)
  • • *案例--发送短信
  • [3.5 this 指向问题](#3.5 this 指向问题)
• [4. JS 执行机制](#4. JS 执行机制)
• • [4.1 JS是单线程](#4.1 JS是单线程)
  • [4.2 同步和异步](#4.2 同步和异步)
  • • [(1) 同步任务](#(1) 同步任务)
    • [(2) 异步任务](#(2) 异步任务)
  • [4.3 JS执行机制](#4.3 JS执行机制)
• [5. location 对象](#5. location 对象)
• • [5.1 什么是location 对象](#5.1 什么是location 对象)
  • [5.2 URL](#5.2 URL)
  • [5.3 location 对象属性](#5.3 location 对象属性)
  • • *案例--5s之后自动跳转页面
    • *案例--获取URL参数
  • [5.4 location 对象的方法](#5.4 location 对象的方法)
• [6. navigator 对象](#6. navigator 对象)
• [7. history 对象](#7. history 对象)

1. BOM概述

1.1 什么是BOM

DOM区域划分：

BOM区域划分：

1.2 BOM构成

注意;
声明变量时最好不要用name ,因为window 下的一个特殊属性为window.name。

2. window 的常见对象

一般情况下，我们会将js 代码放在html 语言的下面，因为有了html 元素才能执行js 代码；但是学习了窗口加载事件就可以实现把js 代码写在html 语言前面的情况。

2.1 窗口加载事件

1. onload
   
2. DOMContentLoaded--适用于页面中图片元素特别多的时候（有兼容性）

2.2 调整窗口大小事件

3. 定时器

3.1 setTimeout()

注意：

1. setTimeout() 属于window ,可以直接调用；
2. 延时时间单位是毫秒，可以省略，默认值为0；
3. 调用函数可以直接写函数，还可以写函数名，也可以写函数名()（但不提倡这种写法）；
4. 页面中可能有很多定时器，我们经常给定时器加标识符(名字)

3.2 停止 setTimeout() 定时器

3.3 setInterval()

两种定时器的区别：

前者在过了延时时间后会执行回调函数，只调用一次；

后者每隔延时时间就执行一次回调函数，可以调用无数次。

*案例--倒计时效果

3.4 清除setInterval() 定时器

注意：

timer 一开始定义的是null 对象；而不是不赋值，定时器也是一个对象，在后面对timer 赋值也更合适

*案例--发送短信

3.5 this 指向问题

一般情况下，this 指向调用他的那个对象。

1. 
   
2. 
3. 

4. JS 执行机制

4.1 JS是单线程

例如以下代码：

中间的定时器需要时间才能执行完毕，后面的代码需要等待，这是一个问题，需要解决！

4.2 同步和异步

同步和异步就可以解决前面提出的问题！

1. 同步
2. 异步
   同步和异步本质区别：在流水线上各个流程的执行顺序不同。

(1) 同步任务

打印结果：

1

2

3

(2) 异步任务

4.3 JS执行机制

举例解释：

主线程中执行

第二步代码只有在鼠标点击了之后才会将函数加载到任务队列中！

5. location 对象

5.1 什么是location 对象

5.2 URL

5.3 location 对象属性

*案例--5s之后自动跳转页面

注意：

定时器对象在页面刷新时个了几秒后才出现，对此我们的解决方法是：将定时器对象的函数部分放入自定义的函数中，（即在执行程序时函数会先会准备好，定时器就会直接执行，舒心是就不会有时间间隔）

*案例--获取URL参数

URL参数：URL中？之后的内容就是URL参数。

第二个页面数据使用第一个页面数据需要使用location.search 参数

location.search :

怎样去掉'？'
利用 = 把字符串分割为数组

接着把数据写入第二个页面中

效果展示：

5.4 location 对象的方法

6. navigator 对象

navigator 对象可以判断页面是在pc端还是web端

7. history 对象