一.window对象
1. BOM(浏览器对象模型)
-
BOM:(Browser Object Model ) 是浏览器对象模型
1.png window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型 ）
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：1.依附于 window 对象的所有属性和方法，使用时可以省略 window
2.在全局作用域下声明的函数也是属于window对象的
3.使用 var关键字 在全局作用域下声明的变量也属于window对象
2.延时器
JavaScript 内置的，用来让代码延迟执行的函数，叫 setTimeout
开启延时器语法：setTimeout(函数, 延时时间)
作用：将函数延时一段时间来执行关闭延时器：clearTimeout(延时器名)
<body>
<button class="btn1">开启定时器</button>
<button class="btn2">解除定时器</button>
<script>
// 需求：将fn函数延时3秒后执行
function fn() {
console.log('此处是fn函数在执行')
}
// 开启延时器语法：setTimeout(函数, 延时时间)
// 作用：将函数延时一段时间来执行
// 关闭延时器：clearTimeout(timerId)
// timerId 延时器的id ==> 开启延时器的返回值
let btn1 = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')
// 开启延时器
btn1.addEventListener('click', function () {
let timer = setTimeout(fn,3000)
})
// 关闭定时器
btn2.addEventListener('click', function () {
clearTimeout(timer)
})
</script>
</body>
setInterval 会每隔一段时间就执行，n次
setTimeout 延时执行，只执行 1 次
3. JS执行机制
- JavaScript 是单线程 编程语言，就是说，同一个时间只能做一件事。
- 单线程执行任务队列的问题： 单线程就意味着，所有任务都需要排队挨个来执行，前一个任务结束，才能轮到后一个任务的执行, 但如果前一个任务 非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。
- 同步与异步任务 为了解决单线程带来的问题，JS中将任务（需要执行的代码）分成两类：
1.同步任务
- 只有前一个任务执行完毕，才能执行后一个任务
- 程序的执行顺序与任务的书写顺序是一致的
- 同步任务会有阻塞
- 异步任务
- 异步任务由 JavaScript 委托给宿主环境(浏览器)进行执行
- 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数
- 异步任务不会有阻塞
3.常见异步任务
注册事件
setTimeout setInterval
Ajax – 后面课程学习
-
事件循环 EventLoop
- 同步任务由 JavaScript 主线程依次来执行
- 异步任务委托给宿主环境（浏览器）执行
- 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
- JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数
- 次序执行 JavaScript 主线程不断重复上面的第 4 步
2.png
4. location对象
location对象，保存了 URL 地址的各个组成部分
- href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
// 1. 获取href属性值，得到完整url地址
console.log(location.href)
// 2. 设置href属性值， 进行页面跳转
location.href = 'https://www.baidu.com'
- search 属性获取地址中携带的参数，符号 ？后面部
- hash 属性获取地址中的哈希值，符号 # 后面部分 后期vue路由的铺垫，实现单页应用，比如 网易云音乐
- reload 方法用来刷新当前页面
5. navigator对象
- navigator对象记录了浏览器自身的相关信息
- 通过 userAgent 检测浏览器的版本及平台:
<script>
// 检测 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 = 'https://www.baidu.com'
}
})()
</script>
6.histroy对象
history 对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
二.本地存储
-
本地存储特性
1、数据存储在用户浏览器中
2、页面刷新不丢失数据
3、容量较大, 约 5M 左右 - localStorage
- 生命周期永久生效，除非手动删除 否则关闭页面也会存在
- 以键值对的形式存储使用
存储数据语法: localStorage.setItem(key, value)
获取数据语法: localStorage.getItem(key)
删除数据语法: localStorage.removeItem(key)
// 存储数据
// 语法： localStorage.setItem('键', '值')
localStorage.setItem('uname','廖东桑')
localStorage.setItem('age','18')
localStorage.setItem('gender','阴阳人')
// 获取数据
// 语法： localStorage.getItem('键')
console.log(localStorage.getItem('uname'))
console.log(localStorage.getItem('age'))
console.log(localStorage.getItem('gender'))
// 删除数据
// 语法： localStorage.removeItem('键')
localStorage.removeItem('gender')
-
复杂数据类型存储
本地只能存储字符串, 无法存储复杂数据类型
需要将复杂数据类型转换成JSON字符串,在存储到本地 -
JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串 存储 本地存储中 -
JSON.parse(JSON字符串)
将JSON字符串转换成对象 取出 时候使用
<body>
<script>
// 演示：本地存储复杂数据
let obj = {
uname: '老王',
age: 38,
skill: '翻墙',
house: '内蒙海景房'
}
// 说明：本地存储只适合存字符串，不能直接将复杂数据类型进行本地存储
localStorage.setItem('a', obj) // [object Object]
// 正确操作
// 存：
// 1. 先把复杂数据进行转换成JSON字符串 JSON.stringify()
// 2. 之后本地存储JSON字符串
JSON.stringify(obj)
// console.log(JSON.stringify(obj))
localStorage.setItem('data', JSON.stringify(obj))
// 取：
// 1. 先取出本地存储的JSON字符串
console.log(localStorage.getItem('data')) //JSON字符串
// 2. 在将JSON字符串解析成JS的复杂数据 JSON.parse()
console.log(JSON.parse(localStorage.getItem('data'))) // js复杂数据
</script>
</body>
- sessionStorage（了解）
- 生命周期为关闭浏览器窗口
- 以键值对的形式存储使用
-
用法跟localStorage 基本相同
4.png
三.自定义属性
固有属性：标签自带的属性（比如： title href src checked...）
自定义属性:程序员自定义的属性（作用：存数据)
操作自定义属性的方法
1. 元素.getAttribute('属性名')
2. 元素.setAttribute('属性名', '值')
3. 元素.removeAttribute('属性名')
自定义属性规范做法： data-自定义属性
在JS操作的时候，通过 dataset来进行操作
