环境安装

代码编辑器

下载安装包

VS Code 下载地址：https://code.visualstudio.com，下载完成后直接安装就可以了。

安装插件

安装插件流程：扩展 → 搜索插件 → 安装 → 重启 VS Code

  • 汉化菜单插件：Chinese (Simplified)
  • 颜色主题：One Dark Pro
  • 实时加载：Live Server
  • less文件转css文件：Easy LESS
  • 代码提示：IntelliSense for CSS class names in HTML
  • 错误提示：Error Lens

快捷键

  • 放大缩小字号：Ctrl + +/-
  • 页面格式化：Alt + Shift + F
  • 添加/取消注释：Ctrl + /
  • 收起所有节点：Ctrl + K + Ctrl + 0
  • 展开所有节点：Ctrl + K + Ctrl + J

网页浏览器

⭐⭐ 各大应用商店均可以下载 ⭐⭐

  • 谷歌浏览器
  • 火狐浏览器

HTML

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。通过使用HTML，网页开发者可以定义页面的结构和内容，比如段落、标题、链接、列表以及嵌入图片和视频等多媒体元素。

页面基本骨架

⭐⭐ 创建 HTML 基本骨架 ⭐⭐
创建一个以 .html 后缀名结尾的文件，使用编辑器打开该文件。
使用快捷键创建基本骨架：在文件中输入 → 英文的 ! → 然后按 Tab 或 Enter 都可以。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

⭐⭐ 标签解释 ⭐⭐
<!DOCTYPE html> ：是一个声明，它必须位于 HTML 文档的第一行，用于告知浏览器文档类型和版本。
<html> ：HTML文档的根元素，所有的元素都应该嵌套在这个标签内部。
<head> ：包含了文档的元数据，这些信息不会直接显示在页面上，但对浏览器解析文档和搜索引擎优化（SEO）非常重要。
<meta> ：提供关于HTML文档的元数据，例如字符集、视口设置、文档描述、关键词等。
<title> ：定义文档的标题，该标题会显示在浏览器的标签页上，并且是搜索引擎结果中的标题部分。
<body> ：包含网页的所有内容，如文本、图片、音频、视频、表格、表单等所有可见的内容。

文本相关标签

标题标签

显示效果：文字加粗、字号逐渐减小、独占一行
一级标题：一个网页就用一次，用来放新闻标题或网页 Logo

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

显示效果：独占一行、两个段落之间有空白间隙

1
<p>段落内容</p>

超链接标签

显示效果：都在一行显示、从一个页面跳转到另一个页面或同一页面的不同部分

1
2
3
4
5
6
7
8
9
10
11
12
13
<a href="https://www.example.com">访问示例网站</a>
<a href="https://www.example.com" target="_blank">在新标签页中打开</a>
<a href="https://www.example.com" title="点击访问示例网站">示例网站</a>
<a href="/path/to/file.pdf" download="myFile.pdf">下载PDF</a>
<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>
<a href="https://www.example.com" hreflang="en">英文版</a>
<a href="https://www.example.com" ping="/log/click">跟踪点击</a>
<a href="https://www.example.com" type="text/html">HTML文档</a>

<!-- 锚点链接：同一页面的不同部分 -->
<h2 id="section1">第一部分</h2>
<h2 id="section2">第二部分</h2>
<a href="#section1">跳转到第一部分</a>

⭐⭐ 属性解释 ⭐⭐
href：链接的目标 URL
target：指定链接打开的方式。默认情况下，链接在同一窗口或标签页中打开。

  • _blank：在新标签页或窗口中打开链接。
  • _self：在当前窗口或标签页中打开链接（默认行为）。
  • _parent：在父框架中打开链接（如果存在）。
  • _top：在整个窗口中打开链接（如果在框架内）。

title：当鼠标悬停在链接上时显示的提示信息。
download：指定链接应被下载而不是导航到该链接。可以设置为文件名，浏览器会自动命名下载的文件；若为空，则使用服务器提供的文件名。
rel：定义当前文档与目标资源之间的关系。常用于外部链接以提高安全性（如防止恶意站点）。

  • noopener：防止通过 window.opener 访问新页面。
  • noreferrer：防止发送 HTTP Referer 头。
  • nofollow：告诉搜索引擎不要跟随此链接。

hreflang：指定链接指向的资源的语言。
ping：指定一个或多个URL，当用户点击链接时，这些URL将接收通知（通常用于跟踪点击）。一个或多个URL，用空格分隔。
type：指定链接指向资源的MIME类型（通常与 rel 结合使用）。

代码格式化标签

1
<p>以下是代码示例：<code>console.log("Hello, World!");</code></p>

字体格式化标签

显示效果：都在一行显示
一般都用左边的标签

1
2
3
4
5
6
7
8
<!-- 加粗标签 -->
<strong>加粗</strong>   或 <b>加粗</b>
<!-- 倾斜标签 -->
<em>倾斜</em>           或 <i>倾斜</i>
<!-- 下划线标签 -->
<ins>下划线</ins>       或 <u>下划线</u>
<!-- 删除线标签 -->
<del>删除线</del>       或 <s>删除线</s>

首字母缩略词标签

1
<p>我们使用 <abbr title="HyperText Markup Language">HTML</abbr> 来编写网页。</p>

换行、水平线标签

换行和水平线标签都是单标签

1
2
3
4
<!-- 换行标签 -->
<br>
<!-- 水平线标签 -->
<hr>

媒体相关标签

图像标签

显示效果：都在一行显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<img src="image.jpg">

<!-- 同时使用多个属性 -->
<img 
    src="images/example.jpg" 
    alt="这是一个示例图片" 
    width="400" 
    height="300" 
    title="点击查看大图" 
    loading="lazy"
>

<!-- 用于标记图像、图表、照片、代码片段等独立的内容，并为其提供标题。 -->
<!-- <figure> 是块级元素（block），而 <figcaption> 是其子元素，用于描述图的内容。 -->
<figure>
    <img src="image.jpg" alt="一个图片">
    <figcaption>这是一个图片的说明文字。</figcaption>
</figure>

⭐⭐ 属性解释 ⭐⭐
src：指定图像文件的路径
alt：当图像无法加载时显示该文本
title：当用户将鼠标悬停在图像上时显示提示信息
width：设置图像的宽度（单位为像素）
height: 设置图像的高度（单位为像素）
loading：控制图像的懒加载行为。lazy 表示延迟加载，即仅当图像接近视口时才加载；eager 则表示立即加载。
crossorigin：允许跨域资源共享 (CORS) 请求以进行图像加载，值：anonymous 或 use-credentials
usemap：关联图像映射（image map），使得图像的不同部分可以链接到不同的URL。示例：usemap=”#mapname”
ismap：标记图像为服务器端映射，通常与 <form> 标签结合使用。

音频标签

1
2
3
4
5
6
7
8
<audio src="音频路径"></audio>

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<audio controls muted autoplay loop preload="auto">
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
</audio>

⭐⭐ 属性解释 ⭐⭐
controls：显示播放控件（如播放、暂停、音量等）
src：指定音频文件的路径。
autoplay：自动播放音频。
muted：初始状态下静音。
loop：音频播放结束后自动重新开始播放。
preload：提示浏览器如何预加载音频文件。

  • auto：尽可能预加载整个音频文件。
  • metadata：仅预加载音频文件的元数据（如时长、尺寸等）。
  • none：不预加载音频文件。

crossorigin：允许跨域资源共享 (CORS) 请求以进行音频加载，值：anonymous 或 use-credentials。
<source> 标签：用于指定多个音频文件源，以便支持不同浏览器对不同音频格式的支持。浏览器会尝试按顺序加载第一个支持的格式。

视频标签

1
2
3
4
5
<video controls width="600">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

⭐⭐ 属性解释 ⭐⭐

  • controls: 显示播放控件（如播放、暂停、音量等）。
  • autoplay: 页面加载时自动播放音频（注意：现代浏览器通常会阻止带有声音的自动播放）。
  • loop: 音频播放结束后自动重新开始。
  • muted: 静音播放。
  • src: 音频文件的路径。

字幕标签

1
2
3
4
5
6
7
<!-- 为 <video> 和 <audio> 元素提供字幕、描述或其他时间同步文本轨道。 -->
<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
    <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Español">
    您的浏览器不支持 video 标签。
</video>

⭐⭐ 属性解释 ⭐⭐

  • kind: 定义轨道类型（如 subtitles, captions, descriptions, chapters, metadata）。
  • src: 轨道文件的路径（通常是 WebVTT 文件）。
  • srclang: 轨道语言代码。
  • label: 轨道的用户可见标签。

嵌入外部应用

1
2
<!-- 用于嵌入外部应用或交互式内容（如 Flash） -->
<embed src="flash_movie.swf" width="600" height="400" type="application/x-shockwave-flash">

⭐⭐ 属性解释 ⭐⭐

  • src: 外部资源的路径。
  • type: 嵌入内容的 MIME 类型。
  • width 和 height: 设置嵌入内容的尺寸。

嵌入外部资源

1
2
3
4
5
<!-- 用于嵌入外部资源，如插件或其他多媒体内容。 -->
<object data="flash_movie.swf" type="application/x-shockwave-flash" width="600" height="400">
    <param name="movie" value="flash_movie.swf">
    您的浏览器不支持 object 标签。
</object>

⭐⭐ 属性解释 ⭐⭐

  • data: 外部资源的路径。
  • type: 嵌入内容的 MIME 类型。
  • width 和 height: 设置嵌入内容的尺寸。

嵌入其他页面

1
2
3
4
5
6
7
8
9
<!-- 用于在网页中嵌入另一个 HTML 文档 -->
<iframe 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
    width="560" 
    height="315" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen
>
</iframe>

⭐⭐ 属性解释 ⭐⭐

  • src: 要嵌入的页面或多媒体资源的 URL。
  • width 和 height: 设置 iframe 的尺寸。
  • allow: 设置允许的特性（如 autoplay, fullscreen 等）。

结构化数据标签

列表标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 无序列表 -->
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

<!-- 有序列表 -->
<ol start="5" reversed>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

<!-- 定义列表 -->
<dl>
  <dt>术语一</dt>
  <dd>术语一的定义。</dd>
  <dt>术语二</dt>
  <dd>术语二的定义。</dd>
</dl>

⭐⭐ 属性解释 ⭐⭐
start：定义列表项目的起始编号。
reversed：指定列表应按降序排列。

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table>
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
            <td>数据3</td>
        </tr>
        <tr>
            <td>数据4</td>
            <td>数据5</td>
            <td>数据6</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计</td>
            <td colspan="2">某些总结信息</td>
        </tr>
    </tfoot>
</table>

⭐⭐ 属性解释 ⭐⭐
<table> ：定义一个表格。
<thead> ：定义表格的头部。包含表头单元格 <th>，这些单元格通常用于显示列标题。
<tbody> ：定义表格的主体。包含实际的数据行 <tr> 和数据单元格 <td>。
<tfoot> ：定义表格的底部。包含<tr>和<td>通常用于显示汇总或总计信息。
<tr> ：定义表格中的一行。
<th> ：定义表头单元格。
<td> ：定义数据单元格。
rowspan ：指定合并单元格跨越的行数。
colspan ：指定合并单元格跨越的列数。

表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<form action="/submit" method="post" target="_blank" enctype="multipart/form-data">
    <!-- 表单项 -->
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required>

    <label for="gender">性别:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="uk" selected>英国</option>
    </select>

    <label for="photo">照片:</label>
    <input type="file" id="photo" name="photo" multiple>

    <label for="zip">邮编:</label>
    <input type="text" id="zip" name="zip" pattern="[0-9]{5}" title="请输入五位数的邮政编码">

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" placeholder="请输入您的邮箱地址">

    <label for="message">留言:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>

    <input type="submit" value="提交">
    <button type="reset">重置</button>
</form>

⭐⭐ 属性解释 ⭐⭐
action：指定表单数据提交的目标URL
method：指定提交表单时使用的HTTP方法
enctype：指定表单数据的编码类型

  • application/x-www-form-urlencoded（默认）
  • multipart/form-data（用于文件上传）
  • text/plain（纯文本格式，较少使用）

target：指定提交表单后结果页面的显示方式。

  • _self（默认，在当前窗口打开）
  • _blank（在新标签页或窗口打开）
  • _parent（在父框架中打开）
  • _top（在整个窗口中打开）

<label>：说明文字
<button>：按钮标签
<input>：创建各种类型的输入控件

  • type：定义控件类型
    • text：单行文本输入框。
    • password：密码输入框。
    • email：电子邮件输入框。
    • number：数字输入框。
    • checkbox：复选框。
    • radio：单选按钮。
    • file：文件上传。
    • submit：提交按钮。
    • reset：重置按钮。
  • required：标记该字段为必填项。
  • pattern：使用正则表达式定义输入格式。
  • placeholder：提供输入提示文本。
  • checked：输入框默认选中
  • multiple: 可以上传多个文件
  • id：与 label 标签中的 for 属性相对应
  • name：传输到服务端的属性名称

<select> 和 <option>：下拉选择列表

  • selected：下拉框默认选中

<textarea>：多行文本输入框

预格式化标签

它保留了文本中的空格、换行符和缩进，使得文本内容在网页上显示时与源代码中的格式保持一致。这在展示代码片段、诗歌、ASCII 艺术等需要精确控制格式的场景中非常有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<pre>
    这是一段预格式化的文本。

    它保留了所有的空格和换行。

    console.log("Hello, World!");

    {
        "name": "John Doe",
        "age": 30,
        "address": {
            "street": "123 Main St",
            "city": "Anytown"
        }
    }
</pre>

页面布局相关标签

header 标签

1
2
3
4
<!-- 适用于页面顶部、文章标题、导航栏等。 -->
<header>
    <h1>网站标题</h1>
</header>
1
2
3
4
5
6
7
8
<header>
    <h1>网站标题</h1>
    <!-- <nav> 适用于主导航菜单、面包屑导航 -->
    <nav>
        <a href="#home">首页</a>
        <a href="#about">关于我们</a>
    </nav>
</header>

main 标签

1
2
3
4
5
<!-- 适用于文档的主要内容区域 -->
<main>
    <h1>欢迎来到我的网站</h1>
    <p>这是主内容区。</p>
</main>

aside 标签

1
2
3
4
5
6
7
8
<!-- 适用于侧边栏、广告、相关链接等内容。 -->
<aside>
    <h3>相关链接</h3>
    <ul>
        <li><a href="#">链接一</a></li>
        <li><a href="#">链接二</a></li>
    </ul>
</aside>

div 标签

1
2
3
4
<!-- 使用 <div> 标签可以将网页的不同部分（如头部、导航栏、主要内容区、侧边栏和页脚）分隔开来，并为每个部分应用不同的样式。 -->
<div>
    <!-- 内容 -->
</div>
1
2
3
4
<!-- 适用于页脚、版权信息、联系方式等。 -->
<footer>
    <p>版权所有 &copy; 2023 我的公司</p>
</footer>

section 标签

1
2
3
4
5
6
7
8
9
10
<!-- 主要用于将文档划分为不同的部分或章节，并不具体描述内容类型。 -->
<!-- 适用于较大范围的内容划分，如文章的不同部分、章节等。 -->
<section>
    <h2>第一部分</h2>
    <p>这是第一部分内容。</p>
</section>
<section>
    <h2>第二部分</h2>
    <p>这是第二部分内容。</p>
</section>

article 标签

1
2
3
4
5
<!-- 适用于博客文章、新闻条目、论坛帖子等独立内容块。 -->
<article>
    <h2>我的博客文章</h2>
    <p>这是我的博客文章内容。</p>
</article>

span 标签

1
2
<!-- 常用于对文档中的文本或部分内容进行分组和样式化。 -->
<p>这是一个段落，其中包含一个 <span>红色</span> 的单词。</p>

CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

使用方法

1.行内样式

1
2
<!-- 在 style 属性中写 CSS 代码 -->
<p style="color: blue; font-size: 20px;">这是一个段落。</p>

2.内部样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <title>内部样式表示例</title>
    <!-- 在 <style> 标签中写 CSS 代码 -->
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

3.外部样式表

⭐⭐首先：创建一个名为 styles.css 的文件

1
2
3
4
p {
    color: blue;
    font-size: 20px;
}

⭐⭐然后：在HTML文档中通过<link>标签引入这个CSS文件

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>外部样式表示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

选择器

标签选择器

1
2
3
4
5
6
7
8
<style>
    p {
        /* 样式规则 */
    }
</style>

<p>内容1</p>
<p>内容2</p>

全局选择器

1
2
3
4
5
6
7
8
9
<!-- 选择页面上的所有的标签：清除所有间距 -->
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>
<p>内容1</p>
<div>内容2</div>

类选择器

