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 对象)
  • [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 指向调用他的那个对象。


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 对象的方法


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

7. history 对象



相关推荐
江城开朗的豌豆1 分钟前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js
全宝3 分钟前
🚀 一文搞定 claude code:国内环境下的安装、配置与体验
前端·ai编程·claude
寻觅~流光8 分钟前
封装---优化try..catch错误处理方式
开发语言·前端·javascript·typescript
csj5011 分钟前
前端基础之《Vue(22)—安装MongoDB》
前端·vue
今天也在写bug13 分钟前
输入npm install后发生了什么
前端·npm·node.js
玲小珑38 分钟前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js
前端小巷子40 分钟前
web实现文件的断点续传
前端·javascript·面试
小磊哥er41 分钟前
【前端工程化】前端项目怎么做代码管理才好?
前端
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js