06-BOM- 操作浏览器
06-BOM- 操作浏览器
window对象
BOM(浏览器对象模型)
-
BOM(Browser Object Model ) 是浏览器对象模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jlup6WqG-1650025584363)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649993396853.png)]
-
window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
-
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）
-
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
-
注：依附于 window 对象的所有属性和方法，使用时可以省略 window
定时器-延时函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法
设置延时函数
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-75nrSVq9-1650025584364)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023277529.png)]
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRSEL4Fm-1650025584364)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023509663.png)]
案例
1.广告倒计时5秒关闭
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
text-align: center;
line-height: 300px;
font-size: 20px;
color: white;
}
style>
head>
<body>
<div>这是一个硬核广告div>
<script>
setTimeout(() => {
document.querySelector('div').style.display = 'none'
}, 2000);
setTimeout(fun,1000)
script>
body>
html>
2.结合递归函数使用
递归函数：自己调用自己的函数
结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1vC3ZmVy-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023661429.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
let index = 0
getSum()
function getSum() {
++index;
let time = setTimeout(() => {
getSum()
}, 1000);
console.log(index);
}
script>
body>
html>
JS执行机制
JS 是单线程
JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
同步和异步
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
他们的本质区别： 这条流水线上各个流程的执行顺序不同。
同步任务
同步任务都在主线程上执行，形成一个执行栈。
异步任务
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
- 普通事件，如 click、resize 等
- 资源加载，如 load、error 等
- 定时器，包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中（任务队列也称为消息队列）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9q7eWv8b-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023923651.png)]
JS执行机制
- 先执行执行栈中的同步任务。
- 异步任务放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njmXP6b6-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023997312.png)]
小结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YnyVnOoN-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024020961.png)]
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。
location对象
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法
-
href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QdVFmush-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024163249.png)]
-
search 属性获取地址中携带的参数，符号 ？后面部分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaFOOWu4-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024148218.png)]
-
hash 属性获取地址中的啥希值，符号 # 后面部分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VVWMIRPt-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024196592.png)]
-
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t1eRNyg9-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024221119.png)]
navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法
- 通过 userAgent 检测浏览器的版本及平台
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqwweDlG-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024292631.png)]
histroy对象
history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOJkGL37-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024339489.png)]
history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body><a href="http://www.baidu.com">百度a>
<button class="forward">前进button>
<button class="back">后退button>
<script>
const btn1 = document.querySelector('.forward')
const btn2 = document.querySelector('.back')
btn1.addEventListener('click', function () {
// history.forward(); //前进一个记录
history.go(1) //(想前进几个位置,就写及)前进一个位置
})
btn2.addEventListener('click', function () {
// history.back(); //后退一个记录
history.go(-1)
})
script>
body>
html>
swiper插件
- 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
- 学习插件的基本过程
- 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
- 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
- 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
- 查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
注意: 多个swiper同时使用的时候, 类名需要注意区分
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCwyL5xf-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024451522.png)]
本地存储
1.初识本地存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大，sessionStorage和localStorage约 5M 左右
2.localStorage
特性
- 生命周期永久生效，除非手动删除 否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用（‘key’，value）
使用
-
存储数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gSEXczz3-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992592374.png)]
localStorage.setItem(key, value) -
获取数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERWegfVv-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992672651.png)]
localStorage.getItem(key) -
删除数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahhAXArl-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992719878.png)]
localStorage.removeItem(key) -
清空数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igsx6omC-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992773271.png)]
localStorage.clean()
特点
-
存储复杂数据类型存储
本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
-
JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串 存储 本地存储中
-
JSON.parse(JSON字符串)
将JSON字符串转换成对象 取出 时候使用
案例
本地存储学习信息案例
需求：改为本次存储版本的学习信息表
分析：
- 需求①：读取本地存储数据（封装函数）
如果本地存储有数据，则返回 JSON.parse() 之后的对象
如果本地存储没有数据，则默认写入三条数据，注意存储的利用JSON.stringify() 存 储JSON 格式的数据 - 需求②：渲染模块
先读取本地存储数据，然后渲染 - 需求③：添加模块
注意，先取的最新的本地存储数据，然后追加。新增了数据，要把新数据存储到本地存储别，忘记转换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpTzOy5s-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649989015586.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>08-学生就业薪资-本地存储版本-同学自己去补充title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #721c24;
}
h1 {
text-align: center;
color: #333;
margin: 20px 0;
}
table {
margin: 0 auto;
width: 800px;
border-collapse: collapse;
color: #004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,
th {
border: 1px solid #b8daff;
}
td {
padding: 10px;
color: #666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input {
width: 80px;
height: 25px;
outline: none;
border-radius: 5px;
border: 1px solid #b8daff;
padding-left: 5px;
}
.info button {
width: 60px;
height: 25px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}
style>
head>
<body>
<h1>新增学员h1>
<div class="info">
姓名：<input type="text" class="uname" /> 年龄：<input type="text" class="age" />
性别:
<select name="gender" id="" class="gender">
<option value="男">男option>
<option value="女">女option>
select>
薪资：<input type="text" class="salary" /> 就业城市：<select name="city" id="" class="city">
<option value="北京">北京option>
<option value="上海">上海option>
<option value="广州">广州option>
<option value="深圳">深圳option>
<option value="曹县">曹县option>
select>
<button class="add">录入button>
div>
<h1>就业榜h1>
<table>
<thead>
<tr>
<th>学号th>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>薪资th>
<th>就业城市th>
<th>操作th>
tr>
thead>
<tbody>
tbody>
table>
<script>
// 1.1 定义数组 负责存放表格要显示的数据
// 获取本地存储中的数组（字符串格式） 转成 数组格式
// 第一次打开页面的时候 ，本地存储里面会有数据吗
const strArr = localStorage.getItem('arr')
if (strArr) {
arr = JSON.parse(strArr)
} else {
arr = []
}
const tbody = document.querySelector('tbody');
// 2 给 录入绑定点击事件
const add = document.querySelector('.add');
const uname = document.querySelector('.uname');
const age = document.querySelector('.age');
const gender = document.querySelector('.gender');
const salary = document.querySelector('.salary');
const city = document.querySelector('.city');
// 1.2 根据数组渲染页面
renderTableByArr();
// 2 按钮绑定点击事件
add.addEventListener('click', function () {
// 2.1 创建一个新的对象 把表单数据都合并到对象中
const data = {
// 学号
id: Date.now(),
// 姓名
uname: uname.value,
// 年龄
age: age.value,
// 性别
gender: gender.value,
// 薪资
salary: salary.value,
// 就业城市
city: city.value,
};
// 老师打了一个 断点 来验证 上面的代码 没有写错
// 2.2 给数组插入新的元素
arr.push(data);
// 将新元素存储到本地中
// 将元素转成字符串
const strArr = JSON.stringify(arr)
localStorage.setItem('arr', strArr)
// 2.3 数组发生改变 重新调用渲染页面的函数
renderTableByArr();
// 2.4 表单数据清空
uname.value = '';
age.value = '';
gender.value = '男';
salary.value = '';
city.value = '北京';
});
// 3 tbody绑定点击事件，同时判断被点击的是不是 del 删除标签
tbody.addEventListener('click', function (event) {
// 3.1 判断当前点击的是不是a标签
if (event.target.nodeName === 'A') {
// 删除
// 获取到a标签 上存放的 index
// event.target = a标签的dom元素
// console.dir(event.target.dataset.index)
const index = event.target.dataset.index;
// 3.3 执行数组删除元素
arr.splice(index, 1);
const strArr = JSON.stringify(arr)
localStorage.setItem('arr', strArr)
// 3.4 调用根据数组渲染页面的函数
renderTableByArr();
}
});
// 根据数组渲染表格
function renderTableByArr() {
let html = ``;
for (let index = 0; index < arr.length; index++) {
html += `
${arr[index].id}
${arr[index].uname}
${arr[index].age}
${arr[index].gender}
${arr[index].salary}
${arr[index].city}
${index}" href="javascript:" class="del">删除
`;
}
// 把生成的tr插入到 tbody中
tbody.innerHTML = html;
}
script>
body>
html>
3.sessionStorage（了解）
特性
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage 基本相同
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>11-sessionStorage.htmltitle>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
style>
head>
<body>
<script>
/*
本地存储的技术 sessionStorage 会话（打开页面到关闭页面之间过程 一次会话 ajax node）存储
登录的时候
它的用法和 localStorage 用法一样
区别只有一个
sessionStorage 关闭页面后 数据就丢失
localStorage 除非是用户主动删除 否则一直存在 直到天荒地老
*/
// 存数据
// sessionStorage.setItem("ss",123);
// 取数据
// console.log(sessionStorage.getItem("ss"));
// 删除一个
// sessionStorage.removeItem("ss")
// 清空
// sessionStorage.clear();
script>
body>
html>