同一个 classname 可以使用多次

1
2
3
4
5
6
7
8
<style>
    .classname {
        /* 样式规则 */
    }
</style>

<div class="classname">内容1</div>
<div class="classname">内容2</div>

ID选择器

同一个 idname 只能使用一次

1
2
3
4
5
6
<style>
    #idname {
        /* 样式规则 */
    }    
</style>
<div id="idname">内容</div>

属性选择器

⭐⭐ 基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1.元素具有指定属性
[attribute] { /* 样式规则 */ }

2.元素的属性值完全匹配
[attribute="value"] { /* 样式规则 */ }

3.元素的属性值包含指定词
[attribute~="value"] { /* 样式规则 */ }

4.元素的属性值以指定值开头
[attribute|="value"] { /* 样式规则 */ }

5.元素的属性值以指定字符串开头
[attribute^="value"] { /* 样式规则 */ }

6.元素的属性值以指定字符串结尾
[attribute$="value"] { /* 样式规则 */ }

7.元素的属性值包含指定字符串
[attribute*="value"] { /* 样式规则 */ }

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!-- [attribute] - 元素具有指定属性 -->
<style>
    input[type] {
        background-color: lightyellow;
    }
</style>
<input type="text" placeholder="文本输入框">
<input placeholder="无类型输入框">


<!-- [attribute="value"] - 元素的属性值完全匹配 -->
<style>
    a[href="https://example.com"] {
        color: red;
    }
</style>
<a href="https://example.com">链接到Example</a>
<a href="https://another-example.com">另一个链接</a>


<!-- [attribute~="value"] - 元素的属性值包含指定词 -->
<style>
    p[class~="note"] {
        font-style: italic;
    }
</style>
<p class="note important">这是一个带备注的段落。</p>
<p class="warning">这是一个警告段落。</p>


<!-- [attribute|="value"] - 元素的属性值以指定值开头 -->
<style>
    img[src|="images"] {
        border: 2px solid black;
    }
</style>
<img src="images/header.jpg" alt="头部图片">
<img src="pictures/footer.png" alt="底部图片">


<!-- [attribute^="value"] - 元素的属性值以指定字符串开头 -->
<style>
    a[href^="mailto:"] {
        color: green;
    }
</style>
<a href="mailto:support@example.com">联系我们</a>
<a href="https://example.com">访问网站</a>


<!-- [attribute$="value"] - 元素的属性值以指定字符串结尾 -->
<style>
    img[src$=".png"] {
        opacity: 0.7;
    }
</style>
<img src="logo.png" alt="Logo">
<img src="background.jpg" alt="背景图">


<!-- [attribute*="value"] - 元素的属性值包含指定字符串 -->
<style>
    a[href*="example"] {
        text-decoration: underline;
    }
</style>
<a href="https://example.com">访问Example</a>
<a href="https://notexample.com">访问非Example</a>

子选择器

⭐⭐ 基本语法

1
2
3
4
5
6
parent > child {
    /* 样式规则 */
}

parent  是父元素的选择器
child   是子元素的选择器

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    nav > ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
</style>

<nav>
    <ul>
        <li>首页</li>
        <li>关于我们</li>
        <li>联系我们</li>
    </ul>
</nav>

<div>
    <ul>
        <li>其他列表项</li>
    </ul>
</div>

后代选择器

⭐⭐ 基本语法

1
2
3
4
5
6
ancestor descendant {
    /* 样式规则 */
}

ancestor    是祖先元素的选择器
descendant  是任何级别的后代元素的选择器

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    nav li {
        color: blue;
        font-weight: bold;
    }
</style>

<nav>
    <ul>
        <li>首页</li>
        <li>关于我们</li>
        <li>联系我们</li>
    </ul>
</nav>

<div>
    <ul>
        <li>其他列表项</li>
    </ul>
</div>

伪类选择器

⭐⭐ 基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
伪类选择器用于定义元素在某些特定状态下的样式

selector:pseudo-class {
    /* 样式规则 */
}

selector        是目标元素的选择器
pseudo-class    是伪类名称

1.动态伪类名称
:hover：选择鼠标指针悬停在上面的元素。
:active：选择用户正在激活的元素（例如点击或触摸）。
:focus：选择获得焦点的元素（例如通过Tab键导航到输入框）。
:visited：选择已被访问过的链接。
:link：选择未被访问过的链接。

2.UI状态伪类名称
:enabled：选择启用的表单元素。
:disabled：选择禁用的表单元素。
:checked：选择已选中的复选框或单选按钮。
:indeterminate：选择处于不确定状态的复选框或进度条。

3.结构伪类称
:first-child：选择作为其父元素的第一个子元素的元素。
:last-child：选择作为其父元素的最后一个子元素的元素。
:nth-child(n)：选择作为其父元素的第n个子元素的元素。
:nth-last-child(n)：选择作为其父元素倒数第n个子元素的元素。
:only-child：选择作为其父元素唯一子元素的元素。
:empty：选择没有子元素的元素（包括文本节点）。

4.否定伪类名称
:not：选择排除某些符合条件的元素

5.语言伪类名称
:lang(language)：选择具有指定语言代码的元素。

6.目标伪类名称
:target：选择当前页面中带有特定ID的目标元素

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!-- 鼠标悬停状态 -->
<style>
    a:hover {
        color: red;
        text-decoration: underline;
    }    
</style>
<a href="https://example.com">悬停链接</a>


<!-- 元素激活状态 -->
<style>
    button:active {
        background-color: darkblue;
        color: white;
    }
</style>
<button>点击按钮</button>


<!-- 元素获得焦点状态 -->
<style>
    input:focus {
        border-color: blue;
        outline: none;
    }
</style>
<input type="text" placeholder="请输入文本">


<!-- 第一个和最后一个子元素 -->
<style>
    ul li:first-child {
        font-weight: bold;
    }

    ul li:last-child {
        font-style: italic;
    }
</style>
<ul>
    <li>第一个列表项</li>
    <li>中间列表项</li>
    <li>最后一个列表项</li>
</ul>


<!-- 特定位置的子元素 -->
<style>
    ul li:nth-child(2) {
        background-color: lightgray;
    }

    /* 每隔两个元素应用样式 */
    ul li:nth-child(2n) {
        background-color: lightyellow;
    }
</style>
<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
</ul>


<!-- 否定伪类 -->
<style>
    p:not(.highlight) {
        color: black;
    }

    /* 排除带有特定类的按钮 */
    button:not([disabled]) {
        background-color: green;
    }
</style>
<p>这是一个普通段落。</p>
<p class="highlight">这是一个高亮段落。</p>

<button>启用按钮</button>
<button disabled>禁用按钮</button>


<!-- 已选中的表单元素 -->
<style>
    input:checked + label {
        font-weight: bold;
    }
</style>
<input type="checkbox" id="check1">
<label for="check1">选项1</label>

<input type="checkbox" id="check2">
<label for="check2">选项2</label>

伪元素选择器

⭐⭐ 基本语法

1
2
3
4
5
6
selector::pseudo-element {
    /* 样式规则 */
}

selector        是目标元素的选择器
pseudo-element  是伪元素名称

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!-- 在元素内容之前插入内容 -->
<style>
    p::before {
        content: "提示: ";
        color: blue;
    }
</style>
<p>这是一个段落。</p>


<!-- 在元素内容之后插入内容 -->
<style>
    blockquote::after {
        content: " — 引用结束";
        font-style: italic;
        color: gray;
    }
</style>
<blockquote>这是一段引用的文字。</blockquote>


<!-- 第一行文本的样式 -->
<style>
    p::first-line {
        font-weight: bold;
        color: red;
    }
</style>
<p>这是一个较长的段落，包含多行文本。这是第二行文本。</p>


<!-- 首字母的样式 -->
<style>
    p::first-letter {
        font-size: 2em;
        color: green;
    }
</style>
<p>这是一个段落，第一个字母将被放大并变为绿色。</p>


<!-- 表单占位符的样式 -->
<style>
    input::placeholder {
        color: gray;
        font-style: italic;
    }
</style>


<!-- 列表项标记的样式 -->
<style>
    li::marker {
        color: purple;
        font-size: 1.2em;
    }
</style>
<ul>
    <li>项目1</li>
    <li>项目2</li>
</ul>


<!-- 用户选中文本时的样式 -->
<style>
    ::selection {
        background-color: yellow;
        color: red;
    }
</style>

相邻兄弟选择器

⭐⭐ 基本语法

1
2
3
4
5
6
selector1 + selector2 {
    /* 样式规则 */
}

selector1   是前一个兄弟元素的选择器
selector2   是紧跟其后的兄弟元素的选择器

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    h2 + p {
        font-weight: bold;
        color: blue;
    }
</style>

<h2>这是一个标题</h2>
<p>这是紧跟在标题后的第一个段落。</p>
<p>这是另一个段落。</p>

<h2>这是另一个标题</h2>
<p>这是紧跟在第二个标题后的段落。</p>
<p>这是第二个标题下的另一个段落。</p>

通用兄弟选择器

⭐⭐ 基本语法

1
2
3
4
5
6
selector1 ~ selector2 {
    /* 样式规则 */
}

selector1   是前一个兄弟元素的选择器
selector2   是其后的任意兄弟元素的选择器

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    h2 ~ p {
        font-weight: bold;
        color: blue;
    }
</style>
<h2>这是一个标题</h2>
<p>这是紧跟在标题后的第一个段落。</p>
<p>这是紧跟在标题后的第二个段落。</p>
<div>这是一个div块。</div>
<p>这是紧跟在div块后的第三个段落。</p>

<h2>这是另一个标题</h2>
<p>这是紧跟在第二个标题后的段落。</p>
<p>这是第二个标题下的另一个段落。</p>

优先级

特异性

特异性是根据选择器的类型来确定的，从高到低分别是：

  1. 行内样式：直接在HTML元素中通过style属性定义的样式。
  2. ID选择器（#id）：例如 #header。
  3. 类选择器（.class）、属性选择器（[attribute]）和伪类选择器（:hover等）：例如：.intro、[type=”text”]、:hover。
  4. 标签选择器（div）和伪元素选择器（::before）：例如 div, p, ::after。
  5. 全局选择器（*）

继承性

不是所有的CSS属性都可以继承。通常只有文本相关的属性（如颜色、字体等）会被子元素继承。即使某个属性可被继承，若子元素有明确的样式设定，这些设定会覆盖继承来的样式。

层叠性

如果两个或更多的选择器具有相同的特异性，那么最后出现在样式表中的规则将会生效。
这同样适用于外部样式表与内部样式表之间的关系，后来加载的样式表中的规则会覆盖先前加载的样式表中的相同规则。

!important

使用!important声明可以覆盖任何特异性更高的样式规则。这意味着如果你在一个样式规则中添加了!important，这个规则将优先于其他没有标记为!important的规则。

样式属性

文字相关属性

属性 效果 可选值 示例
color 设置文本的颜色 可以使用颜色名、十六进制颜色码、RGB/RGBA、HSL/HSLA函数 color: #FF5733;
font-family 定义文本的字体系列 可以指定多个字体作为备选，以确保在用户的系统中至少有一个字体可用。
字体族：sans-serif 无衬线字体 		font-family: Arial, sans-serif;
font-size 设置字体大小 可以使用px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素字体大小）等 font-size: 16px;
font-weight 定义字体的粗细程度 常见的值有normal、bold、bolder、lighter以及数字值（例如100到900） font-weight: bold;
font-style 定义字体样式 常见的值有normal、italic、oblique font-style: italic;
text-align 设置文本的水平对齐方式 可选值包括left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐） text-align: center;
text-indent 首行缩进 可选值px、em等 text-decoration: 2em;
text-decoration 设置文本添加装饰效果 可以使用无效果（none）、下划线（underline）、删除线（line-through）等 text-decoration: underline;
line-height 设置行高，即行与行之间的空间大小 可以是一个具体的数值、百分比或长度单位 line-height: 1.6;
letter-spacing 调整字符之间的间距 可以是正数增加间距，也可以是负数减少间距 letter-spacing: 2px;
word-spacing 类似于letter-spacing，但它是用来调整单词间的间距 可以是正数增加间距，也可以是负数减少间距 word-spacing: 5px;

背景相关属性

属性 效果 可选值 示例
background-color 设置元素的背景颜色 可以使用颜色名称、十六进制值（例如：#ff0000）、RGB、RGBA、HSL、HSLA等形式定义颜色 background-color: #f3f3f3;
background-image 设置一个或多个背景图像 使用URL函数指定图像的位置。支持多背景图像，通过逗号分隔每个图像 background-image: url('image.jpg');
background-repeat 定义背景图像如何重复 repeat（默认，在两个方向上重复）
repeat-x（仅水平方向重复）
repeat-y（仅垂直方向重复）
no-repeat（不重复） 		background-repeat: no-repeat;
background-position 设置背景图像的起始位置 可以使用关键词组合（如top left），长度值（如10px 20px），百分比（如50% 50%表示居中）来定位 background-position: center top;
background-size 设置背景图片的大小 具体的尺寸（如50px 100px）
百分比
关键字cover（覆盖整个容器，可能部分图像不可见）
contain（图像完整显示，可能留有空白） 		background-size: cover;
background-attachment 控制背景图像是固定还是随着页面的其余部分滚动 scroll（随页面滚动，默认）
fixed（固定，不随页面滚动）
local（相对于元素的内容滚动） 		background-attachment: fixed;
background-origin 指定背景图像的定位区域是相对于哪个盒子进行定位的 可以用border-box、padding-box、content-box等 background-origin: padding-box;
background-clip 类似于background-origin，但它规定背景的绘制区域
可以用来限制背景色或图像的显示范围。 		可以用border-box、padding-box、content-box等 background-clip: content-box;
background 可以在一个声明中设置所有单独的背景属性 属性值无需按特定顺序排列，但推荐按照以下顺序：
background-color > background-image >
background-position > background-size >
background-repeat > background-attachment >
background-origin > background-clip 		background: url('image.jpg') no-repeat center center/cover;

盒子模型属性

在 CSS 中，盒子模型是围绕 HTML 元素的一个矩形区域，用于定义元素如何在页面上布局以及与其他元素的关系。每个 HTML 元素都被视为一个矩形框，这个框由几个部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。

属性 效果 可选值 示例
内容区 width 盒子宽度 px、em、rem等具体的长度单位
%：使用百分比
auto：自动计算
initial：默认值
inherit：从父元素继承
max-content：根据内容自然尺寸确定
min-content：根据内容最小需求确定
fit-content：前两个的结合
width: 200px;
height 盒子高度 height: 200px;
内边距 padding-top 设置元素顶部的内边距 padding-top: 10px;
padding-right 设置元素右侧的内边距 padding-right: 15px;
padding-bottom 设置元素底部的内边距 padding-bottom: 20px;
padding-left 设置元素左侧的内边距 padding-left: 25px;
padding 简写属性 padding: 10px; 上下左右均为10px
padding: 10px 20px; 上下为10px，左右为20px
padding: 10px 20px 30px; 上为10px，左右为20px，下为30px
padding: 10px 20px 30px 40px; 上为10px，右为20px，下为30px，左为40px
外边距 margin-top 设置元素顶部的外边距 margin-top: 10px;
margin-right 设置元素右侧的外边距 margin-right: 15px;
margin-bottom 设置元素底部的外边距 margin-bottom: 20px;
margin-left 设置元素左侧的外边距 margin-left: 25px;
margin 简写属性 margin: 10px; 上下左右均为10px
margin: 10px 20px; 上下为10px，左右为20px
margin: 10px 20px 30px; 上为10px，左右为20px，下为30px
margin: 10px 20px 30px 40px; 上为10px，右为20px，下为30px，左为40px
边框 border-width 定义边框的宽度 可以接受具体的长度值（如 px），
或使用预定义的关键字：thin, medium, thick 		border-width: 2px;
border-color 定义边框的颜色 可以使用颜色名称、
十六进制颜色码、
RGB、RGBA、HSL、HSLA等形式 		border-color: #0000ff;
border-style 定义边框的样式 none（无边框）
solid（实线）
dashed（虚线）
dotted（点线）
double（双线）
groove（3D凹槽）
ridge（3D凸槽）
inset（3D内嵌效果）
outset（3D外嵌效果） 		border-style: solid;
border-top 设置元素顶部的边框 border-top: 2px dashed blue;
border-right 设置元素右部的边框 border-right: 2px dashed blue;
border-bottom 设置元素底部的边框 border-bottom: 2px dashed blue;
border-left 设置元素左部的边框 border-left: 2px dashed blue;
border 简写属性 border: 2px solid red;
border-radius 设置创建圆角边框 可以接受具体的长度值(px) border-radius: 10px;
border-radius: 10px 5px 10px 20px;
相关属性 box-shadow 设置阴影效果 h-offset（水平偏移量）：必需。定义阴影的水平距离。
v-offset（垂直偏移量）：必需。定义阴影的垂直距离。
blur（模糊半径）：可选。定义阴影的模糊程度。
spread（扩展半径）：可选。定义阴影的大小
color：可选。定义阴影的颜色。
inset：可选。阴影将在元素内部显示（即内阴影）
 外阴影
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
内阴影
box-shadow: inset 5px 5px 10px #888;
多重阴影
box-shadow: 10px 10px 5px grey, -10px -10px 5px blue;
box-sizing 决定元素的宽度和高度如何计算 content-box：默认值
border-box：内边距和边框不会增加元素的总尺寸，而是从指定的宽度和高度中扣除
inherit：从父元素继承 box-sizing 属性的值
initial：设置为其默认值，即 content-box 		box-sizing: border-box;
overflow 设置当元素的内容超出其指定的宽度和高度时应如何展示 visible：默认值，溢出显示
hidden：超出元素框的内容将被隐藏
scroll：浏览器会在元素上添加滚动条
auto：根据需要自动添加滚动条
clip：类似于 hidden，但更加严格
overflow: auto;
overflow-x: scroll;
overflow-y: scroll;

