window对象
1.BOM(Browser Object Model ) 是浏览器对象模型
2.window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
3.window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型 ）
4.document 是实现 DOM 的基础，它其实是依附于 window
注：依附于 window 对象的所有属性和方法，使用时可以省略 window
// console.log alert等
console.log(1);
window.console.log(1);
延时器
JavaScript 内置的，用来让代码延迟执行的函数，叫 setTimeout
定时器和延时器的区别：定时器间隔一段时间执行一次，不停止的话会一直执行。延时器是间隔时间后，只执行一次，执行后不再执行。
语法：
// 开启延时器
btn1.addEventListener('click', function () {
timeId = setTimeout(fn, 1000)
return timeId
})
// 关闭定时器
btn2.addEventListener('click', function () {
clearTimeout(timeId)
})
案例：5秒后消失的广告
let img = document.querySelector('img')
// 开个延时器，来延时5秒执行隐藏图片的操作
setTimeout(function () {
img.style.display = 'none'
}, 5000)
Js执行机制
JavaScript 是单线程 编程语言，就是说，同一个时间只能做一件事。
单线程执行任务队列的问题： 单线程就意味着，所有任务都需要排队挨个来执行，前一个任务结束，才能轮到后一个任务的执行, 但如果前一个任务 非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题
同步与异步任务
为了解决单线程带来的问题，JS中将任务（需要执行的代码）分成两类：
同步任务：
只有前一个任务执行完毕，才能执行后一个任务
程序的执行顺序与任务的书写顺序是一致的。
同步任务会有阻塞
异步任务：（1.注册事件，2.定时器延时器，3.Ajax – 后面课程学习）
异步任务由 JavaScript 委托给宿主环境(浏览器)进行执行
当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数
异步任务不会有阻塞
事件循环ExentLoop
- 同步任务由 JavaScript 主线程依次来执行
- 异步任务委托给宿主环境（浏览器）执行
- 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
- JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数
- 次序执行 JavaScript 主线程不断重复上面的第 4 步
location对象
location对象，保存了 URL 地址的各个组成部分
常用属性
href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
// 1. 获取href属性值，得到完整url地址
console.log(location.href);
// 2. 设置href属性值， 进行页面跳转
location.href = 'https://www.baidu.com'
案例：5秒后跳转的页面
// 需求：5秒钟之后跳转页面
let a = document.querySelector('a')
let num = 5
let timerID = setInterval(function () {
num--
a.innerHTML = `支付成功，${num} 秒之后跳转首页`
if (num == 0) {
// 要关闭定时器，不能直接跳转，不然用户网络慢的话会有num负数
clearInterval(timerID);
//这里直接给a.href，方便后期修改
location.href = a.href
}
}, 1000)
其他属性和方法：
search 属性获取地址中携带的参数，符号 ？后面部分
hash 属性获取地址中的哈希值，符号 # 后面部分 后期vue路由的铺垫，实现单页应用，比如 网易云音乐
reload 方法用来刷新当前页面
navigator对象
navigator对象记录了浏览器自身的相关信息
常用属性
通过 userAgent 检测浏览器的版本及平台
作用：检测用户登录的设备，从而实现移动端/PC端的自动跳转
// 检测 userAgent（浏览器信息）
(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.jd.com'
} else {
// location.href = 'http://www.jd.com'
}
})()
histroy对象
history 对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：
back()---后退功能
forward()---前进功能
go(参数)---正值前进，负值后退，值的大小表示前进/后退几步
history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
swiper 插件
学习插件的基本过程
1.熟悉官网,了解这个插件可以完成什么需求
https://www.swiper.com.cn/
2.看在线演示, 找到符合自己需求的demo
https://www.swiper.com.cn/demo/index.html
3.查看基本使用流程
https://www.swiper.com.cn/usage/index.html
4.查看APi文档,去配置自己的插件
https://www.swiper.com.cn/api/index.html
注意: 多个swiper同时使用的时候, 类名需要注意区分
