web API
变量声明const声明的值不能更改，而且const声明变量的时候需要里面举行初始化，但对于引用数据类型，const声明的变量，里面存的自己值，是地址
https://i-blog.csdnimg.cn/direct/e4d61bfd0f034151804625832e151e99.png
DOM
DOM（document object model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API,是浏览器提供的一套专门用来操作网页内容的功能，用来开发网页内容和实现用户交互
DOM树
将HTML文档以树状结构直观的体现出来，我们称之为文档树或DOM树，文档树直观的体现了标签与标签之间的关系
https://i-blog.csdnimg.cn/direct/a8db364862e14fceb88d864feb8b195b.png
DOM对象
浏览器根据html标签天生的JS对象，所有的标签属性都可以在这个对象上找到，修改这个对象的属性会自动映射到标签身上
DOM的核心思绪：把网页内容当做对象来处理
document对象是DOM里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页的例如：document.write(),网页所有内容都在document里面
获取DOM元素
1.根据css选择器来获取DOM元素（重点）
选择匹配的第一个元素
获取一个DOM元素可以直接操作修改
语法：document.querySelector('css选择器')
参数：包罗一个或多个有用的css选择器字符串
返回值：css选择器匹配的第一个元素，一个HTMLElement对象
https://i-blog.csdnimg.cn/direct/71801503594b4098af73b33da381c252.png
选择匹配的多个元素
获取多个DOM元素不能直接修改，只能通过遍历的方式依次给里面的元素做修稿
语法：document.querySelectorAll('css选择器')
参数：包罗一个或多个有用的css选择器字符串
返回值：css选择器匹配的NodeList对象聚集
https://i-blog.csdnimg.cn/direct/787dd4a5f8624c889e88e9555035d6e3.png
document.querySelectorAll('css选择器')
得到的是一个伪数组：
有长度有索引号的数组，但是没有pop() push()等数组方法，想要得到里面的每一个对象，则需要遍历（for）的方式获得
操作元素内容
1. 对象.innerText属性
https://i-blog.csdnimg.cn/direct/e5fd060a59aa4cb6b121c0c8f716483e.png
修改之后的控制台
https://i-blog.csdnimg.cn/direct/735eef00f4c14dcfa25113cf493282ca.png
将文本内容添加/更新到任意标签位置，显示纯文本，不分析标签
2. 对象.innerHTML属性
将文本内容添加/更新到任意标签位置，会分析标签，多标签发起使用模板字符
修改元素常见的属性
https://i-blog.csdnimg.cn/direct/923571d9dc6847fab270b768377541ec.png
随机天生图片案例（每革新一次显示一张不同的图片）：
https://i-blog.csdnimg.cn/direct/9e30df7e6a004c7a95e934d479c5afff.png
1.通过style属性操作css
语法：
对象.style.样式属性=值
https://i-blog.csdnimg.cn/direct/20e523951a054d0383011c444d596a3f.png
注意：
修改样式通过style属性引出，如果属性有-连接符（如：background-color）,需要转换为小驼峰定名法，赋值的时候，需要时不要忘记加css单位
2.操作类名（className）操作css
如果修改的样式比力多，直接通过style属性修改比力繁琐，我们可以通过借助于css类名的形式
语法：
元素.className='active' //active是一个css类名
注意：由于class是关键字，所以使用className去代替，className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
https://i-blog.csdnimg.cn/direct/81c92c364b33409a956ea8c91603dfc4.png
直接在style里面修改多个样式比用style修改更简便，直接使用className赋值会覆盖以前的类名
3.通过classList操作类控制css
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
https://i-blog.csdnimg.cn/direct/a4705ab691194de2876e88e1be9a4873.png
https://i-blog.csdnimg.cn/direct/7a04912976f84c94a527e261fdeab5e3.png
操作表单属性
表单许多环境下也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框，正常的有属性的取值跟其他的标签属性没有任何区别
获取：DOM对象.属性名
设置：DOM对象.属性名=新值
https://i-blog.csdnimg.cn/direct/56b924b5136f40cb9924adf985d49920.png
表单属性中添加就有用果，移除就没有用果，一律使用布尔值表示如果是true代表添加了该属性如果是false代表移除了该属性 比如：disabled,checked
https://i-blog.csdnimg.cn/direct/47bb814f2469460a9fb4db29735d2b9f.png
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取（set聚集的意思）
定时器—间歇函数
要实现每隔一段时间自动实行一段代码，不需要我们手动去触发 例如：网页中的倒计时 要实现这种需求，需要定时器函数
定时器函数可以开启和关闭定时器
1.开启定时器
setInterval(函数，间隔时间)
作用：每隔一段时间调用这个函数，间隔时间单位是毫秒
https://i-blog.csdnimg.cn/direct/ff30988d24324db49a504332233487f2.png
这里用的是匿名函数
当调用非匿名函数时逗号前只写函数名不要加括号
https://i-blog.csdnimg.cn/direct/1702f8a24d464654be73c47eee5d6fdb.png
定时器返回的是一个id数字
关闭定时器
语法：
https://i-blog.csdnimg.cn/direct/37c981627c0b45b885c4d91d71d56c2c.png
https://i-blog.csdnimg.cn/direct/3386b80eb1094c1ba4381935aa8bf7c2.png
这里不能用const而用let关闭定时器后再次开启相称于重新赋值即n=setInterval(fn,1000),用const会报错
button比力特殊虽然是表单标签但不消value而用innerHTML来获取，它是一个双标签
事件监听
语法：
元素对象.addEventListener('事件类型'，要实行的函数)
事件监听的三要素：
事件源：那个dom元素被触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等
事件调用的函数：要做什么事
https://i-blog.csdnimg.cn/direct/bfdb6f816f4c4468ad0a4176878a519a.png
核心事件
focus 获得核心
blur 失去核心
https://i-blog.csdnimg.cn/direct/19a1a7ce5b0a4c23b232504efd2bcdbc.png
键盘事件
https://i-blog.csdnimg.cn/direct/2b8e0ad7f5844884b0c23ee8c9f6e53a.png
用户输入文本事件
https://i-blog.csdnimg.cn/direct/8e1aa1d96d04487f9eb4eaad02a3fb68.png
获取事件对象
事件对象也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
使用场景：可以判断用户按下了哪个键，比如按下回车键可以发布消息，可以判断鼠标点击了那个元素，从而做相应的操作
语法：如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般定名为event,ev,e
元素.addEventListener('click',function(e){ })
事件对象的常见属性：
type:获取当前的事件类型
clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
key:用户按下的键盘键的值，如今不提倡使用keycode
trim:
https://i-blog.csdnimg.cn/direct/cb10ef81fef94325ab2ad10496e56e52.png
环境对象
指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们的代码更简便。函数的调用方式不同，this指代的对象也不同 ‘谁调用，this就是谁’ 是判断this指向的大抵规则
https://i-blog.csdnimg.cn/direct/1c58c0dfeed0428f8e3f8e7c0e41c293.png
回调函数
如果将函数A作为参数通报给函数B，我们称函数A为回调函数，简朴来说就是当一个函数当做参数来通报给另外一个函数的时候，这个函数就是回调函数
https://i-blog.csdnimg.cn/direct/813f00df4ed24c3a84c9e2978be69773.png
https://i-blog.csdnimg.cn/direct/c8e3a816c12646d1b250bb309e1a60ee.png
tab栏切换案例
<!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>tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav h3 {
font-size: 24px;
font-weight: normal;
margin-left: 20px;
}
.tab-nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
}
.tab-content .item {
display: none;
}
.tab-content .item.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>每日特价</h3>
<ul>
<li><a class="active" href="javascript:;">精选</a></li>
<li><a href="javascript:;">美食</a></li>
<li><a href="javascript:;">百货</a></li>
<li><a href="javascript:;">个护</a></li>
<li><a href="javascript:;">预告</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="./images/tab00.png" alt="" /></div>
<div class="item"><img src="./images/tab01.png" alt="" /></div>
<div class="item"><img src="./images/tab02.png" alt="" /></div>
<div class="item"><img src="./images/tab03.png" alt="" /></div>
<div class="item"><img src="./images/tab04.png" alt="" /></div>
</div>
</div>
<script>
//1.a模块制作 要给五个链接绑定鼠标经过事件
//1.1获取a元素
const as = document.querySelectorAll('.tab-nav a')
const items = document.querySelectorAll('.tab-content .item')
// console.log(as)
for (let i = 0; i < as.length; i++) {
as.addEventListener('mouseenter', function () {
// console.log('鼠标经过')
//排他思想 移除类active
document.querySelector('.tab-nav .active').classList.remove('active')
//添加类active this当前的那个a
this.classList.add('active')
//下面五个盒子一一对应 .item
//干掉别人
document.querySelector('.tab-content .active').classList.remove('active')
//对应序号的那个item显示 添加active类
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
})
}
</script>
</body>
</html> 事件流
事件流指的是事件完整实行过程中的活动路径
https://i-blog.csdnimg.cn/direct/d83560fcb57b4976b5f57e7730c9f09d.png
假设页面里有一个div，当触发事件时，会经历两个阶段，分别是捕获阶段，冒泡阶段。简朴来说：捕获阶段是从父到子 冒泡阶段是从子到父，现实工作都是使用事件冒泡为主
事件捕获：
从DOM的根元素开始去实行对应的事件（从外到里），事件捕获需要写对应代码才能看到效果
代码：
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
说明：
addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
若传入false代表冒泡阶段触发，默认就是false
如果用L0事件监听，则只有冒泡阶段，没有捕获
事件冒泡
当一个元素的事件被触发时，同样的事件将会在该元素的所有先人元素中依次触发。这一过程被称为事件冒泡。简朴明白：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件（这里的同名指的是同一种类型，比如说都是点击‘click’）
事件冒泡是默认存在的
L2事件监听第三个参数是false,或者默认都是冒泡
阻止冒泡
由于默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件就限制在当前元素内，就要阻止冒泡但前提是要拿到事件对象
语法：
事件对象.stopPropagation( )
此方法可以阻止事件活动传播，不光在冒泡阶段有用，捕获阶段也有用
https://i-blog.csdnimg.cn/direct/0df433246e5c4388b2225df2c1ead6b4.png
解绑事件
on事件方法，直接使用null覆盖就可以实现事件的解绑
https://i-blog.csdnimg.cn/direct/6a115273528c41f6b10eadd25f2ea737.png
addEventListener方式，必须使用：
removeEventListener（事件类型，事件处理函数，[获取捕获或者冒泡阶段]）
https://i-blog.csdnimg.cn/direct/bfcc039ae3124c9d885db4ab271b3beb.png
注意：匿名函数无法被解绑
鼠标经过事件：
mouseover和mouseout会有冒泡效果（当鼠标经过子盒子时也会打印鼠标经过由于mouseover和mouseout有冒泡效果）
https://i-blog.csdnimg.cn/direct/a94a675cf5d6415b8010ef943104d0e5.png
mouseenter和mouseleave没有冒泡效果（推荐）
两种注册事件的区别：
传统on注册（L0）
同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段实行的
事件监听注册（L2）
语法：addevent Listener（事件类型，事件处理函数，是否使用捕获）
后面注册的事件不会覆盖前面注册的事件（同一个事件）
可以通过第三个参数去确定是在冒泡或者捕获阶段实行
必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)
匿名函数无法被解绑
事件委托
事件委托是使用事件流的特征解决一些开发需求的只是技巧
优点：减少注册次数，可以提高程序性能
原理：使用事件冒泡的特点
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
事件委托给父元素，使用事件对象.target.tagName来找到真正触发的元素
阻止元素默认举动
https://i-blog.csdnimg.cn/direct/73de1b484c634c138e81bc7e1b39c4e9.png
其他事件
1.页面加载事件
加载外部资源（如图片，外联css和javascript等）加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事变，老代码喜好把script写在head中，这时候直接找dom元素找不到
事件名：load
监听页面所有资源加载完毕：
给window添加load事件
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
https://i-blog.csdnimg.cn/direct/f5e48088a437404ba53ef36c36671e3a.png
当初始的HTML文档被完全加载和分析完成之后，DOMContentLoaded事件被触发，而无需等待样式表，图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完成：
给document添加DOMContentLoaded事件
https://i-blog.csdnimg.cn/direct/040a293896b84577a05e38ec9dae9d98.png
load事件监听整个页面资源给window加
DOMContentLoaded给document加，无需等待样式表、图像等完全加载
2.页面滚动事件
滚动条在滚动的时候触发的事件，许多网页需要检测用户把页面滚动到某个地区后做一些处理，比如固定导航栏·，比如返回顶部
事件名：scroll
监听整个页面滚动
https://i-blog.csdnimg.cn/direct/b4a2e560299641f988d98fa441296a4c.png
给window或document添加scroll事件，监听某个元素的内部直接给某过热元素即可
页面滚动事件-获取位置
scrollLeft和scollTop(属性)
获取被卷去的巨细，获取元素内容网左、往上滚出去看不到的间隔，这两个值是可读写的
页面滚动事件-滚动到指定的坐标
https://i-blog.csdnimg.cn/direct/56bb06bf7db140ab80036458ea3deab9.png
scrollTo()方法可以把内容滚动到指定的坐标
语法：
元素.scollTo(x,y)
https://i-blog.csdnimg.cn/direct/2a0aa4269129465985a5e9f1c63aeeda.png
页面尺寸事件
会在窗口尺寸改变的时候触发事件：resize
https://i-blog.csdnimg.cn/direct/b09be4ac33c8464b8bd17556766241dd.png
检测屏幕宽度
https://i-blog.csdnimg.cn/direct/9558c205ce1c4f21a501e1b51feee480.png
获取宽高
获取元素的可见部分宽高（不包罗边框，margin,滚动条等）
clientWidth和clientHeight
https://i-blog.csdnimg.cn/direct/e426e8887d444694b91ce12d78698213.png
offsetWidth和offsetHeight
获取元素的自身宽高、包罗元素滋生设置的宽高、padding、border（即内容+padding+border），获取出来的是数值，方便盘算 ,得到的位置以带有定位的父级为准 如果都没有则以文档左上角为准
注意：获取的是可视宽高，如果盒子是隐蔽的，获取的效果是0
获取位置：
获取元素间隔自己定位父级元素的左，上间隔
offsetLeft和offerTop注意是只读属性
element.getBoundingClientRect(),方法返回元素的巨细及其相对于视口的位置
https://i-blog.csdnimg.cn/direct/89358beb174a49c9895539f730eea153.png
日期对象：
实例化
目的：可以或许实例化日期对象
在代码中发现了new关键字时，一般将这个操作称为实例化，创建一个时间对象并获取时间
获得当前时间
const data = new Date()
获得指定时间
https://i-blog.csdnimg.cn/direct/d18f83273f2146928ddad4f725f334d2.png
日期对象方法
目的：可以或许使用日期对象中的方法写出常见日期
使用场景：由于日期对象返回的数据我们不能直接使用，所以需要转换为现实开发中的常用格式
方法作用说明getFullYear()获得年份获取四位年份getMonth()获得月份取值为0~11getDate()获取月份中的每一天不同月份取值也不相同getDay()获取星期取值为0~6getHours()获取小时取值为0~23getMinutes()获取分钟取值为0~59getSeconds()获取秒取值为0~59 时间戳
目的：可以或许获得当前时间戳
使用场景：如果盘算倒计时效果，前面方法无法直接盘算，需要借助于时间戳完成
时间戳是指1970年01月01日00时00分00秒起至如今的毫秒数，它是一种特殊的计量时间的方式
算法：
未来的时间戳 - 如今的时间戳 = 剩余时间的毫秒数
剩余时间的毫秒数转换为剩余时间的 年 月 日 时 分 秒就是倒计时时间
三种方法获取时间戳：
1.使用getTime()方法
https://i-blog.csdnimg.cn/direct/35a02e11c052419692b835972c3e0235.png
2.简写+new Date()
无需实例化
https://i-blog.csdnimg.cn/direct/e82f6e634285433e8f22983c2cbc3780.png
3.使用Date.now()
无需实例化
但是只能得到当前的时间戳，前面两种可以返回指定时间的时间戳
https://i-blog.csdnimg.cn/direct/026d7705efdc4d8db1b87168bfa48267.png
https://i-blog.csdnimg.cn/direct/45f73a5932ec469c89d7fac0072066fd.png
节点操作
DOM节点
DOM树里每一个内容都称之为节点
节点类型
元素节点
所有的标签比如body,div
html是根节点
属性节点
所有的属性比如href，class
文本节点
所有的文本
查找节点
父节点查找：
parentNode属性，返回最近一级的父节点找不到返回null
https://i-blog.csdnimg.cn/direct/3afcb04122b1426c817427d7e9431064.png
查找节点
子节点查找：childNodes,获得所有子节点包罗文本节点（空格，换行），解释节点
children属性（重点）
仅获得所有元素节点
返回的还是一个伪数组
https://i-blog.csdnimg.cn/direct/c95150476af5460aa3ff4240085cd7f4.png
查找兄弟节点
https://i-blog.csdnimg.cn/direct/b62e79ab3fb0480b8fc6466b9c2735c0.png
增加节点
创建一个新的节点，把创建的新的节点放入到指定的元素内部
创建节点即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后再插入节点
追加节点
要想在界面看到，还得插入到某个父元素中
1.插入到父元素的最后一个子元素：
https://i-blog.csdnimg.cn/direct/b8fdc407ff9e4e229021035b559f922e.png
2.插入到父元素中某个子元素的前面：
https://i-blog.csdnimg.cn/direct/daa9d73b0e5149689262964fc0345fbb.png
特殊环境下我们新增节点按照一下操作：
复制一个原有的节点，把复制的节点放入到指定的元素内部
克隆节点
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true则代表克隆时会包罗子女节点一起克隆；若为false，则代表克隆时不包罗子女节点。默认为false(只克隆标签)
删除节点：
在js原生DOM操作中，要删除元素必须通过父元素删除
语法：
https://i-blog.csdnimg.cn/direct/3a38fc3518b24e42a63a40efc4c7218e.png
注意：如不存在父子关系则删除不成功，删除节点和隐蔽节点（display:none）是有区别的;隐蔽节点还是存在的，但是删除即从html中删除节点
M端事件
移动端也有自己独特的地方，比如触屏事件touch(也称触摸事件)，touch对象代表一个触摸点。触摸点可能是一根手指，也可以是一根触摸笔。触屏事件可相应用户手指（或触控笔）对屏幕或者触控板操作
常见的触屏事件如下：
触屏touch事件说明touchmove手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发
window对象
1.1 BOM
BOM是浏览器对象模型，window对象是一个全局对象，也可以说是js中的顶级对象，所有通过var定义在全局作用域中的变量(let 和 const作用域是块级)、函数都会酿成window的属性和方法，window对象下的属性和方法调用的时候可以省略window
定时器-延时函数
语法：
https://i-blog.csdnimg.cn/direct/47f014a558b146888358217a6d48c49e.png
js内置的一个用来让代码延迟实行的函数，叫setTimeout，setTimeout仅仅只实行一次，所以可明白为把一段代码延迟实行，平时省略window
扫除延时函数：
https://i-blog.csdnimg.cn/direct/f2474e1fe1ff41879193d9d5137529c0.png
延时器需要等待，所以后面的代码先实行，每一次调用延时器都会产生一个新的延时器
五秒自动关闭的广告：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
position: fixed;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<img src="./images/ad.png" alt="">
<script>
//1.获取元素
const img = document.querySelector('img')
setTimeout(function () {
img.style.display = 'none'
}, 3000)
</script>
</body>
</html> js实行机制
先实行实行栈中的同步任务，异步任务放入任务队列中去
一旦实行栈中的所有同步任务实行完毕，体系就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入实行栈，开始实行
https://i-blog.csdnimg.cn/direct/983c4c72b283408e9e21025b591da90d.png
js语言的一大特点就是单线程，也就是说，同一个时间只能做一件事
同步：前一个任务结束后再实行后一个任务，程序的实行顺序与任务的排列顺序是同等的、同步的。比如说做饭的同步：我们要烧水煮饭，等水开了（非常钟后）再去洗菜切菜
异步：在做一件事的时候，我们可以去处理其他事变
它们的本质区别是：这条流水线上各个流程的实行顺序不同
同步任务都在主线程上实行，形成一个实行栈；异步任务，异步是通过回调函数实现的
异步任务：
一般而言，异步任务有一下三种类型：
1.普通事件，如click,resize等
2.资源加载，如load,error等
3.定时器，包罗setInterval,setTimeout等
异步任务相关添加到任务队列中（任务队列也称为消息队列）
由于主线程不断的重复获得任务、实行任务、在获取任务、在实行任务，所以这种机制被称为事件循环（event loop）
location对象
location的数据类型是对象，它拆分并保存了URL地址的各个注册部分
常见的属性和方法：
search属性获取地址中携带的参数，符号？后面部分
https://i-blog.csdnimg.cn/direct/5374c9943cb04ea3aaa7044c1c8e7e9b.png
hash属性获取地址中的哈希值，符号#后面部分
console.log(location.hash)
https://i-blog.csdnimg.cn/direct/a7a7d817960540429fe080b988ff70fa.png
reload方法用来革新当前界面，传入参数true时表示逼迫革新
https://i-blog.csdnimg.cn/direct/bedb5a269b2345199781af11f9a3d5b1.png
navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
常用的属性和方法：
通过userAgent检测浏览器的版本及平台
history对象
history的数据类型是对象，主要管理汗青记录，该对象与浏览器地址栏的操作相对应，如前进、后退、汗青记录等
常用属性和方法：
当地存储分类-localStorage
可以将数据永世存储在当地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：可以多窗口(页面)共享（同一浏览器可以共享），以键值对的形式存储使用
存储数据：localStorage.setltem(key,value)
获取数据：localStorage.getltem(key)
https://i-blog.csdnimg.cn/direct/b084f75fd06e4142a7489d8323a49143.png
当地存储分类-sessionStorage
特性：
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
用法和localStorage根本相同
存储复杂数据类型
解决：需要将复杂数据类型转换成JSON字符串，再存储到当地
语法：JSON.stringify(复杂数据类型)
https://i-blog.csdnimg.cn/direct/32e917bee85947aea2f9a4eeff3ec13f.png
https://i-blog.csdnimg.cn/direct/4483a1072e6f4a7492708693dc9e1efa.png
https://i-blog.csdnimg.cn/direct/4251d965e32b4de7887d7a4c07591fc1.png
数组中的map方法 迭代数组
使用场景：map可以遍历数组处理数据，并且返回新的数组
map也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系
map重点在于有返回值，forEach没有返回值
https://i-blog.csdnimg.cn/direct/236f80b38c504252a4591f41b820ef62.png
join()方法用于把数组中的所有元素转换成一个字符串
数组元素是通过参数里面指定的分隔符举行分隔的，空字符串（‘’），则所有元素之间都没有任何字符
https://i-blog.csdnimg.cn/direct/9122ef0b0ac84e6ca6d2741a477388f7.png
正则表达式
正则表达式是用于匹配字符串中字符组合的模式。在js中 正则表达式也是对象 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式
1.定义规则
定义正则表达式语法
const 变量名= /表达式/ （其中/ /是正则表达式字面量）
2.查找
判断是否有符合规则的正则表达式
test()方法 用来检察正则表达式与指定的字符串是否匹配
语法：
reObj.test(被检测的字符串)
如果正则表达式与指定的字符串匹配，返回true,否则false
https://i-blog.csdnimg.cn/direct/8f2e72e9801a440981bc74162cebaf7b.png
exec()方法用于检索（查找）符合规则的字符串
exec()方法 在一个指定字符串中实行一个搜刮匹配
语法：
regObj.exec(被检测字符串)
如果匹配成功，exec()方法返回一个数组，否则返回null
元字符
元字符（特殊字符）：是一些具有特殊寄义的字符，可以极大提高灵活性和强大的匹配功能。比如，规定用户只能输入英文26个字母，用普通字符abcdefghijk……，但是换成元字符写法：
为了方便记忆和学习，我们对众多的元字符举行了分类：
1.界限符
表示位置，开头和结尾，必须用什么开头，用什么结尾
正则表达式中的界限符（位置符）用来提示字符所处的位置，主要有两个字符
界限符说明^表示匹配行首的文本（以谁开始）$表示匹配行尾的文本（以谁结束）
如果^和$在一起，表示必须是准确匹配
https://i-blog.csdnimg.cn/direct/00aa8ec6687f42d9a9d7341a80f834de.png
2.量词
表示重复次数
量词用来设定某个模式出现的次数
量词{n,m} 逗号左右两侧千万不能有空格
量词说明*重复零次或更多次+重复一次或更多次？重复零次或一次{n}重复n次{n,}重复n次或更多次{n,m}重复n到m次
3.字符类
比如 \d 表示0~9
[ ]匹配字符集聚集
后面的字符串只要包罗abc中任意一个字符，都返回true
[ ]里面加上-连字符
使用连字符-表示一个范围
比如：表示a到z26个英笔墨母都可以；表示巨细写都可以；表示0~9的数字都可以
eg:腾讯QQ号: ^{4,}$ (腾讯QQ号从10000开始)
[ ]里面加上^取反符号，比如[^a-z]匹配除了小写字母以外的字符，注意要写到中括号里面
.匹配除换行符之外等待任何单个字符
预定义
预定义指的是某些常见模式的简写方式
日期格式：^\d{4}-\d{1,2}-\d{1,2}
预定类说明\d匹配0-9之间的任一数字，相称于\D匹配所有0-9以外的字符，相称于[^0-9]\w匹配任意的字母、数字和下划线，相称于\W 除所有字母、数字和下划线以外的字符，相称于[^A-Za-z0-9_]
\s匹配空格（包罗换行符、制表符、空格符等），相称于[\t\r\n\v\f]\S匹配非空格，相称于[^\t\r\n\v\f]
修饰符
修饰符约束正则实行的某些细节举动，如是否区分巨细写，是否支持多行匹配等
语法：/表达式/修饰符
i是单词ignore的缩写，正则匹配时字母不区分巨细写（只能替换一个，替换多个时要用全局）
https://i-blog.csdnimg.cn/direct/5c5e2e721fac4e33bd695f297d7b4648.png
g是单词global的缩写，匹配所有满足正则表达式的效果
替换replace
语法：字符串.replace(/正则表达式/ , '替换的文本' )
https://i-blog.csdnimg.cn/direct/e8f33c0f42794b5b856f10a66a4e76ce.png
https://i-blog.csdnimg.cn/direct/367f6621eb084a46b0dab1493176bdaf.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]