布局相关属性

属性 效果 可选值 示例
display 转换元素的显示模式 block：转换成一个块级框
inline：转换成一个内联框
inline-block：转换成一个内联级别的块容器
none：完全从布局中移除元素，包括其空间
flex：将元素定义为块级弹性盒子容器
inline-flex：类似于 flex，但作为内联元素显示
grid：CSS Grid 布局
inline-grid：与 grid 相似，但作为内联元素处理
table, inline-table, table-row, table-cell等
contents：将子元素作为父容器的直接子元素参与布局
list-item：使元素表现得像是一个列表项 		display: block;
vertical-align 设置行内元素垂直对齐方式 baseline：将元素的基线与父元素的基线对齐
sub：将元素的基线下沉到下标位置
super：将元素的基线上升到上标位置
top：将元素的顶部与所在行中最高的元素顶部对齐
text-top：将元素的顶部与父元素的字体顶部对齐
middle：内容垂直居中
bottom：将元素的底部与所在行中最低的元素底部对齐
text-bottom：将元素的底部与父元素的字体底部对齐
length：使用具体的长度值
percentage：使用百分比值来调整垂直对齐
vertical-align: middle;
vertical-align: -2px;
flex
布局		 flex-direction 设置主轴的方向 row：子元素按顺序从左到右排列
row-reverse：子元素排列顺序相反，从右向左排列
column：子元素按顺序从上到下排列
column-reverse：子元素排列顺序相反，从下向上排列
flex-direction: column;
flex 设置元素在主轴方向的伸缩比 flex-grow：定义元素的放大比例，默认值为 0
flex-shrink：定义元素的缩小比例，默认值为 1
flex-basis：在分配多余空间之前，元素占据的主轴空间
flex: 1;
flex: 1 1 200px;
如果省略了 flex-shrink，则默认为 1
如果省略了 flex-basis，则默认为 0
justify-content 设置元素在主轴上的对齐方式 flex-start：元素从容器的起始边开始排列
flex-end：元素从容器的结束边开始排列
center：元素在容器中居中显示
space-between：每个元素中间的间隔相等
space-around：每个元素两侧的间隔相等
space-evenly：每个元素各个间距都相等
justify-content: space-between;
align-items
align-self
设置元素在侧轴上的对齐方式 stretch：元素没有设置高度，则填满整个容器
flex-start：元素从容器的起点开始排列
flex-end：元素从容器的终点开始排列
center：元素在容器内居中显示
baseline：元素根据它们的内容基线对齐
align-items：center;
flex-wrap 设置元素换行的方式 nowrap：不换行（默认）
wrap：当容器尺寸不够时换行显示
wrap-reverse：换行以相反位置显示
flex-wrap: wrap;
align-content 当有多行时，设置行的排序方式 flex-start：所有行从容器的起点开始排列
flex-end：所有行从容器的终点开始排列
center：行在容器内居中显示
space-between：每行中间的间隔相等
space-around：每行两侧的间隔相等
space-evenly：每行各个间隔都相等
stretch：没有指定高度，行会填满间隔（默认值）
align-content: space-between;
定位 position 设置元素的定位方式 static：元素按照正常的文档流进行布局（默认值）
relative：相对定位，元素相对于其正常位置进行定位
absolute：绝对定位，元素根据最近的已定位祖先元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位
sticky：粘性定位，元素根据用户的滚动位置进行定位
position: fixed;
top | right | bottom | left 设置元素偏移距离 top：设置元素顶部边缘与包含块顶部的距离
right：设置元素右边边缘与包含块右边的距离
bottom：设置元素底部边缘与包含块底部的距离
left：设置元素左边边缘与包含块左边的距离
position: static;不适用以上属性 		position: fixed;
top: 20px;
left: 30px;
z-index 设置元素的堆叠顺序 可以是任何整数值
值越大显示顺序越靠上 		position: fixed;
z-index: 2;

动态效果属性

属性 效果 可选值 示例
元素转换 transform 对元素应用2D或3D转换效果 translate（移动）
rotate（旋转）
scale（缩放）
skew（倾斜）
matrix（矩阵变换）
perspective（透视）
沿X轴移动50px，沿Y轴移动100px
transform: translate(50px, 100px);
逆时针旋转45度
transform: rotate(-45deg);
绕X轴旋转
transform: rotateX(45deg);
X轴方向放大2倍，Y轴方向放大1.5倍
transform: scale(2, 1.5);
X轴方向倾斜30度，Y轴方向倾斜20度
transform: skew(30deg, 20deg);
复杂的2D变换
transform: matrix(1, -0.3, 0, 1, 0, 0);
应用透视并旋转，最佳设置：800-1200像素
transform: perspective(1000px) rotateY(45deg);
transform-origin 设置元素转换原点 默认值为元素的中心点 将转换原点设置为左上角
transform-origin: 0 0;
transform-style 控制子元素在 3D 空间中的渲染方式
通常与 transform 和 perspective 属性一起使用
flat | preserve-3d 把该元素盒子变化为一个3D空间
.box{transform-style: preserve-3d;}
设置透视效果
.box{perspective: 1000px;}
过渡效果 transition-property 设置应用过渡效果的CSS属性名称 可以指定多个属性名，用逗号分隔
all 表示所有可过渡的属性
transition-property: background-color, width;
transition-duration 设置完成过渡效果所需的时间 默认值为 0s transition-duration: 0.5s;
transition-timing-function 设置过渡效果的速度曲线 ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier
transition-timing-function: ease-in-out;
transition-delay 设置过渡效果何时开始 默认值为 0s transition-delay: 0.2s;
transition 上边效果的复合简写属性 transition: [property] [duration] [timing-function] [delay]; transition: background-color 0.3s ease, width 0.3s ease;
光标 cursor 设置当鼠标指针悬停时的光标样式 default: 默认的箭头光标
pointer: 手型光标
text: 竖线光标
wait: 沙漏或旋转圈
help: 带问号的光标
move: 十字箭头
not-allowed: 圆圈加斜杠
row-resize: 上下箭头
col-resize: 左右箭头
grab: 手掌张开的光标
grabbing: 手掌闭合的光标
url(path): 自定义光标
cursor: url('https://example.com/cursor.cur'), pointer;
透明 opacity 设置元素的透明度 值的范围：0.0 - 1.0 opacity: 0.7;
渐变 linear-gradient 创建线性渐变背景 direction：指定渐变的方向
color-stop：起止颜色及其位置
从上到下的渐变，从红色过渡到蓝色
background: linear-gradient(to bottom, red, blue);
从左上角到右下角的45度角渐变
background: linear-gradient(45deg, red, blue);
包含三个颜色停止点的渐变
background: linear-gradient(to right, red, yellow 50%, green);
渐变透明度
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
radial-gradient 创建径向渐变背景 shape：指定渐变的形状
circle | ellipse
size：定义渐变的大小
closest-side | farthest-side
closest-corner | farthest-corner
position：设定渐变起点的位置
color-stop：指定颜色及其位置
基本的径向渐变
background: radial-gradient(circle, red, blue);
使用椭圆形，并指定其大小为覆盖最远的边
background: radial-gradient(ellipse farthest-corner, red, blue);
添加更多的颜色停止点以创建更复杂的渐变
background: radial-gradient(circle, red, yellow 30%, green);
改变渐变的起始位置，使其不是从中心开始
background: radial-gradient(circle at top left, red, blue);
使用透明度，可以创造出更加复杂的效果
background: radial-gradient(circle, rgba(255,0,0,1), rgba(255,0,0,0));
动画 @keyframes 定义动画关键帧的CSS样式 from 或 0%：表示动画的起点。
to 或 100%：表示动画的终点。
可以在 0% 到 100% 之间添加多个百分比值的关键帧。
@keyframes xxxname {from {margin-left: 0%;} to {margin-left: 100%;}}
animation-name 指定应用哪一个 @keyframes 定义的动画 @keyframes 的名称 div { animation-name: xxxname; }
animation-duration 定义完成一个周期的动画需要的时间 默认为 0s animation-duration: 2s;
animation-timing-function 设置动画的速度曲线 linear: 匀速
ease: 默认值，慢速开始，然后加快，最后缓慢结束
steps：分步进行
ease-in: 缓入（加速）
ease-out: 缓出（减速）
ease-in-out: 缓入缓出
cubic-bezier(n,n,n,n): 贝塞尔曲线
animation-timing-function: ease-in-out;
animation-delay 设置动画延迟开始时间 默认为 0s animation-delay: 1s;
animation-iteration-count 设置动画播放的次数 默认为：1
infinite：循环播放
animation-iteration-count: infinite;
animation-direction 设置是否在循环中反向播放动画 normal：默认值
reverse: 反向播放
alternate: 循环交替正反方向播放
alternate-reverse: 循环交替反正方向播放
animation-direction: alternate;
animation-fill-mode 设置动画结束后元素的状态 none: 不应用任何样式
forwards: 保持动画结束时的样式
backwards: 在延迟阶段应用动画开始前的第一帧样式
both: 同时应用 forwards 和 backwards
animation-fill-mode: forwards;
animation-play-state 设置动画的播放状态 running：默认值
paused： 暂停动画
animation-play-state: paused;
animation 上述所有属性的简写 -- animation: xxxname 2s ease-in-out 1s infinite alternate both running;

自适应相关属性

属性 描述 语法
rem 一种相对长度单位，相对于 HTML 文档的根元素标签的字体大小来计算 1. 在 CSS 中定义根元素的字体大小
html {font-size: 16px;}
2. 使用 rem 来设置其他元素的大小
相当于 19.2px (1.2 * 16px)
body {font-size: 1.2rem;}
vw 基于视口宽度的相对单位，1vw 等于视口宽度的 1%。 宽度为视口宽度的80%
.container {width: 80vw;}
vh 基于视口高度的相对单位，1vh 等于视口高度的 1%。 高度为视口高度的80%
.container {height: 80vh;}
@media 根据设备特性应用特定的样式规则 @media mediatype and (expression)
{ /* CSS rules */ }

⭐⭐ @media 可选值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
mediatype: 
    all：所有设备
    screen：电脑显示器、平板、手机等屏幕
    speech：屏幕阅读器
    print：打印预览模式下的页面

expression：
    包含一个或多个CSS属性表达式的条件
    可以使用 and、or 和 not 等逻辑运算符组合多个条件

常用媒体特性：
    width / min-width / max-width：定义视口的宽度条件。
    height / min-height / max-height：定义视口的高度条件。
    aspect-ratio / min-aspect-ratio / max-aspect-ratio：定义视口的宽高比条件。
    orientation：检查设备的方向（portrait | landscape）。
    resolution：定义设备的分辨率（dpi），适用于高清显示屏等。

⭐⭐ @media 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 1. 根据屏幕宽度调整样式 */
/* 当视口宽度小于600px时应用的样式 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 当视口宽度大于等于600px时应用的样式 */
@media screen and (min-width: 600px) {
    body {
        background-color: lightgreen;
    }
}


/* 2. 组合条件 */
/* 针对宽度大于700px且横屏方向的设备 */
@media screen and (min-width: 700px) and (orientation: landscape) {
    body {
        background-color: lightcoral;
    }
}

/* 3. 不同媒体类型的样式 */
/* 打印样式 */
@media print {
    body {
        font-size: 12pt;
        color: black;
    }

    .no-print {
        display: none;
    }
}

LESS

LESS 是一种动态样式表语言，属于 CSS 预处理器的一种，使编写 CSS 更加方便和可维护。

注释

1
2
3
4
5
// 单行注释

/*
   多行注释
*/

变量

1
2
3
4
5
6
7
// primary-color：可以自定义名称
@primary-color: #4D926F;

#header {
    // 使用
    color: @primary-color;
}

运算

1
2
3
4
5
6
7
8
9
10
// 支持数学运算以及内置的函数
@base-width: 50px;

#header {
  width: @base-width + 10;
}

.class {
  background-color: darken(#ff0000, 10%);
}

嵌套

1
2
3
4
5
6
7
8
// 以更直观的方式进行样式嵌套
// 模仿 HTML 的结构，减少重复代码
#header {
    h1 {
        font-size: 26px;
        color: @primary-color;
    }
}

混合

1
2
3
4
5
6
7
8
9
10
// 将一组属性从一个规则集中包含到另一个规则集中
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered();
}

继承

1
2
3
4
5
6
7
8
9
10
.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.error {
    .message;
    border-color: #f00;
}

导入

1
2
// 导入其他 LESS 文件
@import "library.less";

导出

LESS 的“导出”本质上是将 .less 文件编译为 .css 文件。可以根据需求选择手动编译、自动化工具、浏览器端实时编译或 IDE 插件的方式。

手动编译

1
2
3
4
5
6
7
LESS 官方提供了一个命令行工具 lessc，可以用来编译 .less 文件。

1. 安装 lessc
npm install -g less

2. 编译 .less 文件
lessc styles.less styles.css

实时编译

⭐⭐ 浏览器端实时编译

1
2
3
4
<!-- 在开发阶段，你可以直接在浏览器中加载 .less 文件，并使用 JavaScript 实时编译。 -->
<!-- 这种方法仅适用于开发环境，生产环境中应避免使用。 -->
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

⭐⭐ 使用 VSCode 插件💗推荐💗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
每次保存 .less 文件时，插件会自动生成对应的 .css 文件

1. 安装插件：在 VSCode 中搜索并安装 Easy LESS 插件

2. 配置输出路径
在项目的根目录下创建 .vscode/settings.json 文件
{
  "less.compile": {
    "outDir": "./css"
  }
}
或者直接在less文件第一行配置输出路径
写法一
    // out: ./css/
写法二
    // out: ./css/文件名称.css
不生成 .css 文件配置
    // out: false

⭐⭐ 使用 Webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1. 安装依赖
npm install --save-dev less less-loader css-loader style-loader

2. 在 webpack.config.js 中添加以下规则
module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
        ],
    },
};

3. 运行 Webpack
Webpack 会在构建时自动将 .less 文件编译为 .css，并注入到页面中。

JS

JS（JavaScript）是一种运行在客户端（浏览器）的编程语言，广泛应用于网页开发中，主要用于增强网页的交互性和动态性。作为Web开发的核心技术之一，它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处理样式和布局，而JavaScript则控制网页的行为和交互。

ECMAScript：这是JavaScript的核心部分，它规定了语言的基本语法、数据类型（如数字、字符串、布尔值、对象等）、运算符、流程控制语句（如条件语句、循环语句）等。ECMAScript是JavaScript的标准，确保了不同环境下的JavaScript代码可以保持一致的行为。
DOM：文档对象模型，DOM定义了一个与平台无关的接口，程序和脚本可以通过这个接口来动态访问和更新文档的内容、结构及样式。通过JavaScript，开发者可以使用DOM提供的API来选择元素、修改HTML内容、操作属性以及响应用户事件等。
BOM：浏览器对象模型，提供了与浏览器窗口进行交互的对象，例如window对象。它使JavaScript有能力控制浏览器显示的页面以外的部分，比如弹出新浏览器窗口、移动、关闭浏览器窗口以及提供对话框来与用户互动（如alert、prompt等）。此外，BOM还允许脚本获取屏幕分辨率信息、浏览器版本信息等。

输入/输出

输出

1
2
3
4
5
6
7
8
9
10
11
12
// 1. 使用 console.log() 输出到控制台
console.log("Hello, World!"); 

// 2. 使用 alert() 弹出提示框
alert("Welcome to JavaScript!"); 

// 3. 使用 document.write() 写入 HTML 文档
document.write("<h1>Hello, World!</h1>");

