Web APIs
基本认识
1.作用和分类
作用：使用JS去操作html和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）
2.什么是DOM
是用来呈现以及与任意HTML或XML文档交互的API
作用：开发网页内容特性和实现用户交互
DOM树：文档树直观的体现了标签和标签之间的关系
DOM对象：浏览器根据html标签生成的JS对象
所有的标签属性都可以在该对象上找到；修改这个对象的属性会映射到标签身上
获取DOM对象
1.选择匹配的第一个元素 返回对象
document.querySelector(‘CSS选择器’)
2.选择匹配的多个元素 返回列表
document.querySelectorAll(‘CSS选择器’)
操作元素内容
1.对象.innerText属性
修改对象内容（显示纯文本，不解析标签）
2.对象.innerHTML属性
将文本内容添加/更新任意标签位置（会解析标签）
操作元素属性
1.元素常用属性
例如href、title、src等属性
语法：对象.属性=值
2.元素样式属性
①通过style属性操作CSS
语法：对象.style.样式属性=值（跟单位）
②通过类名修改CSS
语法：元素.className=‘类名’
③通过classList控制CSS
语法：
3.操作表单元素属性
语法：获取 对象.属性名 设置 对象.属性名=新值
4.操作自定义属性
在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取
间歇函数
setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
<script>
// 1. 定义一个普通函数
function repeat() {
console.log('不知疲倦的执行下去....')
}
// 2. 使用 setInterval 调用 repeat 函数
// 间隔 1000 毫秒，重复调用 repeat
setInterval(repeat, 1000)
</script>
事件
事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。
1.事件监听
addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。
<body>
<h3>事件监听</h3>
<p id="text">为 DOM 元素添加事件监听，等待事件发生，便立即执行一个函数。</p>
<button id="btn">点击改变文字颜色</button>
<script>
// 1. 获取 button 对应的 DOM 对象
const btn = document.querySelector('#btn')
// 2. 添加事件监听
btn.addEventListener('click', function () {
console.log('等待事件被触发...')
// 改变 p 标签的文字颜色
let text = document.getElementById('text')
text.style.color = 'red'
})
// 3. 只要用户点击了按钮，事件便触发了！！！
</script>
</body>
步骤：
①获取 DOM 元素
②通过 addEventListener 方法为 DOM 节点添加事件监听
③等待事件触发，如用户点击了某个按钮时便会触发 click 事件类型
④事件触发后，相对应的回调函数会被执行
2.事件类型
事件类型决定了事件被触发的方式，如 click 代表鼠标单击，dblclick 代表鼠标双击。
将众多的事件类型分类可分为：鼠标事件、键盘事件、表单事件、焦点事件等
3.事件处理程序
addEventListener 的第2个参数是函数，这个函数会在事件被触发时立即被调用，在这个函数中可以编写任意逻辑的代码，如改变 DOM 文本颜色、文本内容等。
<script>
// 双击事件类型
btn.addEventListener('dblclick', function () {
console.log('等待事件被触发...')
const text = document.querySelector('.text')
// 改变 p 标签的文字颜色
text.style.color = 'red'
// 改变 p 标签的文本内容
text.style.fontSize = '20px'
})
</script>
结论：【事件处理程序】决定了事件触发后应该执行的逻辑。
事件类型
1.鼠标事件
①mouseenter监听鼠标是否移入DOM元素
②mouseleave监听鼠标是否移出DOM元素
2.键盘事件
①keydown键盘按下触发
②ketup键盘抬起触发
3.焦点事件（input）
①focus获得焦点即光标
②blur失去焦点
4.文本框输入事件
input检测用户是否输入内容
事件对象
任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。
<body>
<h3>事件对象</h3>
<p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
<hr>
<div class="box"></div>
<script>
// 获取 .box 元素
const box = document.querySelector('.box')
// 添加事件监听
box.addEventListener('click', function (e) {
console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');
// 事件回调函数的第1个参数即所谓的事件对象
console.log(e)
})
</script>
</body>
事件回调函数的【第1个参数】即所谓的事件对象，通常习惯性的将这个对数命名为 event、ev 、ev 。
接下来简单看一下事件对象中包含了哪些有用的信息：
①ev.type 当前事件的类型
②ev.clientX/Y 光标相对浏览器窗口的位置
③ev.offsetX/Y 光标相于当前 DOM 元素的位置
注：在事件回调函数内部通过 window.event 同样可以获取事件对象。
环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。
<script>
// 声明函数
function sayHi() {
// this 是一个变量
console.log(this);
}
// 声明一个对象
let user = {
name: '张三',
sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性
}
let person = {
name: '李四',
sayHi: sayHi
}
// 直接调用
sayHi() // window
window.sayHi() // window
// 做为对象方法调用
user.sayHi()// user
person.sayHi()// person
</script>
结论：
①this 本质上是一个变量，数据类型为对象
②函数的调用方式不同 this 变量的值也不同
③【谁调用 this 就是谁】是判断 this 值的粗略规则
④函数直接调用时实际上 window.sayHi() 所以 this 的值为 window
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。
<script>
// 声明 foo 函数
function foo(arg) {
console.log(arg);
}
// 普通的值做为参数
foo(10);
foo('hello world!');
foo(['html', 'css', 'javascript']);
function bar() {
console.log('函数也能当参数...');
}
// 函数也可以做为参数！！！！
foo(bar);
</script>
函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了
我们回顾一下间歇函数 setInterval
<script>
function fn() {
console.log('我是回调函数...');
}
// 调用定时器
setInterval(fn, 1000);
</script>
fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了，结合刚刚学习的函数表达式上述代码还有另一种更常见写法。
<script>
// 调用定时器，匿名函数做为参数
setInterval(function () {
console.log('我是回调函数...');
}, 1000);
</script>
结论：
①回调函数本质还是函数，只不过把它当成参数使用
②使用匿名函数做为回调函数比较常见
事件流
事件流指的是事件完整执行过程中的流动路径，包括捕获阶段和冒泡阶段
1.事件捕获
从DOM的根元素开始去执行对应事件（从父元素到子元素）
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
第三个参数传入True代表是捕获机制触发（很少使用）
2.事件冒泡
当一个元素事件被触发时，会依次向上调用所有父级元素的同名事件
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
第三个参数传入False，或者默认值代表是冒泡机制触发
3.阻止冒泡
语法：
事件对象.stopPropagation（）
注意：此方法不仅可以阻止冒泡，也可以阻止捕获
4.解绑事件
①on事件方法，直接用null覆盖就可以实现解绑（L0）
//绑定事件
btn.onclick = function(){
alert('点击了')
}
//解绑事件
btn.onclick = null
②addEventListener方法必须用removeEventListener（）
function fn(){
alert('点击了')
}
btn.addEventListener('click',fn) //绑定事件
btn.removeEventListener('click',fn) //解绑事件
注意：匿名函数无法进行解绑
拓展：鼠标经过事件的区别
mouseenter和mouseleave没有事件冒泡（推荐）
mouseover和mouseout会有事件冒泡
事件委托
减少注册次数提高程序性能，原理是利用时间冒泡特点
给父元素注册事件，当我们触发子元素的时候会冒泡到父元素身上从而触发事件
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.addEventListener('click',function(){
alert('点击了')
}) //点击每个li都会有alert实现
</script>
案例 tab栏切换
阻止元素默认行为
语法：
DOM.addEventListener('click',function(e){
e.preventDefault() //阻止默认行为
})
其他事件
1.页面加载事件
加载外部资源（如图片、外联CSS、JavaScript等）加载完毕时触发的事件
①监听页面所有资源加载完毕：给Window添加load事件
window.addEventListener('load',function(){
//加载完毕后的操作
})
②当厨师HTML文档被完全加载和解析完全后，不需要等待外部资源完全加载：给DOM添加DOMcontentLoaded事件
document.addEventListener('DOMcontentLoaded',function(){
//加载完毕后的操作
})
2.元素滚动事件
滚动条在滚动的时候持续触发的事件
①监听页面滚动
window.addEventListener('scroll',function(){
//滚动后的操作
})
②监听某个元素滚动
document.addEventListener('scroll',function(){ //加载完毕后的操作})
获取位置
scrollLeft和srcollTop（读写属性）：
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
两个值可读写
console.log(div.scrollTop)
3.页面尺寸事件
在窗口尺寸改变的时候出发事件
window.addEventListener('resize',function(){
//执行的操作
})
获取元素宽高
获取元素的可见部分宽高（不包含边框、margin、滚动条等）
clientWidth和clientHeight（属性）：
console.log(div.clientWidth)
元素尺寸和位置
使用场景：通过js的方式得到元素在页面中的位置，页面滚动到某位置就可以做某些操作
①获取宽高
获取元素可视化的自身宽高，包含自身宽高、padding、border
offsetWidth和offsetHeight（得到数值）
②获取位置
获取元素距离子级定位父级元素的左、上距离
offsetLeft和offsetTop（只读属性）
日期对象
1.实例化
日期对象：用来表示时间的对象，作用可以得到当前系统的实现
实例化：在代码中发现了new关键字时，这个操作就是实例化
创建一个时间对象并获取时间
const date = new Date() //获取当前时间
const date1 = new Date('2022-5-1 08:30:00')
//获取指定时间
2.时间对象方法
使用场景：日期对象返回的数据不能直接使用，所以需要转换为实际开发中的格式
| 属性/方法 | 说明 |
|---|---|
getFullYear() | 获取四位年份 |
getMonth() | 获取月份，取值为0~11 |
getDate() | 获取月份中的每一天，不同月份取值不同 |
getDay() | 获取星期，取值为0~6 |
getHours() | 获取小时，取值0~23 |
getMinutes() | 获取分钟，取值为0~59 |
getSeconds() | 获取秒，取值为0~59 |
//获取日期对象
const date = new Date()
//使用日期对象方法
console.log(date.getMonth()+1)
3.时间戳
使用场景：如果计算倒计时效果，前面方法无法直接计算则需要用时间戳完成
时间戳是指1970年01月01日00分00秒至今的毫秒数，它是一种特殊的计量时间的方式
算法：
获取时间戳的方法
①getTime()方法
const date = new Date()
console.log(date.getTime())
②简写 +new Date（）
//无需实例化
console.log(+new.Date()) //"+"把2字符型转换成数字型
③使用Date.now()
//无需实例化，但只能得到当前的时间戳
console.log(Date.now())
倒计时案例
//得到当前时间戳
const now = +new Date()
//得到将来时间戳
const last = +new Date()
//得到剩余的时间戳
const count = (last - now)/1000 //转换为秒
//转换为时、分、秒
let h =parseInt(count/60/60%24)
h = h < 10 ? '0' + h : h
let m =parseInt(cont/60%60)
m = m < 10 ? '0' + m : m
let s =parseInt(count%60)
s= s < 10 ? '0' + s : s
节点操作
1.DOM节点
DOM树里的每一个内容都叫节点
类型：元素节点（body、div）、属性节点（href）、文本节点、其他
2.查找节点
①父节点查找：parentNode属性
div.parentNode //返回最近一级的父节点，找不到返回Null
②子节点查找：childNodes属性（获取所有子节点）/children属性（重点）
div.children //仅获得所有元素节点，返回的是一个伪数组
③兄弟节点查找：
nextElementSibling属性（查找下一个兄弟节点）
previousElementSibling属性（查找上一个兄弟节点）
3.增加节点
使用场景：在页面中增加元素，例如点击发布按钮可以新增一条信息
①创建节点
document.createElement('标签名')
②追加节点
//插入到这个父元素的最后
div.appendChild(‘要插入的元素’)
//插入到父元素中某个子元素的前面
div.insertBefore(‘要插入的元素’，‘在哪个元素前面’)
③克隆节点
//克隆一个已有的元素节点
元素.coneNode(布尔值)
若为true，则代表克隆是会包含后代一起克隆。若为false，则代表不包含后代节点（默认）
4.删除节点
在原生DOM操作中，要删除元素必须通过父元素删除
父元素.removeChild('要删除的元素')
注：如不存在父子关系则删除不成功，与隐藏节点有区别
M端事件
移动端也有自己独特的地方，如触屏事件touch。touch对象代表一个触摸点，常见的触屏事件如下：
touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发
JS插件
插件：就是别人写好的一些代码只需要复制就可以直接实现对应的效果
Window对象
1.BOM（浏览器对象模型）
2.定时器-延时函数
让代码延迟执行的函数，叫setTimeout，只执行一次
语法：
//setTimeout(回调函数，延迟的时间ms)
let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeoout(timer) //清除延时函数
3.JS执行机制
JS语言的一大特点就是单线程，也就是，同一个时间只能做一件事。比如我们对某个DOM元素进行添加和删除操作不能同时操作，应该先添加后删除。单线程意味着，所有任务都需要排队，前一个任务结束后一个任务才会执行。这样导致的问题是：如果JS执行时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
为了解决以上问题，JS出现了同步和异步。
同步： 前一个任务结束后再执行后一个任务，程序的执行顺序和任务排列顺序一致。例如烧水等十分钟后再切菜炒菜。
异步： 在执行一个任务的同时处理其他事情。利用烧水的十分钟去炒菜切菜。
①先执行执行栈中的同步任务②异步任务放入任务队列中③一旦执行栈钟所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态进入执行栈开始执行。
4.location对象
location（地址）拆分并保存了URL地址的各个组成部分，它是一个对象
| 属性/方法 | 说明 |
|---|---|
| href | 属性，获取完整的 URL 地址，赋值时用于地址的跳转 |
| search | 属性，获取地址中携带的参数，符号 ？后面部分 |
| hash | 属性，获取地址中的啥希值，符号 # 后面部分 |
| reload() | 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 |
<body>
<form>
<input type="text" name="search"> <button>搜索</button>
</form>
<a href="#/music">音乐</a>
<a href="#/download">下载</a>
<button class="reload">刷新页面</button>
<script>
// 1. href属性 （重点） 得到完整地址，
console.log(location.href)
//赋值则是跳转到新地址
location.href = 'http://www.itcast.cn'
// 2. search属性 得到 ? 后面的地址
console.log(location.search) // ?search=笔记本
// 3. hash属性 得到 # 后面的地址
console.log(location.hash)
// 4. reload 方法 刷新页面
const btn = document.querySelector('.reload')
btn.addEventListener('click', function () {
// location.reload() // 页面刷新
location.reload(true) // 强制页面刷新 ctrl+f5
})
</script>
</body>
5.navigator对象
navigator是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
- 通过 userAgent 检测浏览器的版本及平台
// 检测 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.itcast.cn'
}})();
本地存储
1.介绍
本地存储：将数据存储在本地浏览器中
常见的使用场景：
todomvc.com/examples/va… 页面刷新数据不丢失
好处：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage和 localStorage 约 5M 左右
2.分类
①localStorage（重点）
作用：数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失
特性：以键值对的形式存储，并且存储的是字符串， 省略了window；可以多窗口共享（同一浏览器）
语法：
| 代码 | 功能 |
|---|---|
localStorage.setItem('键', 值) | 存储数据 |
localStorage.getItem('键')) | 获取数据 |
localStorage.removeItem('键') | 删除数据 |
<body>
<script>
// 本地存储 - localstorage 存储的是字符串
// 1. 存储
localStorage.setItem('age', 18)
// 2. 获取
console.log(typeof localStorage.getItem('age'))
// 3. 删除
localStorage.removeItem('age')
</script>
</body>
</html>
② sessionStorage （了解）
特性：
用法跟localStorage基本相同
区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除
语法：
| 代码 | 功能 |
|---|---|
sessionStorage.setItem('键',值) | 存储数据 |
sessionStorage.getItem('键')) | 获取数据 |
sessionStorage.removeItem('键') | 删除数据 |
3.localStorage存储复杂数据类型
问题： 本地只能存储字符串,无法存储复杂数据类型。
语法：
JSON.stringify(复杂数据类型)
JSON字符串：
①首先是1个字符串
②属性名使用双引号引起来，不能单引号
③属性值如果是字符串型也必须双引号
需要将复杂数据类型转换成 JSON字符串,在存储到本地
<script>
// 本地存储复杂数据类型
const goods = {
name: '小米',
price: 1999
}
// localStorage.setItem('goods', goods)
// console.log(localStorage.getItem('goods'))
// 1. 把对象转换为JSON字符串 JSON.stringify
localStorage.setItem('goods', JSON.stringify(goods))
// console.log(typeof localStorage.getItem('goods'))
</script>
因为本地存储里面取出来的是字符串，不是对象，无法直接使用 把取出来的字符串转换为对象
语法： JSON.parse(JSON字符串)
<body>
<script>
// 本地存储复杂数据类型
const goods = {
name: '小米',
price: 1999
}
// localStorage.setItem('goods', goods)
// console.log(localStorage.getItem('goods'))
// 1. 把对象转换为JSON字符串 JSON.stringify
localStorage.setItem('goods', JSON.stringify(goods))
// console.log(typeof localStorage.getItem('goods'))
// 2. 把JSON字符串转换为对象 JSON.parse
console.log(JSON.parse(localStorage.getItem('goods')))
</script>
</body>
字符串拼接新思路
利用map() 和join() 数组方法实现字符串拼接
①map()
使用场景：map()可以遍历数组处理数据，并且返回新的数组
const arr=['red','blue','pink']
const newArr = arr.map(function(ele,index){
console.log(ele) //数组元素
console.log(index) //数组索引号
return ele + '颜色'
})
console.log(newArr)
//['red颜色','blue颜色','pink颜色']
②join()
使用场景：join()可以把数组中所有元素转换成一个字符串
const arr =['red颜色','blue颜色','pink颜色']
console.log(arr.join('')) //red颜色blue颜色pink颜色
console.log(arr.join('|'))
//red颜色|blue颜色|pink颜色
正则表达式
1.介绍
正则表达式是用于匹配字符串中字符组合的模式，也是对象。通常用来查找、替换那些符合正则表达式的文本。
使用场景：表单验证（匹配）、过滤敏感词（替换）、字符串中提取（提取）
字面量：/ /
2.语法
①定义规则
const 变量名 = /表达式/ //写什么查找什么，不用引号
②查找（test（）方法）
regObj.test(被检测的字符串)
综合：
const str = '我们在学前端，希望学习前端可以高新毕业'
//定义规则：
const reg = /前端/
//查找检测：
console.log(reg.test(str)) //true,不匹配为false
元字符
元字符试一下具有特殊含义的字符，例如abcdefg…就等同于[a-z]
1.边界符（表示位置，开头和结尾，必须用什么开头什么结尾）
如果 ^ 和 $ 在一起，表示必须是精确匹配
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行末的文本（以谁结束） |
<script>
// 元字符之边界符
// 1. 匹配开头的位置 ^
const reg = /^web/
console.log(reg.test('web前端')) // true
console.log(reg.test('前端web')) // false
console.log(reg.test('前端web学习')) // false
console.log(reg.test('we')) // false
// 2. 匹配结束的位置 $
const reg1 = /web$/
console.log(reg1.test('web前端')) // false
console.log(reg1.test('前端web')) // true
console.log(reg1.test('前端web学习')) // false
console.log(reg1.test('we')) // false
// 3. 精确匹配 ^ $
const reg2 = /^web$/
console.log(reg2.test('web前端')) // false
console.log(reg2.test('前端web')) // false
console.log(reg2.test('前端web学习')) // false
console.log(reg2.test('we')) // false
console.log(reg2.test('web')) // true
console.log(reg2.test('webweb')) // flase
</script>
2.量词（设定某个模式重复次数）
| 量词 | 说明 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ？ | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
注意： 逗号左右两侧千万不要出现空格
<script>
// 元字符之量词
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/
console.log(reg1.test('')) // true
console.log(reg1.test('w')) // true
console.log(reg1.test('ww')) // true
console.log('-----------------------')
// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/
console.log(reg2.test('')) // false
console.log(reg2.test('w')) // true
console.log(reg2.test('ww')) // true
console.log('-----------------------')
// 3. ? 重复次数 0 || 1
const reg3 = /^w?$/
console.log(reg3.test('')) // true
console.log(reg3.test('w')) // true
console.log(reg3.test('ww')) // false
console.log('-----------------------')
// 4. {n} 重复 n 次
const reg4 = /^w{3}$/
console.log(reg4.test('')) // false
console.log(reg4.test('w')) // flase
console.log(reg4.test('ww')) // false
console.log(reg4.test('www')) // true
console.log(reg4.test('wwww')) // false
console.log('-----------------------')
// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log(reg5.test('')) // false
console.log(reg5.test('w')) // false
console.log(reg5.test('ww')) // true
console.log(reg5.test('www')) // true
console.log('-----------------------')
// 6. {n,m} n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log(reg6.test('w')) // false
console.log(reg6.test('ww')) // true
console.log(reg6.test('www')) // true
console.log(reg6.test('wwww')) // true
console.log(reg6.test('wwwww')) // false
// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败
</script>
3.字符类
① []匹配字符集合（只选一个）
| 匹配集合类 | 说明 |
|---|---|
| [abc] | 匹配包含的单个字符，多选为false |
| [a-z] | 匹配包含的单个字符 |
| [^a-z] | 匹配除了小写字母以外的字符 |
| . | 匹配除了换行符之外的任何单个字符 |
例子：
<script>
// 元字符之范围 []
// 1. [abc] 匹配包含的单个字符， 多选1
const reg1 = /^[abc]$/
console.log(reg1.test('a')) // true
console.log(reg1.test('b')) // true
console.log(reg1.test('c')) // true
console.log(reg1.test('d')) // false
console.log(reg1.test('ab')) // false
// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log(reg2.test('a')) // true
console.log(reg2.test('p')) // true
console.log(reg2.test('0')) // false
console.log(reg2.test('A')) // false
// 想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B')) // true
console.log(reg3.test('b')) // true
console.log(reg3.test(9)) // true
console.log(reg3.test(',')) // flase
// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1')) // false
console.log(reg4.test('abcd12')) // true
console.log(reg4.test('ABcd12')) // true
console.log(reg4.test('ABcd12_')) // true
// 3. [^a-z] 取反符（匹配除了小写字母以外的字符）
const reg5 = /^[^a-z]$/
console.log(reg5.test('a')) // false
console.log(reg5.test('A')) // true
console.log(reg5.test(8)) // true
</script>
腾讯QQ号：^ [1-9] [0-9] {4,}$ (腾讯QQ号从10000开始)
②预定义类（某些常见模式的简写方式）
| 预定类 | 说明 |
|---|---|
| \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}$ 2023-09-11
4.修饰符和替换
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：
/表达式/修饰符
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
replace 替换方法，可以完成字符的替换
语法：
字符串.replace(/正则表达式/,'替换的文本')
综合案例：
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
// 2. 修饰符 g 全部替换
const strEnd = str.replace(/前端/g, 'web')
console.log(strEnd)
</script>
change 事件
给input注册 change 事件，值被修改并且失去焦点后触发
判断是否有类
元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
AJAX
同步和异步
同步： 同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
异步： 将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。
AJAX入门和axios使用
哪个是获取输入框值的方式?
let theInput = document.querySelector('#input')
A: theInput.innerHTML
B: theInput.value
答案
哪个是数组的映射方法？
A: arr.forEach
B: arr.map
答案
1.axios 语法
①引入 axios.js 文件到自己的网页中
axios.js文件链接: cdn.jsdelivr.net/npm/axios/d…
②明确axios函数的使用语法
axios({
url: '目标资源地址'
}).then((result) => {
// 对服务器返回的数据做后续处理
})
注意：请求的 url 地址, 就是标记资源的网址
注意：then 方法这里先体验使用，由来后续会讲到
URL
1.URL组成
协议，域名，资源路径（URL 组成有很多部分，我们先掌握这3个重要的部分即可）
//访问新闻列表的 URL 网址，打印新闻数据
axios({
url: 'http://hmajax.itheima.net/api/news'
}).then(result => {
console.log(result)
})
2.URL查询参数
作用：携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据
语法：在 url 网址后面用?拼接格式：xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
//使用axios提供的params选项
axios({
url:'目标地址', //逗号一定要加
params:{
参数名：值
}
}).then(result =>{
//后续处理
})
常用请求方法和数据提交
1.请求方法
2.数据提交
axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})
需求：注册账号，提交用户名和密码到服务器保存
注册用户 URL 网址：hmajax.itheima.net/api/registe…
请求方法：POST
参数名：
username：用户名（要求中英文和数字组成，最少8位）
password：密码（最少6位）
/*
注册用户：http://hmajax.itheima.net/api/register
请求方法：POST
参数名：
username：用户名（中英文和数字组成，最少8位）
password：密码 （最少6位）
目标：点击按钮，通过axios提交用户和密码，完成注册
*/
document.querySelector('.btn').addEventListener('click', () => {
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'POST',
data: {
username: 'itheima007',
password: '7654321'
}
})
})
axios 错误处理
如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到如图的错误：
解决方法：使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理
axios({
// ...请求选项
}).then(result => {
// 处理成功数据
}).catch(error => {
// 处理失败错误
})
HTTP 协议-请求报文
HTTP 协议规定了浏览器和服务器返回内容的格式
是浏览器按照协议规定发送给服务器的内容，例如刚刚注册用户时，发起的请求报文：
格式：
- 请求行：请求方法，URL，协议
- 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
- 空行：分割请求头，空行之后的是发送给服务器的资源
- 请求体：发送的资源
错误排查：在不逐行查看代码的情况下，查看请求报文，看看它登录提交的相关信息对不对，找问题出现的原因
HTTP 协议-响应报文
组成：
- 响应行（状态行）：协议，HTTP响应状态码，状态信息
- 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）
- 空行：分割响应头，控制之后的是服务器返回的资源
- 响应体：返回的资源
HTTP 响应状态码：
-
用来表明请求是否成功完成
-
例如：404（客户端要找的资源，在服务器上不存在）
接口文档
接口文档：描述接口的文章（一般是后端工程师，编写和提供）
接口：指的使用 AJAX 和 服务器通讯时，使用的 URL，请求方法，以及参数，例如：AJAX阶段接口文档
form-serialize插件
使用 form-serialize 插件，快速收集目标表单范围内表单元素的值
语法：
①引入form-serialize插件到自己的网页中
<srcipt src="form-serialize.js"></srcipt>
②使用serialize函数
serialze(参数1，{参数2}) //参数2是个配置对象
-
参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
-
参数2：配置对象
- hash：true（收集出是js对象结构）/false(查询字符串格式)
- empty：true（收集空格）/false（不收集空格）
const form = document.querySelector('.fomr1')
const Data = serialize(form,{hash:true,empty:true})
console.log(Data)
