js WebAPI黑马笔记(万字速通)
此笔记来自于黑马程序员，pink老师yyds
复习：
splice() 方法用于添加或删除数组中的元素。
注意： 这种方法会改变原始数组。
- 删除数组：
splice(起始位置， 删除的个数)
比如：1
let arr = ['red', 'green', 'blue']
arr.splice(1,1) // 删除green元素
console.log(arr) // ['red, 'blue']
AI写代码- 添加元素
splice(起始位置，删除个数，添加数组元素)
let arr = ['red', 'green', 'blue']
//arr.splice(1, 0, 'pink') // 在索引号是1的位置添加 pink
//console.log(arr) // ['red', 'pink', 'green', 'blue']
arr.splice(1, 0, 'pink', 'hotpink') // 在索引号是1的位置添加 pink hotpink
console.log(arr) // ['red', 'pink', 'hotpink', 'green', 'blue']
AI写代码Web APIs - 第1天笔记
了解 DOM 的结构并掌握其基本的操作，体验 DOM 的在开发中的作用
- 理解 ECMAScript 与 JavaScript 之间的关联
- 掌握 DOM 相关知识及其基本概念，并认识到 DOM 核心是一个对象
- 熟悉查找节点的方法步骤
- 了解处理节点属性及文本的方法
- 学会利用 setInterval 函数设置定时操作
介绍
知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。
从理论上讲，在 JavaScript 阶段学习的知识基本上都属于 ECMAScript 的知识体系。其中 ECMAScript 简称 ES（Electronic Script），它为编程语言标准提供了规范。诸如变量、数据类型、运算符、语句及函数等基本语法规则均是由 ECMAScript 规定的。基于 ECMAScript 的规范基础之上……
基于 ECMAScript 的规范基础之上……
基于浏览器运行的 ECMAScript 结合 Web Applications Programming Interfaces（APIs）才是真正的 JavaScript。Web Applications Programming Interfaces（APIs）的核心架构涉及 Document Object Model（DOM）和 Browser Object Model（BOM）。
扩展阅读： ECMAScript 规范持续发展与版本更新机制值得关注，在这一过程中规范经历了多个版本的演进。早期版本采用数字顺序编码方式标识如 ES3、ES5 等版本，在这一阶段更新频率相对较低。随着技术演进速度加快规范更新频率加快 采用年份作为版本编号成为主流 如 ES2017、ES2018 等版本标识方式 年度发布版本则以 ES6 形式于 2015 年推出 常被称为 ES 2015
探讨JavaScript的发展历程 扩展阅读
掌握 DOM 的基本概念，并加深对这一技术框架的认知。
熟悉并掌握 DOM 的基本操作流程，并理解并体会其在实际开发中的应用价值。
DOM（Document Object Model）作为对 HTML 文档的建模工具，在其中每个标签元素都被视为独立的对象。每个对象都包含了丰富的属性与功能。通过访问与操作其属性及关联的方法来实现对 HTML 内容的动态更新。从而支持网页效果展示与用户体验交互需求。
简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
观察一个小例子：
开始
开始
在上述的例子中，在用户分别点击【开始
概念
DOM 树
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
文本
<a href="">链接名</a>
<div id="" class="">文本</div>
</body>
</html>
AI写代码通过如下图所示的方式对 HTML 文档进行展示，并命名为文档树或 DOM 树（HTML Tree or Document Object Model, DOM），这种表示方法能够清晰地反映了元素之间的层次关系
DOM 节点
作为文档结构的一部分，在Markdown中使用DOM对象表示各个部分主要包括元素节点、属性节点以及文本节点等类型
元素节点
元素节点
属性节点
文本节点
根节点
元素节点
document
在JavaScript中，默认情况下提供了名为 document 的一个专用实体 \texttt{}` document ` \texttt{}` ，它专为处理DOM而设计并集成了丰富且强大的属性与方法 \texttt{} \texttt{} $ 。掌握这些功能对于深入理解DOM机制至关重要。
<script>
// document 是内置的对象
// console.log(typeof document);
// 1. 通过 document 获取根节点
console.log(document.documentElement); // 对应 html 标签
// 2. 通过 document 节取 body 节点
console.log(document.body); // 对应 body 标签
// 3. 通过 document.write 方法向网页输出内容
document.write('Hello World!');
</script>
AI写代码本文介绍了 document 对象的主要功能模块及其相关方法，并旨在帮助读者更好地理解该对象的基本结构。
获取DOM对象
querySelector 会选取符合条件的第一个元素对象。
querySelectorAll 将生成一个包含符合条件所有元素的集合。
探索其他方法以完成类似功能。
- 使用 queryElementById 来通过 ID 属性定位元素。
- 使用 queryElementsByTagName 来获取具有相同名称的 HTML 元素集合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM - 查找节点</title>
</head>
<body>
<h3>查找元素类型节点</h3>
<p>从整个 DOM 树中查找 DOM 节点是学习 DOM 的第一个步骤。</p>
<ul>
<li>元素</li>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul>
<script>
const p = document.querySelector('p') // 获取第一个p元素
const lis = document.querySelectorAll('li') // 获取第一个p元素
</script>
</body>
</html>
AI写代码总结：
- 使用 document.getElementById 专指用于获取元素类型的节点对象，并基于其
id属性进行查找。 - 任何 DOM 对象均具备 nodeType 属性属性，并用于检测节点类型。
操作元素内容
通过修改 DOM 的文本内容，动态改变网页的内容。
innerText 负责填充或更新文本内容到任何标签位置，并且确保**文本中包含的标签不会被解析。
<script>
// innerText 将文本内容添加/更新到任意标签位置
const intro = document.querySelector('.intro')
// intro.innerText = '嗨~ 我叫李雷！'
// intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>
AI写代码内联样式表指令innerHTML能够实现文本内容的动态插入至任意HTML标签处，并会自动解析所有嵌入的HTML标记。
<script>
// innerHTML 将文本内容添加/更新到任意标签位置
const intro = document.querySelector('.intro')
intro.innerHTML = '嗨~ 我叫韩梅梅！'
intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>
AI写代码总结如下：当文本内容包含HTML标签时优先选择innerHTML属性而不建议直接引用innerText属性
##操作元素属性
有3种方式可以实现对属性的修改：
常用属性修改
- 直接能过属性名修改，最简洁的语法
<script>
// 1. 获取 img 对应的 DOM 元素
const pic = document.querySelector('.pic')
// 2. 修改属性
pic.src = './images/lion.webp'
pic.width = 400;
pic.alt = '图片不见了...'
</script>
AI写代码控制样式属性
- 应用【修改样式】，通过修改行内样式
style属性，实现对样式的动态修改。
CSS 样式的 style 属性所承载的数据类型本质上属于对象类型。例如，在 HTML 元素中引用 box.style.color 和 box.style.width 可分别提取颜色信息与宽度数值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习 - 修改样式</title>
</head>
<body>
<div class="box">随便一些文本内容</div>
<script>
// 获取 DOM 节点
const box = document.querySelector('.intro')
box.style.color = 'red'
box.style.width = '300px'
// css 属性的 - 连接符与 JavaScript 的 减运算符
// 冲突，所以要改成驼峰法
box.style.backgroundColor = 'pink'
</script>
</body>
</html>
AI写代码所有标签均具备 style 属性，在此属性下可通过相关配置实时调整网页标签的样式。具体而言，在涉及 css 定义中包含字符 - 的情况时，请确保将该 - 符号移除，并将随后紧跟的所有字母转换为大写字母。例如，在设置背景颜色时应写作 $box.style.backgroundColor$)，而非 box.style.box-color)`。
- 操作类名(className) 操作 CSS
如果需要处理较多的样式设置问题，并且发现直接使用 style属性 进行操作较为繁琐，则建议采用基于css类名的方式进行配置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习 - 修改样式</title>
<style>
.pink {
background: pink;
color: hotpink;
}
</style>
</head>
<body>
<div class="box">随便一些文本内容</div>
<script>
// 获取 DOM 节点
const box = document.querySelector('.intro')
box.className = 'pink'
</script>
</body>
</html>
AI写代码
因为class是一个关键字，在实现过程中可能会引发冲突或错误；因此为了确保代码的安全性和可维护性，建议采用className来进行替换。
className 的作用是将现有对象所属的类名替换成新的名称；如果需要新增一个类，则必须保留原有名称以便后续操作。
- 通过 classList 操作类控制 CSS
为了防止className覆盖旧类名而引入的问题, 我们可以选择使用classList的方式进行添加与删除操作.
<!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: 200px;
height: 200px;
background-color: pink;
}
.active {
width: 300px;
height: 300px;
background-color: hotpink;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
// 1.获取元素
// let box = document.querySelector('css选择器')
let box = document.querySelector('div')
// add是个方法 添加 追加
// box.classList.add('active')
// remove() 移除 类
// box.classList.remove('one')
// 切换类
box.classList.toggle('one')
</script>
</body>
</html>
AI写代码操作表单元素属性
在不同的场景下，则需要对表单的属性进行相应的调整。例如点击一个眼睛图标，则能够显示其密码内容；其实质是将表单类型转换成了一个文本框元素。
正常的有属性有取值的跟其他的标签属性没有任何区别
获取:DOM对象.属性名
设置:DOM对象.属性名= 新值
<!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>
<input type="text" value="请输入">
<button disabled>按钮</button>
<input type="checkbox" name="" id="" class="agree">
<script>
// 1. 获取元素
let input = document.querySelector('input')
// 2. 取值或者设置值 得到input里面的值可以用 value
// console.log(input.value)
input.value = '小米手机'
input.type = 'password'
// 2. 启用按钮
let btn = document.querySelector('button')
// disabled 不可用 = false 这样可以让按钮启用
btn.disabled = false
// 3. 勾选复选框
let checkbox = document.querySelector('.agree')
checkbox.checked = false
</script>
</body>
</html>
AI写代码自定义属性
标准属性：标签通常带有预设的属性信息，例如class ID、title等；可以通过点语法操作来设置这些状态值
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<!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>
<div data-id="1"> 自定义属性 </div>
<script>
// 1. 获取元素
let div = document.querySelector('div')
// 2. 获取自定义属性值
console.log(div.dataset.id)
</script>
</body>
</html>
AI写代码间歇函数
知道间歇函数的作用，利用间歇函数创建定时任务。
setInterval 是 JavaScript 中的一个预定义函数，在指定的时间间隔内定期自动执行另一个函数，并被称为定时器函数。
<script>
// 1. 定义一个普通函数
function repeat() {
console.log('不知疲倦的执行下去....')
}
// 2. 使用 setInterval 调用 repeat 函数
// 间隔 1000 毫秒，重复调用 repeat
setInterval(repeat, 1000)
</script>
AI写代码今日单词
| 单词 | 说明 | 解释 |
|---|---|---|
| setInterval | 定时器 | setInterval(repeat, 1000) |
Web APIs - 第2天
学会通过为 DOM 注册事件来实现可交互的网页特效。
- 能够识别函数运行所处的环境，并明确 this 变量所代表的具体对象
- 掌握事件的影响及其在系统中的作用机制；了解如何实施三个基本步骤来处理这些事件
学习会为 DOM 注册事件，实现简单可交互的网页特交。
事件
事件是编程语言中的一个专有名词，在软件系统中被用来表示某种特定的行为模式或系统状态的变化特征。每当涉及此类行为模式或系统状态发生变化时，在变更发生的同时就会触发相关联的一个函数进行处理以确保系统的稳定性与功能性得到有效的维护与保障。当这种行为模式或系统状态发生变动时就会导致相关函数被立即调用从而完成相应的操作流程以保证系统的正常运行秩序不受干扰并提高系统的整体性能表现能力。
鼠标点击
鼠标拖拽
事件监听
当使用DOM处理事件时, 必须对DOM对象注册相应的事件监听. 当事件被触发时, 立即执行相应的处理函数.
事件类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听</title>
</head>
<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>
</html>
AI写代码完成事件监听分成3个步骤：
- 访问 DOM 元素
- 使用
addEventListener方法将事件绑定到 DOM 节点上 - 当用户点击按钮时（即发生点击操作），会导致
click事件发生 - 在
click事件被触发后（即当某个元素被点击时），对应的回调函数会被执行
所谓事件也就是在某个触发点（事件触发）时执行相应的处理逻辑。
事件类型
点击
点击
点击
单击
<script>
// 双击事件类型
btn.addEventListener('dblclick', function () {
console.log('等待事件被触发...');
// 改变 p 标签的文字颜色
const text = document.querySelector('.text')
text.style.color = 'red'
})
// 只要用户双击击了按钮，事件便触发了！！！
</script>
AI写代码事件类型
事件类型
事件类型
事件处理程序
在 addEventListener 中的第二个参数是一个函数，在事件触发时会立即执行该函数，在该函数内部我们可以编写任意逻辑的代码段以实现各种操作功能例如：修改DOM文本的颜色或内容等操作都可以在此处实现
<script>
// 双击事件类型
btn.addEventListener('dblclick', function () {
console.log('等待事件被触发...')
const text = document.querySelector('.text')
// 改变 p 标签的文字颜色
text.style.color = 'red'
// 改变 p 标签的文本内容
text.style.fontSize = '20px'
})
</script>
AI写代码结论：【事件处理程序】决定了事件触发后应该执行的逻辑。
事件类型
按照多种多样的事件类型划分为多个类别：鼠标事件、键盘事件、表单事件、焦点事件等，并一一进行讲解。
鼠标事件
鼠标事件是指跟鼠标操作相关的事件，如单击、双击、移动等。
- `mouseenter 监听鼠标是否移入 DOM 元素
<body>
<h3>鼠标事件</h3>
<p>监听与鼠标相关的操作</p>
<hr>
<div class="box"></div>
<script>
// 需要事件监听的 DOM 元素
const box = document.querySelector('.box');
// 监听鼠标是移入当前 DOM 元素
box.addEventListener('mouseenter', function () {
// 修改文本内容
this.innerText = '鼠标移入了...';
// 修改光标的风格
this.style.cursor = 'move';
})
</script>
</body>
AI写代码- `mouseleave 监听鼠标是否移出 DOM 元素
<body>
<h3>鼠标事件</h3>
<p>监听与鼠标相关的操作</p>
<hr>
<div class="box"></div>
<script>
// 需要事件监听的 DOM 元素
const box = document.querySelector('.box');
// 监听鼠标是移出当前 DOM 元素
box.addEventListener('mouseleave', function () {
// 修改文本内容
this.innerText = '鼠标移出了...';
})
</script>
</body>
AI写代码键盘事件
keydown 键盘按下触发
keyup 键盘抬起触发
焦点事件
focus 获得焦点
blur 失去焦点
文本框输入事件
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>
AI写代码第1个参数
第1个参数
接下来简单看一下事件对象中包含了哪些有用的信息：
ev.type该字段用于表示当前事件类型
2.ev.clientX/Y表示光标在浏览器窗口中的位置坐标
3.ev.offsetX/Y该字段记录了光标在当前DOM元素内的坐标位置
注：在事件回调函数内部通过 window.event 同样可以获取事件对象。
环境对象
能够分析判断函数运行在不同环境中 this 所指代的对象。
在编程语言中，环境对象被称为一个独特的标记符 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>
AI写代码结论：
谁调用 this 就是谁
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>
AI写代码函数 bar 做参数传给了 foo 函数，bar 就是所谓的回调函数了！！！
我们回顾一下间歇函数 setInterval
<script>
function fn() {
console.log('我是回调函数...');
}
// 调用定时器
setInterval(fn, 1000);
</script>
AI写代码fn$ 被传递给 $setInterval$ ，这即回调函数的实际应用了。结合我们之前所学的内容而言，在这种情况下这种写法更为常见。
<script>
// 调用定时器，匿名函数做为参数
setInterval(function () {
console.log('我是回调函数...');
}, 1000);
</script>
AI写代码结论：
从本质上讲，回调函数仍然是一个功能模块，并非仅仅作为参数传递。
在实际应用中，默认情况下人们更倾向于使用匿名函数作为回调机制。
Web APIs - 第3天
进一步学习 事件进阶，并深入研究 事件高级功能
开发更丰富的网页交互效果
并结合事件流特性提升执行效率
- 掌握阻止事件冒泡的方法
- 理解事件委托的实现原理
事件流
作为记录方式之一，在特定场景下用于记录数据变化情况。深入掌握各环节的操作流程能够帮助我们更好地理解系统运行机制。从而提高在实际开发中处理各类问题的能力。
如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。
从父到子
父至子
父至子
捕获和冒泡
了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：
<body>
<h3>事件流</h3>
<p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
<div class="outer">
<div class="inner">
<div class="child"></div>
</div>
</div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');
const child = document.querySelector('.child');
// html 元素添加事件
document.documentElement.addEventListener('click', function () {
console.log('html...')
})
// body 元素添加事件
document.body.addEventListener('click', function () {
console.log('body...')
})
// 外层的盒子添加事件
outer.addEventListener('click', function () {
console.log('outer...')
})
// 中间的盒子添加事件
outer.addEventListener('click', function () {
console.log('inner...')
})
// 内层的盒子添加事件
outer.addEventListener('click', function () {
console.log('child...')
})
</script>
</body>
AI写代码相继触发
基于事件流的特点，在传递过程中该特定的触发行为会在信息流动的过程中经历如下过程：首先，在单个节点发生特定触发行为时（即该节点发生特定触发行为），系统会在后续的时间点依次将这一触发行为沿着路径传递给它的所有祖先节点；随后又会反向传播到其所有祖先节点中，并且如果在这一过程中的信息流动中遇到了已经发生过的相同触发行为，则该特定的触发行为会被再次激活。
执行顺序
执行顺序
编辑：补充说明：此字段主要记录事件发生顺序的具体情况
当事件属于"冒 bubble"阶段时（注：根据上下文可省略引号），我们称其为"bubble mode"（注：根据上下文可省略引号）。该件事情将会依次先处理子方块然后继续处理父方块，默认情况下采用"bubble mode"（注：根据上下文可省略引号）。）
当一个事件处于捕获阶段时，我们将其称为捕获模式；这种模式将首先启动父盒件事件后再启动子盒件事件。
<body>
<h3>事件流</h3>
<p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
<div class="outer">
<div class="inner"></div>
</div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
// 外层的盒子
outer.addEventListener('click', function () {
console.log('outer...')
}, true) // true 表示在捕获阶段执行事件
// 中间的盒子
outer.addEventListener('click', function () {
console.log('inner...')
}, true)
</script>
</body>
AI写代码结论：
- 通过第三个参数设置可以决定事件是在捕获阶段还是冒泡阶段被触发。
- 当第三个参数设置为
true时会执行捕获阶段操作，在false情况下则执行冒泡阶段操作，默认情况下该参数设为false。 - 只有当父级与子级元素具有相同的事件类型时才会引发相关影响。
- 绝大多数应用通常会采用默认的冒泡模式（其中一个原因是早期浏览器如IE版本可能不支持捕获机制）。
阻止冒泡
避免气泡生成是指通过技术手段切断事件的传递路径，在HTML渲染过程中确保事件仅在当前元素执行而不影响与其相关的上层元素。
<body>
<h3>阻止冒泡</h3>
<p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p>
<div class="outer">
<div class="inner">
<div class="child"></div>
</div>
</div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
const child = document.querySelector('.child')
// 外层的盒子
outer.addEventListener('click', function () {
console.log('outer...')
})
// 中间的盒子
inner.addEventListener('click', function (ev) {
console.log('inner...')
// 阻止事件冒泡
ev.stopPropagation()
})
// 内层的盒子
child.addEventListener('click', function (ev) {
console.log('child...')
// 借助事件对象，阻止事件向上冒泡
ev.stopPropagation()
})
</script>
</body>
AI写代码结论：事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡。
当鼠标触发事件时：
当发生 mouseover 或 mouseout 事件时会出现提示信息；
而当发生 mousemove 或 mouseleave 事件则不会显示提示（建议优先使用）。
事件委托
在程序设计中, 事件委托通常基于事件流的特性来应对各种实际开发需求的技术手段. 其核心目标在于提高程序运行效率.
大量的事件监听是比较耗费性能的，如下代码所示
<script>
// 假设页面中有 10000 个 button 元素
const buttons = document.querySelectorAll('table button');
for(let i = 0; i <= buttons.length; i++) {
// 为 10000 个 button 元素添加了事件
buttons.addEventListener('click', function () {
// 省略具体执行逻辑...
})
}
</script>
AI写代码基于上述代码的基础之上，在分析事件流特征后可采取如下改进措施：当父元素接收到与之相同类型的事件时（即发生冒泡模式），系统会自动触发父元素的响应机制；这一设计特性使得父元素能够响应并执行相关的事件处理逻辑；通过这种方式实现了对原有代码流程的优化效果
<script>
// 假设页面中有 10000 个 button 元素
let buttons = document.querySelectorAll('table button');
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
let parents = document.querySelector('table');
parents.addEventListener('click', function () {
console.log('点击任意子元素都会触发事件...');
})
</script>
AI写代码我们的核心目标在于确保只有在用户点击了 button 子元素时才会触发响应处理逻辑。请说明如何确定用户的点击对应的是哪一个子元素。
在事件对象中定义的target或srcElement属性标识为一个特定类型的节点
<script>
// 假设页面中有 10000 个 button 元素
const buttons = document.querySelectorAll('table button')
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
const parents = document.querySelector('table')
parents.addEventListener('click', function (ev) {
// console.log(ev.target);
// 只有 button 元素才会真正去执行逻辑
if(ev.target.tagName === 'BUTTON') {
// 执行的逻辑
}
})
</script>
AI写代码经过优化的代码仅对祖先元素进行事件监听，在处理数量为10,000时相较于处理1万多个元素而言具有显著提升的效率。
其他事件
页面加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
事件名：load
监听页面所有资源加载完毕：
window.addEventListener('load', function() {
// xxxxx
})
AI写代码元素滚动事件
滚动条在滚动的时候持续触发的事件
window.addEventListener('scroll', function() {
// xxxxx
})
AI写代码页面尺寸事件
会在窗口尺寸改变的时候触发事件：
window.addEventListener('resize', function() {
// xxxxx
})
AI写代码元素尺寸与位置
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
Web APIs - 第4天
进一步学习 DOM 相关知识，实现可交互的网页特效
- 能够插入、删除和替换元素节点
- 能够依据元素节点关系查找节点
日期对象
掌握 Date 日期对象的使用，动态获取当前计算机的时间。
在 ECMAScript 语言中，默认提供了用于获取系统时间的对象 Date。与之前学习过的内置对象 console 和 Math 相比，在调用方式上存在显著差异。调用该对象需要通过 new 关键字来初始化实例。
实例化
// 1. 实例化
// const date = new Date(); // 系统默认时间
const date = new Date('2020-05-01') // 指定时间
// date 变量即所谓的时间对象
console.log(typeof date)
AI写代码方法
// 1. 实例化
const date = new Date();
// 2. 调用时间对象方法
// 通过方法分别获取年、月、日，时、分、秒
const year = date.getFullYear(); // 四位年份
const month = date.getMonth(); // 0 ~ 11
AI写代码getFullYear 获取四位年份
getMonth 获取月份，取值为 0 ~ 11
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59
时间戳
1970年1月1日零时零分零秒开始计算的累积总时长（以秒或千分之一秒计），它是特殊的时间计量方式的一种。
注：ECMAScript 中时间戳是以毫秒计的。
// 1. 实例化
const date = new Date()
// 2. 获取时间戳
console.log(date.getTime())
// 还有一种获取时间戳的方法
console.log(+new Date())
// 还有一种获取时间戳的方法
console.log(Date.now())
AI写代码获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()
DOM 节点
学习并熟悉执行元素节点创建、复制、插入和删除等基本操作的方法论，并能够基于元素节点之间的关联关系定位所需节点。
回顾过去DOM操作主要处理元素节点的属性和文本内容；此外还有专门作用于元素节点自身的行为；例如插入复制删除以及替换这些基本操作
插入节点
在已有的一些DOM节点中添加一个新的DOM节点时,需考虑两个主要因素:首先要获得一个新的DOM节点;其次是在哪里放置这个新节点.
如下代码演示：
<body>
<h3>插入节点</h3>
<p>在现有 dom 结构基础上插入新的元素节点</p>
<hr>
<!-- 普通盒子 -->
<div class="box"></div>
<!-- 点击按钮向 box 盒子插入节点 -->
<button class="btn">插入节点</button>
<script>
// 点击按钮，在网页中插入节点
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
// 1. 获得一个 DOM 元素节点
const p = document.createElement('p')
p.innerText = '创建的新的p标签'
p.className = 'info'
// 复制原有的 DOM 节点
const p2 = document.querySelector('p').cloneNode(true)
p2.style.color = 'red'
// 2. 插入盒子 box 盒子
document.querySelector('.box').appendChild(p)
document.querySelector('.box').appendChild(p2)
})
</script>
</body>
AI写代码结论：
createElement 动态创建任意 DOM 节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
appendChild 在末尾（结束标签前）插入节点
再来看另一种情形的代码演示：
<body>
<h3>插入节点</h3>
<p>在现有 dom 结构基础上插入新的元素节点</p>
<hr>
<button class="btn1">在任意节点前插入</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
// 点击按钮，在已有 DOM 中插入新节点
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
// 第 2 个 li 元素
const relative = document.querySelector('li:nth-child(2)')
// 1. 动态创建新的节点
const li1 = document.createElement('li')
li1.style.color = 'red'
li1.innerText = 'Web APIs'
// 复制现有的节点
const li2 = document.querySelector('li:first-child').cloneNode(true)
li2.style.color = 'blue'
// 2. 在 relative 节点前插入
document.querySelector('ul').insertBefore(li1, relative)
document.querySelector('ul').insertBefore(li2, relative)
})
</script>
</body>
AI写代码结论：
createElement 动态创建任意 DOM 节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
insertBefore 在父节点中任意子节点之前插入新节点
删除节点
去除现有的 DOM 结构体时也必须考虑到两个方面：一方面主要依赖于父级元素的处理逻辑来完成；另一方面还必须确定具体要修改的是哪一个子节点。
<body>
<!-- 点击按钮删除节点 -->
<button>删除节点</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Web APIs</li>
</ul>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
// 获取 ul 父节点
let ul = document.querySelector('ul')
// 待删除的子节点
let lis = document.querySelectorAll('li')
// 删除节点
ul.removeChild(lis[0])
})
</script>
</body>
AI写代码结论：removeChild 删除节点时一定是由父子关系。
查找节点
DOM树中的任意节点都不会独自存在，在这种结构中，每个节点都与其父节点或同级节点保持特定的关系。除此之外，在分析各节点之间的关联性时就可以有效地定位所需的具体内容。
父子关系
<body>
<button class="btn1">所有的子节点</button>
<!-- 获取 ul 的子节点 -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript 基础</li>
<li>Web APIs</li>
</ul>
<script>
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
// 父节点
const ul = document.querySelector('ul')
// 所有的子节点
console.log(ul.childNodes)
// 只包含元素子节点
console.log(ul.children)
})
</script>
</body>
AI写代码结论：
childNodes返回所有子节点信息，并将换行符视为空白文本节点children仅过滤出那些属于元素类型的节点
<body>
<table>
<tr>
<td width="60">序号</td>
<td>课程名</td>
<td>难度</td>
<td width="80">操作</td>
</tr>
<tr>
<td>1</td>
<td><span>HTML</span></td>
<td>初级</td>
<td><button>变色</button></td>
</tr>
<tr>
<td>2</td>
<td><span>CSS</span></td>
<td>初级</td>
<td><button>变色</button></td>
</tr>
<tr>
<td>3</td>
<td><span>Web APIs</span></td>
<td>中级</td>
<td><button>变色</button></td>
</tr>
</table>
<script>
// 获取所有 button 节点，并添加事件监听
const buttons = document.querySelectorAll('table button')
for(let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
// console.log(this.parentNode); // 父节点 td
// console.log(this.parentNode.parentNode); // 爷爷节点 tr
this.parentNode.parentNode.style.color = 'red'
})
}
</script>
</body>
AI写代码结论：parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。
兄弟关系
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript 基础</li>
<li>Web APIs</li>
</ul>
<script>
// 获取所有 li 节点
const lis = document.querySelectorAll('ul li')
// 对所有的 li 节点添加事件监听
for(let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
// 前一个节点
console.log(this.previousSibling)
// 下一下节点
console.log(this.nextSibling)
})
}
</script>
</body>
AI写代码结论：
- 通过
previousSibling属性，在CSS中可以获取当前元素的前一个兄弟元素（即直接前驱），这种操作基于相对定位机制获取相邻元素。 - 使用
nextSibling属性，在CSS中能够定位到当前元素的后一个兄弟元素（即直接后继），这种定位方式同样适用于多种复杂场景。
Web APIs - 第5天笔记
目标： 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力
- BOM操作
- 综合案例
js组成
JavaScript的组成
ECMAScript:
* 规定了js基础语法核心知识。
* 比如：变量、分支语句、循环语句、对象等等Web APIs :
- DOM文档对象模型定义了一个用于操作HTML文档的功能模块集合
- BOM浏览器对象模型提供了一个用于管理浏览器窗口的操作系统功能集合
window对象
BOM (Browser Object Model ) 是浏览器对象模型
- 这是一个最顶层的对象；也可被视为JavaScript程序中最高级的对象。
- document、alert()以及console.log()等均属于window对象的基本属性与方法。
- 通过var关键字在全局作用域中定义的所有变量及函数都会转为成为window对象的属性或方法。
- 在调用window下的属性或方法时无需明确指定其所属的对象。
定时器-延迟函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法：
setTimeout(回调函数, 延迟时间)
AI写代码setTimeout仅在调用时执行一次, 等同于将一段代码延迟执行, 平时无需在调用前先创建window对象
间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window
清除延时函数：
clearTimeout(timerId)
AI写代码注意点
- 延时函数需要等待,所以后面的代码先执行
- 返回值是一个正整数，表示定时器的编号
<body>
<script>
// 定时器之延迟函数
// 1. 开启延迟函数
let timerId = setTimeout(function () {
console.log('我只执行一次')
}, 3000)
// 1.1 延迟函数返回的还是一个正整数数字，表示延迟函数的编号
console.log(timerId)
// 1.2 延迟函数需要等待时间，所以下面的代码优先执行
// 2. 关闭延迟函数
clearTimeout(timerId)
</script>
</body>
AI写代码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>
// location 对象
// 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>
AI写代码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'
}})();
AI写代码histroy对象
history（历史）是一个对象，在此框架下它负责管理所有历史记录。该对象与浏览器的地址栏操作相关联，并且支持例如前进和后退操作。
使用场景
历史对象通常在日常开发场景中较少被采用，在某些办公自动化系统中也会出现
常见方法：
<body>
<button class="back">←后退</button>
<button class="forward">前进→</button>
<script>
// histroy对象
// 1.前进
const forward = document.querySelector('.forward')
forward.addEventListener('click', function () {
// history.forward()
history.go(1)
})
// 2.后退
const back = document.querySelector('.back')
back.addEventListener('click', function () {
// history.back()
history.go(-1)
})
</script>
</body>
AI写代码本地存储（今日重点）
本地存储：将数据存储在本地浏览器中
常见的使用场景：
https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失
好处：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage和 localStorage 约 5M 左右
localStorage（重点）
功能: 数据能够长久地存储于本地浏览器，并在页面刷新或关闭时不会中断其完整性与安全性
**特性：**以键值对的形式存储，并且存储的是字符串， 省略了window
<!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>本地存储-localstorage</title>
</head>
<body>
<script>
// 本地存储 - localstorage 存储的是字符串
// 1. 存储
localStorage.setItem('age', 18)
// 2. 获取
console.log(typeof localStorage.getItem('age'))
// 3. 删除
localStorage.removeItem('age')
</script>
</body>
</html>
AI写代码sessionStorage（了解）
特性：
- 用法类似于JavaScript内置的localStorage功能基本上相同 *
- 主要区别在于当浏览器窗口被关闭时其存储内容会随之消失
存储：sessionStorage.setItem(key,value)
获取：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
localStorage 存储复杂数据类型
**问题：**本地只能存储字符串,无法存储复杂数据类型.
**解决：**需要将复杂数据类型转换成 JSON字符串,在存储到本地
**语法：**JSON.stringify(复杂数据类型)
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'))
</script>
</body>
AI写代码**问题：**因为本地存储里面取出来的是字符串，不是对象，无法直接使用
**解决： **把取出来的字符串转换为对象
**语法：**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>
AI写代码综合案例
数组map 方法
使用场景：
map 可以遍历数组处理数据，并且返回新的数组
语法：
<body>
<script>
const arr = ['red', 'blue', 'pink']
// 1. 数组 map方法 处理数据并且 返回一个数组
const newArr = arr.map(function (ele, index) {
// console.log(ele) // 数组元素
// console.log(index) // 索引号
return ele + '颜色'
})
console.log(newArr)
</script>
</body>
AI写代码映射也被认为是一种数学概念, 它描述的是两个集合之间元素一一对应的关联。
在JavaScript中,
map的核心在于它提供了一个函数来处理数组中的每个元素并生成新的数组, 而forEach则侧重于执行操作而不提供返回值或明确指定的状态变化（默认状态通常是空值或无操作）。
数组join方法
**作用：**join() 方法用于把数组中的所有元素转换一个字符串
语法：
<body>
<script>
const arr = ['red', 'blue', 'pink']
// 1. 数组 map方法 处理数据并且 返回一个数组
const newArr = arr.map(function (ele, index) {
// console.log(ele) // 数组元素
// console.log(index) // 索引号
return ele + '颜色'
})
console.log(newArr)
// 2. 数组join方法 把数组转换为字符串
// 小括号为空则逗号分割
console.log(newArr.join()) // red颜色,blue颜色,pink颜色
// 小括号是空字符串，则元素之间没有分隔符
console.log(newArr.join('')) //red颜色blue颜色pink颜色
console.log(newArr.join('|')) //red颜色|blue颜色|pink颜色
</script>
</body>
AI写代码Web APIs - 第6天笔记
目标：通过正则表达式支持小兔鲜注册页面的表单验证功能，并具备常见的表单验证配置。
- 正则表达式
- 综合案例
- 阶段案例
正则表达式
正则表达式 （Regular Expression）是一种字符串匹配的模式（规则）
使用场景：
- 例如验证表单时，在该手机号字段仅允许用户输入恰好11位的数字以确保数据的一致性（符合预期）。此外，在页面内容分析时会去除关键信息以避免泄露敏感数据。
正则基本使用
定义规则
const reg = /表达式/
AI写代码-
其中
/ /是正则表达式字面量- 正则表达式也是
对象
- 正则表达式也是
使用正则
test()函数 用于检测给定的正则表达式与特定字符串是否匹配- 当给定的正则表达式与特定字符串相匹配时 ，该函数会返回
true；否则返回false
<body>
<script>
// 正则表达式的基本使用
const str = 'web前端开发'
// 1. 定义规则
const reg = /web/
// 2. 使用正则 test()
console.log(reg.test(str)) // true 如果符合规则匹配上则返回true
console.log(reg.test('java开发')) // false 如果不符合规则匹配上则返回 false
</script>
</body>
AI写代码元字符
- 普通字符:
-
大多数字符仅能表达自身属性, 被称作普通字符, 如所有字母与数字.
-
普通字符只能匹配自身对应的字符串部分.
-
例如, 规定用户只能输入英文字母表内的26个英文字母, 普通字符即为 /[a-z]/.
- 元字符(特殊字符）
-
这些是一些独特含义的字符，并且显著提升了灵活性和强大的匹配功能。
- 例如，在规定用户只能输入英文字母的情况下，默认使用元字符表示法/[a-z]/。
边界符
在正则表达式中使用位置符（也称为边界符）来标识字符的位置。这些位置符主要包括两种类型。
如果 ^ 和 $ 在一起，表示必须是精确匹配
<body>
<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>
</body>
AI写代码量词
量词用来设定某个模式重复次数
注意： 逗号左右两侧千万不要出现空格
<body>
<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>
AI写代码范围
字符集合的定义域基于明确的规定，在特定条件下限定其取值范围。例如仅允许包含字母表中的字母、数字以及其他指定类型的数据，并采用的方式或标准作为统一依据
<body>
<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>
</body>
AI写代码字符类
某些常见模式的简写方式，区分字母和数字
替换和修饰符
replace 替换方法，可以完成字符的替换
<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
</script>
</body>
AI写代码修饰符限定正则对某些细节行为的操作
例如判断是否区分大小写
以及支持多行模式匹配
- i 代表的是单词 ignore 的常见缩写形式，在正则匹配过程中字母的大小写不敏感。
- g 代表的是单词 global 的常用简写，在技术文档中常被使用。
g 这个参数用于指定全局模式匹配，默认情况下会将大小写字母视为等价。
<body>
<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>
</body>
AI写代码正则插件
change 事件
给input注册 change 事件，值被修改并且失去焦点后触发
判断是否有类
该元素的classList.contains()用于判断是否包含指定的className。如果包含指定className则返回true；如果没有包含指定className则返回false。
个人实战文档
本次实战是对自己整个 api阶段 的总结。
参考效果如下地址：
http://erabbit.itheima.net/#/product/3995139
本次实战主要分为以下几个模块。