// 4. 修改 DOM 元素的内容
document.getElementById("output").innerText = "新的内容"; // 修改指定元素的内容
document.getElementById("output").innerHTML = "<strong>加粗的新内容</strong>"; // 插入 HTML 标签

输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 1. 使用 prompt() 获取用户输入
let userName = prompt("请输入你的名字：");
console.log("你好，" + userName);

// 2. 使用 confirm() 获取用户确认
let isConfirmed = confirm("你确定要继续吗？");
if (isConfirmed) {
    console.log("用户点击了确定");
} else {
    console.log("用户点击了取消");
}

// 3. 通过表单获取用户输入
<form id="myForm">
    <input type="text" id="userInput" placeholder="请输入内容">
    <button type="button" onclick="getInput()">提交</button>
</form>

function getInput() {
    // 获取输入框的值
    let inputValue = document.getElementById("userInput").value;
    console.log("用户输入的内容是：" + inputValue);
}

基本类型

变量/常量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// var：最早版本的 JavaScript 中用于声明变量的关键字，
// 使用 var 声明的变量具有函数作用域或全局作用域，并且可以重新声明和更新。
var x = 10;
x = 20; // 可以重新赋值
var x = 20; // 可以重新声明

// let: 在 ES6 中引入，用来声明具有块级作用域的变量。
// 与 var 不同，let 不允许在同一作用域内重复声明同一个变量，并且其作用域仅限于最近的一对花括号 {} 内。
let y = 10;
y = 20; // 可以重新赋值
// let y = 20; // 错误：不能重复声明

// const: 在 ES6 引入，用于声明常量。具有块级作用域且值不允许修改。
const z = 10;
// z = 20; // 错误：常量不能重新赋值

number

用于表示整数或浮点数。JavaScript 中的所有数字都是双精度64位格式存储的。

1
2
3
4
5
let integer = 42; // 整数
let float = 3.14; // 浮点数

console.log(integer); // 42
console.log(float); // 3.14

boolean

只有两个字面值：true 和 false。布尔值主要用于条件判断表达式中。

1
2
3
4
5
let isTrue = true;
let isFalse = false;

console.log(isTrue); // true
console.log(isFalse); // false

string

用于表示文本数据，即一串字符序列。字符串可以用单引号、双引号或者反引号包裹。

1
2
3
4
5
6
7
8
9
10
11
12
let singleQuote = 'Hello';
let doubleQuote = "World";
let backTick = `Welcome`;

console.log(singleQuote); // Hello
console.log(doubleQuote); // World
console.log(backTick); // Welcome

// 模板字符串
let num = 42;
let message = `The answer is ${num}`;
console.log(message); // 输出: "The answer is 42"

undefined

表示未定义的值。当声明一个变量但没有赋值时，默认就是 undefined。

1
2
let a;
console.log(a); // undefined

null

表示空值或不存在的对象。虽然 null 和 undefined 都表示“无”的概念，但它们有本质的区别。null 是一个被赋值为“无”的对象（尽管它实际上并不是对象），而 undefined 表示一个尚未初始化的值。

1
2
let b = null;
console.log(b); // null

NaN

NaN 在 JavaScript 中代表“Not-A-Number”，即非数字值，是一个特殊的数值类型，用于表示非法或未定义的数值结果。

1
2
3
4
5
6
7
8
9
10
11
let a = "Hello" / 2; // 尝试对非数字进行数学操作
console.log(a); // 输出: NaN

// 使用 isNaN() 检查
console.log(isNaN(a)); // 输出: true

// 使用 Number.isNaN() 检查，推荐方法
console.log(Number.isNaN(a)); // 输出: true

// NaN 的比较特性
console.log(NaN === NaN); // 输出: false

BigInt

BigInt 是一种内置对象，它提供了一种方法来表示大于 2^53 - 1 的整数。这原本是 JavaScript 中可以用 Number 表示的最大整数。通过将一个整数或者整数字符串与 n 结尾组合起来，可以创建一个 BigInt。

1
2
let bigInt = 1234567890123456789012345678901234567890n;
console.log(bigInt); // 1234567890123456789012345678901234567890n

Symbol

Symbol 类型是唯一的且不可变的数据类型，通常用作对象的键。每一个从 Symbol() 返回的 symbol 值都是唯一的。

1
2
3
4
5
let sym1 = Symbol();
let sym2 = Symbol("foo");

console.log(sym1); // Symbol()
console.log(sym2); // Symbol(foo)

类型转换

类型转换是指将一个数据类型转换为另一种数据类型。JavaScript 提供了两种类型的类型转换：隐式类型转换和显式类型转换。

隐式类型转换是由 JavaScript 自动完成的，通常发生在表达式中需要某种特定类型时。例如，在加法操作中，如果一个操作数是字符串，则另一个操作数会被自动转换为字符串。

显式类型转换是开发者主动通过代码将一种类型转换为另一种类型。这是更推荐的方式，因为它提高了代码的可读性和可控性。

⭐⭐ 隐式类型转换

1
2
3
4
5
6
7
8
9
10
11
// 数字与字符串相加
let result = 5 + "10"; // 隐式转换为字符串
console.log(result); // 输出: "510"

// 布尔值在数学运算中被隐式转换为数字
let bool = true;
console.log(bool + 10); // true 被转换为 1，输出: 11

// null 和 undefined 的隐式转换
console.log(null + 10); // null 被转换为 0，输出: 10
console.log(undefined + 10); // undefined 被转换为 NaN，输出: NaN

⭐⭐ 显式类型转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 转换为数字
let str = "123";
let num1 = Number(str);
console.log(num1); // 输出: 123

let invalidStr = "hello";
let num2 = Number(invalidStr);
console.log(num2); // 输出: NaN
console.log(Number(true)); // 输出: 1
console.log(Number(false)); // 输出: 0

let mixedStr = "456abc";
console.log(parseInt(mixedStr)); // 输出: 456
console.log(parseFloat("3.14abc")); // 输出: 3.14


// 转换为布尔值
console.log(Boolean(0)); // 输出: false
console.log(Boolean("")); // 输出: false
console.log(Boolean(null)); // 输出: false
console.log(Boolean(undefined)); // 输出: false
console.log(Boolean(NaN)); // 输出: false

console.log(Boolean(1)); // 输出: true
console.log(Boolean("Hello")); // 输出: true
console.log(Boolean([])); // 输出: true (空数组也是真值)
console.log(Boolean({})); // 输出: true (空对象也是真值)

// 转换为字符串
let num = 123;
let str1 = String(num); // 使用 String() 函数
let str2 = num.toString(); // 使用 .toString() 方法

console.log(str1); // 输出: "123"
console.log(str2); // 输出: "123"

let bool = true;
console.log(String(bool)); // 输出: "true"


// 特殊情况：一元操作符 +
let str = "123";
let num = +str; // 使用一元操作符 +
console.log(num); // 输出: 123

let invalidStr = "hello";
console.log(+invalidStr); // 输出: NaN

⭐⭐ 细节注意

1
2
3
4
5
6
7
8
9
10
11
1. 避免意外的隐式转换：隐式类型转换可能导致难以发现的错误。
console.log("5" - 3); // 输出: 2（隐式转换为数字）
console.log("5" + 3); // 输出: "53"（隐式转换为字符串）

2. null 和 undefined 的区别：
null 在数学运算中会被视为 0。
undefined 在数学运算中会被视为 NaN。

3. 强制转换为布尔值时的陷阱：
空字符串 "" 和数字 0 会被视为 false。
空数组 [] 和 空对象 {} 会被视为 true。

运算符

运算符用于执行程序代码运算，会操作一个或多个操作数以产生一个新值。

算术运算符

运算符 描述
+ 加法：将两个数值相加
- 减法：从一个数值中减去另一个数值
* 乘法：将两个数值相乘
/ 除法：用一个数值除以另一个数值
% 取模（求余）：返回两个数值相除后的余数
++ 自增：将变量的值增加1
放在变量前（先自增后使用）
放在变量后（先使用后自增）
-- 自减：将变量的值减少1
放在变量前（先自减后使用）
放在变量后（先使用后自减）

⭐⭐ 应用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let a = 10, b = 3;

console.log(a + b); // 加法：13
console.log(a - b); // 减法：7
console.log(a * b); // 乘法：30
console.log(a / b); // 除法：3.333...
console.log(a % b); // 取模（求余）：1

let c = 5;
c++; // 自增：6
console.log(c);

let d = 5;
d--; // 自减：4
console.log(d);

赋值运算符

运算符 描述
= 基本赋值运算符，把右边表达式的值赋给左边的变量。
+= 两个变量相加后再赋值给左侧变量
-= 两个变量相减后再赋值给左侧变量
*= 两个变量相乘后再赋值给左侧变量
/= 两个变量相除后再赋值给左侧变量
%= 两个变量取模后再赋值给左侧变量

⭐⭐ 应用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let x = 10;

x += 5; // 等价于 x = x + 5，结果为 15
console.log(x);

x -= 3; // 等价于 x = x - 3，结果为 12
console.log(x);

x *= 2; // 等价于 x = x * 2，结果为 24
console.log(x);

x /= 4; // 等价于 x = x / 4，结果为 6
console.log(x);

x %= 5; // 等价于 x = x % 5，结果为 1
console.log(x);

比较运算符

运算符 描述
== 相等：检查两个操作数是否相等，在比较之前进行类型转换
=== 全等：检查两个操作数是否相等且类型相同
!= 不等：检查两个操作数是否不相等，在比较之前进行类型转换
!== 不全等：检查两个操作数是否不相等或类型不同
> 大于：检查左操作数是否大于右操作数
< 小于：检查左操作数是否小于右操作数
>= 大于等于：检查左操作数是否大于等于右操作数
<= 小于等于：检查左操作数是否小于等于右操作数

⭐⭐ 应用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
let num1 = 5, num2 = "5";

console.log(num1 == num2);  // true (相等，类型转换后比较)
console.log(num1 === num2); // false (全等，类型不同)

console.log(num1 != num2);  // false (不等，类型转换后比较)
console.log(num1 !== num2); // true (不全等，类型不同)

console.log(num1 > 3);      // true
console.log(num1 < 3);      // false

console.log(num1 >= 5);     // true
console.log(num1 <= 4);     // false

逻辑运算符

运算符 描述
&& 逻辑与：当两边的操作数都为 true 时返回 true
|| 逻辑或：两边的操作数只要有一个为 true 就返回 true
! 逻辑非：对操作数的布尔值取反

⭐⭐ 应用示例

1
2
3
4
5
let p = true, q = false;

console.log(p && q); // false (逻辑与)
console.log(p || q); // true (逻辑或)
console.log(!p);     // false (逻辑非)

位运算符

运算符 描述
& 按位与：对两个操作数的每一位执行与操作
| 按位或：对两个操作数的每一位执行或操作
^ 按位异或：对两个操作数的每一位执行异或操作
~ 按位非：反转操作数的每一位
<< 左移：将第一个操作数的所有位向左移动指定的位数
>> 右移：将第一个操作数的所有位向右移动指定的位数
>>> 无符号右移：将第一个操作数的所有位向右移动指定的位数，并在左侧补0

⭐⭐ 应用示例

1
2
3
4
5
6
7
8
9
10
11
let bit1 = 5;  // 二进制：0101
let bit2 = 3;  // 二进制：0011

console.log(bit1 & bit2);  // 按位与：0001 (1)
console.log(bit1 | bit2);  // 按位或：0111 (7)
console.log(bit1 ^ bit2);  // 按位异或：0110 (6)
console.log(~bit1);        // 按位非：-6 (取反每一位)

console.log(bit1 << 1);    // 左移：1010 (10)
console.log(bit1 >> 1);    // 右移：0010 (2)
console.log(bit1 >>> 1);   // 无符号右移：0010 (2)

其他运算符

运算符 描述
? : 三元运算符：根据条件选择性地执行代码块
, 逗号运算符：允许在一处评估多个表达式，并返回最后一个表达式的值
typeof 返回一个字符串，表示未经计算的操作数的类型
delete 删除对象上的属性
in 检查对象中是否存在指定属性
instanceof 检查某个构造函数的 prototype 属性所指向的对象是否存在另外一个要检测对象的原型链上

⭐⭐ 应用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 条件运算符（三元运算符）
let age = 20;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // Yes


// 逗号运算符
let result = (1 + 2, 3 + 4);
console.log(result); // 7 (返回最后一个表达式的值)


// typeof 运算符
let str = "Hello";
console.log(typeof str); // string


// delete 运算符
let obj = { name: "Alice", age: 25 };
delete obj.age;
console.log(obj); // { name: "Alice" }


// in 运算符
let person = { name: "Bob", age: 30 };
console.log("name" in person); // true
console.log("gender" in person); // false


// instanceof 运算符
let arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

运算符的优先级

运算符优先级决定了表达式中运算符的计算顺序。具有较高优先级的运算符会先于较低优先级的运算符进行计算。

优先级 运算符
1 小括号
2 一元运算符
3 算数运算符
4 关系运算符
5 相等运算符
6 逻辑运算符
7 赋值运算符
8 逗号运算符

流程控制

分支语句

⭐⭐ if...else 语句

if 语句用于基于不同的条件执行不同的代码块。如果条件为真，则执行一个代码块；如果条件为假，则可以使用 else 执行另一个代码块。

1
2
3
4
5
6
let age = 20;
if (age >= 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}

⭐⭐ switch 语句

switch 语句用于基于不同的 case 执行不同的代码块，它提供了一种替代多个 if...else 语句的方式。

1
2
3
4
5
6
7
8
9
10
11
let day = "Monday";
switch (day) {
    case "Monday":
        console.log("星期一");
        break;
    case "Tuesday":
        console.log("星期二");
        break;
    default:
        console.log("其他日子");
}

循环语句

⭐⭐ for 循环

for 循环是一种用于重复执行某段代码直到满足特定条件为止的循环结构。

1
2
3
for (let i = 0; i < 5; i++) {
    console.log(i); // 输出 0 到 4
}

⭐⭐ while 循环

while 循环会在指定的条件为真的情况下重复执行代码块。

1
2
3
4
5
let i = 0;
while (i < 5) {
    console.log(i); // 输出 0 到 4
    i++;
}

⭐⭐ do...while 循环

do...while 循环与 while 循环类似，但它会先执行一次循环体内的代码，然后再检查条件是否为真。

1
2
3
4
5
let i = 0;
do {
    console.log(i); // 至少输出一次 i 的值
    i++;
} while (i < 5);

跳转语句

⭐⭐ break 语句

break 语句用于立即退出循环或 switch 语句。

1
2
3
4
5
6
for (let i = 0; i < 10; i++) {
    if (i == 3) { 
        break; // 当 i 等于 3 时退出循环
    }
    console.log(i); // 输出 0 到 2
}

⭐⭐ continue 语句

continue 语句用于跳过当前循环体中剩余的语句，并继续进行下一次循环迭代。

1
2
3
4
5
6
for (let i = 0; i < 5; i++) {
    if (i == 3) {
        continue; // 跳过 i 等于 3 的迭代
    }
    console.log(i); // 输出 0, 1, 2, 4
}

异常处理

⭐⭐ try...catch 语句

try...catch 语句用于捕获并处理运行时错误，防止程序因未处理的异常而崩溃。

1
2
3
4
5
try {
    let result = someUndefinedFunction(); // 假设这个函数未定义，会抛出错误
} catch (error) {
    console.error("发生了一个错误: ", error.message);
}

函数

函数是组织代码的基本单元之一，它允许你将代码封装起来以便重复使用。函数可以接受参数、执行特定操作并返回结果。

函数声明

1
2
3
4
// 基本的函数定义
function greet(name) {
    return "Hello, " + name;
}

函数表达式

1
2
3
4
// 函数也可以作为表达式的一部分来定义
const greet = function(name) {
    return "Hello, " + name;
};

箭头函数

1
2
3
4
5
6
7
8
9
10
11
// 箭头函数（ES6 新增）
// 箭头函数提供了一种更简洁的语法来编写函数，尤其适合用于简短的函数体。
const greet = (name) => {
    return "Hello, " + name;
};

// 如果函数体只有一条语句，可以进一步简化：
const greet = name => "Hello, " + name;

// 调用函数
console.log(greet("Alice")); // 输出: Hello, Alice

匿名函数

1
2
3
4
5
6
// 匿名函数与立即执行函数表达式(IIFE)
// 匿名函数是没有名称的函数，通常被用作回调函数。
// 这种模式常用于创建一个新的作用域以避免变量泄露到全局作用域中。
(function() {
    console.log("这是一个IIFE");
})();

默认参数

1
2
3
4
5
6
7
// 从 ES6 开始，支持为函数参数设置默认值。
function greet(name = "Guest") {
    return "Hello, " + name;
}

