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)]
<script> setTimeout(fun,1000) </script>
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>Document</title>
<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>Document</title>
</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>Document</title>
</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>
<!-- <tr>
<td>1</td>
<td>这是名称</td>
<td>这是年龄</td>
<td>这是性别</td>
<td>这是工资</td>
<td>这是所在城市</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr> -->
</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 data-index="2" href="javascript:" class="del">删除</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 += `
<tr>
<td>${arr[index].id}</td>
<td>${arr[index].uname}</td>
<td>${arr[index].age}</td>
<td>${arr[index].gender}</td>
<td>${arr[index].salary}</td>
<td>${arr[index].city}</td>
<td>
<a data-index="${index}" href="javascript:" class="del">删除</a>
</td>
</tr>
`;
}
// 把生成的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.html</title>
<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>