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 = `支付成功，<span>${num}</span> 秒之后跳转首页`
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同时使用的时候, 类名需要注意区分
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="./images/b_01.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img src="./images/b_02.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img src="./images/b_03.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img src="./images/b_04.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img src="./images/b_05.jpg" alt=""></a></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script src="./swiper/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
effect: 'cube',
// 自动播放
autoplay: {
delay: 2000,
stopOnLastSlide: false,
disableOnInteraction: false,
// 鼠标悬停停止
pauseOnMouseEnter: true,
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
// 鼠标点击切换
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
})
本地存储
localStorage
- 生命周期永久生效，除非手动删除 否则关闭页面也会存在
- 以键值对的形式存储使用
存储数据：localStorage.setItem(key, value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
存储复杂数据类型存储
本地只能存储字符串, 无法存储复杂数据类型
需要将复杂数据类型转换成JSON字符串,在存储到本地
JSON.stringify(复杂数据类型)：将复杂数据转换成JSON字符串--- 存储 本地存储中
JSON.parse(JSON字符串)：将JSON字符串转换成对象---取出 时候使用
sessionStorage（了解）
- 生命周期为关闭浏览器窗口
- 以键值对的形式存储使用
- 用法跟localStorage 基本相同
综合案例：本地存储-学生信息表案例
// 准备好数据后端的数据
let arr = [
{
uname: '欧阳霸天',
age: 19,
gender: '男',
salary: '20000',
city: '上海',
},
{
uname: '令狐霸天',
age: 29,
gender: '男',
salary: '30000',
city: '北京',
},
{
uname: '诸葛霸天',
age: 39,
gender: '男',
salary: '2000',
city: '北京',
}
]
// 判断存的数据是否为空，不为空的话就把里面的值解析后传给arr
if (localStorage.getItem('stu_arr')) {
arr = JSON.parse(localStorage.getItem('stu_arr'))
}
let tbody = document.querySelector('tbody')
let uname = document.querySelector('.uname')
let age = document.querySelector('.age')
let gender = document.querySelector('.gender')
let salary = document.querySelector('.salary')
let city = document.querySelector('.city')
let add = document.querySelector('.add')
function render() {
tbody.innerHTML = ''
for (let i = 0; i < arr.length; i++) {
let newTr = document.createElement('tr')
newTr.innerHTML = `
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-title="${i}" class="demo">删除</a>
</td>
`
tbody.appendChild(newTr)
}
}
render()
// 录入功能
add.addEventListener('click', function () {
arr.push({
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
})
console.log(arr)
// 录入的时候存储本地数据
localStorage.setItem('stu_arr', JSON.stringify(arr))
render()
})
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
arr.splice(e.target.dataset.title, 1)
// 删除的时候再存一次数据
localStorage.setItem('stu_arr', JSON.stringify(arr))
render()
}
})