console.log(greet()); // 输出: Hello, Guest
console.log(greet("Alice")); // 输出: Hello, Alice

剩余参数

1
2
3
4
5
6
7
// ES6 新增剩余参数
// 剩余参数允许我们将不定数量的参数表示为一个数组。
function sum(...args) {
    return args.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式是在一个函数内部定义另一个函数。

1
2
3
4
5
6
7
8
9
10
11
function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

数组/对象

数组

数组是一种用于存储多个值的有序集合。每个值（也称为元素）可以通过其索引访问，索引是从0开始的整数。数组是非常灵活的数据结构，支持多种操作如添加、删除、遍历和搜索等。

⭐⭐ 基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 创建数组
// 1. 使用数组字面量
let fruits = ['Apple', 'Banana', 'Cherry'];
// 2. 使用 Array 构造函数
let numbers = new Array(1, 2, 3);
let emptyArray = new Array(5); // 创建一个长度为5的空数组


// 获取数组元素
let colors = ['Red', 'Green', 'Blue'];
console.log(colors[0]); // 输出 "Red"


// 修改数组的值
colors[1] = 'Yellow'; // 修改第二个元素
console.log(colors); // 输出 ["Red", "Yellow", "Blue"]


// 多维数组
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[0][1]); // 输出 2

⭐⭐ 内置方法

JavaScript 提供了丰富的内置方法来操作数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 添加元素
// push(): 在数组末尾添加一个或多个元素，并返回新的长度。
let arr = [1, 2, 3];
arr.push(4); // arr 现在是 [1, 2, 3, 4]

// unshift(): 在数组开头添加一个或多个元素，并返回新的长度。
arr.unshift(0); // arr 现在是 [0, 1, 2, 3, 4]


// 删除元素
// pop(): 移除并返回数组的最后一个元素。
let last = arr.pop(); // last 是 4, arr 现在是 [0, 1, 2, 3]

// shift(): 移除并返回数组的第一个元素。
let first = arr.shift(); // first 是 0, arr 现在是 [1, 2, 3]

// splice(): 移除指定下标的元素。
arr.splice(0, 2); // 移除下标为：0 和 1 的元素，不移除下标为 2 的元素

// 查找元素
// indexOf(): 返回第一个匹配元素的索引，如果没有找到则返回 -1。
console.log(arr.indexOf(2)); // 输出 1

// includes(): 检查数组是否包含某个元素，返回布尔值。
console.log(arr.includes(2)); // 输出 true


// 遍历元素
// forEach(): 对数组的每个元素执行一次提供的函数。
arr.forEach(function(item, index) {
  console.log(item, index);
});

// map(): 创建一个新数组，其结果是对调用数组的每个元素调用提供的函数。
let newArr = arr.map(item => item * 2);


// 其他常用方法
// join(): 将数组的所有元素连接成一个字符串。
console.log(arr.join('-')); // 输出 "1-2-3"

// slice(): 返回一个新的数组对象，包括 begin，不包括end。原始数组不会被改变。
console.log(arr.slice(1, 3)); // 输出 [2, 3]

对象

对象是一种非常重要的数据结构，用于存储键值对的集合。对象可以用来表示实体、集合以及任何复杂的数据结构。JavaScript 是一种基于原型的语言，因此对象不仅能够存储数据，还能定义行为（方法）。

⭐⭐ 创建对象的几种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 第一种：使用对象字面量
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 25,
    isStudent: false,
    greet: function() {
        console.log("Hello!");
    }
};


// 第二种：使用 new Object() 构造函数
let car = new Object();
car.make = "Toyota";
car.model = "Corolla";
car.year = 2020;


// 第三种：使用类（ES6+），类是创建对象的模板
class Animal {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

let dog = new Animal('Dog', 'Mammal');

⭐⭐ 访问和修改对象属性

1
2
3
4
5
6
// 可以通过点符号或方括号访问和修改对象的属性
console.log(person.firstName);// 使用点符号访问属性
console.log(person['lastName']); // 使用方括号访问属性

person.age = 26; // 使用点符号修改属性
person['isStudent'] = true; // 使用方括号修改属性

⭐⭐ 对象中方法的使用

1
2
3
4
5
6
7
8
9
10
11
let mathOperations = {
    add: function(a, b) {
        return a + b;
    },
    subtract: function(a, b) {
        return a - b;
    }
};

console.log(mathOperations.add(5, 3)); // 输出 8
console.log(mathOperations.subtract(5, 3)); // 输出 2

⭐⭐ 遍历对象属性

1
2
3
4
5
6
for (let key in person) {
    // 确保只获取对象自身的属性
    if (person.hasOwnProperty(key)) {
        console.log(key + ": " + person[key]);
    }
}

⭐⭐ 原型与继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 原型使用示例
let animal = {
  speak: function() {
    console.log("Animal makes a sound.");
  }
};
// 使用 Object.create() 创建一个新对象，并设置其原型
let cat = Object.create(animal);
cat.speak(); // 输出 "Animal makes a sound."


// 在 ES6 中，使用 class 和 extends 实现继承
class Mammal extends Animal {
    speak() {
        console.log(`${this.name} says hello.`);
    }
}
let human = new Mammal('Human', 'Mammal');
human.speak(); // 输出 "Human says hello."

⭐⭐ 共享属性/方法

可以通过 prototype 为对象添加共享的属性或方法，每个函数（包括构造函数）都有一个 prototype 属性，这个 prototype 属性是一个对象，它包含了所有由该构造函数创建的实例共享的属性和方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 获取 prototype 对象
function Person(name) {
    this.name = name;
}
const person1 = new Person("Alice");
console.log(person1.__proto__ === Person.prototype); // true
console.log(Object.getPrototypeOf(person1) === Person.prototype); // true


// 添加一个共享方法
Person.prototype.greet = function () {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);
person1.greet(); // 输出: Hello, my name is Alice and I am 25 years old.
person2.greet(); // 输出: Hello, my name is Bob and I am 30 years old.


// 使用原型链来实现继承
function Animal() {}
Animal.prototype.eat = function () {
    console.log("Eating...");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype); // 继承 Animal 的 prototype
Dog.prototype.bark = function () {
    console.log("Barking!");
};

const dog = new Dog();
dog.eat();  // 输出: Eating...
dog.bark(); // 输出: Barking!

解构赋值

1
2
3
4
5
6
7
8
9
10
// 数组解构
let arr = [10, 20];
let [x, y] = arr;
console.log(x, y); // 10 20


// 对象解构
let person = {name: "Alice", age: 25};
let {name, age} = person;
console.log(name, age); // Alice 25

内置对象/函数

Object

Object 是所有对象的基类。

函数名 描述
Object.keys(obj) 返回对象的所有可枚举属性名
Object.values(obj) 返回对象的所有可枚举属性值
Object.entries(obj) 返回对象的所有键值对数组
Object.assign(target, source) 将一个或多个源对象的属性复制到目标对象
Object.create(proto) 创建一个新对象，并指定其原型
Object.freeze(obj) 冻结对象，使其不可修改
Object.seal(obj) 密封对象，使其无法添加或删除属性，但可以修改现有属性

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
let obj = { name: "Alice", age: 25 };

console.log(Object.keys(obj)); // ["name", "age"]
console.log(Object.values(obj)); // ["Alice", 25]
console.log(Object.entries(obj)); // [["name", "Alice"], ["age", 25]]

let newObj = Object.assign({}, obj);
console.log(newObj); // { name: "Alice", age: 25 }

let frozenObj = Object.freeze(obj);
frozenObj.name = "Bob"; // 不会生效
console.log(frozenObj); // { name: "Alice", age: 25 }

Array

Array 用于表示有序的数据集合。

函数名 描述
push() 向数组末尾添加元素
pop() 移除数组末尾的元素
shift() 移除数组开头的元素
unshift() 向数组开头添加元素
slice(start, end) 返回数组的一部分（浅拷贝）
splice(index, deleteCount, ...items) 从数组中添加/删除元素
map(callback) 创建一个新数组，由原数组每个元素经过回调函数处理后的结果组成
filter(callback) 创建一个新数组，包含通过测试的元素
reduce(callback, initialValue) 对数组中的每个元素执行回调函数，最终返回一个单一值
forEach(callback) 遍历数组，执行回调函数
join() 将数组的所有元素连接成一个字符串

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let arr = [1, 2, 3];

arr.push(4); // 添加元素
console.log(arr); // [1, 2, 3, 4]

arr.pop(); // 移除末尾元素
console.log(arr); // [1, 2, 3]

let doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6]

let filtered = arr.filter(x => x > 1);
console.log(filtered); // [2, 3]

let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 6

arr.forEach(x => console.log(x)); // 输出 1, 2, 3

const fruits = ['Apple', 'Banana', 'Cherry'];
const resultWithDash = fruits.join(' - '); // 使用 " - " 作为分隔符
console.log(resultWithDash); // 输出: "Apple - Banana - Cherry"

const resultWithSpace = fruits.join(' '); // 使用空格作为分隔符
console.log(resultWithSpace); // 输出: "Apple Banana Cherry"

String

String 用于表示文本数据

函数名 描述
charAt(index) 返回字符串中指定位置的字符
concat(str) 连接两个或多个字符串
includes(searchStr) 检查字符串是否包含指定子串
indexOf(searchStr) 返回子串首次出现的索引
replace(oldStr, newStr) 替换字符串中的子串
split(separator) 按分隔符拆分字符串为数组
toLowerCase() 转换字符串为小写
toUpperCase() 转换字符串为大写
trim() 移除字符串两端的空白字符
match() 正则匹配

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let str = "Hello, World";

console.log(str.charAt(7)); // "W"
console.log(str.concat("!")); // "Hello, World!"
console.log(str.includes("World")); // true
console.log(str.indexOf("World")); // 7
console.log(str.replace("World", "JavaScript")); // "Hello, JavaScript"
console.log(str.split(", ")); // ["Hello", "World"]
console.log(str.toLowerCase()); // "hello, world"
console.log(str.toUpperCase()); // "HELLO, WORLD"
console.log("   Hello   ".trim()); // "Hello"

const str1 = "John Smith";
const matches = str1.match(/(\w+)\s(\w+)/);
console.log(matches[1]); // "John"
console.log(matches[2]); // "Smith"

Math

Math 提供数学相关的常量和函数。

函数名 描述
Math.abs(x) 返回绝对值
Math.ceil(x) 向上取整
Math.floor(x) 向下取整
Math.round(x) 四舍五入
Math.max(...values) 返回最大值
Math.min(...values) 返回最小值
Math.random() 生成范围为 [0, 1) 的随机数
Math.pow(base, exponent) 计算幂
Math.sqrt(x) 计算平方根

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.log(Math.abs(-5)); // 5
console.log(Math.ceil(4.2)); // 5
console.log(Math.floor(4.9)); // 4
console.log(Math.round(4.5)); // 5
console.log(Math.max(1, 2, 3)); // 3
console.log(Math.min(1, 2, 3)); // 1
console.log(Math.random()); // 随机数
console.log(Math.pow(2, 3)); // 8
console.log(Math.sqrt(16)); // 4

//取到 N ~ M 的随机整数
function getRandom(N, M) {
    return Math.floor(Math.random() * (M - N + 1)) + N
}

Date

Date 用于处理日期和时间。

函数名 描述
new Date() 创建当前日期时间对象
getTime() 返回当前日期的时间戳
getDate() 返回当前日期的天数
getMonth() 返回当前日期的月份（0 表示 1 月）
getFullYear() 返回当前日期的年份
getHours() 返回当前小时
getMinutes() 返回当前分钟
getSeconds() 返回当前秒
setDate(day) 设置日期的天数
toISOString() 返回 ISO 格式的日期字符串

⭐⭐ 使用示例

1
2
3
4
5
6
let today = new Date();
console.log(today.getDate()); // 当前日期的天数
console.log(today.getMonth() + 1); // 当前月份（注意：从 0 开始）
console.log(today.getFullYear()); // 当前年份
console.log(today.getHours()); // 当前小时
console.log(today.toISOString()); // ISO 格式日期字符串

JSON

JSON 用于解析和序列化 JSON 数据。

函数名 描述
JSON.stringify(obj) 将对象转换为 JSON 字符串
JSON.parse(jsonStr) 将 JSON 字符串解析为对象

⭐⭐ 使用示例

1
2
3
4
5
6
let obj = { name: "Alice", age: 25 };
let jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"Alice","age":25}'

let parsedObj = JSON.parse(jsonString);
console.log(parsedObj); // { name: "Alice", age: 25 }

RegExp

RegExp 用于正则表达式匹配。正则表达式是由字符组成的模式，这些字符可以是文字字符或元字符（具有特殊意义的字符）。通过正则表达式，你可以定义一个规则集来匹配特定的字符串模式。

⭐⭐ 方法

函数名 描述
test(string) 测试字符串是否匹配正则表达式
exec(string) 返回匹配的结果

⭐⭐ 正则字符

类别 字符 描述
字符类 [abc] 匹配方括号内的任意字符
[^abc] 匹配方括号内没有列出的任意字符
[a-z] 匹配指定范围内的任意字符（这里为小写字母 a 到 z）
\d 匹配数字字符（相当于 [0-9]）
\D 匹配非数字字符（相当于 [^0-9]）
\w 匹配单词字符（字母、数字、下划线，相当于 [A-Za-z0-9_]）
\W 匹配非单词字符
\s 匹配空白字符
\S 匹配非空白字符
量词 * 匹配前面的子表达式零次或多次
+ 匹配前面的子表达式一次或多次
? 匹配前面的子表达式零次或一次
{n} 匹配前面的子表达式恰好 n 次
{n,} 匹配前面的子表达式至少 n 次
{n,m} 匹配前面的子表达式至少 n 次，最多 m 次
边界匹配 ^ 匹配输入字符串的开始位置
$ 匹配输入字符串的结束位置
\b 匹配一个单词边界
\B 匹配非单词边界
分组与捕获 ( ... ) 分组，并将匹配的部分存储起来供后续引用
(?: ... ) 非捕获分组，只用于分组而不进行捕获
\n 引用之前捕获的分组

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 创建正则表达式的两种方式：
// 字面量：使用斜杠 / 包围正则表达式
const regex = /pattern/;
// 构造函数：使用 RegExp 对象
const regex = new RegExp('pattern');


// 字符类使用示例
const regex = /[abc]/;
console.log(regex.test("apple")); // true
const digitRegex = /\d/;
console.log(digitRegex.test("5")); // true

// 量词类使用示例
const regex = /ab*c/;
console.log(regex.test("ac")); // true (b 出现 0 次)
console.log(regex.test("abc")); // true (b 出现 1 次)
console.log(regex.test("abbc")); // true (b 出现 2 次)

// 边界匹配使用示例
const regex = /^hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("say hello")); // false

// 分组与捕获使用示例
const regex = /(hello) (\w+)/;
const match = regex.exec("hello world");
console.log(match[1]); // "hello"
console.log(match[2]); // "world"

const regex = /(\w+)\s+\1/;
console.log(regex.test("hello hello")); // true

Function

Function 是 JavaScript 中所有函数的基类。每个函数（无论是普通函数、箭头函数还是构造函数）都是 Function 的实例。它是一个构造器，可以用来动态创建函数。允许动态地创建函数，并且提供了对函数的底层操作支持。

⭐⭐ 方法

函数名 描述
function.call(thisArg, arg1, arg2, ...) 调用这个函数，并显式地指定该函数运行时的 this 值，同时可以传递参数
function.apply(thisArg, [argsArray]) 调用这个函数，并显式地指定该函数运行时的 this 值，同时可以传递参数数组
function.bind(thisArg, arg1, arg2, ...) 创建一个新的函数，当新函数被调用时，它的 this 值会被绑定到指定的对象，并且可以预设参数

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 使用 call 方法示例：
const person = {
    name: "Alice",
    greet: function (age) {
        console.log(`Hello, my name is ${this.name} and I am ${age} years old.`);
    }
};
const anotherPerson = { name: "Bob" };
// 使用 call 调用 greet 方法，并将 this 指向 anotherPerson
person.greet.call(anotherPerson, 30); // 输出: Hello, my name is Bob and I am 30 years old.


// 使用 apply 方法示例：
function introduce(age, job) {
    console.log(`I am ${this.name}, ${age} years old, and I work as a ${job}.`);
}
const person = { name: "Alice" };
introduce.apply(person, [25, "developer"]); // 输出: I am Alice, 25 years old, and I work as a developer.


// 使用 bind 方法示例：
function greet(greeting) {
    console.log(`${greeting}, my name is ${this.name}.`);
}
const person = { name: "Alice" };
const boundGreet = greet.bind(person, "Hello");
boundGreet(); // 输出: Hello, my name is Alice.

