Window对象
BOM(浏览器对象模型)
BOM全称：Browser Object Model 浏览器对象模型
Window
是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的，如上图所示，window 对象下包含了以上5个属性，也就是所谓的 BOM （浏览器对象模型）
定时器-延时函数
// 延时器 - 只会执行一次
let timeid = setTimeout(function () {
// 三秒后自动消失
document.querySelector('div').style.display = 'none'
},3000)
// 取消延时器
clearTimeout(timeid);
两种定时器对比：setInterval 的特征是重复执行，在第一次执行时会延时，setTimeout 的特征是延时执行，只执行1次
JS执行机制
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
本质区别：这条流水线上各个流程的执行顺序不同。
location对象
href 属性获取完整的 URL 地址，对其赋值也能实现页面跳转
// 得到当前文件的URL地址
console.log(location.href);
// 通过JS方式跳转页面
location.href = 'https://www.sina.com.cn/'
// 实现页面刷新
location.href = location.href
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
const button = document.querySelector('button')
button.addEventListener('click',function () {
// true = 强制刷新
location.reload(true)
})
hash 属性获取地址中的哈希值，符号 # 后面部分
// 获取 # 后面的一串字符
console.log(location.hash);
search 属性获取地址中携带的参数，符号 ？后面部分
// 获取url上 ？ 后面的一串字符
console.log(location.search);
navigator对象
navigator作用是检测当前浏览器的版本和型号，可以识别出当前的访问设备是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.itcast.cn'
}
})()
histroy对象
history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到
<body>
<button class="forword">前进页面</button>
<button class="back">后退页面</button>
<script>
// history对象方法
// 1. back()：后退
// 2. forward()：前进
// 3. go(参数)：前进和后退
const forword= document.querySelector('.forword')
const back= document.querySelector('.back')
forword.addEventListener('click',function () {
history.forward() // 前进一个页面记录
//history.go(1) // 作用同上
})
back.addEventListener('click',function () {
history.back() // 后退一个页面记录
//history.go(-1) // 作用同上
})
</script>
</body>
swiper 插件
主流的开源轮播图网站之一，里面有各种各样的轮播图样式可以免费使用。网址：www.swiper.com.cn
使用步骤：打开swiper 官网首页→ 点击获取swiper - 下载swiper → 点击下载swiper -7.4.1到文件夹 → 下载完成回到swiper → 点击开始使用
查看样式：打开swiper 官网首页 → 点击在线演示 - swiper基础演示 → 下载好的文件里，在命名前面有序号，这些序号对应着演示页面的序号
本地存储
localStorage
除非主动删除，否则数据就会一直存在，还可以多窗口（页面）共享（同一浏览器可以共享）
JSON.stringify(复杂数据类型)：将复杂数据转换成JSON字符串，存储在本地存储中
JSON.parse(JSON字符串)：将JSON字符串转换成对象取出时候使用
sessionStorage
在页面关闭后，数据就会丢失，在同一个窗口(页面)下数据可以共享
四个通用API
存储：localStorage / essionStorage.setItem(key, value)
获取：localStorage / essionStorage.(key)
删除：localStorage / essionStorage.(key)
清空：localStorage / essionStorage.(key)
拓展---标签属性
固有属性
像id，href，src，type等这些属性都属于标签的固有属性
//固有属性可以通过 获取dom元素的固有属性 通过点语法来获取
const a = document.querySelector('a')
// 直接修改
a.href = 'http://www.qq.com'
自定义属性
获取：dom.getAttribute('属性名')
<a href="" hello="你好" aa="bb"></a>
// 获取dom元素
const a = document.querySelector('a')
a.getAttribute("hello") // hello自定义命名
a.getAttribute("aa") // aa自定义命名
设置：dom.setAttribute(key,value)
a.setAttribute("hello","123");
删除：dom.removeAttribute(key)
a.removeAttribute("hello");
其中，getAttribute的功能最强大，它可以获取到任意的属性（固有属性和h5建议的自定义属性）
h5建议自定义属性
修改：dom.dataset.自定义属性名 = '属性值'
a.dataset.index = 3
获取：dom.dataset.自定义属性名
a.dataset.index
作用：存数据 - 方便后期事件触发了获取之前存的数据，比如index
