1.Web APIs基本认知
（1）作用与分类
1.作用：使用js去操作html和浏览器。
2.分类：DOM（文档对象模型）、BOM（浏览器对象模型）
（2）DOM
1.定义
DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
2.DOM对象
1.浏览器根据html标签生成的js对象，把html标签当作DOM对象。
2.document对象是最大的对象，属性和方法都用来访问和操作网页内容的，网页所有内容都在document里面。
2.获取DOM对象
（1）根据CSS选择器获取
1.选择匹配的第一个元素
语法：document.querySelector('css选择器')
参数：包含一个或多个CSS选择器字符串
返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，返回null。
2.选择匹配的多个元素
语法：document.querySelectorALL('css选择器')
参数：包含一个或多个CSS选择器字符串
返回值：CSS选择器匹配的NodeList对象集合。如果没有匹配到，返回null。
备注：得到的是一个伪数组：
1.有长度有索引号的数组
2.没有pop( )、push( )等数组方法
3.想要得到每一个对象，需要遍历(for)。
（2）其他获取方法
1.根据id获取一个元素：document.getElementById('nav')
2.根据标签获取一类元素：document.getElementsByTagName('div')
3.根据类名获取元素：document.getElementsByClassName('w')
3.操作元素内容
（1）innerText属性
innerText将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
（2）innerHTML属性
innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
备注：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。
4.操作元素属性
（1）操作元素常用属性
语法：对象.属性 = 值
const img = document.querySelector('img')
img.src = './images/2.webp'
（2）操作元素样式属性
1.通过style属性
语法：对象.style.样式属性 = 值
const box = document.querySelector('.box')
//修改样式属性 对象.style.样式属性 = '值' 后面跟字符串，别忘了跟单位
box.style.width = '300px'
// 多组单词的采取 小驼峰命名法
box.style.backgroundColor = 'hotpink' //background-color
box.style.borderTop='2px solid blue' //可以添加样式
备注：body是唯一的标签，所以可以直接写 document.body.style。
2.通过操作类名(className)
语法：元素.className='类名'
3.通过 classList 操作类
语法：
1.追加类 add( ) //类名不加点，并且是字符串
元素.classList.add('类名')
2.删除类 remove( ) //类名不加点，并且是字符串
元素.classList.remove('类名')
3.切换类 toggle( ) //有还是没有啊， 有就删掉，没有就加上
元素.classList.toggle('类名')
（3）操作表单元素属性
获取：DOM对象.属性名
设置：DOM对象.属性名= 新值
（4）自定义属性
自定义属性：以data-开头的属性，在DOM对象上一律以dataset对象方式获取。
<body>
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset.id) // 1
console.log(one.dataset.spm) // 不知道
</script>
</body>
（5）间歇函数
间歇函数： setInterval，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
语法：setInterval(函数, 间隔时间)
备注：
1.每隔一段时间调用这个函数，时间单位为毫秒。
2.定时器返回的是一个id数字。
关闭定时器：
let 变量名 = setInterval(函数名, 间隔时间)
clearInterval(变量名)
5.事件基础
（1）事件监听
事件：事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。
事件监听：结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。
语法：元素对象.addEventListener('事件类型'，要执行的函数)
三要素：
1.事件源：哪个dom元素被事件触发，要获取dom元素。
2.事件类型：用什么方式触发，比如鼠标单击click，经过mouseover。
3.事件调用的函数：要做什么事。（触发了才能执行，触发一次执行一次）
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('你早呀~')
})
（2）事件类型
1.鼠标事件（鼠标触发）
鼠标点击：click
鼠标经过：mouseenter
鼠标离开：mouseleave
2.焦点事件（表单获得光标）
获得焦点：focus
失去焦点：blur
3.键盘事件（键盘触发）
键盘按下触发：keydown
键盘抬起触发：keyup
4.文本事件（表单输入触发）
用户输入事件：input
input.addEventListener('input', function () {
console.log(input.value) //打印用户输入的内容
})
（3）事件对象
事件对象：任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来。
事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、e 。
语法：
元素.addEventListener('click', function (e) {
}）
常用属性：
e.type：获取当前事件的类型e.clientX/Y：获取光标相对浏览器窗口左上角的位置e.offsetX/Y：获取光标相于当前 DOM 元素左上角的位置e.key：用户按下的键盘键的值
备注：trim( )方法去除字符串左右两侧的空。
（4）环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。this 本质上是一个变量，数据类型为对象。
1.普通函数里面this指向的是window。
function fn() {
console.log(this)
}
fn() //实际上是window.fn()
2.事件监听里面this指向的是调用他的对象，就是函数的调用者。
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log(this) //this指向的是btn对象
// btn.style.color = 'red'
this.style.color = 'red'
})
（5）回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
备注：不会立马执行，等时机成熟才回头调用函数。
6.事件进阶
（1）事件流
事件流指的是事件完整执行过程中的流动路径。
事件捕获：从DOM的根元素开始去执行对应的事件（从外到里）
语法：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
备注：
1.第3个参数为 true 表示捕获阶段触发，false 表示冒泡阶段触发，默认值为 false。
2.若是用L0事件监听，则只有冒泡阶段，没有捕获。
事件冒泡：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发（依次向上调用所有父级元素的同名事件）。
阻止冒泡：阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。
语法：事件对象.stopPropagation( )
备注：
1.前提：阻止冒泡需要拿到事件对象。
2.阻断事件流动，包括冒泡和捕获。
阻止元素默认行为（暂时不要执行原本有的动作）：e.preventDefault()
解绑事件：
传统on事件方式，直接使用null覆盖就可以实现解绑。
addEventListener方式：
语法：removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])
备注：匿名函数无法被解绑。
鼠标经过事件：
mouseover和 mouseout会有冒泡效果，会再次执行父级。
mouseenter和 mouseleave没有冒泡效果 (推荐)
备注：
1.传统on注册（L0）：同一个对象，后面注册的事件会覆盖前面注册（同一个事件）。
2.事件监听注册（L2）：后面注册的事件捕获覆盖前面注册的事件（同一个事件）。
（2）事件委托
事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。
原理：事件冒泡的特点。（给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。）
真正触发的元素：事件对象.target.tagName
（3）其他事件
如果想把script的代码写在body上面的head里面，则要用页面加载事件。
1.页面加载事件：
定义：加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件，有些时候需要等页面资源全部处理完了做一些事情。
事件名：load
监听页面所有资源加载完毕：给window添加load事件。
语法：
window.addEventListener('load', function () {
//执行的操作
}）
备注：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件。
img.addEventListener('load', function () {
// 等待图片加载完毕，再去执行里面的代码
})
当初始的html文档被完全加载和解析完成后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载。
事件名：DOMContentLoaded
监听页面DOM加载完毕：给document添加DOMContentLoaded事件
语法：
document.addEventListener('DOMContentLoaded', function () { //执行的操作 })
2.页面滚动事件
定义：滚动条在滚动的时候持续触发的事件
需求：很多页面需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名：scroll
监听整个页面滚动语法：
window.addEventListener('scroll', function () {
//执行的操作
}）
备注：监听某个元素的内部滚动直接给某个元素加即可。
实际上我们需要在滚动了多少之后执行某件事情。使用scroll检测滚动的距离。
获取位置的属性：scrollLeft和scrollTop
获取被卷去的大小、获取元素内容往左往上滚出去看不到的距离、这两个值是可读写的。
备注：
1.document.documentElement.scrollTop获取的是无单位的数字型，可读写（能获取也能赋值）。
2.滚动到指定坐标用scrollTo( )方法，可把内容滚动到指定坐标。
语法：元素.scrollTo(x,y)
window.scrollTo(0,1000) //让页面滚动到y轴1000像素的位置
3.页面尺寸事件
定义：会在窗口尺寸改变的时候触发事件。
语法：
window.addEventListener('resize', function() { // 执行的代码 })
获取元素宽高：获取元素的可见部分宽高（不包含边框、margin、滚动条，保护padding）
clientWidth：元素可见宽
clientHeight：元素可见高
检测屏幕亮度：
window.addEventListener('resize',function(){
let w=document.documentElement.clientWidth
console.log(w);
})
（4）元素尺寸与位置
1.获取宽高：
（1）获取元素的自身宽高、包含元素自身设置的宽高、padding、border
（2）offsetWidth和offsetHeight
（3）获取出来的是数值,方便计算
（4）注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
2.获取位置：
（1）获取元素距离自己定位父级元素的左、上距离
（2）offsetLeft和offsetTop注意是只读属性
备注：element.getBoundingClientRect( )获取方法返回元素的大小及其相对于视口（可视区）的位置。
| 属性 | 作用 | 说明 |
|---|---|---|
| scrollLeft和scrollTop | 被卷去的头部和左侧 | 配合页面滚动来用，可读写 |
| clientWidth和clientHeight | 获得元素宽度和高度 | 不包含border，margin，滚动条用于js获取元素大小，只读属性 |
| offsetWidth和offsetHeight | 获得元素宽度和高度 | 包含border、padding，滚动条等，只读 |
| offsetLeft和offsetTop | 获取元素距离自己定位父级元素的左、上距离 | 获取元素位置的时候使用，只读属性 |
7.日期对象
（1）实例化
需要借助new关键字来创建日期对象。
1. 得到当前时间 ：
const date = new Date( )
2. 得到指定时间：
const date = new Date('2022-5-1 08:30:00')
（2）日期对象方法
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear( ) | 获取年份 | 获取四位年份 |
| getMonth( ) | 获取月份 | 取值为 0 ~ 11（记得加1） |
| getDate( ) | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay( ) | 获取星期 | 取值为 0 ~ 6（星期天为0） |
| getHours( ) | 获取小时 | 取值为 0 ~ 23 |
| getMinutes( ) | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds( ) | 获取秒 | 取值为 0 ~ 59 |
// 获得日期对象
const date = new Date()
// 使用里面的方法
console.log(date.getFullYear())
console.log(date.getMonth() + 1) // 月份要 + 1
console.log(date.getDate())
console.log(date.getDay()) // 星期几
（3）时间戳
定义：时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。
备注：ECMAScript 中时间戳是以毫秒计的。
算法：
1.将来的时间戳—现在的时间戳=剩余时间毫秒数
2.剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
3.1000ms转换就是0小时0分1秒。
三种获取时间戳的方式；
1.getTime( )方法
2.+new Date()
3.Date.now( )
备注：第一种要实例化，其余不用；第三种只能得到当前的时间戳，前面两种可以返回指定时间的时间戳。所以第二种最方便。
// 我要根据日期 Day() 0 ~ 6 返回的是 星期一
const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
console.log(arr[new Date().getDay()])
8.节点操作
（1）查找节点
节点关系：针对的找亲戚返回的都是对象。
1.查找父节点
语法：子元素.parentNode
备注：返回最近一级的父节点，找不到返回null。
2.查找子节点
childNodes：获得所有子节点，包括文本节点（空格、换行）、注释节点
children属性（重点）：仅获得所有元素节点；返回的还是一个伪数组
语法：父元素.children
3.查找兄弟节点
下一个兄弟：nextElementSibling
上一个兄弟：previousElementSibling
（2）增加节点
在页面中增加元素。
操作：创建一个新的节点，把创建的新的节点放入到指定的元素内部
1.创建节点
创造一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
语法：document.createElement('标签名')
2.追加节点
要想在界面看到，得插入到某个父元素中。
插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)
插入到父元素中某个子元素的前面：父元素.insertBefore(要插入的元素，在哪个元素前面)
ul.insertBefore(li, ul.children[0]) //children为一个数组
3.克隆节点
复制一个原有的节点，把复制的节点放入指定的元素内部。
语法：元素.cloneNode(布尔值)
备注：布尔值若为true，则代表克隆时会包含后代节点一起克隆；若为false，则代表克隆时不包含后代节点。默认为false。
4.删除节点
删除现有的 DOM 节点：首先由父节点删除子节点，其次是要删除哪个子节点。
语法：父元素.removeChild(要删除的元素)
备注：如不存在父子关系则删除不成功。
备注：删除节点直接从html删除节点，隐藏节点（display：none）知识隐藏，实际上还是存在的。
9.M端事件（移动端）
触屏事件touch，touch对象代表一个触摸点，触摸事件可响应用户手指对屏幕或触控板的操作。
| 触屏事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
swiper插件使用的网站：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
10.Window对象
（1）BOM（浏览器对象模型）
1.window对象是一个全局对象，也可以说是JavaScript中的顶级对象。
2.像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
3.所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
4.window对象下的属性和方法调用的时候可以省略window。
（2）定时器-延时函数
一个用来让代码延迟执行的函数。
语法：setTimeout(回调函数, 延迟时间即等待的毫秒数)
备注：
1.setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行。
2.间歇函数 setInterval : 每隔一段时间就执行一次。
清除延时函数：
let timer=setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)
备注：
1.延时函数需要等待,所以后面的代码先执行
2.返回值是一个正整数，表示定时器的编号
<body>
<img src="./images/ad.png" alt="">
<script>
// 1.获取元素
const img = document.querySelector('img')
setTimeout(function () {
img.style.display = 'none'
}, 3000)
</script>
</body>
（3）JS执行机制
1.JS为单线程，也就是同一时间只能做一件事。因此所有任务需要排队，前一个任务结束才会执行下一个任务。这样如果某个任务执行时间太长，则会造成页面渲染不连贯，导致渲染加载阻塞。因此，出现了允许JS脚本创建多个线程，出现了同步和异步。
2.同步：前一个任务结束后才会执行后一个任务，程序执行顺序与任务排列顺序是一致的、同步的。异步：在做一件事的同时可以处理其他事情。本质区别：流水线上各个流程的执行顺序不同。
3.同步任务：同步任务都在主线程上执行，形成一个执行栈。异步任务：通过回调函数实现的（需要耗时的）。
4.异步任务：普通事件（click、resize）；资源加载（load、error）；定时器（setInterval、setTimeout）。异步任务添加到任务队列中，也叫消息队列。
5.执行机制：
（1）先执行执行栈中的同步任务；
（2）当有异步任务时，提交给对应的异步进程处理，处理完的异步任务放入任务队列中；
（3）执行栈执行完毕后，会按次序读取任务队列中的异步任务，被读取的任务结束等待状态进入执行栈，开始执行。重复该动作即为事件循环（event loop）。
（4）location对象
location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象。
| 属性/方法 | 说明 |
|---|---|
| href | 属性，获取完整的 URL 地址，赋值时用于地址的跳转 |
| search | 属性，获取地址中携带的参数，符号 ？后面部分 |
| hash | 属性，获取地址中的啥希值，符号 # 后面部分 |
| reload() | 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 |
（5）navigator对象
navigator是对象，该对象下记录了浏览器自身的相关信息
通过 userAgent 检测浏览器的版本及平台。
（6）histroy对象
history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等。
| 对象方法 | 作用 |
|---|---|
| back( ) | 可以后退功能 |
| forward( ) | 前进功能 |
| go(参数) | 前进后退功能，参数如果是1前进一个页面，是-1则后退一个页面 |
11.本地存储
（1）介绍
本地存储：将数据存储在本地浏览器中
使用场景：todomvc.com/examples/va… 页面刷新数据不丢失
好处：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage和 localStorage 约 5M 左右
（2）本地存储分类——localStorage
1.目标：能够使用localStorage把数据存储的浏览器中。
2.作用：数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失。
3.特性：可以多窗口共享；以键值对的形式存储，并且存储的是字符串， 省略了window。
4.语法：
存储数据：localStorage.setItem(key，value)
读取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
另一种分类：sessionStorage
特性：
1.生命周期为关闭浏览器窗口；
2.在同一个窗口下数据可以共享；
3.以键值对的形式存储使用；
4.用法和localStorage基本相同。
区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除。
存储：sessionStorage.setItem(key,value)
获取：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
（3）localStorage 存储复杂数据类型
问题：本地只能存储字符串,无法存储复杂数据类型。
解决：需要将复杂数据类型转换成 JSON字符串,在存储到本地。
语法：JSON.stringify(复杂数据类型)
JSON字符串：
1.首先是1个字符串
2.属性名使用双引号引起来，不能单引号
3.属性值如果是字符串型也必须双引号
问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用。
解决： 把取出来的字符串转换为对象。
语法：JSON.parse(JSON字符串)
12.数组方法
（1）数组map 方法
作用：map 可以遍历数组处理数据，并且返回新的数组。
备注：
1.map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
2.map重点在于有返回值，forEach没有返回值（undefined）。
（2）数组join方法
作用：join() 方法用于把数组中的所有元素转换一个字符串。
参数：数组元素是通过参数里面指定 的分隔符进行分隔的，空字符串（‘’），则所有元素之间都没有任何字符。
案例：学生就业统计表
13.正则表达式
（1）介绍：
定义：正则表达式是一种字符串匹配的模式（规则）。
使用场景：
1.例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)。
2.过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。
（2）语法：
-
定义规则：
const 变量名 = /表达式/备注：其中
/ /是正则表达式字面量，正则表达式也是对象。 -
使用正则（根据规则查找，找到则返回）：
regObj.test(被检测的字符串)备注：
test()方法用来查看正则表达式与指定的字符串是否匹配，如果正则表达式与指定的字符串匹配 ，返回true，否则false。 -
检索（查找）复合规则的字符串：
exec( )方法在一个指定字符串中执行一个搜索匹配。语法：
regObj.exec(被检测的字符串)备注：如果匹配成功，返回一个数组，否则返回null。
（3）元字符
普通字符:
1.仅能够描述它们本身，例如所有的字母和数字。
2.只能够匹配字符串中与它们相同的字符。
3.比如，规定只能输入26个英文字母：/[abcdefghijklmnopqrstuvwxyz]/
元字符(特殊字符）：
1.具有特殊含义的字符，提高了灵活性和强大的匹配功能。
2.比如，规定只能输入26个英文字母：/[a-z]/
参考文档：正则表达式 - JavaScript | MDN (mozilla.org) 、在线正则表达式测试 (oschina.net)
分类：
1.边界符（表示位置，必须用什么开头和结尾）
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符。
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
2.量词（表示重复次数）
量词用来设定某个模式重复次数。
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
3.字符类（比如\d表示0-9）
（1）[ ]匹配字符集合
[abc] ：匹配包含的单个字符，也就是只有a或b或c这三个单字符返回true，即为多选一。
// 字符类 [abc] 只选1个
console.log(/^[abc]$/.test('a')) // true //只有单独a、b、c才是true
console.log(/^[abc]$/.test('ab')) // false
console.log(/^[abc]{2}$/.test('ab')) // true
//如果不加^ $，则含有a或b或c都行。
console.log(/[abc]/.test('ab')) // true
范围：表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围。
[a-z] ：连字符。指定字符范围，表示 a到z 26个字母其中的任何单个字符。
console.log(/^[A-Z]$/.test('P')) // true
console.log(/^[0-9]$/.test(2)) // true
console.log(/^[a-zA-Z0-9]$/.test(2)) // b、Z、2都为true
QQ号：/^[1-9][0-9]{4,}$/ (从10000开始)(第一位1-9，第2位开始0-9，第一位之后至少有4个数字)
/^[a-zA-Z0-9-_]{6,16}$/ :表示要求由大小写字母或者数字或者下划线组成的，长度为6-16位
[^abc]：取反符。注意写到中括号里面。
console.log(/^[^a-z]$/.test('P')) //true //除了小写字母之外都为true
（2）.匹配除了换行符之外的任何单个字符。
（3）预定义
某些常见模式的简写方式，区分字母和数字。
| 预定义 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字，相对于[0-9] |
| \D | 匹配所有0-9以外的字符，相对于[ ^0-9] |
| \w | 匹配任意的字母、数字、下划线，相当于[A-Za-z0-9_] |
| \W | 除所有字母、数字和下划线以外的字符，相当于[ ^A-Za-z0-9_] |
| \s | 匹配空格（包括换行符、制表符、空格符），相当于[\t\r\n\v\f] |
| \S | 匹配非空格的字符，相当于[ ^ \t\r\n\v\f] |
日期格式：^\d{4}-\d{1,2}-\d{1,2}$
（4）修饰符
约束正则执行的某些细节行为，比如是否区分大小写、是否支持多行匹配。
语法：/表达式/修饰符
1.i 是单词 ignore 的缩写，正则匹配时字母不区分大小写。
2.g 是单词 global 的缩写，匹配所有满足正则表达式的结果。
console.log(/^java$/i.test('JAVA')) //true
replace 替换方法，可以完成字符的替换。
语法：字符串.replace(/正则表达式/，'替换的文本')
const str = 'java是一门编程语言， 学完JAVA工资很高'
const re = str.replace(/java/ig, '前端')
console.log(re) // 前端是一门编程语言， 学完前端工资很高
（5）change 事件
给input注册 change 事件，值被修改并且失去焦点后触发。
（6）判断是否有类：
元素.classList.contains() 看看有没有包含某个类，如果有则返回true，没有则返回false。
学习完JS，深刻理解了JS的很多功能，包括： 1.实现网页的交互功能，如按钮点击、链接跳转、下拉框选择等。 2.实现网页的动态效果，如轮播图、滚动条、弹出层等。 3.处理网页中的数据，如表单数据的验证、计算等。 4.实现异步加载数据，如Ajax请求等。 5.与后端代码交互，如请求数据、提交数据、验证用户身份等。