XMLHttpRequest

XMLHttpRequest 是 JavaScript 中的一个内置对象，它用于在客户端和服务器之间传输数据。这个对象提供了一种简单的方式来通过 HTTP 或 HTTPS 协议与服务器进行通信，而无需重新加载整个页面，从而支持创建动态 Web 应用程序。XMLHttpRequest 是 AJAX（Asynchronous JavaScript and XML）技术的核心，允许网页异步加载数据。

⭐⭐ GET 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 使用 open() 方法来指定请求类型（GET、POST 等）、URL 以及其他可选参数。
// 第三个参数为布尔值，指定是否异步执行操作。
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

// 设置回调函数处理响应
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText)); // 输出: {userId: 1, id: 1, title: "...", body: "..."}
    }
};

// 发送请求
xhr.send();

⭐⭐ POST 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 使用 open() 方法来指定请求类型（GET、POST 等）、URL 以及其他可选参数。
// 第三个参数为布尔值，指定是否异步执行操作。
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

// 设置回调函数处理响应
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 201) {
        console.log(JSON.parse(xhr.responseText)); // 输出新创建的资源信息
    }
};

// 发送请求
var data = JSON.stringify({title: 'foo', body: 'bar', userId: 1});
xhr.send(data);

Promise

Promise 是 JavaScript 中一个表示异步操作最终完成或失败的内置对象。它允许你将异步操作的结果与其后续逻辑分离，并通过链式调用的方式组织代码。

⭐⭐ 核心作用

1
2
3
4
5
6
7
8
封装异步操作：例如网络请求、文件读取等。

状态管理：Promise 有三种状态：
    - Pending（进行中）：初始状态
    - Fulfilled（已成功）：操作成功
    - Rejected（已失败）：操作失败

不可逆性：一旦状态被改变（从 Pending 到 Fulfilled 或 Rejected），就不会再发生变化。

⭐⭐ 基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Promise 对象通过 new Promise() 构造函数创建
// 构造函数接收一个执行器函数（executor），该函数有两个参数：
//      resolve：当异步操作成功时调用，将 Promise 标记为已成功。
//      reject：当异步操作失败时调用，将 Promise 标记为已失败。
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // 模拟异步操作结果
    if (success) {
      resolve("操作成功！");
    } else {
      reject("操作失败！");
    }
  }, 1000);
});

// Promise 支持链式调用，每个 .then() 都返回一个新的 Promise
myPromise
    // .then() 方法用于处理 Promise 成功和失败的结果。它接收两个回调函数作为参数：
    //     第一个回调函数处理成功（Fulfilled）的结果。
    //     第二个回调函数处理失败（Rejected）的结果（可选）。
    .then(
        result => console.log(result), // 成功时执行
        error => console.error(error)  // 失败时执行
    )
    // .catch() 方法专门用于捕获 Promise 链中的错误
    // 相当于 .then(null, errorHandler)
    .catch(
        error => console.error("捕获到错误:", error)
    )
    // .finally() 方法无论 Promise 是成功还是失败都会执行
    .finally(
        () => console.log("操作结束")
    );

⭐⭐ 静态方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 快速创建一个已成功的 Promise
const resolvedPromise = Promise.resolve("成功");
resolvedPromise.then(result => console.log(result)); // 输出 "成功"


// 快速创建一个已失败的 Promise。
const rejectedPromise = Promise.reject("失败");
rejectedPromise.catch(error => console.error(error)); // 输出 "失败"


// 等待所有 Promise 完成后返回结果数组。
// 如果其中一个失败，则整个失败。
const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);
const p3 = Promise.resolve(3);
Promise.all([p1, p2, p3])
    .then(results => console.log(results)) // 输出 [1, 2, 3]
    .catch(error => console.error(error));


// 等待所有 Promise 完成后返回每个 Promise 的状态和结果
const p1 = Promise.resolve(1);
const p2 = Promise.reject("Error");
Promise.allSettled([p1, p2]).then(results => {
  console.log(results);
  /*
    [
      { status: "fulfilled", value: 1 },
      { status: "rejected", reason: "Error" }
    ]
  */
});


// 返回第一个完成的 Promise 的结果（无论是成功还是失败）
const p1 = new Promise(resolve => setTimeout(() => resolve("A"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("B"), 500));
Promise.race([p1, p2])
    .then(result => console.log(result)) // 输出 "B"
    .catch(error => console.error(error));


// 返回第一个成功的 Promise 的结果。如果所有 Promise 都失败，则抛出错误。
const p1 = Promise.reject("Error1");
const p2 = Promise.resolve("Success2");
Promise.any([p1, p2])
    .then(result => console.log(result)) // 输出 "Success2"
    .catch(error => console.error(error));

Fetch

Fetch 在 JavaScript 中是一个基于函数的接口，更具体地说，它是一个全局函数（在浏览器环境中）。fetch() 函数用于发起网络请求，并返回一个 Promise，该 Promise 会在请求成功并接收到响应时被解析，或者在请求过程中遇到错误时被拒绝。

⭐⭐ 基本语法

1
2
3
4
5
6
7
8
9
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json(); // 将响应数据转换为 JSON 格式
    })
    .then(data => console.log(data)) // 处理解析后的数据
    .catch(error => console.error('请求失败:', error));

⭐⭐ 请求参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
fetch 方法可以接受两个参数：
    URL（必填）：指定请求的目标地址。
    Options（可选）：一个配置对象，用于定义请求的选项，例如方法类型、请求头、请求体等。


常见的 Options 配置:
    method：请求方法，如 GET、POST、PUT、DELETE 等，默认为 GET。
    headers：请求头信息，通常是一个对象。
    body：请求体，用于发送数据（仅适用于非 GET 请求），需要是字符串或 FormData 等格式。
    mode：请求模式，例如 cors、no-cors 或 same-origin。
    credentials：是否携带凭据（如 cookies），可选值为 omit（不携带）、same-origin（同源时携带）或 include（总是携带）。
    cache：缓存策略，例如 default、no-store、reload 等。
    redirect：重定向处理策略，例如 follow（跟随重定向）、error（报错）或 manual（手动处理）。


使用示例：
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'John',
        age: 30
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error));

⭐⭐ 响应对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
fetch 返回的 Response 对象包含了许多有用的属性和方法，用于处理服务器的响应。

常用属性：
    status：HTTP 状态码（如 200、404、500 等）。
    ok：布尔值，表示状态码是否在 200-299 范围内。
    headers：响应头，是一个 Headers 对象。
    url：请求的最终 URL（可能与初始 URL 不同，因为重定向）。


常用方法：
    json()：将响应体解析为 JSON 格式。
    text()：将响应体解析为文本。
    blob()：将响应体解析为二进制数据（Blob）。
    arrayBuffer()：将响应体解析为 ArrayBuffer。
    formData()：将响应体解析为 FormData。

使用示例：
fetch('https://api.example.com/image')
    .then(response => response.blob()) // 解析为 Blob
    .then(blob => {
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        document.body.appendChild(img);
    });

⭐⭐ 错误处理

fetch 只有在网络请求失败（如无法连接到服务器）时才会触发 .catch()，而不会因为 HTTP 状态码（如 404 或 500）触发错误。因此，你需要手动检查 response.ok 或 response.status 来判断请求是否成功。

1
2
3
4
5
6
7
8
9
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('请求失败:', error));

BOM

BOM（Browser Object Model，浏览器对象模型）是指在浏览器窗口中可以访问的各种对象的集合。它提供了一系列与浏览器交互的对象，使得 JavaScript 能够操作浏览器的不同部分。BOM 并不是标准的一部分，但大多数现代浏览器都支持类似的 BOM 对象和方法。

window

window 对象，这是 BOM 的顶层对象，代表当前浏览器窗口或标签页。所有其他 BOM 对象都是 window 的属性。

⭐⭐ 属性

属性 描述
location 包含有关当前 URL 的信息
history 提供对用户浏览历史的访问
navigator 提供了关于浏览器的信息
screen 包含有关用户屏幕的信息
document 指向 HTML 文档，是 DOM 的入口点

⭐⭐ 方法

方法 描述
alert(), prompt(), confirm() 弹出对话框
setTimeout() 延时执行函数
setInterval() 定时执行函数
clearTimeout() 关闭延时、定时函数
open(), close() 打开和关闭新窗口
moveTo(), resizeTo() 移动和调整窗口大小
scrollTo(), scrollBy() 调整窗口滚动条

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 弹出一个简单的警告框，显示 "这是一个警告框！"
window.alert("这是一个警告框！");

// 根据用户的选择执行不同的逻辑
let result = window.confirm("你确定要继续吗？");
if (result) {
    console.log("用户点击了确定");
} else {
    console.log("用户点击了取消");
}

// 如果用户输入 "Alice"，则输出 "用户输入的内容是： Alice"
let userInput = window.prompt("请输入你的名字：", "默认值");
console.log("用户输入的内容是：", userInput);


// 输出 "2秒后执行"，延迟 2 秒
let timeoutId = window.setTimeout(() => {
    console.log("2秒后执行");
}, 2000);
// 可以通过 clearTimeout 停止计时器
clearTimeout(timeoutId);

// 每秒输出 "每秒执行一次"
let intervalId = window.setInterval(() => {
    console.log("每秒执行一次");
}, 1000);
// 可以通过 clearInterval 停止循环
setTimeout(() => clearInterval(intervalId), 5000); // 5秒后停止


// 打开一个新的窗口，宽度为 600，高度为 400
let newWindow = window.open("https://www.example.com", "_blank", "width=600,height=400");

// 关闭新打开的窗口
newWindow.close();

// 将窗口左上角移动到屏幕的 (100, 100) 位置
window.moveTo(100, 100);

// 将窗口调整为 800x600 的大小
window.resizeTo(800, 600);

// 页面垂直滚动到 1000px 的位置
window.scrollTo(0, 1000);

// 相对于当前位置，向下滚动 500px
window.scrollBy(0, 500);

location

包含了当前页面的 URL 信息，并允许你导航到不同的页面。

⭐⭐ 属性

属性 描述
href 完整的 URL
protocol 协议
host 主机
hostname 主机名
port 端口
pathname 路径名
search 搜索
hash 哈希

⭐⭐ 方法

方法 描述
assign() 加载一个新的文档
reload() 重新加载当前文档
replace() 用新的文档替换当前文档，不会将当前文档保存在会话历史记录中

⭐⭐ 使用示例

1
2
console.log(location.href); // 输出当前页面的完整 URL
location.assign("https://www.example.com"); // 导航到新的页面

history

提供了对用户的浏览历史的访问，允许你在用户的历史记录中前进和后退。

⭐⭐ 方法

方法 描述
back() 后退一页
forward() 前进一页
go(n) 前进或后退指定数目的页面

⭐⭐ 使用示例

1
2
3
history.back(); // 后退一页
history.forward(); // 前进一页
history.go(-2); // 后退两页

提供了关于浏览器的相关信息。

⭐⭐ 属性

属性 描述
appName 浏览器名称
appVersion 浏览器版本
platform 运行浏览器的操作系统平台
userAgent 用户代理字符串，通常用于识别浏览器类型和版本

⭐⭐ 使用示例

1
console.log(navigator.userAgent); // 输出用户代理字符串

screen

提供了有关用户屏幕的信息。

⭐⭐ 属性

属性 描述
width 屏幕分辨率的宽度
height 屏幕分辨率的高度
availWidth 可用屏幕宽度
availHeight 可用屏幕高度

⭐⭐ 使用示例

1
2
console.log(screen.width); // 输出屏幕宽度
console.log(screen.availWidth); // 输出可用屏幕宽度

DOM

DOM（Document Object Model，文档对象模型）是一种跨平台和语言无关的接口，它允许程序和脚本动态地访问和更新文档的内容、结构及样式。每个 HTML 或 XML 文档在加载到浏览器时都会被解析为一个文档树，树中的每一个节点都是一个对象，代表文档的一部分。

节点（Node）：文档中的每一个部分都被视为一个节点，包括元素、属性、文本、注释等。
元素（Element）：HTML 或 XML 文档中的标签被视为元素节点。
属性（Attribute）：元素上的特性（如 id、class 等）被视为属性节点。
文本节点（Text Node）：元素内的文本内容。

获取元素

函数名 描述
document.getElementById(id) 通过 ID 获取单个元素
document.getElementsByClassName(className) 通过类名获取元素集合
document.getElementsByTagName(tagName) 通过标签名获取元素集合
document.querySelector(selector) 返回与 CSS 选择器匹配的第一个元素
document.querySelectorAll(selector) 返回与 CSS 选择器匹配的所有元素的 NodeList

⭐⭐ 使用示例

1
2
3
4
5
let elementById = document.getElementById("myId");
let elementsByClass = document.getElementsByClassName("myClass");
let elementsByTag = document.getElementsByTagName("div");
let firstMatchedElement = document.querySelector(".myClass");
let allMatchedElements = document.querySelectorAll(".myClass");

修改元素

函数名 描述
element.innerHTML 获取或设置元素的 HTML 内容
element.textContent 获取或设置元素的文本内容
element.setAttribute(name, value) 设置元素的属性值
element.getAttribute(name) 获取元素的属性值

⭐⭐ 使用示例

1
2
3
4
5
let myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<p>新的内容</p>";
myDiv.textContent = "这是纯文本";
myDiv.setAttribute("class", "newClass");
console.log(myDiv.getAttribute("class")); // 输出: newClass

添加元素

函数名 描述
document.createElement(tagName) 创建一个新的元素节点
document.createTextNode(text) 创建一个新的文本节点
node.appendChild(child) 将一个节点作为最后一个子节点添加到另一个节点中
node.insertBefore(newNode, existingNode) 在现有子节点之前插入新节点
node.cloneNode(deep) 复制出来一个新的节点
parentNode.replaceChild(newChild, oldChild) 用新节点替换旧节点

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 创建一个新的 HTML 元素
let newDiv = document.createElement("div");
newDiv.textContent = "这是一个新的 div";
document.body.appendChild(newDiv);

// 创建一个新的文本节点
const newText = document.createTextNode('这是新的文本内容');
console.log(newText);

// 在指定元素前插入新元素
let referenceNode = document.getElementById("reference");
document.body.insertBefore(newDiv, referenceNode);

// 深度克隆 originalDiv 并将其附加到 body 中
const originalDiv = document.getElementById('originalDiv');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);

// 用 span 元素替换了原有的 p 元素
const parent = document.getElementById('parentElement');
const newSpan = document.createElement('span');
newSpan.textContent = '这是替换的内容';
const oldParagraph = document.querySelector('#parentElement p');
parent.replaceChild(newSpan, oldParagraph);

删除元素

函数名 描述
parentNode.removeChild(child) 从 DOM 中删除指定的子节点

⭐⭐ 使用示例

1
2
let oldDiv = document.getElementById("oldDiv");
oldDiv.parentNode.removeChild(oldDiv);

元素位置

⭐⭐ 属性

属性 描述
offsetTop 元素相对于其 offsetParent 节点的顶部偏移量
offsetLeft 元素相对于其 offsetParent 节点的左侧偏移量
offsetWidth 元素的布局宽度
offsetHeight 元素的布局高度
scrollLeft 元素水平方向上的滚动偏移量
scrollTop 元素垂直方向上的滚动偏移量
clientTop 元素上边框的宽度
clientLeft 元素左边框的宽度

⭐⭐ 方法

方法 描述
getBoundingClientRect() 返回一个 DOMRect 对象，提供有关元素大小及其相对于视口的位置的信息

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 输出元素相对于其最近的定位父级的顶部和左侧偏移量
const element = document.getElementById('myElement');
console.log(`Offset Top: ${element.offsetTop}px`);
console.log(`Offset Left: ${element.offsetLeft}px`);

// 输出元素的整体宽度和高度（含 padding 和 border）
const element = document.getElementById('myElement');
console.log(`Offset Width: ${element.offsetWidth}px`);
console.log(`Offset Height: ${element.offsetHeight}px`);

// 输出可滚动容器在垂直和水平方向上的滚动偏移量
const element = document.getElementById('myScrollableDiv');
console.log(`Scroll Top: ${element.scrollTop}px`);
console.log(`Scroll Left: ${element.scrollLeft}px`);

// 输出元素的上边框和左边框的宽度
const element = document.getElementById('myElement');
console.log(`Client Top: ${element.clientTop}px`);
console.log(`Client Left: ${element.clientLeft}px`);

// 输出元素相对于视口的顶部、左边距离，宽度和高度
const element = document.getElementById('myElement');
const rect = element.getBoundingClientRect();
console.log(`Top: ${rect.top}px`);
console.log(`Left: ${rect.left}px`);
console.log(`Width: ${rect.width}px`);
console.log(`Height: ${rect.height}px`);

自定义属性

data-* 属性是 HTML5 中推荐使用的自定义属性方式。它们以 data- 开头，后面跟一个自定义名称。这些属性可以通过 dataset API 来访问和操作。

⭐⭐ 在 HTML 中定义 data-* 属性

1
<div id="myElement" data-id="123" data-name="example" data-status="active"></div>

⭐⭐ 使用 dataset API，操作自定义属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// dataset 是一个 DOMStringMap 对象
// 包含了所有以 data- 开头的属性，但会自动去掉前缀并将后续部分转换为驼峰命名法
const element = document.getElementById('myElement');

// 获取属性值
console.log(element.dataset.id);    // 输出: "123"
console.log(element.dataset.name);  // 输出: "example"
console.log(element.dataset.status); // 输出: "active"

// 修改属性值
element.dataset.status = 'inactive';
console.log(element.dataset.status); // 输出: "inactive"

// 添加新的 data 属性
element.dataset.newAttr = 'newValue';
console.log(element.dataset.newAttr); // 输出: "newValue"

⭐⭐ 传统方式操作自定义属性

1
2
3
4
5
6
7
8
const element = document.getElementById('myElement');

// 获取属性值
console.log(element.getAttribute('data-id'));    // 输出: "123"

// 设置属性值
element.setAttribute('data-id', '456');
console.log(element.getAttribute('data-id'));    // 输出: "456"

事件处理

函数名 描述
element.addEventListener(event, function) 为指定元素添加事件监听器
element.removeEventListener(event, function) 移除事件监听器
event 事件 描述
鼠标事件 click 当鼠标按钮被点击时触发
dblclick 当鼠标双击时触发
mousedown 当鼠标按钮被按下时触发
mouseup 当鼠标按钮被释放时触发
mousemove 当鼠标指针在元素内移动时触发
mouseover 当鼠标指针移入元素范围内时触发
mouseout 当鼠标指针移出元素范围时触发
mouseenter 当鼠标指针进入元素时触发
mouseleave 当鼠标指针离开元素时触发
键盘事件 keydown 当按键被按下时触发（包括按住不放）
keypress 当按键被按下且该键是一个字符键时触发
keyup 当按键被释放时触发
表单事件 submit 当表单被提交时触发
reset 当表单被重置时触发
focus 当元素获得焦点时触发
blur 当元素失去焦点时触发
change 当元素的值发生改变时触发
input 当用户输入数据时触发
触摸事件 touchstart 当手指放在触摸屏上时触发
touchmove 当手指在触摸屏上滑动时触发
touchend 当手指从触摸屏上抬起时触发
touchcancel 当触摸由于某些原因被中断时触发
加载事件 load 当整个页面（包括所有的依赖资源，如样式表和图片）加载完成时触发
unload 当用户退出页面时触发
beforeunload 当窗口、文档及其资源即将被卸载时触发
DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表、图片和子框架完成加载
滚动事件 scroll 当用户滚动给定元素时触发
剪贴板事件 copy 当用户发起复制操作时触发
cut 当用户发起剪切操作时触发
paste 当用户发起粘贴操作时触发
拖拽事件 dragstart 当用户开始拖动元素时触发
drag 当元素正在被拖动时触发
dragend 当拖动操作完成时触发
dragenter 当被拖动的元素进入放置目标时触发
dragover 当被拖动的元素在放置目标上移动时触发
dragleave 当被拖动的元素离开放置目标时触发
drop 当被拖动的元素放置在放置目标上时触发

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 点击事件
document.getElementById("myButton").addEventListener("click", function() {
    alert("你点击了按钮！");
});

// 输入事件
document.getElementById("myInput").addEventListener("input", function() {
    console.log("输入的内容为: " + this.value);
});

// 加载事件
window.addEventListener("load", function() {
    console.log("页面已完全加载");
});

// 滚动事件
window.addEventListener("scroll", function() {
    console.log("当前滚动位置: " + window.scrollY);
});

// 移除事件监听
function handleClick() {
    console.log('Button clicked');
}
const button = document.getElementById('myButton');
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

事件对象

事件对象（Event Object）是在事件发生时自动创建并传递给事件处理函数的对象。它包含了有关事件的详细信息，如事件类型、触发事件的元素、鼠标位置等。通过使用事件对象，你可以获取更多关于事件的信息，并据此做出相应的响应。

1
2
3
4
5
// 当你为一个元素添加事件监听器时，事件处理函数可以接受一个参数，这个参数就是事件对象。例如：
document.getElementById("myButton").addEventListener("click", function(event) {
    console.log(event);
});
// 在上边这个例子中：event 就是事件对象

⭐⭐ 属性

事件 属性 描述
基本属性 type 事件的类型
target 触发事件的 DOM 元素
currentTarget 事件监听器绑定到的元素
bubbles 事件是否会在 DOM 树中冒泡
cancelable 是否可以取消事件的默认行为
鼠标事件 clientX, clientY 鼠标指针相对于浏览器窗口的 X 和 Y 坐标
screenX, screenY 鼠标指针相对于用户屏幕的 X 和 Y 坐标
button 哪个鼠标按钮被按下（0: 左键, 1: 中键, 2: 右键）
buttons 表示当前按下的鼠标按钮的状态（位掩码）
键盘事件 key 按键的键名
表单事件 inputType 输入操作的类型
data 插入或删除的文本内容
触摸事件 touches 当前所有触摸点的列表
changedTouches 涉及当前事件的所有触摸点的列表
targetTouches 仍在触发目标元素上的触摸点列表

⭐⭐ 使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 基本属性使用示例
document.getElementById("myButton").addEventListener("click", function(event) {
    console.log("事件类型: ", event.type); // 输出: click
    console.log("触发元素: ", event.target); // 触发点击的元素
    console.log("绑定元素: ", event.currentTarget); // 绑定监听器的元素
});

// 鼠标事件相关属性使用示例
document.addEventListener("click", function(event) {
    console.log("鼠标位置 (相对于窗口): ", event.clientX, event.clientY);
    console.log("鼠标位置 (相对于屏幕): ", event.screenX, event.screenY);
    console.log("按下按钮: ", event.button);
});

// 键盘事件相关属性使用示例
document.addEventListener("keydown", function(event) {
    console.log("按下的键: ", event.key);
    if (event.altKey) {
        console.log("Alt 键也被按下了");
    }
});

// 表单事件相关属性使用示例
document.getElementById("myInput").addEventListener("input", function(event) {
    console.log("输入类型: ", event.inputType);
    console.log("输入的内容: ", event.data);
});

// 触摸事件相关属性使用示例
document.addEventListener("touchstart", function(event) {
    for (let touch of event.changedTouches) {
        console.log("触摸点 ID: ", touch.identifier);
        console.log("触摸点位置: ", touch.clientX, touch.clientY);
    }
});

事件流

在 Web 开发中，事件流（Event Flow）描述了当一个事件发生时，浏览器如何确定哪些元素会触发该事件以及这些元素接收事件的顺序。理解事件流对于有效地管理复杂的用户交互至关重要。事件流主要分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段（Capturing Phase）

  • 从最外层的祖先元素开始，向目标元素传播。
  • 在这个阶段，事件不会被默认处理，而是逐级向下传递直到达到目标元素。
  • 可以通过 addEventListener 的第三个参数设置为 true 来指定监听器在这个阶段执行。

目标阶段（Target Phase）

  • 当事件到达目标元素时，进入目标阶段。
  • 在这个阶段，事件直接在目标元素上触发。
  • 这是事件实际发生的阶段，也是开发者通常关注最多的部分。

冒泡阶段（Bubbling Phase）

  • 事件从目标元素开始，逐级向上传播回最外层的祖先元素。
  • 大多数事件都会经历冒泡阶段，但也有例外，如 focus, blur 等事件不会冒泡。
  • 默认情况下，事件监听器会在冒泡阶段执行，即 addEventListener 的第三个参数为 false 或未指定时。

⭐⭐ 模拟事件流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// HTML 结构
// <div id="outer">
//   <div id="inner">Click me!</div>
// </div>

document.getElementById("outer").addEventListener('click', function() {
    console.log("Outer div 捕获阶段");
}, true); // 捕获阶段

document.getElementById("outer").addEventListener('click', function() {
    console.log("Outer div 冒泡阶段");
}); // 冒泡阶段，默认行为

document.getElementById("inner").addEventListener('click', function(event) {
    console.log("Inner div 目标阶段");
    console.log("点击位置相对于 inner div: ", event.clientX, event.clientY);
}, false); // 冒泡阶段

document.getElementById("inner").addEventListener('click', function(event) {
    console.log("Inner div 捕获阶段");
}, true); // 捕获阶段


// 当点击 "Click me!" 文本时，控制台输出的顺序将会是：
// Outer div 捕获阶段
// Inner div 捕获阶段
// Inner div 目标阶段
// Outer div 冒泡阶段

⭐⭐ 阻止事件流

1
2
3
4
5
6
7
8
9
10
11
// 阻止冒泡：可以使用 event.stopPropagation() 方法来阻止事件继续冒泡到父元素
document.getElementById("inner").addEventListener('click', function(event) {
    console.log("Inner div 目标阶段");
    event.stopPropagation(); // 停止事件冒泡
});

// 阻止默认行为：可以使用 event.preventDefault() 方法，阻止浏览器对某些事件的默认行为（例如链接跳转）
document.getElementById("myLink").addEventListener('click', function(event) {
    event.preventDefault(); // 阻止链接跳转
    console.log("链接点击被拦截");
});

JQuery

jQuery是一个快速、简洁的 JavaScript 框架，极大地简化了 JavaScript 编程。

简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Document</title> 
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p>如果你点我，我就会消失。</p>
</body>
</html>

入口函数

1
2
3
4
5
6
7
8
9
// 第一种写法
$(document).ready(function(){
    // 执行代码
});

// 第二种写法
$(function(){
    // 执行代码
});

选择器

基本语法

1
2
3
4
基本语法：$(selector).action()
- $符号定义并初始化了一个jQuery对象。
- selector用于选择HTML元素。它可以是标签名、ID、类名或更复杂的CSS选择器。
- .action()代表在选定的元素上执行的动作。

基础选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 元素选择器
$("p") // 选择所有的<p>元素

// ID选择器：通过ID选择单个元素。
$("#test") // 选择ID为"test"的元素

// 类选择器：选择所有具有特定类的元素。
$(".test") // 选择所有class为"test"的元素

// 后代选择器（空格）：选取某个元素的所有后代元素。
$("div p") // 选择<div>元素内所有的<p>元素

// 子选择器（>）：仅选取某个元素的直接子元素。
$("div > p") // 选择<div>元素内的所有直接子<p>元素

// 相邻兄弟选择器（+）：选取紧接在另一个元素后的元素，并且二者有相同的父元素。
$("label + input") // 选择每个<label>元素后面紧邻的<input>元素

层次选择器

1
2
3
4
5
6
7
8
9
10
11
// 后代选择器（空格）：选取某个元素的所有后代元素。
$("div p") // 选择<div>元素内所有的<p>元素

// 子选择器（>）：仅选取某个元素的直接子元素。
$("div > p") // 选择<div>元素内的所有直接子<p>元素

// 相邻兄弟选择器（+）：选取紧接在另一个元素后的元素，并且二者有相同的父元素。
$("label + input") // 选择每个<label>元素后面紧邻的<input>元素

// 一般兄弟选择器（~）：选取某个元素之后的所有同级特定元素。
$("h1 ~ p") // 选择<h1>元素后所有同级别的<p>元素

过滤选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// :first：选取第一个匹配的元素。
$("p:first") // 选择第一个<p>元素

// :last：选取最后一个匹配的元素。
$("p:last") // 选择最后一个<p>元素

// :even 和 :odd：分别选取索引值为偶数或奇数的元素（索引从0开始）
$("tr:even") // 选择表格中索引为偶数的所有<tr>元素

// :eq(n)：选取索引等于n的元素。
$("li:eq(2)") // 选择索引为2的<li>元素

// :contains(text)：选取包含特定文本的元素。
$("div:contains('Hello')") // 选择包含文本'Hello'的所有<div>元素

// :has(selector)：选取含有选择器匹配的元素的元素。
$("div:has(p)") // 选择包含<p>元素的所有<div>元素

// :visible 和 :hidden：分别选取可见或隐藏的元素
$("p:hidden") // 选择所有隐藏的<p>元素

// :first-child：选取作为父元素的第一个子元素
$("p:first-child") // 选择作为其父元素的第一个子元素的所有<p>元素

// :last-child：选取作为父元素的最后一个子元素
$("p:last-child") // 选择作为其父元素的最后一个子元素的所有<p>元素

// :nth-child(n)：选取其父元素下的第n个子元素。
$("ul li:nth-child(2)") // 选择<ul>下每个<li>元素组中第二个<li>

表单选择器

1
2
3
4
5
6
7
8
9
10
// :input：选取所有输入类型的元素
// 包括<input>、<textarea>、<select>和<button>。
$(":input")

// 选取相应类型的表单元素
$(":text")
$(":password")
$(":radio")
$(":checkbox")
$(":submit")

使用示例

1
2
3
4
5
6
7
8
9
10
11
// 设置所有<p>元素的文本为"Hello jQuery!"
$("p").text("Hello jQuery!"); 

// 设置所有<p>元素的HTML内容
$("p").html("<b>Hello jQuery!</b>");

// 设置输入框的值为"New Value"
$("input").val("New Value"); 

// 将所有<p>元素的文字颜色设置为红色
$("p").css("color", "red");

事件处理

可以使用 .on() 方法绑定事件处理函数到选定的元素上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 点击事件
$("button").on("click", function(){
    alert("Button clicked!");
});

// 鼠标移动事件
$("p").on("mouseenter", function(){
    $(this).css("background-color", "lightgray");
}).on("mouseleave", function(){
    $(this).css("background-color", "transparent");
});

// 解除实践绑定
$("button").off("click");

文档操作

操作内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 获取文本内容
var text = $("p").text();

// 设置文本内容
$("p").text("Hello jQuery!");


// 获取HTML内容
var htmlContent = $("div").html();

// 设置HTML内容
$("div").html("<p>New content</p>");


// 获取表单元素的值
var value = $("input").val();

// 设置表单元素的值
$("input").val("New Value");

操作属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 获取属性值
var hrefValue = $("a").attr("href");

// 设置属性值
$("a").attr("href", "http://newlink.com");

// 同时设置多个属性
$("img").attr({
    src: "/images/newimage.jpg",
    alt: "New image"
});

// 移除属性
$("img").removeAttr("alt");

操作样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 获取单个CSS属性值
var color = $("p").css("color");

// 设置单个CSS属性值
$("p").css("color", "red");

// 同时设置多个CSS属性
$("p").css({
    "color": "blue",
    "background-color": "yellow",
    "font-size": "20px"
});


// 添加类名
$("p").addClass("highlight");

// 移除类名
$("p").removeClass("highlight");

// 切换类名
$("p").toggleClass("highlight");

// 检查元素是否包含指定的类名
if ($("p").hasClass("highlight")) {
    console.log("Paragraph has highlight class");
} else {
    console.log("Paragraph does not have highlight class");
}

操作节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 在元素开头插入内容
$("div").prepend("<p>Prepended paragraph</p>");

// 在元素末尾插入内容
$("div").append("<p>Appended paragraph</p>"); 


// 在元素之前插入内容
$("p").before("<div>New div before p</div>"); 

// 在元素之后插入内容
$("p").after("<div>New div after p</div>");


// 替换节点
$("p").replaceWith("<div>被替换的段落。</div>"); // 用<div>替换所有的<p>


// 删除元素及其子元素
$("p").remove();

// 删除所有子元素，但保留该元素本身
$("div").empty();

// 删除元素，但是保持数据和事件绑定
var detachedElements = $("p").detach();

动画效果

显示/隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 显示元素
$("p").show();

// 隐藏元素
$("p").hide();

// 切换元素的可见状态。
// 如果元素是隐藏的，则显示；如果元素是显示的，则隐藏。
$("button").click(function(){
    $("p").toggle("fast");
});

// 可以指定一个速度参数（"slow", "fast", 或者毫秒数）
$("p").show("slow");

淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
// 淡入元素
$("p").fadeIn("slow");

// 淡出元素
$("p").fadeOut(1000); // 用时1秒

// 根据元素当前的状态切换淡入或淡出
$("button").click(function(){
    $("p").fadeToggle("slow");
});

// 调整元素的透明度（0至1之间）
$("p").fadeTo("slow", 0.5);

滑动效果

1
2
3
4
5
6
7
8
9
10
// 向下滑动显示元素
$("p").slideDown("slow");

// 向上滑动隐藏元素
$("p").slideUp(2000); // 用时2秒

// 根据元素当前的状态切换滑下或滑上
$("button").click(function(){
    $("p").slideToggle("fast");
});

自定义动画

1
2
3
4
5
6
7
8
$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '+=150px',
        width: '+=150px'
    }, "slow");
});

插件机制

自定义插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 自定义元素方法
$.fn.extend({
    redify: function() {
        return this.css("color", "red");
    },
    greenify: function() {
        return this.css("color", "green");
    }
});

// 使用自定义方法
$("p").redify(); // 将所有<p>标签的文字颜色设置为红色
$("h1").greenify(); // 将所有<h1>标签的文字颜色设置为绿色


// 自定义全局方法
$.extend({
    log: function(message) {
        console.log("Log: " + message);
    },
    random: function(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
});

// 使用全局方法
$.log("Hello jQuery!"); // 输出: Log: Hello jQuery!
console.log($.random(1, 10)); // 输出: 1到10之间的随机数

插件库

插件 描述
jQuery Validate 用于简化表单验证的开发工作。它提供了强大的验证功能，支持自定义规则、错误消息显示、动态验证等特性。
jQuery Cookie 用于处理浏览器中的 Cookie。它提供了简单易用的 API 来创建、读取和删除 Cookie。
jQuery Accordion 用于以折叠面板的形式显示内容。用户可以点击标题展开或折叠对应的内容区域，通常用于展示 FAQ、导航菜单或其他需要分组显示的内容。
jQuery Autocomplete 用于提供输入框的自动补全建议。它可以帮助用户快速找到他们想要的内容，提升用户体验。
jQuery Growl 用于在网页上显示非阻塞式的消息提示（类似于桌面通知）。它通常用于向用户显示成功、错误、警告或信息类的消息，而不会打断用户的操作流程。
jQuery Prettydate 用于将日期格式化为更友好的、人类可读的形式。例如，它可以将日期显示为“刚刚”、“5 分钟前”、“昨天”等，而不是完整的日期时间字符串。
jQuery Tooltip 用于在用户悬停或聚焦某个元素时显示提示信息。它可以帮助用户更好地理解界面中的元素，提升用户体验。
jQuery Treeview 用于创建树形结构的插件，常用于显示层级数据，例如文件目录、菜单导航或分类列表。
jQuery UI 一个官方的 jQuery 插件库，提供了丰富的用户界面组件，如拖放、调整大小、对话框、日期选择器等。

异步请求

jQuery 提供了几个简化 AJAX 操作的接口，使得发起异步请求变得更加容易和直观。最常用的是 $.ajax()。此外，还有简化的高层方法如 $.get(), $.post(), $.getJSON() 等，这些方法实际上是对 $.ajax() 的封装。

$.ajax()

⭐⭐ 方法参数

1
2
3
4
5
6
7
8
9
url：(字符串) 发送请求的目标 URL。
type：(字符串，默认："GET") 请求类型（"GET", "POST", "PUT", "DELETE" 等）。
data：(对象或字符串) 要发送到服务器的数据。如果是 GET 请求，数据会被附加到 URL 后面；如果是 POST 请求，数据则放在请求体中。
dataType：(字符串) 预期服务器返回的数据类型 ("json", "xml", "html", "text" 等)。
success：(函数) 请求成功时调用的回调函数，接收响应数据作为第一个参数。
error：(函数) 请求失败时调用的回调函数，接收 jqXHR 对象、错误信息和异常对象作为参数。
complete：(函数) 请求完成时调用的回调函数（无论成功或失败），接收 jqXHR 对象和状态文本作为参数。
async：(布尔值，默认：true) 是否异步执行请求。
timeout：(整数) 设置请求超时时间（毫秒）。如果在这个时间内没有收到服务器响应，则触发 error 回调。

⭐⭐ GET 请求

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    url: 'https://api.example.com/data', // 目标URL
    type: 'GET', // 请求类型
    dataType: 'json', // 期望的数据类型
    success: function(response) {
        console.log('成功:', response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('请求出错:', textStatus, errorThrown);
    }
});

⭐⭐ POST 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var postData = {
    name: 'John Doe',
    age: 30
};

$.ajax({
    url: 'https://api.example.com/post', // 目标URL
    type: 'POST', // 请求类型
    contentType: 'application/json', // 设置请求头
    data: JSON.stringify(postData), // 发送的数据
    dataType: 'json', // 期望的数据类型
    success: function(response) {
        console.log('成功:', response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('请求出错:', textStatus, errorThrown);
    }
});

$.get()

用于发起 GET 请求，并自动解析为 JSON（如果服务器返回的是 JSON 格式）。

1
2
3
4
5
$.get('https://api.example.com/data', function(data) {
    console.log('成功:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
    console.error('请求出错:', textStatus, errorThrown);
});

$.post()

用于发起 POST 请求，并自动设置 Content-Type 为 application/x-www-form-urlencoded

1
2
3
4
5
$.post('https://api.example.com/post', {name: 'John Doe', age: 30}, function(data) {
    console.log('成功:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
    console.error('请求出错:', textStatus, errorThrown);
});

$.getJSON()

专门用于获取 JSON 数据的快捷方式。

1
2
3
4
5
$.getJSON('https://api.example.com/data', function(data) {
    console.log('成功:', data);
}).fail(function(jqXHR, textStatus, errorThrown) {
    console.error('请求出错:', textStatus, errorThrown);
});

跨域问题

跨域问题（Cross-Origin Resource Sharing, CORS）是浏览器的一种安全机制，用于限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是为了防止恶意网站读取另一个网站的数据，从而保护用户的安全和隐私。

当使用 AJAX 发起请求时，如果请求的 URL 的协议、域名或端口号与当前页面的 URL 不同，则会发生跨域请求。默认情况下，浏览器会阻止这种类型的请求，除非服务器明确允许。

⭐⭐ CORS 工作原理

简单请求：某些类型的请求被认为是“简单请求”，如 GET、POST（除特定 Content-Type 外），这些请求直接发送到服务器。
预检请求（Preflight Request）：对于非简单的请求（例如带有自定义头部的 POST 请求），浏览器首先发送一个 OPTIONS 请求（称为预检请求）以询问服务器是否允许实际请求。
响应头部检查：服务器通过在 HTTP 响应中添加特定的 CORS 相关头部来告诉浏览器哪些源可以访问其资源。

⭐⭐ CORS 相关响应头

Access-Control-Allow-Origin：指定允许访问该资源的外域 URL。可以设置为具体的域名，也可以用 * 表示允许所有域名。
Access-Control-Allow-Methods：指定允许的 HTTP 方法（GET, POST 等）。
Access-Control-Allow-Headers：指定允许的自定义请求头部字段。
Access-Control-Allow-Credentials：指示是否允许发送 Cookie 或其他认证信息。值为 true 或 false。

⭐⭐ 解决方案

1
2
3
4
5
6
7
8
9
1. 最直接的方式是让服务器支持 CORS。通过在服务器端配置适当的响应头部，允许客户端跨域请求。

2. JSONP 是一种早期的跨域解决方案，它利用 `<script>` 标签没有跨域限制的特点来实现跨域请求。不过，这种方法仅适用于 GET 请求，并且安全性较低。

3. 可以在前端应用和目标服务器之间设置一个代理服务器。前端向代理服务器发起请求，代理服务器再向目标服务器请求数据并返回给前端。

4. 可以使用 WebSocket，虽然 WebSocket 主要用于实时通信，但它不受同源策略的限制，因此可以作为一种跨域通信的手段。

5. 可以通过设置 Nginx 反向代理来解决跨域问题。将前端的跨域请求转发到目标服务器，然后由 Nginx 将响应返回给前端。

扩展

字符实体

字符实体在HTML中用于表示保留字符或不可见字符等特殊字符。由于HTML文档解析时某些字符具有特殊的含义（如 < 和 > 标记HTML标签的开始和结束），直接在文本中使用这些字符可能会导致解析错误或者不期望的行为。因此，通过使用字符实体可以安全地包含这些特殊字符。

字符实体通常有两种形式

  1. 命名实体：以 & 开头，接着是实体名称，最后以 ; 结束。
    示例：&lt; 表示小于号 <
  2. 数字实体：以 &# 开头，后面跟着字符的十进制Unicode编号，最后以 ; 结束。也可以使用 x 前缀后跟十六进制编号。
    十进制示例：&#60; 表示小于号 <
    十六进制示例：&#x3C; 同样表示小于号 <

文本相关

显示 描述 字符实体
空格 &nbsp;
" 双引号 &quot;
' 单引号 &apos;

数学相关

显示 描述 字符实体
× 乘号 &times;
÷ 除号 &divide;
< 小于号 &lt;
> 大于号 &gt;
& 并 &amp;
| 或 &vert;

符号相关

显示 描述 字符实体
￠ 分 &cent;
£ 镑 &pound;
¥ 人民币 &yen;
€ 欧元 &euro;
§ 小节 &sect;
© 版权 &copy;
™ 商标 &trade;
® 注册商标 &reg;

字体图标

字体图标是一种使用Web字体来显示图标的现代技术，它允许开发者像使用普通文本一样使用图标。相比于传统的位图图标，字体图标具有许多优势，如无限缩放不失真、可以通过CSS样式轻松调整颜色和大小、支持阴影和其他文本特效等。

字体图标本质上是特殊的字符集，每个图标对应一个特定的Unicode字符。这些图标被打包成一个或多个字体文件（如.woff, .ttf, .eot, .svg），然后通过CSS引入到网页中。一旦加载了字体文件，就可以通过指定相应的字符或类名来显示图标。

Font Awesome

一个非常流行的字体图标库，提供了大量的图标，并且易于集成。
官网：https://fontawesome.dashgame.com

1
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<i class="fas fa-camera"></i>

Material Icons

来自Google的Material Design图标集合。
官网：https://mui.com/material-ui/material-icons

1
2
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">camera</i>

Ionicons

由Ionic团队维护的一套高质量图标。
官网：https://ionic.io/ionicons

1
2
3
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<ion-icon name="heart"></ion-icon>

Bootstrap

由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。
官网：https://www.bootcss.com

1
2
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<span class="glyphicon glyphicon-heart"></span>

Iconfont

Iconfont 是阿里巴巴推出的一个矢量图标库平台
官网：https://www.iconfont.cn

Axios JS 库

Axios 是一个基于 Promise 的网络请求库。它可以帮助开发者轻松地发送 HTTP 请求并与服务器进行交互。

主要特性

  • 支持 Promise：Axios 基于 Promise API，允许更简洁的异步代码编写。
  • 浏览器和 Node.js 兼容性：既可以在浏览器环境中使用，也可以在服务器端（Node.js）使用。
  • 拦截请求和响应：可以对请求或响应进行预处理或后处理。
  • 自动转换 JSON 数据：Axios 自动将数据从 JSON 转换为 JavaScript 对象。
  • 客户端支持防止 CSRF（XSRF）攻击：通过设置适当的请求头来提供保护。
  • 取消请求：支持取消已经发出但未完成的请求。
  • 超时配置：可以通过设置指定请求的超时时间。

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 可以直接通过 CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    // 参数直接拼接到 url 中
    axios.get('/user?ID=12345')
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.error(error);
        });

    // 也可以发送带有参数的 GET 请求
    axios.get('/user', {
        params: { ID: 12345 }
    })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

    // 发送 POST 请求
    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));
</script>

并发请求

1
2
3
4
5
6
7
8
// 可以同时发起多个请求，并在所有请求完成后执行某些操作：
axios.all([
    axios.get('/user/12345'),
    axios.get('/user/67890')
])
.then(axios.spread((response1, response2) => {
    console.log(response1.data, response2.data);
}));

全局配置

可以通过 axios.defaults 设置全局默认配置，这些配置将应用于所有请求。

1
2
3
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 5000; // 超时时间为 5 秒

配置选项

可以通过配置选项来自定义请求行为。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// url：请求的 URL。
axios.get('https://api.example.com/data');

// method：请求方法（如 GET、POST、PUT、DELETE 等），默认为 GET。
axios({
    method: 'post',
    url: '/user',
    data: { name: 'John' }
});

// baseURL：基础 URL，所有请求的 URL 都会基于此拼接。
const instance = axios.create({ baseURL: 'https://api.example.com' });
instance.get('/data'); // 请求 https://api.example.com/data

// headers：自定义请求头。
axios.post('/user', { name: 'John' }, {
    headers: { 'Content-Type': 'application/json' }
});

// params：URL 查询参数（键值对）。
axios.get('/user', {
    params: { id: 123, name: 'John' }
}); // 请求 /user?id=123&name=John

// paramsSerializer：自定义序列化 params 的函数。
axios.get('/user', {
    params: { ids: [1, 2, 3] },
    paramsSerializer: params => {
        return Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
    }
});

// data：请求体数据（仅适用于 POST、PUT、PATCH 等方法）。
axios.post('/user', { name: 'John' });

// timeout：请求超时时间（毫秒）。
axios.get('/user', { timeout: 5000 }); // 超时时间为 5 秒

// withCredentials：是否携带跨域凭据（如 cookies）。
axios.get('/user', { withCredentials: true });

// auth：HTTP 基本认证信息（用户名和密码）。
axios.get('/user', { auth: { username: 'janedoe', password: 's00pers3cret' } });

// responseType：指定响应的数据类型（如 json、text、blob 等）。
axios.get('/image', { responseType: 'blob' });

// responseEncoding：指定响应的编码方式（如 utf8）。
axios.get('/data', { responseEncoding: 'utf8' });

// xsrfCookieName 和 xsrfHeaderName：防止 CSRF 攻击的 Cookie 名称和请求头名称。
axios.get('/user', {
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN'
});

// onUploadProgress 和 onDownloadProgress：上传和下载进度回调。
axios.post('/upload', formData, {
    onUploadProgress: progressEvent => {
        console.log(`上传进度: ${Math.round((progressEvent.loaded * 100) / progressEvent.total)}%`);
    }
});

// maxContentLength 和 maxBodyLength：限制响应内容和请求体的最大长度（字节）。
axios.get('/large-file', { maxContentLength: 1000000 }); // 限制为 1MB

// validateStatus：自定义 HTTP 状态码的有效性检查。
axios.get('/user', {
    validateStatus: status => status >= 200 && status < 300 // 默认行为
});

// cancelToken：取消请求的令牌（已废弃，推荐使用 AbortController）。
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user', { cancelToken: source.token });
source.cancel('请求被用户取消');

// signal：取消请求的信号（推荐使用 AbortController）。
const controller = new AbortController();
axios.get('/user', { signal: controller.signal });
controller.abort(); // 取消请求

// proxy：代理服务器配置（仅在 Node.js 中有效）。
axios.get('/user', {
    proxy: { host: '127.0.0.1', port: 9000 }
});

// decompress：是否自动解压缩响应（仅在 Node.js 中有效）。
axios.get('/compressed-data', { decompress: true });

拦截器

Axios 支持请求和响应拦截器，可以在请求发送之前或响应被处理之前对其进行修改。

⭐⭐ 添加请求拦截器

1
2
3
4
5
6
7
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

⭐⭐ 添加响应拦截器

1
2
3
4
5
6
7
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response;
}, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

取消请求

1
2
3
4
5
6
7
8
9
10
11
12
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
        // executor 函数接收一个取消函数作为参数
        cancel = c;
    })
});

// 取消请求
cancel();

错误处理

Axios 中的错误处理通常包括检查响应状态码以及捕获请求中的异常情况：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
axios.get('/user/12345')
    .then(response => {
        if (response.status !== 200) {
            throw new Error('请求失败');
        }
        console.log(response.data);
    })
    .catch(error => {
        if (axios.isCancel(error)) {
            console.log('请求取消:', error.message);
        } else {
            console.error('请求错误:', error);
        }
    });

学习资源

  • 视频
    • 【HTML5+CSS3+移动web视频教程】：https://www.bilibili.com/video/BV1kM4y127Li
    • 【JavaScript入门到精通】：https://www.bilibili.com/video/BV1Y84y1L7Nn
    • 【前端框架Jquery从零到精通】：https://www.bilibili.com/video/BV1ey4y1k73p
  • 教程
    • 菜鸟教程：https://www.runoob.com
    • W3school：https://www.w3school.com.cn
  • 文档
    • MDN：https://developer.mozilla.org/zh-CN/
    • HTML：https://developer.mozilla.org/zh-CN/docs/Web/HTML
    • CSS：https://developer.mozilla.org/zh-CN/docs/Web/CSS
    • JavaScript：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
  • 工具
    • 对照表：https://developer.mozilla.org/zh-CN/docs/Glossary/Entity
    • 解码工具：https://mothereff.in/html-entities
    • 在线正则表达式测试：https://tool.oschina.net/regex
  • 插件
    • 轮播图插件：https://www.swiper.com.cn
    • 实用工具库：https://www.lodashjs.com