MEGO主题暂时告一段落，剩下的只是维护更新啦，接下来我将开发不同类型的主题以丰富Halo生态环境，接下来到来的是一款基于企业主题，命名为NOVUS。

介绍

NOVUS，一个专为 Halo 而生的服务型企业主题。以简洁大气的视觉语言，快速构建「公司介绍、服务展示、资讯发布、客户对接」四大核心场景；模块化布局+可视化设置，让用户在瞬息万变的市场环境中，零代码上线专业站点，轻松传递品牌价值，赢得客户信任。

构想

顶部通知＝流量收割机

横幅一挂，活动、白皮书、直播随时上线；后台 5 秒改字，手机端自动适配。用户点「X」仅当前页面隐藏，刷新后再次露出，短期强提醒不丢失。

导航菜单＝左侧领路、右侧行动

左侧 Logo 与一级菜单并排，右侧登录/注册/搜索一键开关，图标文字双模式。Hero 大图全程无遮挡。

Hero 模块＝自动轮播大片仓

Banner 设定秒级间隔即自动循环；无文字遮挡，只有纯净视觉。每张图可独立跳转，30 秒完成“年度故事连播”，访客一眼沉浸，品牌气场直接拉满。

未完待续…

本文将针对 Mac 上进行常见的 Homebrew、Node.js、Git 等的基本安装与环境配置。

一、Homebrew

打开终端，执行以下命令来安装 Homebrew：

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

友情提示：根据命令安装即可，镜像加速推介选择 中科大国内源 。

检查 Homebrew 是否成功安装：

brew --version

二、Node.js

->安装

使用 Homebrew 安装 Node.js：

brew install node

安装完成后，验证安装是否成功：

node -v
npm -v

如果需要使用 pnpm（比 npm 更快速的包管理工具），可以使用以下命令安装：

brew install pnpm

->配置

淘宝镜像源

# NPM
npm config set registry https://registry.npmmirror.com/

# PNPM
pnpm config set registry https://registry.npmmirror.com/

## 还原
npm config set registry https://registry.npmjs.org/
pnpm config set registry https://registry.npmjs.org/

配置代理

# NPM
npm config set proxy http://127.0.0.1:10000
npm config set https-proxy http://127.0.0.1:10000

npm config delete proxy
npm config delete https-proxy

# PNPM
pnpm config set proxy http://127.0.0.1:10000
pnpm config set https-proxy https://127.0.0.1:10000

pnpm config delete proxy
pnpm config delete https-proxy

三、Git

->安装

使用 Homebrew 安装 Git：

brew install git

配置 Git 用户名和邮箱：

git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

验证安装：

git --version

->配置

# 配置全局代理
git config --global http.proxy http://127.0.0.1:10000
git config --global https.proxy http://127.0.0.1:10000

# 配置 Github 代理
git config --global http.https://github.com/.proxy http://127.0.0.1:10000 # 配置 Github 代理
git config --global https.https://github.com/.proxy http://127.0.0.1:10000 # 配置 Github 代理

# 删除代理配置
git config --global --unset http.proxy 
git config --global --unset https.proxy 

四、其他

新环境开发环境构建时， pnpm 默认会忽略一些构建脚本，除非你明确批准它们。

Ignored build scripts: @tailwindcss/oxide, esbuild.
Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts.

# 按照提示选择即可
pnpm approve-builds

五、总结

配置 Mac 开发环境时，使用 Homebrew 可以大大简化安装和管理工具的过程。通过安装和配置这些常用开发工具，你可以快速开始你的开发工作。记得根据自己的项目需求调整工具和环境设置，并定期更新工具和依赖库。

Vue 3 是一款轻量、高效、易用的前端框架，提供现代化的开发体验和强大的生态，用于快速构建交互式网页应用。

创建VUE工程

点击查看官方文档

## 1.创建命令
npm create vue@latest

## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

初识VUE

Vue3向下兼容Vue2语法，且Vue3中的模版可以没有根标签

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'App',
    data() {
      return {
        name:'张三',
        age:18,
        tel:'13888888888'
      }
    },
    methods:{
      changeName(){
        this.name = 'zhang-san'
      },
      changeAge(){
        this.age += 1
      },
      showTel(){
        alert(this.tel)
      }
    },
  }
</script>

VUE3核心语法

OptionsAPI 与 CompositionAPI

• Vue2的API设计是Options（配置）风格的。

• Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

以上四张动图原创作者：大帅老猿

Setup函数

概述

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

特点如下：

• setup函数返回的对象中的内容，可直接在模板中使用。

• setup中访问this是undefined。

• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

setup 返回值

• 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）**

• 若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){
  return ()=> '你好啊！'
}

与 Options API 的关系

• Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法。

• 但在setup中不能访问到Vue2的配置（data、methos......）。

• 如果与Vue2冲突，则setup优先。

setup 语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
  }
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

扩展：在Vue 3.3 之后内置提供的一个编译宏（macro）。它的作用类似于 defineProps、defineEmits 这些宏，主要用于在 <script setup> 语法糖里设置组件的选项，比如 name、inheritAttrs 等。

<script setup lang="ts">
import { defineOptions } from "vue";

defineOptions({
  name: "Person",
  inheritAttrs: false,
});
</script>

上面等价于传统写法：

<script lang="ts">
export default {
  name: "Person",
  inheritAttrs: false,
}
</script>

ref 创建：基本类型的响应式

• 作用：定义响应式变量。

• 语法：let xxx = ref(初始值)。

• 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

• 注意点：

  • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。

  • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script setup lang="ts">
  import {ref} from 'vue'
  import { defineOptions } from "vue";
  defineOptions({
    name: "Person",
  });
  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串，不是响应式的
  let tel = '13888888888'

  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)

    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
</script>

reactive 创建：对象类型的响应式数据

• 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）

• 语法：let 响应式对象= reactive(源对象)。

• 返回值：一个Proxy的实例对象，简称：响应式对象。

• 注意点：reactive定义的响应式数据是“深层次”的。

<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>

ref 创建：对象类型的响应式数据

• 其实ref接收的数据可以是：基本类型、对象类型。

• 若ref接收的是对象类型，内部其实也是调用了reactive函数。

<template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</script>

ref 对比 reactive

宏观角度看：

1. ref用来定义：基本类型数据、对象类型数据；

2. reactive用来定义：对象类型数据。

• 区别：

1. ref创建的变量必须使用.value（可以使用Vue (Official)插件自动添加.value）。

   

2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。

• 使用原则：

1. 若需要一个基本类型的响应式数据，必须使用ref。

2. 若需要一个响应式对象，层级不深，ref、reactive都可以。

3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

在网站运营中，数据分析是优化用户体验和内容策略的重要环节。对于使用 Halo 搭建网站的用户而言，应用市场提供了丰富的插件选择，其中 Umami 插件 因其轻量化、开源和隐私友好而备受关注。

什么是 Umami？

Umami 是一款开源的网页统计工具，致力于提供简洁、直观的数据分析体验。与传统分析工具相比，Umami 不依赖第三方服务，不收集用户个人信息，非常适合注重隐私和性能的站长使用。其核心特点包括：

• 轻量高效：数据收集和展示快速，几乎不影响网站性能。

• 隐私保护：默认不收集个人身份信息，符合 GDPR 等隐私法规。

• 可自托管：无需依赖第三方平台，所有数据均由自己掌控。

• 界面简洁：统计面板直观明了，即使非技术用户也能快速上手。

在Halo中使用 Umami 插件

①安装 Umami 插件

打开 Halo 应用市场，搜索 “Umami”，安装完成后，插件会出现在 Halo 的插件管理列表中。

②配置 Umami 实例

注意：本文不涉及 Umami 自托管实例的安装和配置，仅介绍在 Halo 中使用 Umami 插件进行网站统计的操作方法。如需部署自托管实例，请参考 Umami 官方文档。

③多站点配置 Umami 插件

在使用 Umami 插件的过程中，我遇到了一些跨域（CORS）和内容安全策略（CSP）的问题。由于我管理多个 Halo 网站，需要让每个站点都能正常访问 Umami，因此我对 Nginx 做了一些定制配置，具体如下：

>> CORS 动态配置

使用 map 根据请求的 Origin 动态返回允许的域名，保证不同站点都能正确跨域访问 Umami。

map $http_origin $cors_origin {

    default "";

    "https://xxx.domain.com"   "https://xxx.domain.com";

    "https://yyy.domain.com"  "https://yyy.domain.com";

}

$cors_origin 是前面 map 定义的变量，根据请求的来源动态返回允许的域名。always 表示无论响应状态码是多少，头信息都添加。

add_header Access-Control-Allow-Origin $cors_origin always; 

>> CSP 相关配置

防止网页被未知来源的站点使用 <iframe> 嵌入你的网页，提高安全性。

'self'：允许本域名嵌入；https://xxx.domain.com 和 https://yyy.domain.com：允许指定的域名嵌入

add_header Content-Security-Policy "frame-ancestors 'self' https://xxx.domain.com https://yyy.domain.com" always;

>> Nginx详细配置 - 单一站点

直接复制标注代码到nginx配置即可，1panel的openresty同理。

server {
    listen 80 ; 
    listen 443 ssl ; 
    server_name umami.domain.com;  // 此处设置你的umami站点
    ....

    // 复制以下配置，此处和Umami插件配置一样
    add_header Access-Control-Allow-Origin 'https://halo.domain.com'; //此处需改为你的Halo站点
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; 
    if ($request_method = 'OPTIONS' ) {
        return 204; 
    }

    // 复制以下配置，此处设置哪些站点可嵌入 <iframe>
    add_header Content-Security-Policy 'frame-ancestors halo.domain.com'; // 此处需改为你的Halo站点

    
    location / {
        proxy_set_header Host $host; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Host $server_name; 
        ...

        // 复制以下配置，此处和Umami插件配置一样
        proxy_hide_header 'Access-Control-Allow-Origin'; 
        proxy_hide_header 'Content-Security-Policy'; 
    }
    http2 on; 
    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }
     ... 
}

>> Nginx详细配置 - 多站点

直接复制标注代码到nginx配置即可，1panel的openresty同理。

// 此处调用map方法以实现多站点访问
map $http_origin $cors_origin {
    default "";
    "https://xxx.domain.com"   "https://xxx.domain.com";
    "https://yyy.domain.com"   "https://yyy.domain.com";
}

server {
    listen 80 ; 
    listen 443 ssl ; 
    server_name umami.domain.com;  // 此处设置你的umami站点
    ....

    // 复制以下配置，此处和Umami插件配置一样
    add_header Access-Control-Allow-Origin $cors_origin always; 
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; 
    if ($request_method = 'OPTIONS' ) {
        return 204; 
    }

    // 复制以下配置，此处设置哪些站点可嵌入 <iframe>
    add_header Content-Security-Policy "frame-ancestors 'self' https://xxx.domain.com https://yyy.domain.com" always;

    
    location / {
        proxy_set_header Host $host; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Host $server_name; 
        ...

        // 复制以下配置，此处和Umami插件配置一样
        proxy_hide_header 'Access-Control-Allow-Origin'; 
        proxy_hide_header 'Content-Security-Policy'; 
    }
    http2 on; 
    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }
     ... 
}

时隔很久很久...

MEGO是我第一款为Halo写的主题，那时刚刚学完HTML+CSS（甚至连JS都还没学完），最近着手对MEGO主题进行了全面的改版与升级，使用Tailwind框架，对多端的响应式有了更好的适配。

一、HERO展示板块

在查看原始预览时，发现布局杂乱不堪且缺少主次关系，过多的配色让人眼花缭乱，过多的圆角让整个主题丑陋无比，让人都不想用，请看下图！

原主题展示板块

针对以上的问题，我们需要大刀阔斧让一切变得简洁，菜单栏使用三栏布局，左侧站点信息与简介，中间菜单信息，右侧主题配色的切换。Hero的背景均可自定义（我尝试过用API更换背景，每一次刷新都是新的也很炫酷）。

• 在白天模式下，Hero板块下的全局背景会有阴影，以便提升视觉观感。

新主题展示板块-暗黑

• 在暗黑模式下，Hero的全局背景将变得更加轻薄，以适应夜晚模式下对配色的对比。

新主题展示板块-暗黑

二、移动端菜单布局

在原始版本中，是通过向下展开的方式展开菜单，动画惨绝人寰让人不忍直视。每一次点击展开的时候会使界面有卡顿，且依然无主题模式切换，我们需要对他进行改革。

原主题移动端菜单

在新版中，我们依然对Header使用双栏布局，右侧是站点信息，左侧是主题模式切换以及菜单按钮，在右侧菜单的下部分空白区域，我正在构思是否新的方案。

• 移动端添加滑入滑出的动画，并对展开的菜单时的页面背景设置了蒙版，从而让菜单更加醒目。

三、站点信息

在原始版本中，菜单导航是以三个部分（头像、站点数据以及联系方式）集成在卡片的中显示的，在使用时你会发现当访问量过于强大时会导致样式产生分裂，我们需要对它进行调整。

• 在新版本中，站点信息以单独的形式展现，除了网站浏览量，文章发布数，剩下两项均可自定义。

• 站点信息上方集成了简单摘要，用于网站的介绍或者作者说....

• 

四、博客展示

在原始版本中，卡片式的博客布局很实用但太丑了，配上了奇丑无比的背景（实话讲当时觉得很酷）、过多的圆角会使得有很大的割裂感。

• 在新版本中对博文显示进行了调整，依然采用了卡片是布局，将文章的图片置底作为背景，文字信息叠加在图片之上；使用渐变遮罩层提高文字的展示程度，将分类信息置于卡片左上角更醒目。

五、侧边聚合

在原始版本中，侧边栏承载站点信息、热门文章、分类归档和标签归档、上文中我们将站点信息移除，当然在新版本中我依然要改进。至于为什么标签归档没有显示，可能是当时版本太古早没有适配Halo 2.20，不显示了....

• 在新版本中将不在使用双栏布局，小卡片的以聚合形式展示展示在主界面，主题以集成Font Awesome 6 Free字体库，可以自定义风格。

• 在新版本中，我依然选择聚合标签的形式展示在主界面，当标签过多时则是以三行显示，如果标签过少则是一行显示。

• 网站的订阅功能很重要，鱼佬写了订阅插件终于派上用场，这里直接复用了TW的UI案例

未完待续....

简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势:无刷新获取数据。

AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

【原生】AJAX请求

准备工作

1、前往 Node.js 官方网站 并下载适合你操作系统的 Node.js 安装程序。

2、前往并下载 Express 框架。

安装Node.js

node -v //检查Node.js版本

npm -v // 检查Npm包版本

npm install -g npm // 更细Npm

安装Express

npm init --yes

npm i express //mac用户前置sudo命令

HTTP协议请求

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

请求报文

响应报文

<html>
  <head> </head>
  <body>
    <h1>hello ，Ajax ！</h1>
  </body>
</html>

状态码

Express规则

// 引入express
const express = require('express');

// 创建应用对象
const app = express();

// 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/server',(request,response)=>{
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置响应体
    response.send('Hello AJAX!')
})
app.post('/server', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应体
    response.send('Hello AJAX!')
})
// 监听端口，启动服务
app.listen(8000, ()=>{
    console.log('服务器已启动，8000端口监听中...')
})

<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    btn.onclick = function() {
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化 设置请求方法和url
        xhr.open('GET','http://127.0.0.1:8000/server');
        // 3. 发送
        xhr.send(); 

        // 4. 事件绑定 处理服务端返回的结果
        // on when 当....时候

        // readystate 是xhr对象中的属性，表示状态 0-4
        // 0：xhr对象创建完成
        // 1：open方法调用完成
        // 2：send方法调用完成
        // 3：服务端返回部分结果
        // 4：服务端返回所有结果，可以在该阶段获取返回结果

        // change 改变
        xhr.onreadystatechange = function() {
            // 判断服务端返回所有结果
            if (xhr.readyState === 4) {
                // 判断响应状态码 200 404 403 401 500
                // 2xx 都为成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 处理结果 行 头 空行 体
                    // 1. 响应行
                    // console.log(xhr.status); // 状态码
                    // console.log(xhr.statusText); // 状态字符串
                    // console.log(xhr.getAllResponseHeaders()); // 所有响应头
                    // console.log(xhr.response); // 响应体
                    // 设置result的文本
                    result.innerText = xhr.response;
                }
            }
        }
    }
</script>

AJAX基本原理

XMLHttpRequest(XHR)对象用于与服务器交互。通过XMLhttpRequest可以再不刷新页面的情况下，请求特定URL获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。

使用XMLHttpRequest

创建XMLHttpRequest对象

const xhr = new XMLHttpRequest();

配置请求方法和请求url地址

xhr.open('请求方法'，'请求url地址')

监听loadend时间，接收响应结果

xhr.addEventListener('loadend',()=>{
  //响应结果
  console.log(xhr.response)
})

发送请求

xhr.send()

查询参数

<p class="city-p"></p>html

<script>
  //目标：使用XHR携带查询参数，展示某个省下属的城市列表
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
  xhr.addEventListener('loadend', () => {
    console.log(xhr.response)
    const data = JSON.parse(xhr.response)
    console.log(data)
    document.querySelector('.city-p').innerHTML = data.list.join('<br>')
  })
  xhr.send()
</script>

案例一：地区查询

// 1、 创建URLSearchParams 对象
const paramsObj = new URLSearchParams({
    参数名1：值1,
    参数名2：值2
})
// 2、 生成指定格式查询参数 对象的toString() 方法
const queryString = paramsObj.toString
// 结果： 参数名=值1&参数名2=值2

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>案例_地区查询</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            :root {
                font-size: 15px;
            }

            body {
                padding-top: 15px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <form class="row" id="editForm">
                <!-- 输入省份名字 -->
                <div class="mb-3 col">
                    <label class="form-label">省份名字</label>
                    <input class="form-control province" name="province" placeholder="请输入省份名称" type="text"
                           value="北京"/>
                </div>
                <!-- 输入城市名字 -->
                <div class="mb-3 col">
                    <label class="form-label">城市名字</label>
                    <input class="form-control city" name="city" placeholder="请输入城市名称" type="text"
                           value="北京市"/>
                </div>
            </form>
            <button class="btn btn-primary sel-btn" type="button">查询</button>
            <br><br>
            <p>地区列表: </p>
            <ul class="list-group">
                <!-- 示例地区 -->
                <li class="list-group-item">东城区</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script>
            /**
             * 目标: 根据省份和城市名字, 查询对应的地区列表
             */
            // 1. 获取表单元素
            document.querySelector('.sel-btn').addEventListener('click', () => {
                // 2. 获取表单数据
                const pname = document.querySelector('.province').value
                const cname = document.querySelector('.city').value

                // 3. 组织查询参数字符串
                const qObj = {
                    pname,
                    cname,
                }

                // 查询参数对象 -> 查询参数字符串
                const paramsObj = new URLSearchParams(qObj)
                const queryString = paramsObj.toString()
                console.log(queryString)

                // 4. 发起请求XHR
                const xhr = new XMLHttpRequest()
                xhr.open('GET', `https://hmajax.itheima.net/api/area?${queryString}`)
                xhr.addEventListener('loadend', () => {
                    console.log(xhr.response)
                    const data = JSON.parse(xhr.response)
                    console.log(data)
                    const htmlStr = data.list.map(areaName => {
                        return `<li class="list-group-item">${areaName}</li>`
                    }).join('')
                    console.log(htmlStr)
                    document.querySelector('.list-group').innerHTML = htmlStr
                })
                xhr.send()
            })
        </script>
    </body>

</html>

POST请求设置

/* 当鼠标移入#result，则发送Post请求... */
<div id="result" class="w-48 h-48 border solid black"></div>

<script>
    const result = document.getElementById('result');
    result.addEventListener('mouseover', function () {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化
        xhr.open('POST', 'http://127.0.0.1:8000/server');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 设置请求头信息（预定义）
        xhr.setRequestHeader('name','parlo'); //可以设置自定义请求头
        //3.发送
        xhr.send('a=100&b=200'); //请求体也可以为'number'；'a:100&b:100..'
        //4.事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    result.innerText = xhr.response;
                }
            }
        }
    });
</script>

当设定为自定义的请求头时，则需要在后端添加新的请求类型（一般不需要前端去操作）

// server.js

// 可以接受任意类型的请求
app.all('/server', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应体
    response.send('Hello AJAX!')
})

服务端响应JSON数据

// server.js

// 可以接受任意类型的请求
app.all('/json-server', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 响应一个数据
    const data = {
        name: 'parlo',
    }
    // 对象转换为字符串
    let str = JSON.stringify(data)
    // 设置响应体
    response.send(str)
})

/* 当键盘在浏览器视口按下，则发送请求 */
<div id="result" class="w-48 h-48 border solid black"></div>

手动转换数据

<script>
    //当键盘在浏览器视口下，按下键盘则发送POST请求
    const result = document.getElementById('result')
    window.onkeydown = function () {
        // 发送请求
        const xhr = new XMLHttpRequest();
        // 初始化
        xhr.open('get', 'http://127.0.0.1:8000/json-server');
        // 发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 手动处理服务器返回的结果
                    let data = JSON.parse(xhr.response)
                    console.log(data)
                    result.innerText = data.name
                }
            }
        }
    }
</script>

自动转换数据

<script>
    //当键盘在浏览器视口下，按下键盘则发送POST请求
    const result = document.getElementById('result')
    window.onkeydown = function () {
        // 发送请求
        const xhr = new XMLHttpRequest();
        // 设置响应体类型
        xhr.responseType = 'json'
        // 初始化
        xhr.open('get', 'http://127.0.0.1:8000/json-server');
        // 发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 自动处理服务器返回的结果
                    console.log(xhr.response)
                    result.innerText = xhr.response.name
                }
            }
        }
    }
</script>

Nodemon工具

安装Nodemon

npm install -g nodemon

运行服务端

nodemon server.js

IE缓存问题解决

解决全世界最好用的IE浏览器的缓存解决问题！需要注意的是，现代浏览器几乎不需要调整。

<button>点我发送请求</button>
<div id="result" class="w-48 h-48 border solid black"></div>

// server.js

app.get('/ie', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO IE! 2~~~');
});

<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    btn.addEventListener('click', () => {
        const xhr = new XMLHttpRequest();
        // 初始化
        xhr.open('GET', 'http://localhost:8000/ie?t=' + Date.now()); //为IE浏览器添加参数 + 时间戳
        // 发送
        xhr.send();
        // 绑定事件
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    result.innerText = xhr.response;
                }
            }
        };
    });
</script>

超时与网络异常

增加友好的判定来告知AJAX请求的网络情况。

<button>点我发送请求</button>
<div id="result" class="w-48 h-48 border solid black"></div>

// server.js

app.get('/delay', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    setTimeout(() => {
        response.send('延时响应');
    }, 3000);
});

<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    btn.addEventListener('click', () => {
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 设置超时时间
        xhr.timeout = 2000;
        // 设置超时回调
        xhr.ontimeout = function () {
            alert('网络超时，请稍后重试！');
        };
        // 设置网络异常回调
        xhr.onerror = function () {
            alert('网络异常，请稍后重试！');
        };
        // 初始化
        xhr.open('GET', 'http://localhost:8000/delay');
        // 发送
        xhr.send();
        // 事件绑定
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    result.innerText = xhr.response;
                }
            }
        };
    });
</script>

取消请求

取消正在发送的AJAX请求。

<button>点击发送请求</button>
<button>点击取消请求</button>

<script>
    const btn = document.querySelectorAll('button');

    let xhr = null; // 作用域需放在外层

    btn[0].onclick = function () {
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost:8000/delay');
        xhr.send();
    };
    btn[1].onclick = function () {
        xhr.abort(); //取消请求
    };
</script>

重复请求问题

当多次发送AJAX请求时，取消之前的请求。这样可以减少服务器的性能冲突。

<script>
    const btn = document.querySelectorAll('button');
    let xhr = null;
    //标识变量
    let isSending = false; // 是否正在发送AJAX请求
    btn[0].onclick = function () {
        if (isSending) xhr.abort();//判断！如果正在发送，则取消本次发送
        xhr = new XMLHttpRequest();
        //修改 标识变量的值
        isSending = true;
        xhr.open('GET', 'http://localhost:8000/delay');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                //修改表示变量
                isSending = false;
            }
        };
    };
    btn[1].onclick = function () {
        xhr.abort(); // 取消请求
    };
</script>

jQuery方法

<button>GET请求</button>
<button>POST请求</button>
<button>通用AJAX请求</button>

// jquery
app.all('/jquery-server', (request, response) => {
    // 设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    //response.send('HELLO jquery AJAX');
    const data = {name:'parlo'};
    response.send(JSON.stringify(data));
});

GET请求

<script>
    $('button').eq(0).click(function () {
        $.get('http://127.0.0.1:8000/jquery-server', {name: 'parlor', age: 18}, function (data) {
            console.log(data);
        }, 'json');
    });
</script>

POST请求

<script>
    $('button').eq(1).click(function () {
        $.post('http://127.0.0.1:8000/jquery-server', {name: 'parlor', age: 18}, function (data) {
            console.log(data);
        }, 'json');
    });
</script>

通用方法

$('button').eq(2).click(function () {
    $.ajax({
        // url
        url: 'http://127.0.0.1:8000/jquery-server',
        // 参数
        data: {name: 'parlo', age: 18},
        // 请求类型
        type: 'GET',
        // 响应体结果
        dataType: 'json',
        // 成功的回调
        success: function (data) {
            console.log(data);
        },
        // 超时时间
        timeout: 2000,
        // 失败的回调
        error: function () {
            console.log('出错了');
        },
        headers: {
            a: 300,
            b: 400
        }
    });
});

Axiso方法

基本语法

axuis({
  url:`目标资源地址`
}).then(result=>{
//对服务器是返回的数据做后续处理
})

参数查询

axuis({
  url:`目标资源地址`
  params:{
    参数名：值
  }
}).then((result)=>{
//对服务器是返回的数据做后续处理
})

<p></p>
<script>
    axios({
        url: 'https://hmajax.itheima.net/api/city',
        params: {
            pname: '山东省'
        }
    }).then(result => {
        console.log(result.data.list);
        document.querySelector('p').innerHTML = result.data.list.join('<br>');
    });
</script>

<form>
    <label>省份名字
        <input name="province" placeholder="请输入省份名字" type="text" value="北京">
    </label>
    <label>城市名字
        <input name="city" placeholder="请输入城市名字" type="text" value="北京市">
    </label>
</form>
<button type="button">查询</button>
<p>地区列表</p>
<ul>
    <li></li>
</ul>
<script>
    <!--创建绑定事件-->
    document.querySelector('button').addEventListener('click', function () {
        // 获取用户输入的省份值
        let pname = document.querySelectorAll('input')[0].value;
        let cname = document.querySelectorAll('input')[1].value;
        console.log(pname, cname);
        // 使用axios发送请求
        axios({
            url: 'https://hmajax.itheima.net/api/area',
            params: {
                pname,
                cname
            }
        }).then(result => {
            // 打印并检查数据
            console.log(result.data.list);
            let list = result.data.list;
            // ele.map()方法是根据当前数组生成一个新数组
            let theLi = list.map(ele => `<li>${ele}</li>`).join('');
            console.log(theLi);
            // 将生成的li标签添加到ul中
            document.querySelector('ul').innerHTML = theLi;
        });
    });
</script>

请求配置

axuis({
  url:`目标资源地址`,
  method:'请求方法',
  data:{
    参数名:值
  }
  params:{
    参数名:值
  }
}).then(result=>{
//对服务器是返回的数据做后续处理
})

错误处理

axuis({
  //请求选项
}).then(result=>{
  //处理数据
}).catch(error=>{
  //处理错误
})

<button id="btn">点击注册用户</button>
<script>
    document.getElementById('btn').addEventListener('click', () => {
        axios({
            url: 'https://hmajax.itheima.net/api/register',
            method: 'post',
            data: {
                username: 'parlo0532',
                password: '12345678'
            }
        }).then(result => {
            console.log(result);
        }).catch(error => {
            console.log(error);
            alert(error.response.data.message);
        });
    });
</script>

Form-serialize(插件)

引入插件 Form-serialize

<script src="path/to/form-serialize.js"></script>

使用serialize函数快速手机表单元素的值

<script>
  document.querySelector('.btn').addEventListener('click',(){
    const form = document.querySelector('.example-form')
    /*
      hash：设置获取对象的结构
        - true：JS对象（推介）一般请求体里提交给服务器 
        - false：查询字符串
      empty：设置是否获取空值
        - true：获取空值（推介）一般请求体里提交给服务器
        - false：不获取空值
    */
    const data = serialize(form,{hash:true,empty:true})
    console.log(data)
  })
</script>

案例一：登录表单

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>案例_登录</title>
        <!-- 引入bootstrap.css -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- 公共 -->
        <style>
            html,
            body {
                background-color: #EDF0F5;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .container {
                width: 520px;
                height: 540px;
                background-color: #fff;
                padding: 60px;
                box-sizing: border-box;
            }

            .container h3 {
                font-weight: 900;
            }
        </style>
        <!-- 表单容器和内容 -->
        <style>
            .form_wrap {
                color: #8B929D !important;
            }

            .form-text {
                color: #8B929D !important;
            }
        </style>
        <!-- 提示框样式 -->
        <style>
            .alert {
                transition: .5s;
                opacity: 0;
            }

            .alert.show {
                opacity: 1;
            }
        </style>
        <script src="../node_modules/axios/dist/axios.js"></script>
        <script src="form-serialize.js"></script>
    </head>

    <body>
        <div class="container">
            <h3>欢迎-登录</h3>
            <!-- 登录结果-提示框 -->
            <div class="alert alert-success" role="alert">
                提示消息
            </div>
            <!-- 表单 -->
            <div class="form_wrap">
                <form class="login-form">
                    <div class="mb-3">
                        <label class="form-label" for="username">账号名</label>
                        <input autocomplete="current-username" class="form-control username" name="username"
                               type="text">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="password">密码</label>
                        <input autocomplete="current-password" class="form-control password" name="password"
                               type="password">
                    </div>
                    <button class="btn btn-primary btn-login" type="button"> 登 录</button>
                </form>
            </div>
        </div>
        <script>
            //目标2：将错误或登录信息放在前端显示
            const message = document.querySelector('.alert')

            function alertFn(msg, isSuccess) {
                //显示提示框
                message.classList.add('show')
                //放入提示消息
                message.innerText = msg
                //设置样式
                const className = isSuccess ? 'alert-success' : 'alert-danger'
                message.classList.add(className)
                //过两秒隐藏
                setTimeout(() => {
                    message.classList.remove('show')
                    message.classList.remove(className)
                }, 2000)
            }


            // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
            document.querySelector('.btn-login').addEventListener('click', () => {
                // 使用serialize函数收集表单里用户名和密码
                const form = document.querySelector('.login-form')
                const data = serialize(form, {hash: true, empty: true})
                console.log(data);
                const {username, password} = data;
                console.log(username, password)
                // const username = document.querySelector('.username').value
                // const password = document.querySelector('.password').value
                if (username.length < 6) {
                    console.log('用户名长度不能小于6位');
                    alertFn('用户名长度不能小于6位', false)
                    return
                }
                if (password.length < 8) {
                    console.log('密码长度不能小于8位')
                    alertFn('密码长度不能小于8位', false)
                    return
                }
                axios({
                    url: 'https://hmajax.itheima.net/api/login',
                    method: 'post',
                    data: {
                        username,
                        password,
                    },
                }).then(result => {
                    console.log(result);
                    console.log(result.data.message);
                    alertFn(result.data.message, true)
                }).catch(error => {
                    console.log(error);
                    console.log(error.response.data.message);
                    alertFn(error.response.data.message, false)
                });
            });


        </script>

    </body>

</html>

案例二：图书管理

01>使用属性控制弹窗

<!-- 使用属性控制弹窗显示
    1、引入bootstrap.css和bootstrap.js
    2、准备弹窗标签，确认结构
    3、通过自定义属性，控制弹窗的显示和隐藏

    data-bs-toggle="modal" 用于触发模态框（Modal）的显示。
    data-bs-target="#myModal" 查找具有相应NAME模态框，并显示或操作该模态框。
    data-bs-dismiss="modal" 关闭对应的模态框
-->

<button class="btn btn-primary" data-bs-target=".my-modal" data-bs-toggle="modal" type="button">显示弹窗
</button>

<div class="modal my-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                <button class="btn btn-primary" type="button">Save changes</button>
            </div>
        </div>
    </div>
</div>

02>使用JS控制弹窗

const modaDom = document.querySelector('.modal')
const modal = new bootstrap.Modal(modaDom)

.show() 显示弹窗
.hide() 隐藏弹窗

<!--
目标：使用JS控制弹窗，显示和隐藏
1. 创建弹窗对象
   const modaDom = document.querySelector('.modal')
   const modal = new bootstrap.Modal(modaDom)
2. 调用弹窗对象内置方法
   .show() 显示弹窗
   .hide() 隐藏弹窗
-->
<button class="btn btn-primary edit-btn" type="button">
    编辑姓名
</button>

<div class="modal name-box" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">请输入姓名</h5>
                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
            </div>
            <div class="modal-body">
                <form action="">
                    <span>姓名：</span>
                    <input class="username" type="text">
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary save-btn" type="button">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
<script>
    // 1. 创建弹窗对象
    const modaDom = document.querySelector('.name-box')
    const modal = new bootstrap.Modal(modaDom)
    // 编辑姓名->点击->弹窗显示
    document.querySelector('.edit-btn').addEventListener('click', () => {
        document.querySelector('.username').value = '张三'
        modal.show()
    })
    // 保存按钮->点击->获取姓名打印->弹窗隐藏
    document.querySelector('.save-btn').addEventListener('click', () => {
        const username = document.querySelector('.username').value
        console.log('模拟把姓名保存到服务器上', username)
        modal.hide()
    })
</script>

03>完整代码

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <title>案例-图书管理</title>
        <!-- 字体图标 -->
        <link href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css" rel="stylesheet">
        <!-- 引入bootstrap.css -->
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
        <!-- 核心样式 -->
        <link href="CSS/index.css" rel="stylesheet">
    </head>

    <body>
        <!-- 主体区域 -->
        <div class="container">
            <!-- 头部标题和添加按钮 -->
            <div class="top">
                <h3>图书管理</h3>
                <button class="btn btn-primary plus-btn" data-bs-target=".add-modal" data-bs-toggle="modal"
                        type="button"> + 添加
                </button>
            </div>
            <!-- 数据列表 -->
            <table class="table">
                <thead class="table-light">
                    <tr>
                        <th style="width: 150px;">序号</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>出版社</th>
                        <th style="width: 180px;">操作</th>
                    </tr>
                </thead>
                <tbody class="list">
                    <tr>
                        <td>1</td>
                        <td>JavaScript程序设计</td>
                        <td>马特·弗里斯比</td>
                        <td>人民邮电出版社</td>
                        <td>
                            <span class="del">删除</span>
                            <span class="edit">编辑</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 新增-弹出框 -->
        <div class="modal fade add-modal">
            <!-- 中间白色区域 -->
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header top">
                        <span>添加图书</span>
                        <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
                    </div>
                    <div class="modal-body form-wrap">
                        <!-- 新增表单 -->
                        <form class="add-form">
                            <div class="mb-3">
                                <label class="form-label" for="bookname">书名</label>
                                <input class="form-control bookname" name="bookname" placeholder="请输入书籍名称"
                                       type="text">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="author">作者</label>
                                <input class="form-control author" name="author" placeholder="请输入作者名称"
                                       type="text">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="publisher">出版社</label>
                                <input class="form-control publisher" name="publisher" placeholder="请输入出版社名称"
                                       type="text">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer btn-group">
                        <button class="btn btn-primary" data-bs-dismiss="modal" type="button"> 取消</button>
                        <button class="btn btn-primary add-btn" type="button"> 保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 编辑-弹出框 -->
        <div class="modal fade edit-modal">
            <!-- 中间白色区域 -->
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header top">
                        <span>编辑图书</span>
                        <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
                    </div>
                    <div class="modal-body form-wrap">
                        <!-- 编辑表单 -->
                        <form class="edit-form">
                            <input class="id" name="id" type="hidden">
                            <div class="mb-3">
                                <label class="form-label" for="bookname">书名</label>
                                <input class="form-control bookname" name="bookname" placeholder="请输入书籍名称"
                                       type="text">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="author">作者</label>
                                <input class="form-control author" name="author" placeholder="请输入作者名称"
                                       type="text">
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="publisher">出版社</label>
                                <input class="form-control publisher" name="publisher" placeholder="请输入出版社名称"
                                       type="text">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer btn-group">
                        <button class="btn btn-primary" data-bs-dismiss="modal" type="button"> 取消</button>
                        <button class="btn btn-primary edit-btn" type="button"> 修改</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
        <script src="./lib/form-serialize.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
        <!-- 核心逻辑 -->
        <script src="JS/index.js"></script>
    </body>

</html>

<script>

  /**
   * 目标1：渲染图书列表
   * 1.1 获取数据
   * 1.2 渲染数据
   */
  const creator = '张三';
  
  function getBookList() {
      // 1.1 获取数据
      axios({
          url: 'https://hmajax.itheima.net/api/books',
          params: {
              creator,
          },
      }).then(result => {
          console.log(result)
          const bookList = result.data.data;
          console.log(bookList)
          // 1.2 渲染数据
          const htmlStr = bookList.map((item, index) => {
              return `<tr>
                  <td>${index + 1}</td>
                  <td>${item.bookname}</td>
                  <td>${item.author}</td>
                  <td>${item.publisher}</td>
                  <td data-id="${item.id}">
                      <span class="del">删除</span>
                      <span class="edit">编辑</span>
                  </td>
              </tr>`
          }).join('')
          console.log(htmlStr)
          document.querySelector('.list').innerHTML = htmlStr
      })
  }
  
  //网页加载运行时，获取并渲染列表一次
  getBookList();
  
  /**
   * 目标2：新增图书
   * 2.1 新增弹窗-->显示和隐藏
   * 2.2 收集表单数据并提交到服务器保存
   * 2.3 刷新图书列表
   */
  // 2.1 新增弹窗-->显示和隐藏
  const addModalDom = document.querySelector('.add-modal')
  const addModal = new bootstrap.Modal(addModalDom)
  // 保存按钮-->点击->隐藏弹窗
  document.querySelector('.add-btn').addEventListener('click', () => {
      // 2.2 收集表单数据
      const addForm = document.querySelector('.add-form')
      const bookObj = serialize(addForm, {hash: true, empty: true})
      console.log(bookObj)
      //提交到服务器保存
      axios({
          url: 'https://hmajax.itheima.net/api/books',
          method: 'post',
          data: {
              ...bookObj,
              creator,
          },
      }).then(result => {
          console.log(result)
          // 2.3 添加成功后，重新请求并渲染图书列表
          getBookList();
          // 重置表单
          addForm.reset()
          // 隐藏弹窗
          addModal.hide()
      })
  })
  
  /**
   * 目标3：删除图书
   * 3.1 删除元素绑定点击事件->获取图书ID
   * 3.2 调用删除接口
   * 3.3 刷新图书列表
   */
  
  // 3.1 删除元素->(事件委托)
  document.querySelector('.list').addEventListener('click', event => {
      // console.log(event.target)
      if (event.target.classList.contains('del')) {
          // console.log('删除')
          const theID = event.target.parentNode.dataset.id
          console.log(theID)
          // 3.2 删除元素
          axios({
              url: `https://hmajax.itheima.net/api/books/${theID}`,
              method: 'delete',
          }).then(() => {
              // 3.3 刷新图书列表
              getBookList()
          })
      }
  })
  
  /**
   * 目标4：编辑图书
   * 4.1 编辑弹窗->显示和隐藏
   * 4.2 获取当前编辑图书数据->回显到编辑表单中
   * 4.3 提交保存修改，并刷新列表
   */
  
  // 4.1 编辑弹窗->显示和隐藏
  const editDom = document.querySelector('.edit-modal')
  const editModal = new bootstrap.Modal(editDom)
  // 编辑元素->点击->显示弹窗
  document.querySelector('.list').addEventListener('click', event => {
      // 判断点击的是否为编辑元素
      if (event.target.classList.contains('edit')) {
          // console.log('编辑')
          // 4.2 获取当前编辑图书数据->回显到编辑表单中
          const theID = event.target.parentNode.dataset.id
          console.log(theID)
          axios({
              url: `https://hmajax.itheima.net/api/books/${theID}`,
          }).then(result => {
              // 查看数据
              console.log(result)
              const bookObj = result.data.data
              // 遍历数据对象，使用属性去获取对应的标签
              const keys = Object.keys(bookObj)
              keys.forEach(key => {
                  document.querySelector(`.edit-form .${key}`).value = bookObj[key]
              })
          })
          editModal.show()
      }
  })
  // 修改按钮->点击->隐藏弹窗
  document.querySelector('.edit-btn').addEventListener('click', () => {
      // 4.3 提交保存修改，并刷新列表
      const editForm = document.querySelector('.edit-form')
      const {id, bookname, author, publisher} = serialize(editForm, {hash: true, empty: true})
      axios({
          url: `https://hmajax.itheima.net/api/books/${id}`,
          method: 'put',
          data: {
              bookname,
              author,
              publisher,
              creator,
          },
      }).then(() => {
          getBookList()
          editModal.hide()
      })
  })  

</script>

图片上传

使用 FormData 携带图片文件

const fd = new FormData()
fd.append(参数名，值)

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
              name="viewport">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>图片上传</title>
        <script src="../dist/http_cdn.bootcdn.net_ajax_libs_axios_1.2.0_axios.js"></script>
    </head>
    <body>
        <input class="upload" type="file">
        <img alt="" class="my-img" src="">

        <script>
            /**
             * 目标: 图片上传，显示在网页上
             * 1. 获取图片文件
             * 2. 使用 FormData 将图片文件传递给后端
             * 3. 提交到服务器，获取图片url网址并使用
             */
            // 文件选择元素 -> change改变事件
            document.querySelector('.upload').addEventListener('change', e => {
                // 获取文件对象
                console.log(e.target.files[0])
                // 创建FormData对象
                const fd = new FormData()
                // 将文件对象添加到FormData中
                fd.append('img', e.target.files[0])
                // 发送请求
                axios({
                    url: 'https://hmajax.itheima.net/api/uploadimg',
                    method: 'post',
                    data: fd,
                }).then(result => {
                    console.log(result)
                    // 将图片地址显示在网页上
                    const imgUrl = result.data.data.url
                    document.querySelector('.my-img').src = imgUrl
                })
            })
        </script>
    </body>
</html>

案例三：更换背景

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
              name="viewport">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>Document</title>
        <style>
            .upload {
                display: none;
            }

            .bq {
                width: fit-content;
                padding: 10px;
                background: #000;
                color: #fff;
                border-radius: 10px;
            }
        </style>
        <script src="../dist/http_cdn.bootcdn.net_ajax_libs_axios_1.2.0_axios.js"></script>
    </head>
    <body>
        <div class="bq">
            <label for="upload">更换背景</label>
            <input class="upload" id="upload" type="file">
        </div>

        <script>
            document.querySelector('.upload').addEventListener('change', e => {
                // 选择图片上传，设置body背景
                const formData = new FormData()
                formData.append('img', e.target.files[0])
                axios({
                    url: 'https://hmajax.itheima.net/api/uploadimg',
                    method: 'post',
                    data: formData,
                }).then(result => {
                    // 获取上传服务器后的返回地址
                    const imgUrl = result.data.data.url
                    // 设置body背景
                    document.body.style.backgroundImage = `url(${imgUrl})`
                    // 上传成功时保存在本地
                    localStorage.setItem('bg', imgUrl)
                })
            })
            // 页面加载时，如果本地有背景，则设置body背景
            const bgUrl = localStorage.getItem('bg')
            document.body.style.backgroundImage = `url(${bgUrl})`
        </script>
    </body>
</html>

案例四：个人信息设置

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- 核心样式 -->
        <link href="./css/index.css" rel="stylesheet">
        <title>个人信息设置</title>
    </head>

    <body>
        <!-- toast 提示框 -->
        <div class="toast my-toast" data-bs-delay="1500">
            <div class="toast-body">
                <div class="alert alert-success info-box">
                    操作成功
                </div>
            </div>
        </div>
        <!-- 核心内容区域 -->
        <div class="container">
            <ul class="my-nav">
                <li class="active">基本设置</li>
                <li>安全设置</li>
                <li>账号绑定</li>
                <li>新消息通知</li>
            </ul>
            <div class="content">
                <div class="info-wrap">
                    <h3 class="title">基本设置</h3>
                    <form action="javascript:;" class="user-form">
                        <div class="form-item">
                            <label for="email">邮箱</label>
                            <input autocomplete="off" class="email" id="email" name="email" placeholder="请输入邮箱"
                                   type="text">
                        </div>
                        <div class="form-item">
                            <label for="nickname">昵称</label>
                            <input autocomplete="off" class="nickname" id="nickname" name="nickname" placeholder="请输入昵称"
                                   type="text">
                        </div>
                        <div class="form-item">
                            <label>性别</label>
                            <label class="male-label"><input class="gender" name="gender" type="radio"
                                                             value="0">男</label>
                            <label class="male-label"><input class="gender" name="gender" type="radio"
                                                             value="1">女</label>
                        </div>
                        <div class="form-item">
                            <label for="desc">个人简介</label>
                            <textarea autocomplete="off" class="desc" cols="20" id="desc" name="desc"
                                      placeholder="请输入个人简介" rows="10"></textarea>
                        </div>
                        <button class="submit">提交</button>
                    </form>
                </div>
                <div class="avatar-box">
                    <h4 class="avatar-title">头像</h4>
                    <img alt="" class="prew" src="./img/头像.png">
                    <label for="upload">更换头像</label>
                    <input class="upload" id="upload" type="file">
                </div>

            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
        <script src="./lib/form-serialize.js"></script>
        <!-- 核心逻辑 -->
        <script src="./js/index.js"></script>
    </body>

</html>

01>信息渲染

/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */
const creator = 'parlocc'
axios({
    url: 'https://hmajax.itheima.net/api/settings',
    params: {
        creator,
    },
}).then(result => {
    const userObj = result.data.data
    console.log(userObj)
    Object.keys(userObj).forEach(key => {
        if (key === 'avatar') {
            document.querySelector('.prew').src = userObj[key];
        } else if (key === 'gender') {
            const gRadio = document.querySelectorAll('.gender')
            const gNum = userObj[key]
            console.log(userObj[key])
            gRadio[gNum].checked = true
        } else {
            document.querySelector(`.${key}`).value = userObj[key]
        }
    })
})

02>修改头像

/**
 * 目标2：修改头像
 *  2.1 获取头像文件
 *  2.2 提交服务器并更新头像
 * */
document.querySelector('.upload').addEventListener('change', e => {
    console.log(e.target.files[0])
    const fd = new FormData()
    fd.append('avatar', e.target.files[0])
    fd.append('creator', creator)

    axios({
        url: 'https://hmajax.itheima.net/api/avatar',
        method: 'put',
        data: fd,
    }).then(result => {
        console.log(result)
        const imgUrl = result.data.data.avatar
        document.querySelector('.prew').url = imgUrl
    })
})

03>提交表单

/**
 * 目标3：提交表单
 *  3.1 收集表单信息
 *  3.2 提交服务器保存
 * */

document.querySelector('.submit').addEventListener('click', () => {
    const userFrom = document.querySelector('.user-form')
    const userObj = serialize(userFrom, {hash: true, empty: true})
    userObj.creator = creator
    // 性别数字字符串，转换成数字类型
    userObj.gender = +userObj.gender
    console.log(userObj)
    axios({
        url: 'https://hmajax.itheima.net/api/settings',
        method: 'put',
        data: userObj,
    }).then(result => {
        const toastDom = document.querySelector('.my-toast')
        const toast = new bootstrap.Toast(toastDom)
        toast.show()
    })
})

Fetch函数

<button>AJAX</button>

<script>
    const btn = document.querySelector('button');
    btn.onclick = function () {
        fetch('http://127.0.0.1:8000/fetch-server?parlo=31', {
            //请求方法
            method: 'POST',
            //请求头
            headers: {
                name: 'parlo'
            },
            //请求体
            body: 'username=admin&password=123456'
        }).then(response => {
            return response.json();
        }).then(response => {
            console.log(response);
        });
    };
</script>

跨域

同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源: 协议、域名、端口号 必须完全相同。

而违背同源策略就是跨域。

JSONP

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明

才智开发出来，只支持 get 请求。

用户名：<input id="username" type="text"/>
<p></p>

// 用户名检测是否存在
app.all('/check-username', (request, response) => {
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    let str = JSON.stringify(data);
    response.send(`handle(${str})`);
});

<script>
    //获取input元素
    const input = document.querySelector('input');
    const p = document.querySelector('p');

    // 声明handle函数
    function handle(data) {
        input.style.border = '1px solid red';
        //修改p标签的提示文本
        p.innerHTML = data.msg;
    }

    //绑定事件
    input.onblur = function () {
        //获取用户输入的值
        let username = this.value;
        //向服务器发送请求 检测用户名是否存在
        //1、创建script标签
        const script = document.createElement('script');
        //2、设置script标签的src属性
        script.src = 'http://127.0.0.1:8000/check-username';
        //3、将script标签添加到页面中
        document.body.appendChild(script);
    };
</script>

jQuery发送JSONP

app.all('/jquery-jsonp-server', (request, response) => {
    // response.send('HELLO IE! 2~~~');
    const data = {
        name: '中国',
        city: ['北京', '上海', '青岛']
    };
    let str = JSON.stringify(data);
    // 接受callback参数
    let cb = request.query.callback;
    // 拼接数据
    response.send(`${cb}(${str})`);
});

<button>点击发送jsonp请求</button>
<div id="result"></div>

<script>
    $('button').eq(0).click(function () {
        $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
            // console.log(data);
            $('#result').html(
                `
                 名称：${data.name}<br>
                 城市: ${data.city}
                `
            );
        });
    });
</script>

CORS

CORS(Cross-Origin Resource Sharing)，跨域资源共享。

CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源。

<button>点击发送jsonp请求</button>
<div id="result"></div> 

javas//cors
app.all('/cors-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.setHeader('Access-Control-Allow-Method', '*');
    response.send('hello cors');
});

<script>
    const btn = document.querySelector('button');

    btn.onclick = function () {
        //1. 创建对象
        const xhr = new XMLHttpRequest();
        //2. 设置请求方法和url
        xhr.open('GET', 'http://127.0.0.1:8000/cors-server');
        //3. 发送
        xhr.send();
        //4. 监听事件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log(xhr.response);
                }
            }
        };
    };
</script>

jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单。“写更少的代码，做更多的事儿”是jQuery一直坚信的开发理念。

>引入jQuery

官方下载

<scripts src="path/to/jquery.xx.js" > </script>

引入 jQuery 库，实际就是向网页添加了一个新的函数$(jQuery)。

$ 是 jQuery 中的核心函数，jQuery 的所有功能都是通过该函数来进行的，

>jQuery 的核心函数

作为工具使用

• jQuery.contains()

• jQuery.isArray()

• jQuery.isFunction()

• jQuery.isNumeric()

• ……

var num = 10
fuction fn(){}
console.log($.isFunction(num)) // false
console.log($.inFunction(fn))  // true

作为函数使用

• 将一个函数作为$的参数，这个函数会在文档加载完毕之后执行，相当于document.addEventListener("DOMContentLoaded",function(){})

$(function(){
  alert("核心函数执行了~~")
}) //文档加载完毕后执行

alert("核心函数外部~~")

• 将选择器字符串作为参数，jQuery 自动去网页查找元素。类似于document.querySelectorAll("...")

<button id="btn"></button>
<button id="btn01"></button>

$(function(){
  $("#btn").click(function(){
    alert("你点了我哦~")
  })
})

需要注意的是，通过 jquery 核心函数查询到的结果并不是原生 DOM，而是经过包装的新对象，我们称之为 jquery 对象。

jquery对象中为我们提供了很多新的方法，方便我们做各种DOM 操作 ，但是jquery对象不能直接调用原生 DOM 对象的方法。

通过我们为 jquery 对象命名时，会使用$开头加以区分。

var $box1 = $("#box1") // 获取id为box1的元素
var $news = $(".news") // 获取class为news的元素
var $hello = $("[title=hello]") // 获取title属性为hello的元素

$(function () {

    $("#btn").click(function () {

        // alert("你点我干嘛~~")

        var btn = document.getElementById("btn01"); // [object HTMLButtonElement]

        var $btn = $("#btn01"); // [object Object]

    });
});

将 DOM 对象作为参数

可以将 DOM 对象转换为 jquery 对象，从而使用 jquery 对象的方法。

var box1 = document.getElementById("box1") // 获取DOM对象
var $box1 = $(box1) // 转换为jQuery对象

 $(function () {

    $("#btn").click(function () {

        // alert("你点我干嘛~~")

        var btn = document.getElementById("btn01"); // [object HTMLButtonElement]

        var $btn = $("#btn"); // [object Object]
        
        alert($(btn))

    });
});

将 HTML 代码作为参数

会根据 html 代码来创建元素

$(function () {

    $("#btn").click(function () {

        var $h1 = $("<h1>我是一个标题</h1>"); // 会根据html代码创建元素

        $("div").append($h1);

    });
});

>jQuery对象

通过 jQuery 核心函数获取到的对象就是jQuery对象。

jQuery对象是jQuery中定义的对象，可以将其理解为是DOM对象的升级版；在jQuery对象中为我们提供了很多简单易用的方法，来帮助我们简化DOM操作。

- jQuery对象本质上是一个DOM对象的数组（类数组）
  可以通过索引获取jQuery对象中的DOM对象

<button id="btn01">点我一下</button>
<ul>
    <li id="swk">孙悟空</li>
    <li id="zbj">猪八戒</li>
    <li>沙和尚</li>
    <li>唐僧</li>
    <li>白骨精</li>
</ul>

<script>
  $("#btn01").click(function () {
      var $li = $("li")
      // alert($li[0].textContent)
      
      var text = $li.text() // 读取文本，返回所有标签中的文本
      var id = $li.attr("id") // 读取属性时，返回第一个标签的属性
      alert(id)
  })
</script>

隐式迭代

当我们修改jQuery对象时，它会自动修改jQuery中的所有元素，这一特点称为jQuery的隐式迭代。

<script>
  $("#btn01").click(function () {
      var $li = $("li")    
      $li.text("新的文本内容")
  })
</script>

链式调用

通常情况下，jQuery对象方法的返回值依然是一个jQuery对象。所以我们可以在调用一个方法后，继续调用其他的jQuery对象的方法。这一特性，称为jQuery对象的 链式调用

<script>
  $("#btn01").click(function () {
      var $li = $("li")
      $li.text("新的文本内容").css({"color":"red"})
  })
</script>

>选择器集合

基础选择器

<div id="mydiv1" class="blue">元素选择器</div>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<span class="blue">样式选择器</span>

<script>

// id选择器
var $mydiv = $("#mydiv");
console.log($mydiv)

// 类选择器
var $class = $(".blue")
console.log($class)

// 元素选择器
var $span = $("span")
console.log($span)

// 通用选择器
var $all = $("*")
console.log($all)

</script>

层次选择器

表单选择器

>操作属性的元素

获取属性 attr

固有属性：元素本身就有的属性(id、name、class、style)，返回值是 Boolean 的属性：checked、selected、disabled

自定义属性：用户自己定义的属性

所以，attr()和prop()的区别是什么?

1. 如果是固有属性，attr 和 prop 方法均可操作。

2. 如果是自定义属性，attr 可操作，prop 不可操作。

3. 如果返回值是 boolean 类型的属性，若设置了属性，attr 返回具体的值，prop 返回 true，反之 undefined 和 false。

<input abd="aabbcc" checked="checked" id="aa" name="ch" type="checkbox"/> aa
<input id="bb" name="ch" type="checkbox"/> bb

<script>
    var name = $("#aa").attr("name");
    console.log(name); //ch
    var name2 = $("#aa").prop("name");
    console.log(name2); //ch
    // 返回值是 boolean 的属性 （元素设置了属性）
    var c1 = $("#aa").attr("checked");
    console.log(c1); //checked
    var c2 = $("#aa").prop("checked");
    console.log(c2); //true
    // 返回值是 boolean 的属性 （元素未设置属性）
    var c3 = $("#bb").attr("checked");
    console.log(c3); //undefined
    var c4 = $("#bb").prop("checked");
    console.log(c4); //false
    // 自定义属性
    var abc1 = $("#aa").attr("abd");
    console.log(abc1); //aabbcc
    var abc2 = $("#aa").prop("abd");
    console.log(abc2); //undefined
</script>

设置属性 prop

<input abd="aabbcc" checked="checked" id="aa" name="ch" type="checkbox"/> aa
<input id="bb" name="ch" type="checkbox"/> bb

<script>
    // 固有属性
    $('#aa').attr("value", "123");
    $('#bb').prop("value", "456");
    // 返回值是 boolean 的属性
    $('#aa').attr("checked", false);
    $('#bb').prop("checked", "checked");
    // 自定义属性
    $('#aa').attr("username", "admin");
    $('#bb').prop("username", "guest"); // prop() 不会解析 boolean 值
</script>

移除属性 removeAttr

<script>
    var name = $("#aa").removeAttr("checked");
</script>

总结：

如果属性的类型是 boolean，则使用 prop( )方法，反之使用 attr( )方法。

>操作元素的样式

添加元素的具体样式

1)）css({'样式名':'样式值'，'样式名2','样式值2'})

例：css({'background-color':'red','color':'#fff'});

2）css('样式名','样式值')

例：css('color','white')

<script>
    $("#aa").attr('color','blue');
    $("#aa").addClass('px-2');
    $("#aa").css({'background-color':'red','color':'#fff'});
    $("#aa").removeClass("px-2")
</script>

>操作元素的内容

表单元素：

文本框 text；密码框 password；单选框 radio；复选框 checkbox；隐藏域 hidden；文本域 textarea；下拉框select

非表单元素：

div；span；h1~h6；ul；li...

<div id="html1"></div>
<div id="html2"></div>
<div id="text"></div>
<input type="text" name="username" id="oop" value="oop" /> 

<script>
    // 非表单元素
    $("#html1").html("青岛");
    $("#html2").html("<h2>TsingTao<h2>");
    $("#text").text("山东") //山东
    $("#text").text("<h2>TsingTao<h2>") // <h2>TsingTao<h2>
    // 表单元素
    $("#oop").var("青岛啤酒")
</script>

>创建与添加元素

创建元素

<script>
    var p = $('<p>欢迎来到青岛</p>')
</script>

添加元素

<div id="html"></div>
<div id="text"></div>

<script>
    // 创建元素
    var test = "<span class='bg-black text-sm'>china</span>"
    $("html").prepend(test)
    $(test).prependTo("#html")

    var test2 = "<span class='bg-black text-sm'>TsingTao</span>"
    $("#text").before("test2")
</script>

>删除元素

<div id="html"></div>
<div id="text"></div>

<script>
    $("html").remove()
    $("text").detach()
</script>

>复制元素

<button id="btn"> 点我一下 </button>

<ul id="list">
    <li>孙悟空</li>
    <li>猪八戒</li>
</ul>

<ul id="list2">
    <li>沙和尚</li>
    <li>唐僧</li>
</ul>


<script>
    $(function(){
    
        $("#list li:nth-child(1)").click(function(){
            alert("孙悟空")
        })
    
        var $swk = $("#list li:nth-child(1)").clone(true)
        var $list2 = $("#list2")
    
        $("#btn").click(function(){
            $list2.append($swk)
        })
    })  
</script>

>筛选方法

<button id="btn"> 点我一下 </button>

<div class="box1"></div>
<div class="box1"></div>
<div class="box1 a"></div>
<div class="box1 a"></div>
<div class="box1"></div>

<script>
    $(function(){ 
        $("#btn").click(function(){
           $(".box1").eq()
           $(".box1").filter(".a").css("background-color", "#bfa")
        })
    })  
</script>

>事件绑定

通过@指定方法

<a href="#">超链接</a>

<script>
    $(function(){ 
        $(".a").click(function(event){
             event.stopPropagation()
             event.preventDefault()
        })
    })  
</script>

通过 on( ) 方法

<button id="btn1"> 点我一下 </button>
<button id="btn2"> 点我一下 </button>

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

<script>
     // on()可以通过on()方法来绑定事件
     $("#btn1").on("click.a", function(){
          alert("通过on绑定的事件！")
     })

     // off()可以用来取消事件绑定
     $("#btn2").on("click.a", function(){
          $("#btn1").off("click")
     })
     // 为所有box1的类添加事件委托
     $(document).on("click",".box1", function(event){
         alert("哈哈")
     })  
</script>

通过 one( ) 方法

<script>
    // one()用来绑定一个一次性的事件
    $(".box1").one("click", function(){
        alert('嘻嘻')
    })
</script>

>jQuery方法

.addClass()

• 为jQuery对象添加一个或多个class

.hasClass()

• 检查jQuery对象是否含有某个class

.toggleClass()

• 切换jQuery对象的指定class

.insertAfter()

• 将元素添加到某元素的后边

.insertBefore()

• 将元素添加到某元素的前边

.replaceAll()

• 替换某个元素

.replaceWith()

• 被某个元素替换

.height()

• 读取/设置元素的高度

.width()

• 读取/设置元素的宽度

.innerHeight()

• 读取/设置元素的内部高度

.innerWidth()

• 读取/设置元素的内部宽度

.outerHeight()

• 读取/设置元素可见框的高度

.outerWidth()

• 读取/设置元素可见框的宽度

.offset()

• 读取/设置元素的偏移量

.position()

• 读取元素相当于包含块的偏移量

.scrollLeft()

• 读取/设置元素水平滚动条的位置

.scrollTop()

• 读取/设置元素垂直滚动条的位置

.has()

• 获取含有指定后代的元素

.is()

• 检查是否含有某元素

.map()

• 获取对象中的指定数据

.add()

• 创建包含当前元素的新的jQuery对象

.addBack()

• 将之前操作的集合中的元素添加到当前集合中

.contents()

• 获取当前jQuery对象的所有子节点（包括文本节点）

.end()

• 将筛选过的列表恢复到之前的状态

.not()

• 从列表中去除符合条件的元素

.children()

• 获取子元素

.closest()

• 获取离当前元素最近的指定元素

.find()

• 查询指定的后代元素

.next()

• 获取后一个兄弟元素

.nextAll()

• 获取后边所有的兄弟元素

.nextUntil()

• 获取后边指定位置的兄弟元素

.offsetParent()

• 获取定位父元素

.parent()

• 获取父元素

.parents()

• 获取所有的祖先元素

.parensUntil()

• 获取指定的祖先元素

.prev()

• 获取前边的兄弟元素

.prevAll()

• 获取前边所有的兄弟元素

.prevUntil()

• 获取指定的兄弟元素

.siblings()

• 获取所有的兄弟元素

在 JavaScript 中，BOM（Browser Object Model）指的是浏览器对象模型，它是一种用于表示和操作浏览器窗口、文档、历史记录等对象的模型。BOM 是 JavaScript 在浏览器环境中的核心组成部分，它与 DOM（文档对象模型）一起构成了 Web 开发的基石。

BOM的分类

• window 对象：表示浏览器窗口，包含许多属性和方法，如 alert()、confirm()、prompt() 等。window 对象是 BOM 的核心，它代表了整个浏览器窗口，并且是所有其他 BOM 对象的父对象。

• history 对象：表示浏览器历史记录，包含许多属性和方法，如 back()、forward()、go() 等。history 对象使得 JavaScript 能够访问和操作浏览器的历史记录，从而实现页面导航功能。

• navigator 对象：表示浏览器的信息，包含许多属性和方法，如 appName、appVersion、platform 等。navigator 对象使得 JavaScript 能够获取浏览器的相关信息，从而实现浏览器检测功能。

• screen 对象：表示客户端屏幕的信息，包含许多属性和方法，如 width、height、availWidth 等。screen 对象使得 JavaScript 能够获取客户端屏幕的相关信息，从而实现页面布局功能。

• location 对象：表示当前页面的 URL 信息，包含许多属性和方法，如 href、protocol、host 等。location 对象使得 JavaScript 能够访问和操作当前页面的 URL，从而实现页面跳转功能。

>Window

localStorage.setItem( )

下面的代码片段访问了当前域名下的本地 Storage 对象，并通过 Storage.setItem() 增加了一个数据项目。

localStorage.setItem("myCat", "Tom");

localStorage.getItem( )

该语法用于读取 localStorage 项，如下：

let cat = localStorage.getItem("myCat");

localStorage.removeItem( )

该语法用于移除 localStorage 项，如下：

localStorage.removeItem("myCat");

ocalStorage.clear()

该语法用于移除所有的 localStorage 项，如下：

// 移除所有
localStorage.clear();

>Navigator

用来表示浏览器的相关信息

userAgent 返回一个用来描述浏览器信息的字符串

<script>

    // console.log(navigator.userAgent)

    let sBrowser;
    const sUsrAg = navigator.userAgent;

    // The order matters here, and this may report false positives for unlisted browsers.

    if (sUsrAg.indexOf("Firefox") > -1) {
        sBrowser = "Mozilla Firefox";
        // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
    } else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
        sBrowser = "Samsung Internet";
        // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
    } else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
        sBrowser = "Opera";
        // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
    } else if (sUsrAg.indexOf("Trident") > -1) {
        sBrowser = "Microsoft Internet Explorer";
        // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
    } else if (sUsrAg.indexOf("Edge") > -1) {
        sBrowser = "Microsoft Edge (Legacy)";
        // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
    } else if (sUsrAg.indexOf("Edg") > -1) {
        sBrowser = "Microsoft Edge (Chromium)";
        // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
    } else if (sUsrAg.indexOf("Chrome") > -1) {
        sBrowser = "Google Chrome or Chromium";
        // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
    } else if (sUsrAg.indexOf("Safari") > -1) {
        sBrowser = "Apple Safari";
        // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
    } else {
        sBrowser = "unknown";
    }
    alert(`You are using: ${sBrowser}`);
</script>

>Location

表示浏览器地址的详细信息

location.assign( ) 跳转到一个新的地址

location.replace( ) 跳转新的地址（无法回退）

location.reload( ) 刷新页面，可以通过 true 来刷新缓存

location.href( ) 获取当前地址

<button id=“btn”> 点我一下 </button>

<script>
    const btn = document.getElementById("btn")
    btn.addEventListener("click", () => {

        // console.log(location.href)

        // location = "https://w-flac.org.cn"

        // location.assign("https://w-flac.org.cn")

        // location.replace("https://w-flac.org.cn")

        location.reload(true)
    })
</script>

>History

表示浏览器的历史记录

history.back( ) 回退按钮

history.forward ( ) 前进按钮

history.go( ) 向前或向后

<button id=“btn”> 点我一下 </button>

<script>
    const btn = document.getElementById("btn")
    btn.onclick = () => {

        // console.log(history.length)

        // history.back()

        // history.forward()

        history.go(-1)

    }
</script>

>定时器

通过定时器可以使代码在指定时间后执行

setTimeout( ) 代码只执行一次

参数：

• 回调函数

• 间隔的时间

关闭定时器：

clearTimeout( )

<script>

const timer = setTimeout(()=>{
    alert("我是定时器中的代码")
}, 3000)

clearTimeout(timer)

</script>

setInterval( ) 代码每间隔一段时间执行一次

参数：

• 回调函数

• 间隔的时间

关闭定时器：

clearInterval( )

<h1 id="num"></h1>

<script>

const numH1 = document.getElementById("num");

let num = 0;

const timer = setInterval(() => {
    num++;
    numH1.textContent = num;

    if (num === 200) {
        clearInterval(timer);
    }
}, 30);

</script>

>事件循环（event loop）

在函数每次执行时，都会产生一个新的执行环境；执行环境负责存储函数执行时产生的一切数据。

Q：函数的执行环境要存储到哪里呢？

A：函数的执行环境存储到了一个叫做调用栈的地方。栈，是一种数据结构，特点：后进先出；队列，也是一种数据结构，特点：先进先出。

调用栈（call stack）

• 调用栈负责存储函数的执行环境。

• 当一个函数被调用时，它的执行环境会作为一个栈帧；当插入到调用栈的栈顶，函数执行完毕时，其栈帧会自动从栈中弹出。

<script>
function fn() {
    let a = 10
    let b = 20

    function fn2() {
        console.log("fn2")
    }

    fn2()

    console.log("fn~")
}

fn()

console.log(1111)
</script>

消息列队

• 消息队列负责存储将要执行的函数。

• 当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的，因为调用栈中有可能会存在一些还没有执行完的代码。

• 事件触发后，JS 引擎是将事件响应函数插入到消息列队中排队。

<button id=“btn”> 点我一下 </button>
<button id="btn02">点我一下2</button>

</script>
    const btn = document.getElementById("btn")
    const btn02 = document.getElementById("btn02")
    btn.onclick = function () {
        alert(1111)

        const begin = Date.now()

        while (Date.now() - begin < 3000) {}
    }

    btn02.onclick = function () {
        alert(2222)
    }
</script>

而定时器的本质的就是在指定时间后，将函数添加到消息队列中

<script>
    // console.time()
    // setTimeout(function(){
    //     console.timeEnd()
    //     console.log("定时器执行了~")
    // }, 3000)

    // 使程序卡6s
    // const begin = Date.now()
    // while (Date.now() - begin < 6000) {}

    /* 
    setInterval() 每间隔一段时间就将函数添加到消息队列中
    但是如果函数执行的速度比较慢，它是无法确保每次执行的间隔都是一样的
    */

    // console.time("间隔")
    // setInterval(function(){
    //     console.timeEnd("间隔")

    //     // console.log("定时器执行了~~")
    //     alert("定时器执行~")

    //     console.time("间隔")
    // }, 3000)

    /* 
    希望可以确保函数每次执行都有相同间隔
    */

    // console.time("间隔")
    // setTimeout(function fn() {
    //     console.timeEnd("间隔")
    //     alert("哈哈")

    //     console.time("间隔")
    //     // 在setTimeout的回调函数的最后，在调用一个setTimeout
    //     setTimeout(fn, 3000)
    // }, 3000)


    setTimeout(()=>{
        console.log(11111)
    }, 0)

    console.log(222222)
</script>

拉取镜像

docker pull registry.fit2cloud.com/halo/halo:2.20.？

删除旧容器

docker stop halo
docker rm halo

更新容器

docker run -d --name halo -p 8090:8090 -e SPRING_THYMELEAF_CACHE=false -v ~/.halo2:/root/.halo2 registry.fit2cloud.com/halo/halo:2.20.？

DOM，全称Document Object Model，中文翻译为文档对象模型。DOM属于Web API的一部分。Web API中定义了非常多的对象，通过这些对象可以完成对网页的各种操作（添加删除元素、发送请求、操作浏览器等）。

什么是DOM

DOM中的D意为Document，即文档。所谓文档就是指整个网页，换言之，DOM是用来操作网页的。O意为Object，即对象。DOM将网页中的每一部分内容都转换为了对象，div有div的对象，input有input的对象，甚至一段文本，一段注释也有其所对应的对象。转换为对象干什么？还记得面向对象吗？转换对象以后，我们就可以以面向对象的方式去操作网页，想要操作哪个元素就获取哪个元素的对象，然后通过调用其方法或属性完成各种操作。M意为Model，即模型。模型用来表示对象之间的关系，也就是父子元素、祖先后代、兄弟元素等，明确关系后我们便可以通过任意一个对象去获取其他的对象。

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>My Title</title>
</head>
<body>
    <h1>A Heading</h1>
    <a href="#">Link Text</a>
</body>
</html>

>概念

节点（Node）

在DOM标准下，网页中的每一个部分都会转换为对象。这些对象有一个共同的称呼——节点（Node）。一个页面将会由多个节点构成，虽然都称为节点，但是它们却有着不同的类型：

1. 文档节点

2. 元素节点

3. 文本节点

4. 属性节点

5. …

每一个节点都有其不同的作用，文档节点表示整个网页，元素节点表示某个标签，文本节点表示网页中的文本内容，属性节点表示标签中的各种属性。如果从对象的结构上来讲，这些对象都有一个共同的父类Node。总的来说，都是属于节点，但是具体类型不同。

关系

• 祖先 —— 包含后代元素的元素是祖先元素

• 后代 —— 被祖先元素包含的元素是后代元素

• 父 —— 直接包含子元素的元素是父元素

• 子 —— 直接被父元素包含的元素是子元素

• 兄弟 —— 拥有相同父元素的元素是兄弟元素

小试牛刀

要使用DOM来操作网页，我们需要浏览器至少得先给我一个对象，才能去完成各种操作。所以浏览器已经为我们提供了一个document对象，它是一个全局变量可以直接使用，document代表的是整个的网页。

<button id="btn">点我一下</button>

<script>
// 获取btn对象
const btn = document.getElementById("btn")

// 修改btn中的文字
btn.innerText = "Click ME"
</script>

>文档节点（document）

• document对象表示的是整个网页

• document对象的原型链

HTMLDocument -> Document -> Node -> EventTarget -> Object.prototype -> null

• 凡是在原型链上存在的对象的属性和方法都可以通过Document去调用

• 部分属性：

document.documentElement --> html根元素
document.head --> head元素
document.title --> title元素
document.body --> body元素
document.links --> 获取页面中所有的超链接
...

>元素节点（element）

• 在网页中，每一个标签都是一个元素节点

如何获取元素节点对象？

1. 通过document对象来获取元素节点

2. 通过document对象来创建元素节点

通过document来获取已有的元素节点：

document.getElementById()

• 根据id获取一个元素节点对象

<button id="btn">点我一下</button>
<script>
const btn = document.getElementById("btn")
console.log(btn)
</script>

document.getElementsByClassName()

• 根据元素的class属性值获取一组元素节点对象

<span class="s1">我是span</span>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<span class="s1">我是span</span>

<script>

// 返回的是一个类数组对象，该方法返回的结果是一个实时更新的集合
// 当网页中新添加元素时，集合也会实时的刷新。

const spans = document.getElementsByClassName("s1")

console.log(spans) // HTMLCollection(5) [span.s1, span.s1, span.s1, span.s1, span.s1]

 for (let i = 0; i < spans.length; i++) {
    spans[i].innerText = "我是span"+i
  }

</script>

document.getElementsByTagName()

• 根据标签名获取一组元素节点对象

<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>

<script>

// 返回的结果是可以实时更新的集合
const divs = document.getElementsByTagName("div")

// document.getElementsByTagName("*") 获取页面中所有的元素
const divs = document.getElementsByTagName("*") 

console.log(divs) // HTMLCollection(5) [div, div, div, div, div] 
</script>

document.getElementsByName()

• 根据name属性获取一组元素节点对象

<form>
    <input type="text" name="username">
    <input type="radio" name="gender" value="male"> 男
    <input type="radio" name="gender" value="female"> 女
</form>

<script>

// 返回一个实时更新的集合，主要用于表单项。
const genderInput = document.getElementsByName("gender")

console.log(genderInput) // NodeList(2) [input, input]
</script>

document.querySelectorAll()

• 根据选择器去页面中查询元素

<div>我是div</div>
<div>我是div</div>
<div>我是div</div>

<script>

// 会返回一个类数组（不会实时更新）
const divs2 = document.querySelectorAll("div")

console.log(divs2) // NodeList(3) [input, input,input]
</script>

document.querySelector()

• 根据选择器去页面中查询第一个符合条件的元素

<div>我是div</div>
<div>我是div</div>

<script>

// 会返回一个类数组（不会实时更新）
const div = document.querySelector("div") // .xx | #xx

console.log(divs2) // NodeList(2) [input,input]

</script>

创建一个元素节点

document.createElement()

• 根据标签名创建一个元素节点对象

const h2 = document.createElement("h2") // 创建了H2，但未添加

>元素的属性和方法

<div id="box1">我是box1 </div>

<script>

const box1 = document.getElementById("box1")

cosole.log(box1.__proto__)

</script>

• div的原型链

HTMLDivElement -> HTMLElement -> Element -> Node -> ...

element.childNodes

• 获取当前元素的子节点（会包含空白的子节点）

<div id="box1">
    我是box1
    <span class="s1">我是s1</span>
    <span class="s1">我是s1</span>
</div>

<script>

const box1 = document.getElementById("box1")

const cns = box1.childNodes

console.log(children.length) // 输出：5 包含空格

</script>

element.children

• 获取当前元素的子元素

<div id="box1">
    我是box1
    <span class="s1">我是s1</span>
    <span class="s1">我是s1</span>
</div>

<script>

const box1 = document.getElementById("box1")

const children = box1.children

console.log(children.length) // 输出：2（2个span）

</script>

element.firstElementChild

• 获取当前元素的第一个子元素

<p>Hello world! This is HTML5 Boilerplate.</p>
<div id="box1">
    我是box1
    <span class="s1">我是s1</span>
    <span class="s1">我是s1-2</span>
</div>
    <h1>hello,world</h1>

<script>

const box1 = document.getElementById("box1")

console.log(box1.firstElementChild) //输出: <span class="s1">我是s1</span>

</script>

element.lastElementChild

• 获取当前元素的最后一个子元素

console.log(box1.lastElementChild) //输出: <span class="s1">我是s1-2</span>

element.nextElementSibling

• 获取当前元素的下一个兄弟元素

console.log(box1.nextElementSibling) //输出: <h1>hello,world</h1>

element.previousElementSibling

• 获取当前元素的前一个兄弟元素

console.log(box1.previousElementSibling) //输出: <p>Hello world! This is HTML5 Boilerplate.</p>

element.parentNode

• 获取当前元素的父节点

console.log(box1.parentNode) //输出: <body>...</body>

element.tagName

• 获取当前元素的标签名

console.log(box1.tagName) //输出: DIV

>文本节点（Text）

在DOM中，网页中所有的文本内容都是文本节点对象。

可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做。

我们可以直接通过元素去修改其中的文本

修改文本的三个属性

element.textContent

• 获取或修改元素中的文本内容

<div id="box1">
    <span style="text-transform: uppercase;">我是box1</span>
</div>

<script>

// 获取的是标签中的内容，不会考虑css样式
const box1 = document.getElementById("box1")

box1.textContent = "新的内容"

</script>

element.innerText

• 获取或修改元素中的文本内容

<script>

// innerText获取内容时，会考虑css样式
// 通过innerText去读取CSS样式，会触发网页的重排（计算CSS样式）
const box1 = document.getElementById("box1")

box1.innerText = "新的内容"

// 当字符串中有标签时，会自动对标签进行转义
box1.innerText = "<li>我是li</>" //  <li> --> &lt;li&gt;

</script>

element.innerHTML

• 获取或修改元素中的html代码

<script>

// 可以直接向元素中添加html代码
const box1 = document.getElementById("box1")

box1.innerHTML = "XXX"

// innerHTML插入内容时，有被xss注入的风险
box1.innerHTML = "<、script src='https://sss/sss.js'><\/script>"
</script>

>属性节点（Attr）

在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作。

如何操作属性节点：

方式一

• 读取：元素.属性名(class属性需要使用 className 来读取)

读取一个布尔值时，会返回 true 或 false （如 disabled）

• 修改：元素.属性名 = 属性名

 <input disabled=“disabled” type="text" name="username" value="admin">

<script>

const input = document.getElementsByName("username")[0]

const input2 = document.querySelector("[name=username]")

console.log(input) // console.log(input.type)

input.name = "biu" // 修改：元素.属性名 = 属性名

</script>

方式二

• 读取：元素.getAttribute(属性名)

• 修改：元素.setAttribute(属性名, 属性值)

• 删除：元素.removeAttribute(属性名)

 <input disabled=“disabled” type="text" name="username" value="admin">

<script>

const input = document.getElementsByName("username")[0]

const input2 = document.querySelector("[name=username]")

input.getAttribute("name") // 读取：元素.getAttribute(属性名)

input.setAttribute("name","大王") // 修改：元素.setAttribute(属性名, 属性值)
input.setAttribute("disabled",true)

input.removeAttribute("disabled") // 删除：元素.removeAttribute(属性名)

</script>

>事件（Event）

事件就是用户和页面之间发生的交互行为。例如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键....

可以通过为时间绑定响应函数（回调函数），来完成和用户之间的交互。

绑定响应函数

直接在元素的属性中设置

<button id="btn" onclick="alert('你点我干嘛~')">点我一下</button>

为元素指定属性设置(回调函数)来绑定事件 （一个事件只能绑定一个响应函数）

<script>
// 获取到按钮对象
const btn = document.getElementById("btn")
// 为按钮对象的事件属性设置响应函数
btn.onclick = function(){
  alert("你点我干嘛~")
}
</script>

通过元素 addEventListener( )方法来绑定事件 （可绑定多个，会依次执行）

<script>
// 通过元素 addEventListener( )方法来绑定事件
btn.addEventListener("click", function(){
  alert("哈哈哈哈~")
})
</script>

>文档加载

网页是自上向下加载的，如果将 js 的代码编写到网页的上边，在 js 代码执行时，网页还没有加载完毕，这时候会出现无法获取到 DOM 对象的情况。

如何解决这个问题？

将 script 标签编写到 body 的最后

<body>

<button id="btn">点我一下</button>

<script>
  const btn = document.getElementById("btn")
  console.log(btn)
</script>

</body>

将代码编写到 window.onload 的回调函数中

<body>

<button id="btn">点我一下</button>

<script>
// window.onload 事件会在窗口中的内容加载完毕之后才触发
window.onload = function () {
    const btn = document.getElementById("btn")
    console.log(btn)
}

window.addEventListener("load", function () {
    const btn = document.getElementById("btn")
    alert(btn)
})
</script>

</body>

将代码编写到 document 对象的 DOMContentLoaded 回调函数中

<script>
// document的DOMContentLoaded事件会在当前文档加载完毕之后触发
document.addEventListener("DOMContentLoaded", function () {
    const btn = document.getElementById("btn")
    alert(btn)
})
</script>

将代码编写到外部 js 文件，以 defer 形式引入

<script defer src="./script/script.js"></script>

>Dom的修改

element.appendChild

• 给一个节点添加子节点

<ul id="list">
    <li id="swk">孙悟空</li>
    <li id="zbj">猪八戒</li>
    <li id="shs">沙和尚</li>
</ul>

<button id="btn">按钮</button>

<script>
const list = document.getElementById("list")

// 获取按钮
const btn01 = document.getElementById("btn01")
btn01.onclick = function () {

    const li = document.createElement("li")
    // 向li中添加文本
    li.textContent = "唐僧"
    // 给li添加id属性
    li.id = "ts"

// 用于给一个节点添加子节点
list.appendChild(li)
</script>

element.insertAdjacentElement(position, element)

• 可以向元素的任意位置添加元素

参数：

1. beforeend 标签的最后

2. afterbegin 标签的开始  

3. beforebegin 在元素的前边插入元素（兄弟元素） 

4. afterend 在元素的后边插入元素（兄弟元素）

<script>
list.insertAdjacentElement("afterend", li)
</script>

element.insertAdjacentHTML(position, text)

• 将HTML字符串添加到任意位置

参数：

1. beforeend 标签的最后

2. afterbegin 标签的开始  

3. beforebegin 在元素的前边插入元素（兄弟元素） 

4. afterend 在元素的后边插入元素（兄弟元素）

<script>
list.insertAdjacentHTML("beforeend", "<li id='bgj'>白骨精</li>")
</script>

element.replaceWith

• 使用一个元素替换当前元素

const bt = document.getElementById("btn")
btn02.onclick = function(){

    // 创建一个蜘蛛精替换孙悟空
    const li = document.createElement("li")
    li.textContent = "蜘蛛精"
    li.id = "zzj"

    // 获取swk
    const swk = document.getElementById("swk")

    // replaceWith() 使用一个元素替换当前元素
    swk.replaceWith(li)
}

element.remove

• 用来删除一个元素

<script>
swk.remove()
</script>

>小练习

>节点的复制

cloneNode()

• 对节点的所有属性进行复制（只会复制当前节点，而不会复制节点的子节点）

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button id="btn01">点我一下</button>

        <ul id="list1">
            <li id="l1">孙悟空</li>
            <li id="l2">猪八戒</li>
            <li id="l3">沙和尚</li>
        </ul>

        <ul id="list2">
            <li>蜘蛛精</li>
        </ul>

        <script>
            /* 点击按钮后，将id为l1的元素添加list2中 */
            const list2 = document.getElementById("list2")
            const l1 = document.getElementById("l1")
            const btn01 = document.getElementById("btn01")
            btn01.onclick = function () {
                // 用来对节点进行复制的,true作为参数，该方法将子节点一起复制
                const newL1 = l1.cloneNode(true) 
                newL1.id = "newL1"
                list2.appendChild(newL1)
            }
        </script>
    </body>
</html>

>修改CSS样式

元素.style.样式名 = 样式值

如果样式里含有-，则需要将样式表修改为驼峰命名法

background-color --> backgroundColor

<button id="btn">点我一下</button>
<div class="box1"></div>

<script>

    const btn = document.getElementById("btn")
    const box1 = document.querySelector(".box1")

    btn.onclick = function () {
        // 修改box1的样式
        // 修改样式的方式：元素.style.样式名 = 样式值
        // 如果样式名中含有-，则需要将样式表修改为驼峰命名法
        // background-color --> backgroundColor
        box1.style.width = "400px"
        box1.style.height = "400px"
        box1.style.backgroundColor = "yellow"
    }
</script>

>读取CSS样式

getComputedStyle()

• 返回一个包含当前元素所有的生效样式的对象

参数：

1.要获取样式的对象

2.要获取的伪元素

返回值：

返回的一个对象，对象中储存了当前元素的样式

<button id="btn">点我一下</button>
<div class="box1"></div>

<script>
    /* 
        点击按钮后，读取元素的css样式
    */

    const btn = document.getElementById("btn")
    const box1 = document.querySelector(".box1")

    btn.onclick = function () {

        const styleObj = getComputedStyle(box1)

        console.log(styleObj.width)
        console.log(styleObj.left)

        // console.log(parseInt(styleObj.width) + 100)
        // box1.style.width = parseInt(styleObj.width) + 100 + "px"

        // console.log(styleObj.backgroundColor)

        const beforeStyle = getComputedStyle(box1, "::before")
        // console.log(beforeStyle.color)

        console.log(box1.firstElementChild)
    }
</script

element.clientHeight / Width

• 获取元素内部的宽度和高度（包括内容区和内边距）

element.offsetHeight / Width

• 获取元素的可见框大小（包括内容区、内边距和边框）

element.scrollHeight / Width

• 获取元素滚动区域的大小

element.offsetParent

• 获取元素的定位父元素

当前元素最近的开启了定位的祖先元素，如果定位的元素都没有开启定位，则返回 body。

element.offsetTop / Left

• 获取元素相对于其定位父元素的偏移量

element.scrollTop / Left

• 获取或设置元素滚动条的偏移量

 <button id="btn">点我一下</button>
 <hr>
 <div>
     <div id="box1">
         <div id="box2"></div>
     </div>
</div>

<script>

    const btn = document.getElementById("btn")
    const box1 = document.getElementById("box1")

    btn.onclick = function(){
        // console.log(box1.scrollHeight)
        // console.log(box1.offsetParent)
        console.log(box1.scrollTop)
    }

>修改操作Class

element.classList

这是一个对象，并提供了对当前元素的类的各种操作方法

element.classList.add( ) 向元素添加一个或多个Class

element.classList.remove( ) 移除元素中的一个或多个Class

element.classList.toggle( ) 切换元素的Class

element.classList.replace( ) 替换Class

element.classList.contains( ) 检查Class

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }


            .box2{
                background-color: yellow;
                width: 300px;
                height: 500px;
                border: 10px greenyellow solid;
            }
        </style>
    </head>
    <body>
        <button id="btn">点我一下</button>

        <hr />

        <div class="box1 box3 box4"></div>

        <script>
            /* 
                点击按钮后，修改box1的宽度
            */
            const btn = document.getElementById("btn")
            const box1 = document.querySelector(".box1")

            btn.onclick = function () {

                // box1.className += " box2"
                // box1.classList.add("box2", "box3", "box4")
                // box1.classList.add("box1")

                // box1.classList.remove("box2")
                // box1.classList.toggle("box2")
                // box1.classList.replace("box1", "box2")
                let result = box1.classList.contains("box3")
                console.log(result) 
            }
        </script>
    </body>
</html>

>事件对象

简介(Event)

• 事件对象就是有浏览器在事件触发时所创建的对象，这个对象中封装了时间相关的各种信息。

• 通过事件对象可以获取到事件的详细信息，比如：鼠标的坐标、键盘的按键...

• 浏览器在创建时间后，会将事件对象作为响应函数的参数传递，所以我们可以在事件的回调函数中定义一个形参来接收事件对象。

• 在DOM中存在着多种不同类型的事件对象，它们有着共同的祖先，就是 Event。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box1{
                width: 300px;
                height: 300px;
                border: 10px greenyellow solid;
            }

        </style>
    </head>
    <body>
        <div id="box1"></div>

        <script>
            const box1 = document.getElementById("box1")

            // box1.onmousemove = event => {
            //     console.log(event)
            // }

            box1.addEventListener("mousemove", event => {
                console.log(event.clientX, event.clientY)

                box1.textContent = event.clientX + "," + event.clientY
            })
        </script>
    </body>
</html>

冒泡(bubble)

事件的冒泡就是指事件的向上传导。

当元素上的某个事件被触发后，其祖先元素上的相同事件也会被同时触发。

冒泡的存在大大的简化了代码的编写，但是在一些场景下我们并不希望冒泡存在，所以我可以通过时间对象来取消冒泡

event.target 触发事件的对象

event.currentTarget 绑定事件的对象(同this)

event.stopPropagetion( ) 停止事件传导

event.preventDefault( ) 取消默认行为

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box1 {
                width: 300px;
                height: 300px;
                background-color: greenyellow;
            }

            #box2 {
                width: 250px;
                height: 250px;
                background-color: #ff0;
            }

            #box3 {
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3"></div>
            </div>
        </div>

        <a id="chao" href="https://parlo.cc">超链接</a>

        <script>
            // 事件对象
            const box1 = document.getElementById("box1")
            const box2 = document.getElementById("box2")
            const box3 = document.getElementById("box3")
            const chao = document.getElementById("chao")

            chao.addEventListener("click", (event) => {

                event.preventDefault() // 取消默认行为

                alert("被点了~~~")

            })

            box1.addEventListener("click", function (event) {
                // alert(event)
                // console.log(event.target)
                // console.log(this)

                console.log(event.currentTarget)

                // alert("Hello 我是box1")
            })

            // box2.addEventListener("click", function(event){
            //     event.stopPropagation()
            //     alert("我是box2")
            // })

>事件委派

委派就是将本该绑定给多个元素的事件，统一绑定给 document，这样可以降低代码复杂度，方便维护。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button id="btn">点我一下</button>

        <hr />

        <ul id="list">
            <li><a href="javascript:;">链接一</a></li>
            <li><a href="javascript:;">链接二</a></li>
            <li><a href="javascript:;">链接三</a></li>
            <li><a href="javascript:;">链接四</a></li>
        </ul>

        <script>
            /* 
                我一个希望：
                    只绑定一次事件，既可以让所有的超链接，包括当前的和未来新建的超链接都具有这些事件

                思路：
                    可以将事件统一绑定给document，这样点击超链接时由于事件的冒泡，
                        会导致document上的点击事件被触发，这样只绑定一次，所有的超链接都会具有这些事件
            */

            const list = document.getElementById("list")
            const btn = document.getElementById("btn")

            // 获取list中的所有链接
            const links = list.getElementsByTagName("a")


            document.addEventListener("click", (event) => {
                // 在执行代码前，先来判断一下事件是由谁触发
                // 检查event.target 是否在 links 中存在

                // console.log(Array.from(links))

                if([...links].includes(event.target)){
                    alert(event.target.textContent)
                }                
            })

            // 点击按钮后，在ul中添加一个新的li
            btn.addEventListener("click", () => {
                list.insertAdjacentHTML(
                    "beforeend",
                    "<li><a href='javascript:;'>新超链接</a></li>"
                )
            })
        </script>
    </body>
</html>

>事件的捕获

在 DOM 中，事件的传播主要分为三个阶段

• 捕获阶段（从祖先元向目标元素进行事件的捕获）

• 目标阶段（触发事件的对象）

• 冒泡阶段（由目标元素向祖先元素进行事件的冒泡）

当前元素触发事件后，会先从当前元素最大的祖先元素开始向当前元素进行事件的捕获。默认情况下，事件不会在捕获阶段触发。

如果希望在捕获阶段触发事件，可以将 addEventListener 的第三个参数设置为 true。一般情况下我们不希望事件在捕获阶段实现，所以通常我们并不需要设置第三个参数。

event.Phase 表示事件触发的阶段

1 捕获阶段，2 目标阶段，3 冒泡阶段

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box1 {
                width: 300px;
                height: 300px;
                background-color: greenyellow;
            }

            #box2 {
                width: 200px;
                height: 200px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3"></div>
            </div>
        </div>

        <script>
            const box1 = document.getElementById("box1")
            const box2 = document.getElementById("box2")
            const box3 = document.getElementById("box3")

            box1.addEventListener("click", event => {
                alert("1" + event.eventPhase)
            })

            box2.addEventListener("click", event => {

                alert("2" + event.eventPhase)
            })

            box3.addEventListener("click", event => {
                alert("3" + event.eventPhase)
            })

        </script>
    </body>
</html>

Tailwind CSS 从 3.x 升级到 4.x 的关键改进摘要：

• 性能优化：编译速度更快，生成的 CSS 文件更小，减少重复样式。

• 容器查询支持：支持 @container，增强响应式布局能力。

• ARIA 和数据属性支持：新增对 aria- 和 data- 属性状态的工具类支持。

• 默认断点增强：提供更灵活的断点配置选项。

• 动画改进：优化 transition 和 animation 的工具类，使用更直观。

• JIT 编译增强：支持更复杂的动态类名生成，编译效率提升。

• 排版插件升级：改进 @tailwindcss/typography 插件，默认样式更丰富。

• 配置简化：优化 tailwind.config.js 格式，更易于维护和调整。

• 插件兼容性：改进插件系统，确保官方和第三方插件更易集成。

• 移除废弃功能：旧版中的一些弃用字段已被完全移除。

安装Node.JS

前往 Node.js 官方网站 并下载适合你操作系统的 Node.js 安装程序。

检查Node.js

node -v

检查NPM

npm -v

更新NPM

npm install -g npm

Tainlwind安装配置

从头开始使用 Tailwind CSS 的最简单、最快捷的方法是使用 Tailwind CLI 工具。

创建package.json

这将创建一个json文件

npm init -y

安装tailwind

npm install tailwindcss @tailwindcss/postcss postcss

创建 postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

创建xxxxx.css文件

由于Tailwind需要监听一个CSS文件，我们需要配置它，支持将自定义样式写在里面

@import "tailwindcss";

配置Tailwind.config.js

注意：V4 版本中，此配置为非必须项，也可作为自定义使用

官方默认配置的生成

npx tailwindcss init --full

配置基于Halo主题而配置，如果你是使用其他部分，请在 content 中修改项目地址即可。

module.exports = {
  content: [
    "./templates/**/*.html",
    "./templates/assets/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

扫描并构建CSS

注意：V4 版本中 @tailwindcss/cli 替换 tailwind

通过监听content 中设置的项目地址，监听类名并生成css文件

npx @tailwindcss/cli -i ./src/input.css -o ./templates/assets/css/style.css --watch

在HTML中编写样式

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

高级配置

但往往每次使用扫描构建太麻烦了，我们可以简化代码package.json

每次使用 npm run tailwind 快速构建

 "scripts": {
    "tailwind": "npx @tailwindcss/cli -i ./src/input.css -o ./templates/assets/css/style.css --watch"
  },

Prettier插件

安装插件

检查是否存在 Prettier插件

npm list prettier-plugin-tailwindcss

安装 Prettier 插件

npm install -D prettier prettier-plugin-tailwindcss

创建.prettier文件

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

>切换照片

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .outer {
            width: 640px;
            margin: 50px auto;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            /* 
                点击按钮切换图片
            */

            // 获取info
            const info = document.getElementById("info")

            // 获取到图片
            const img = document.getElementsByTagName("img")[0]

            // 获取两个按钮
            const prev = document.getElementById("prev")
            const next = document.getElementById("next")

            // 创建一个数组来存储图片的路径
            const imgArr = [
                "./images/1.png",
                "./images/2.png",
                "./images/3.png",
                "./images/4.png",
                "./images/5.png",
            ]

            // 创建一个变量记录当前图片的索引
            let current = 0

            // 设置info元素的内容，显示总图片数和当前图片索引
            info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            // 上一张
            prev.onclick = function () {
                current--

                // 如果当前图片索引小于0，则设置为最后一张图片的索引
                if (current < 0) {
                    // current = 0
                    current = imgArr.length - 1
                }
                // 更新img元素的src属性，显示当前图片
                img.src = imgArr[current]

                // 更新info元素的内容，显示总图片数和当前图片索引
                info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            }

            // 点击next按钮后，切换图片
            next.onclick = function () {
                current++

                if (current > imgArr.length - 1) {
                    // current = imgArr.length - 1
                    current = 0
                }

                // 切换图片 --> 2.png 就是修改img的src属性
                img.src = imgArr[current]

                info.textContent = `总共 ${imgArr.length} 张图片，当前第 ${current + 1} 张`

            }
        }
    </script>
</head>

<body>
    <div class="outer">
        <p id="info">
            总共n张图片，当前第m张
        </p>
        <div class="img-wrapper">
            <img src="./images/1.png" alt="这是一个图片" />
        </div>

        <div class="btn-wrapper">
            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>
    </div>
</body>

</html>

>选择框

// html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
              name="viewport">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>Document</title>
    </head>
    <body>
        <div>
            <form action="#">
                <div>
                    请选择你的爱好：
                    <input id="check-all" type="checkbox"/> 全选
                </div>
                <div>
                    <input name="hobby" type="checkbox" value="乒乓球"/> 乒乓球
                    <input name="hobby" type="checkbox" value="篮球"/> 篮球
                    <input name="hobby" type="checkbox" value="羽毛球"/> 羽毛球
                    <input name="hobby" type="checkbox" value="足球"/> 足球
                </div>
                <div>
                    <button id="all" type="button">全选</button>
                    <button id="no" type="button">取消</button>
                    <button id="reverse" type="button">反选</button>
                    <button id="send" type="button">提交</button>
                </div>
            </form>
        </div>
        <script src="main.js"></script>
    </body>
</html>

// main.js
const hobby = document.getElementsByName("hobby")
const allBtn = document.getElementById('all')

allBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = true
    }
    checkBtn.checked = true
}

const noBtn = document.getElementById('no')

noBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = false
    }
    checkBtn.checked = false
}

const reverseBtn = document.getElementById('reverse')

reverseBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = !hobby[i].checked
    }
    const checkedBox = document.querySelectorAll(
        "[name=hobby]:checked"
    )

    if (hobby.length === checkedBox.length) {
        checkBtn.checked = true
    } else {
        checkBtn.checked = false
    }
}

const sendBtn = document.getElementById('send')

sendBtn.onclick = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked && alert(hobby[i].value)
    }
}

const checkBtn = document.getElementById('check-all')

checkBtn.onchange = function () {
    for (let i = 0; i < hobby.length; i++) {
        hobby[i].checked = this.checked
    }
}
for (let i = 0; i < hobby.length; i++) {

    hobby[i].onchange = function () {
        const checkedBox = document.querySelectorAll(
            "[name=hobby]:checked"
        )

        if (hobby.length === checkedBox.length) {
            checkBtn.checked = true
        } else {
            checkBtn.checked = false
        }
    }
}

>自定义员工信息

// html
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .outer {
                width: 400px;
                margin: 100px auto;
                text-align: center;
            }

            table {
                width: 400px;
                border-collapse: collapse;
                margin-bottom: 20px;
            }

            td,
            th {
                border: 1px black solid;
                padding: 10px 0;
            }

            form div {
                margin: 10px 0;
            }
        </style>


    </head>
    <body>
        <div class="outer">
            <table>
                <tbody>
                    <tr>
                        <th>姓名</th>
                        <th>邮件</th>
                        <th>薪资</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>孙悟空</td>
                        <td>swk@hgs.com</td>
                        <td>10000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                    <tr>
                        <td>猪八戒</td>
                        <td>zbj@glz.com</td>
                        <td>8000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                    <tr>
                        <td>沙和尚</td>
                        <td>shs@lsh.com</td>
                        <td>6000</td>
                        <td><a href="javascript:;">删除</a></td>
                    </tr>
                </tbody>
            </table>

            <form action="#">
                <div>
                    <label for="name">姓名</label>
                    <input type="text" id="name" />
                </div>
                <div>
                    <label for="email">邮件</label>
                    <input type="email" id="email" />
                </div>
                <div>
                    <label for="salary">薪资</label>
                    <input type="number" id="salary" />
                </div>
                <button id="btn" type="button">添加</button>
            </form>
        </div>
    </body>
</html>

// main.js
document.addEventListener("DOMContentLoaded", function () {
		/* 
            点击删除超链接后，删除当前的员工信息
        */

		function delEmpHandler() {
			// 本练习中的超链接，我们是不希望发生跳转，但是跳转行为是超链接的默认行为
			// 只要点击超链接就会触发页面的跳转，事件中可以通过取消默认行为来阻止超链接的跳转
			// 使用return false来取消默认行为，只在 xxx.xxx = function(){}这种形式绑定的事件中才适用
			// return false

			// 删除当前员工 删除当前超链接所在的tr
			// console.log(this)

			// this表示当前点击的超链接
			const tr = this.parentNode.parentNode;

			// 获取要删除的员工的姓名
			// const empName = tr.getElementsByTagName("td")[0].textContent
			const empName = tr.firstElementChild.textContent;

			// 弹出一个友好的提示
			if (confirm("确认要删除【" + empName + "】吗？")) {
				// 删除tr
				tr.remove();
			}
		}

		// 获取所有的超链接
		const links = document.links;
		// 为他们绑定单级响应函数
		for (let i = 0; i < links.length; i++) {
			links[i].onclick = delEmpHandler;

			// links[i].addEventListener("click", function(){
			//     alert(123)
			//     return false // 无法取消默认行为
			// })
		}

		/* 
            点击按钮后，将用户的信息插入到表格中
        */
		// 获取tbody
		const tbody = document.querySelector("tbody");
		const btn = document.getElementById("btn");
		btn.onclick = function () {
			// 获取用户输入的数据
			const name = document.getElementById("name").value;
			const email = document.getElementById("email").value;
			const salary = document.getElementById("salary").value;

			// 将获取到的数据设置DOM对象
			/* 
                <tr>
                    <td>孙悟空</td>
                    <td>swk@hgs.com</td>
                    <td>10000</td>
                    <td><a href="javascript:;">删除</a></td>
                </tr>
            */

			// 创建元素
			const tr = document.createElement("tr");

			// 创建td
			const nameTd = document.createElement("td");
			const emailTd = document.createElement("td");
			const salaryTd = document.createElement("td");

			// 添加文本
			nameTd.innerText = name;
			emailTd.textContent = email;
			salaryTd.textContent = salary;

			// 将三个td添加到tr中
			tr.appendChild(nameTd);
			tr.appendChild(emailTd);
			tr.appendChild(salaryTd);
			tr.insertAdjacentHTML(
				"beforeend",
				'<td><a href="javascript:;">删除</a></td>'
			);

			tbody.appendChild(tr);

			// 由于上边的超链接是新添加的，所以它的上边并没有绑定单级响应函数，所以新添加的员工无法删除
			// 解决方式：为新添加的超链接单独绑定响应函数
			links[links.length - 1].onclick = delEmpHandler;
		};
	});

在使用 SCSS 时，遵循一些最佳实践和规范可以帮助你保持代码的整洁、可维护性和可扩展性。

以下是一些常见的 SCSS 使用规范，适用于大多数项目：

1. 文件结构规范

SCSS 文件的结构应该清晰，以便于组织和维护。常见的文件结构如下：

scss/
├── base/
│   ├── _reset.scss        # 重置样式
│   ├── _typography.scss   # 字体和排版样式
│   └── _variables.scss    # 全局变量
├── components/
│   ├── _buttons.scss      # 按钮样式
│   └── _cards.scss        # 卡片样式
├── layout/
│   ├── _header.scss       # 页头样式
│   ├── _footer.scss       # 页脚样式
│   └── _grid.scss         # 栅格系统
├── pages/
│   ├── _home.scss         # 首页样式
│   └── _about.scss        # 关于页面样式
├── themes/
│   └── _theme.scss        # 主题样式
└── main.scss              # 主入口文件，导入所有其他文件

• base/ 文件夹包含重置、排版、变量等全局样式。

• components/ 包含可复用的 UI 组件样式。

• layout/ 包含布局样式，如页头、页脚、栅格等。

• pages/ 包含特定页面的样式。

• themes/ 包含主题样式，允许切换主题时修改变量。

• main.scss 是主入口文件，导入所有其他的 SCSS 文件。

2. 使用变量

使用变量可以提高可维护性和一致性。通常将所有的变量定义在 _variables.scss 中，并且遵循一致的命名规范。

// _variables.scss
$primary-color: #3498db;
$font-family: Arial, sans-serif;
$font-size-base: 16px;

命名规范：

• 使用 kebab-case（短横线连接的小写字母）来命名变量：如 $primary-color。

• 为避免命名冲突，可以使用命名空间，如：$theme-primary-color。

3. 嵌套的合理使用

SCSS 支持嵌套，但嵌套不应过多，避免深层嵌套导致代码难以维护。一般来说，嵌套层级不应超过 3 层。

// 好的做法
.card {
  padding: 20px;
  .card-header {
    font-size: 1.5rem;
  }
}

// 不推荐：过多的嵌套会影响可维护性
.card {
  padding: 20px;
  .card-header {
    .title {
      font-size: 1.5rem;
    }
  }
}

4. 使用混入（Mixins）

混入可以复用样式，并接受参数。它们是避免重复代码的有效工具。

// _mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// 使用
.box {
  @include border-radius(10px);
}

5. 使用占位符（Placeholders）

占位符 (%) 用于继承，避免代码重复。它们不像类一样编译成 CSS，只有在被继承时才会被生成。

// _mixins.scss
%button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.primary-button {
  @extend %button;
  background-color: $primary-color;
}

.secondary-button {
  @extend %button;
  background-color: gray;
}

6. 使用 BEM（块元素修饰符）命名约定

BEM（块元素修饰符）是一种 CSS 类名命名约定，能提高代码的可读性和可维护性。即使使用 SCSS，也推荐使用 BEM 规范来命名类。

// BEM 规范
.button {
  padding: 10px 20px;
  background-color: $primary-color;

  &--primary {
    background-color: $primary-color;
  }

  &--secondary {
    background-color: gray;
  }

  &__icon {
    margin-right: 5px;
  }
}

7. 使用功能性类名

为了确保代码复用和灵活性，推荐使用功能性类名。避免每个元素都使用具体的名称，而是根据功能来命名。

// 功能性类名
.text-center {
  text-align: center;
}

.no-margin {
  margin: 0;
}

8. 使用注释

清晰的注释可以帮助其他开发者理解你的代码。常用的注释格式如下：

// 变量
$primary-color: #3498db;

// 混入
@mixin border-radius($radius) {
  border-radius: $radius;
}

// 主体样式
body {
  font-family: $font-family;
}

• 单行注释：// 用于简短的注释。

• 多行注释：/* */ 用于长注释，尤其是描述某个模块的整体功能或特殊逻辑。

9. 避免重复的样式

尽量避免为相同的元素或组件编写重复的样式，利用 SCSS 的继承、混入等功能来复用样式。

// 使用 mixin 避免重复
@mixin button($color) {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: $color;
}

.primary-button {
  @include button($primary-color);
}

.secondary-button {
  @include button(gray);
}

10. 使用 @use

• @import 已废弃，建议使用 @use 来导入 SCSS 文件。@use 会自动命名空间化导入的样式，避免全局污染。

// _variables.scss
$primary-color: #3498db;

// main.scss
@use 'variables';

.button {
  background-color: variables.$primary-color;
}

总结

遵循这些 SCSS 使用规范有助于保持代码的结构清晰、可读性高、可维护性强。

合理使用变量、嵌套、混入、BEM 命名和文件结构将大大提高开发效率，并避免出现难以调试和维护的代码。

正则表达式是一种强大的文本处理工具，用于匹配字符串中的特定模式。在 JavaScript 中，正则表达式被广泛用于字符串的搜索、替换、验证等操作。

正则表达式

>简介

• 正则表达式用来定义一个规则

• 通过这个规则计算机可以检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。

• 正则表达式也是JS中的一个对象，所以要使用正则表达式，需要先创建正则表达式的对象。

创建 new RegExp()

 // new RegExp() 可以接收两个参数（字符串） 1.正则表达式 2.匹配模式
let reg = new RegExp("a", "i") // 通过构造函数来创建一个正则表达式的对象
let reg = /a/i

let reg = new RegExp("a", "i") 和 let reg = /a/i 这两行代码定义了一个正则表达式 reg，它匹配字母 "a"，并且忽略大小写（由于使用了 "i" 标志）。

字面量 xx = /?/

// 使用字面量来创建正则表达式：/正则/匹配模式
let reg = /\w/

let reg = /\w/ 这行代码将 reg 重新定义为匹配任何字母、数字或下划线的正则表达式（\w 是一个字符类）。

let reg = new RegExp("\\w")
    reg = new RegExp("a") // /a/ 表示，检查一个字符串中是否有a

reg = new RegExp("\\w") 这行代码将 reg 重新定义为匹配任何字母、数字或下划线的正则表达式。在 JavaScript 中，字符串中的反斜杠是一个转义字符，所以我们需要使用两个反斜杠 \\ 来表示一个实际的反斜杠。因此，"\\w" 在正则表达式中表示 \w，它是一个字符类，匹配任何字母、数字或下划线。

reg = new RegExp("a") 这行代码将 reg 重新定义为匹配字母 "a" 的正则表达式。

// 通过正则表达式检查一个字符串是否符合规则
let str = "a"

let result = reg.test(str) // true

    result = reg.test("b") // false
    result = reg.test("abc") // true
    result = reg.test("bcabc") // true

    reg = /a/
    console.log(result);

let str = "a" 这行代码定义了一个字符串 str，内容为 "a"。

let result = reg.test(str) 这行代码使用正则表达式 reg 测试字符串 str，并将结果存储在 result 中。由于 reg 最后被定义为匹配 "a"，所以 result 为 true。

result = reg.test("b") 这行代码测试字符串 "b"，由于 "b" 不匹配 "a"，所以 result 为 false。

result = reg.test("abc") 这行代码测试字符串 "abc"，由于字符串中包含 "a"，所以 result 为 true。

result = reg.test("bcabc") 这行代码测试字符串 "bcabc"，由于字符串中包含 "a"，所以 result 为 true。

reg = /a/ 这行代码将 reg 重新定义为匹配字母 "a" 的正则表达式。

console.log(result) 这行代码输出 result 的值。由于前面的测试结果是 true，所以控制台将输出 true。

>语法

大部分字符都可以直接写

let re = /ab/
let result = re.test('abc')

| 在正则表达式中表示或

let re = /abc|bcd/
let result = re.test('c') //false

[] 表示或（字符集）

• [a-z] 任意的小写字母

• [A-Z] 任意的大写字母

• [a-zA-Z] 任意的字母

• [0-9]任意数字

let re = /[ab]/ 
    re = /[a-z]/i    //匹配模式i 表示忽略大小写
let result = re.test('c') //false
let result = re.test('a') //true

[^] 表示除了

• [^x] 除了x

let re = /[^a-z]/   //匹配包含小写字母以外内容的字符串
let result = re.test('c') //false
let result = re.test('aH') //true

. 表示除了换行外的任意字符

let re = /./ 
let result = re.test('aH') //true

在正则表达式中使用\作为转义字符

let re = /\./   //表示只匹配.
let result = re.test('c') //false

其他的字符集

• \w 任意的单词字符 [A-Za-z0-9_]

• \W 除了单词字符 [^A-Za-z0-9_]

• \d 任意数字 [0-9]

• \D 除了数字 [^0-9]

• \s 空格

• \S 除了空格

• \b 单词边界

• \B 除了单词边界

开头和结尾

• ^ 表示字符串的开头

  let re = /^a/   //表示匹配开始位置的a
  let result = re.test('c') //false

• $ 表示字符串的结尾

  let re = /a$/   //表示匹配结束位置的a
      re = /^a$/ //完全匹配，只匹配字母a,要求字符串必须和正则完全一致
  let result = re.test('a') //true
  console.log(result)

>量词

{m} 正好m个

let re = /a{3}/ 
    re = /^ab{3}$/ //实际上匹配的是 abbb
    re = /^(ab){3}$/
let result = re.test("aaa") // true

{m,} 正少m个

let re = /^(ab){1,}$/ 

{m,n} 正少m-n个

let re = /^(ab){1,3}$/ 

+ 一个以上，相当于{1,}

let re = /^ba+$/ 

* 任意数量

let re = /^ba*$/ 

? 0-1次，相当于{0,1}

let re = /^ba?$/ 

>exec方法

获取字符串中符合正则表达式的内容

g表示全局匹配

let str = "abcaecafcacc"

// 提取出str中符合axc格式的内容

// g表示全局匹配
let re = /a(([a-z])c)/ig

let result = re.exec(str)

//    console.log(result)

while(result){
    console.log(result[0], result[1], result[2])
    result = re.exec(str)
}

小练习

/* 
    dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd

    用自己的语言来把描述出来
        1    3         501789087
        1    3到9之间   任意数字 x 9

*/

let re = /1[3-9]\d{9}/g

re = /(1[3-9]\d)\d{4}(\d{4})/g

let str =
    "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"

let result

while (result = re.exec(str)) {
    // console.log(result[0], result[1], result[2])
    console.log(result[1] + "****" + result[2])
}


re = /^1[3-9]\d{9}$/

console.log(re.test("13456789042"))

>字符串

split( ) 根据正则表达式对一个字符串拆分

let str = "孙悟空abc猪八戒abc沙和尚"
let result = str.split(/a[bc]c/)
console.log(result) // (3) ['孙悟空', '猪八戒', '沙和尚']

search( ) 搜索第一次在符合正则表达式的内容出现的位置

let str = "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"
let result = str.search(/1[3-9]\d{9}/)
console.log(result) // 6

replace( ) 根据正则表达式替换字符串中的指定内容

let result = str.replace(/1[3-9]\d{9}/g, "哈哈哈")

match( ) 根据正则表达式去匹配字符串中符合要求的内容

let str = "dajsdh13715678903jasdlakdkjg13457890657djashdjka13811678908sdadadasd"
let result = str.match(/1[3-9]\d{9}/g)
console.log(result) // (3) ['13715678903', '13457890657', '13811678908']

matchAll() 根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)

它返回的是一个迭代器

let result = str.matchAll(/1[3-9]\d{9}/g)
for(let item of result){
    console.log(item)
}

>垃圾回收

和生活一样，生活时间长了以后会产生生活垃圾。程序运行一段时间后也会产生垃圾。

在程序的世界中，什么是垃圾？

• 如果一个对象没有任何的变量对其进行引用，那么这个对象就是一个垃

• 垃圾对象的存在，会严重的影响程序的性能

• 在JS中有自动的垃圾回收机制，这些垃圾对象会被解释器自动回收，我们无需手动处理

• 对于垃圾回收来说，我们唯一能做的事情就是将不再使用的变量设置为null

let obj = {name:"孙悟空"}
let obj2 = obj

obj = null
obj2 = null

JavaScript 中的内建对象是由语言本身提供的一系列对象，无需实例化即可使用。这些对象覆盖了从数学计算、日期处理到数据结构操作等多种功能。常见的内建对象包括 Object, Array, Math, Date, JSON, RegExp 等。

内建对象

>解构赋值

ES6中引入的一种新的赋值方式，它允许我们从数组或对象中提取数据并赋值给新的变量。这种语法形式非常简洁，使得变量的赋值和声明更加直观和方便。

const arr = ["孙悟空", "猪八戒", "沙和尚"]

let a,
    b,
    c

    // a = arr[0]
    // b = arr[1]
    // c = arr[2]
;[a, b, c] = arr // 解构赋值

let [d, e, f, g] = ["唐僧", "白骨精", "蜘蛛精", "玉兔精"] // 声明同时解构

console.log(d, e, f, g)
// ;[d, e, f, g] = [1, 2, 3]
// ;[d, e, f = 77, g = 10] = [1, 2, 3]
;[d, e, f = 77, g = g] = [1, 2, 3]

let [n1, n2, ...n3] = [4, 5, 6, 7] // 解构数组时，可以使用...来设置获取多余的元素

// console.log(n1, n2, n3)


function fn(){
    return ["二郎神", "猪八戒"]
}

let [name1, name2] = fn()

// 可以通过解构赋值来快速交换两个变量的值
let a1 = 10
let a2 = 20

// let temp = a1
// a1 = a2
// a2 = temp

;[a1, a2] = [a2, a1] // [20, 10]

const arr2 = ["孙悟空", "猪八戒"]
// console.log(arr2)

;[arr2[0], arr2[1]] = [arr2[1], arr2[0]]
// console.log(arr2)


// console.log("a1 =", a1)
// console.log("a2 =", a2)


/* 
    数组中可以存储任意类型的数据，也可以存数组,
    如果一个数组中的元素还是数组，则这个数组我们就称为是二维数组
*/

const arr3 = [["孙悟空", 18, "男"], ["猪八戒" ,28, "男"]]

// for(let stu of arr3){
//     for(let v of stu){
//         console.log(v)
//     }
// }


let [[name, age, gender], obj] = arr3

console.log(name, age, gender)
console.log(obj)

>对象的解构

const obj = { name: "孙悟空", age: 18, gender: "男" }

// let { name, age, gender } = obj // 声明变量同时解构对象

let name, age, gender

;({ name, age, gender } = obj)

let { address } = obj // 没有的属性返回undefined

// console.log(name, age, gender)

let {name:a, age:b, gender:c, address:d="花果山"} = obj

console.log(a, b, c, d)

>对象的序列化

JSON.stringify() —— 可以将一个对象转换为 JSON 字符串

JSON.parse() —— 可以将一个 JSON 格式的字符串转换成 JS 对象

编写 JSON 的注意事项：

• JSON 字符串有两种类型

  • JSON 对象{}

  • JSON 数组[]

• JSON 字符串的属性名必须用双引号引起来

• JSON 中可以使用的属性值（元素）

  • 数字（Number）

  • 字符串（String） 必须使用双引号

  • 布尔值（Boolean）

  • 空值（Null）

  • 对象（Object {}）

  • 数组（Array []）

• JSON的格式和JS对象的格式基本上一致的。
  注意：JSON字符串如果属性是最后一个，则不要再加,

/* 
    对象的序列化
        - JS中的对象使用时都是存在于计算机的内存中的
        - 序列化指将对象转换为一个可以存储的格式
            在JS中对象的序列化通常是将一个对象转换为字符串（JSON字符串）
        - 序列化的用途（对象转换为字符串有什么用）：
            - 对象转换为字符串后，可以将字符串在不同的语言之间进行传递
                甚至人可以直接对字符串进行读写操作，使得JS对象可以不同的语言之间传递
            - 用途：
                1. 作为数据交换的格式
                2. 用来编写配置文字
        - 如何进行序列化：
            - 在JS中有一个工具类 JSON （JavaScript Object Notation） JS对象表示法
            - JS对象序列化后会转换为一个字符串，这个字符串我们称其为JSON字符串  
            
        - 也可以手动的编写JSON字符串，在很多程序的配置文件就是使用JSON编写的
*/

const obj = {
    name: "孙悟空",
    age: 18,
}

// 将obj转换为JSON字符串
const str = JSON.stringify(obj) //JSON.stringify() 可以将一个对象转换为JSON字符串

const obj2 = JSON.parse(str) // JSON.parse() 可以将一个JSON格式的字符串转换为JS对象

// console.log(obj)
// console.log(str) // {"name":"孙悟空","age":18}
// console.log(obj2)

const str2 = `{"name":"猪八戒","age":28}`
const str3 = "{}"
const str4 = '["hello", true, []]'

console.log(str2)

>使用 JSON 进行深复制

const obj = {
    name: "孙悟空",
    friend: {
        name: "猪八戒",
    },
}

// 对obj进行浅复制
const obj2 = Object.assign({}, obj)

// 对obj进行深复制
const obj3 = structuredClone(obj)

// 利用JSON来完成深复制
const str = JSON.stringify(obj)
const obj4 = JSON.parse(str)

// const obj5 = JSON.parse(JSON.stringify(obj))

>Map

创建Map

• new Map()

属性和方法

• map.size() 获取map中键值对的数

• map.set(key, value) 向map中添加键值对

• map.get(key) 根据key获取值

• map.delete(key) 删除指定数据

• map.has(key) 检查map中是否包含指定键

• map.clear() 删除全部的键值对

• map.keys() - 获取map的所有的key

• map.values() - 获取map的所有的value

/* 
- Map用来存储键值对结构的数据（key-value）
- Object中存储的数据就可以认为是一种键值对结构
- Map和Object的主要区别：
    - Object中的属性名只能是字符串或符号，如果传递了一个其他类型的属性名，JS解释器会自动将其转换为字符串
    - Map中任何类型的值都可以称为数据的key
*/

const obj2 = {}

const obj = {
    "name":"孙悟空",
    'age':18,
    [Symbol()]:"哈哈",
    [obj2]:"嘻嘻"
}

// console.log(obj)

// 创建一个Map
const map = new Map()

map.set("name", "孙悟空")
map.set(obj2, "呵呵")
map.set(NaN, "哈哈哈")

map.delete(NaN)
// map.clear()

console.log(map)
console.log(map.get("name"))
console.log(map.has("name"))

const map = new Map()

map.set("name", "孙悟空")
map.set("age", 18)
map.set({}, "呵呵")

// 将map转换为数组

const arr = Array.from(map) // [["name","孙悟空"],["age",18]]

const arr = [...map]

const map2 = new Map([
    ["name", "猪八戒"],
    ["age", 18],
    [{}, () => {}],
])


// 遍历map

// for (const [key, value] of map) {
//     // const [key, value] = entry
//     console.log(key, value)
// }

// map.forEach((key, value)=>{
//     console.log(key, value)
// })

for(const key of map.keys()){
    console.log(key)
}

>Set

创建Set

• new Set()

• new Set([...]

方法

• size 获取数量

• add() 添加元素

• has() 检查元素

• delete() 删除元素

/* 
    Set
        - Set用来创建一个集合
        - 它的功能和数组类似，不同点在于Set中不能存储重复的数据                        
*/

// 创建一个Set
const set = new Set()

// 向set中添加数据
set.add(10)
set.add("孙悟空")
set.add(10)

// console.log(set)

// for(const item of set){
//     console.log(item)
// }

const arr = [...set]

// console.log(arr)

const arr2 = [1,2,3,2,1,3,4,5,4,6,7,7,8,9,10]

const set2 = new Set(arr2)

console.log([...set2])

>Math

Math是一个工具类，它为我们提供了数学运算相关的一些常量和方法

常量

• Math.PI 圆周率

方法

• Math.abs( ) 求一个数的绝对值

• Math.min( ) 求多个值中的最小值

• Math.max( ) 求多个值中的最大值

• Math.pow( ) 求x的y次幂

• Math.sqrt( ) 求一个数的平方根

• Math.floor( ) 向下取整

• Math.ceil( ) 向上取整

• Math.round( ) 四舍五入取整

• Math.trunc( ) 直接去除小数位

• Math.random( ) 生成一个0-1之间的随机数

// console.log(Math.PI)

let result = Math.abs(10)
result = Math.abs(-10)

result = Math.min(10, 20, 30, 44, 55, -1)
result = Math.max(10, 20, 30, 44, 55, -1)
result = Math.pow(4, 2) // 4 ** 2
result = Math.sqrt(4) // 4 ** .5

result = Math.floor(1.2)
result = Math.ceil(1.2)
result = Math.round(1.4)
result = Math.trunc(1.5)

for (let i = 0; i < 50; i++) {
    /* 
        生成0-5之间的随机数
            Math.random() --> 0 - 1
            生成 0-x之间的随机数：
                Math.round(Math.random() * x)
                Math.floor(Math.random() * (x + 1))

            生成 x-y 之间的随机数
                Math.round(Math.random() * (y-x) + x)
    */
    // result = Math.round(Math.random() * 5)
    // result = Math.floor(Math.random() * 6)

    // 1-6
    // result = Math.round(Math.random() * 5 + 1)

    // 11 - 20
    result = Math.round(Math.random() * 9 + 11)

    console.log(result)
}

>Date

在 JS 中所有的和时间有关的数据都由 Date 对象来表示

创建Date

let d = new Date() //直接通过new Date()创建时间对象时，它创建的是当前时间的对象

// 可以在 Data()的构造函数中，传递一个表示时间的字符串
// 字符串的格式：月/日/年 时:分:秒
d = new Date("12/31/2024 00:00:00")
// 字符串的格式：年-月-日T时:分:秒
d = new Date("2024年12月31日T00:00:00")
// new Date(年份, 月, 日, 时, 分, 秒, 毫秒)
d = new Date("2024,11,31,00,00,00")

方法

• getFullyear( )获取4 位年份

• getMonth( ) 返回当前日期的月份( 0 - 11 ）

• getDate( ) 返回当前几日

• getDay( ) 返回当前日期是周几（0 - 6) 0 表示周日

• getHours( ) 返回当前时间的小时（0-23）

• getMinutes( ) 返回当前时间的分钟（0-59）

• getSeconds( ) 返回当前时间的秒数（0-59）

• getMilliseconds( ) 返回当前时间的毫秒数（0-999）

• getTime( ) 返回当前日期对象的时间戳

时间戳：自 1970年1月1日0时0分0秒到当前时间所经历的毫秒数

• Date.now( ) 获取当前的时间戳

>日期格式化

toLocaleDateString( ) —— 将日期转换为本地的字符串

toLocaleTimeString( ) —— 将时间转换为本地的字符串

toLocaleString( ) —— 可以将一个日期转换为本地时间格式的字符串

参数

• 描述语言和国家信息的字符串

  • zh-CN 中文中国

  • zh-HK 中文香港

  • en-US 美国

• 以对象作为参数，通过对象的属性对日期配置

  • dateStyle 日期 : full , long , medium , short

  • timeStyle 时间 : full , long , medium , short

  • hour12 时制 : ture , false

  • weekday 星期 : long , narrow , short

  • year 年份 : numeric , 2-digit

let d =  new Date()

let result = d.toLocaleString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "2-digit",
    weekday: "short",
})

console.log(result)

>包装类

在 JS 中，除了直接创建原始值外，也可以创建原始值的对象。

不推介的做法：

• new String( ) 创建 String 类型的对象

• new Number( ) 创建 Number 类型的对象

• new Boolean( ) 创建 Boolean 类型的对象

let str = new String("hello")
let num = new Number(11)
let bool = new Boolean(true)
let bool2 = new Boolean(true)

alert(bool == bool2) // 比较的是内存地址，所以会判断 false 

在 JS 中一共有 5 个包装类：

• String --> 字符串包装为 String 对象

• Number --> 数值包装为 Number 对象

• Boolean --> 布尔值包装为 Boolean 对象

• BigInt --> 大整数包装为 BigInt 对象

• Symbol --> 符号包装为 Symbol 对象

通过包装类可以将一个原始值包装为一个对象，当我们对一个原始值调用方法或属性时，JS解释器会临时将原始值包装为对应的对象，然后调用这个对象的属性或方法。

由于原始值会被临时转换为对应的对象，这就意味着对象中的方法都可以直接通过原始值来调用。

>字符串的方法

字符串其本质就是一个字符数组，例如："hello" --> ["h","e","l","l","o"]

字符串的很多方法都和数组是非常类似的。

ength 获取字符串的长度

字符串[索引] 获取指定位置的字符

let str = "hello"  
console.log(str.length)
console.log(str[0])

属性和方法

请注意！字符串是不可变属性！

• str.at( ) 根据索引获取字符，可以接受负索引

let str = "hello"  
console.log(str.at(0)) //输出 H
console.log(str.at(3)) //输出 l
console.log(str.at(-4)) //输出 e

• str.charAt( ) 根据索引获取字符，不接受负索引

• str.concat( ) 用来连接两个或多个字符串

• str.includes( ) 用来检查字符串中是否包含某个内容

let str = "hello hello how are you"
console.log(str.includes("hello")) //输出 true
console.log(str.includes("hello",13)) //第二个参数为字符串的起始位置

• str.indexof( )

• str.lstIndexOf( )

• str.startsWith( ) 检查一个字符串是否以指定内容开头

• str.endsWith( ) 检查一个字符串是否以指定内容结尾

• str.padStart( ) 通过添加指定的内容，使字符串保持某个长度

• str.padEnd( ) 通过添加指定的内容，使字符串保持某个长度

• str.replace( ) 使用一个新字符串替换一个指定内容

• str.replaceAll( ) 使用一个新字符串替换所有指定内容

• str.slice( ) 对字符串进行切片

• str.substring( ) 截取字符串

• str.split( ) 用来将一个字符串拆分为一个数组

• str.toLowerCase( ) 将字符串转换为小写

• str.toUpperCase( ) 将字符串转换为大写

• str.trim( ) 去除前后空格

• str.trimStart( ) 去除开始空格

• str.trimEnd( )去除结束空格

• 查看更多...

代码展示

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

const personArr = [
    new Person("孙悟空", 18),
    new Person("沙和尚", 38),
    new Person("红孩儿", 8),
    new Person("白骨精", 16),
]

function filter(arr, cb) {
    const newArr = [] 

    for (let i = 0; i < arr.length; i++) { 
        if (cb(arr[i])) {   
            newArr.push(arr[i]) 
        }
    }

    return newArr 
}


result = filter(personArr, a => a.name === "孙悟空") 
result = filter(personArr, a => a.age >= 18)

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
result = filter(arr, a => a % 2 === 0)

console.log(result)

function someFn() {
    return "hello"
}

function outer(cb){
    return () => {
        console.log("记录日志~~~~~")
        const result = cb()
        return result
    }
}

let result = outer(someFn)

// console.log(result)


function test(){
    console.log("test~~~~")
    return "test"
}

let newTest = outer(test)

newTest()

第一个代码片段（filter 函数）

这个片段定义了一个 filter 函数，它接受一个数组和一个回调函数作为参数。

filter 函数遍历数组，对每个元素调用回调函数进行测试，然后返回一个新数组，其中包含所有通过测试的元素。这个功能类似于 JavaScript 内置的 Array.prototype.filter 方法。

function filter(arr, cb) {
    const newArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (cb(arr[i])) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

第二个代码片段（outer 函数）

这个片段定义了一个 outer 函数，它接受一个回调函数 cb 作为参数，并返回一个新的函数。

这个新函数在执行时会先记录日志，然后调用 cb 并返回其结果。这个模式通常用于在函数执行前后添加额外的逻辑，例如日志记录、性能监控等。

function outer(cb) {
    return () => {
        console.log("记录日志~~~~~");
        const result = cb();
        return result;
    };
}

不同点

1. 用途不同：

   • filter 函数用于数组过滤，生成一个新数组。

   • outer 函数用于在回调函数执行前后添加额外的逻辑。

2. 参数和返回值：

   • filter 接受一个数组和一个回调函数作为参数，返回一个新数组。

   • outer 接受一个回调函数作为参数，返回一个新的函数。

3. 实现细节：

   • filter 内部使用 for 循环遍历数组，并根据回调函数的返回值决定是否将元素添加到新数组中。

   • outer 返回一个新的匿名函数，该函数在执行时会先记录日志，然后调用并返回回调函数的结果。

在 JavaScript 中，数组是一种用于存储多个值的特殊对象。它提供了丰富的内置方法，如 push, pop, forEach, map, filter, reduce 等，用于操作和访问数组中的元素。数组支持动态添加和删除元素，并且可以通过索引快速访问特定位置的元素。数组的长度是可变的，这使得它在处理数据集合时非常灵活和强大。

数组（Array）

>简介

数组也是一种复合数据类型，在数组可以存储多个不同类型的数据。

数组中存储的是有序的数据，数组中的每个数据都有一个唯一的索引，可以通过索引来操作获取数据。

数组中存储的数据叫做元素，索引(index)是一组大于 0 的数。

length是用来获取数组的长度。

- 创建数组
    通过Array()来创建数组，也可以通过[]来创建数组

    const arr = new Array()
  
- 向数组中添加元素
    语法：
        数组[索引] = 元素

    arr[0] = 10
    arr[1] = 22
    arr[2] = 44
    arr[3] = 88
    arr[4] = 99
 // arr[100] = 99  // 使用数组时，应该避免非连续数组，因为它性能不好
    const arr2 = [1, 2, 3, 4, 5] // 数组字面量

- 读取数组中的元素
    语法：
        数组[索引]
        - 如果读取了一个不存在的元素，不好报错而是返回undefined

    console.log(typeof arr) // object

- length
    - 获取数组的长度，实际值就是数组的最大索引 + 1
      console.log(arr)

    - 向数组最后添加元素：==> 数组[数组.length] = 元素
      arr[arr.length] = 55
      arr[arr.length] = 99

    - length是可以修改的
      arr.length = 5 //改大会让数组变大多出很多空元素，改小则会减少多出的元素

>遍历数组

遍历数组简单理解，就是获取到数组中的每一个元素

// 任何类型的值都可以成为数组中的元素
let arr = [1, "hello", true, null, { name: "孙悟空" }, () => {}]

// 创建数组时尽量要确保数组中存储的数据的类型是相同
arr = ["孙悟空", "猪八戒", "沙和尚"]

// console.log(arr[0])
// console.log(arr[1])
// console.log(arr[2])

arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]

for(let i=0; i<arr.length; i++){
    console.log(arr[i])
}

 for (let i = arr.length - 1; i >= 0; i--) {
     console.log(arr[i])
}

/* 
    定义一个Person类，类中有两个属性name和age,然后创建几个Person对象，
    将其添加到一个数组中,遍历数组，并打印未成年人的信息
*/

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}


const personArr = [
    new Person("孙悟空", 18),
    new Person("沙和尚", 38),
    new Person("红孩儿", 8),
]


for(let i=0; i<personArr.length; i++){
    if(personArr[i].age < 18){
        console.log(personArr[i])
    }
}

>for-of语句

for-of 可以用来遍历迭代对象

语法：
    for(变量 of 可迭代的对象){
        语句...
    }

执行流程：
    for-of的循环体会执行多次，数组中有几个元素就会执行几次，
    每次执行时都会将一个元素赋值给变量


const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]

for(let value of arr){
    console.log(value)
}

for(let value of "welcome"){
    console.log(value)
}

>数组的方法(非破坏性)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Array.isArray() —— 检查一个对象是否是数组

/*
    Array.isArray()
        - 用来检查一个对象是否是数组    
*/
 console.log(Array.isArray({ name: "孙悟空" })) // false
 console.log(Array.isArray([1, 2, 3])) // true

at() —— 索引获取数组中的指定元素

/*
    at()
        - 可以根据索引获取数组中的指定元素
        - at可以接收负索引作为参数
*/

 const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]
 console.log(arr.at(-2))

• arr.at(-2)使用了数组的 at() 方法，它允许你通过索引来获取数组中的元素。

• 在这个例子中，索引是 -2。at() 方法中的负索引表示从数组末尾开始计数。

• 因此，arr.at(-2) 将获取数组中倒数第二个元素。 对于数组 ["孙悟空", "猪八戒", "沙和尚", "唐僧"]，倒数第二个元素是 "沙和尚"。

• 所以，这行代码将在控制台输出"沙和尚"。

console.log(arr[arr.length - 2])

• arr[arr.length - 2] 使用了标准的数组索引方式来获取元素。

• arr.length 返回数组的长度，对于这个数组是 4。

• arr.length - 2 计算得到 2，这是数组中倒数第二个元素的索引。

• 因此，arr[arr.length - 2] 将获取数组中索引为 2 的元素，即 "沙和尚"。

• 所以，这行代码也将在控制台输出 "沙和尚"。

concat() —— 连接两个或多个数组

/* 
    concat()
        - 用来连接两个或多个数组
        - 非破坏性方法，不会影响原数组，而是返回一个新的数组
*/

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]
const arr2 = ["白骨精", "蜘蛛精", "玉兔精"]

let result = arr.concat(arr2, ["牛魔王","铁扇公主"])

console.log(result) 
// 输出：["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精", "蜘蛛精", "玉兔精", "牛魔王", "铁扇公主"]

• const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]; 定义了一个包含四个字符串元素的数组 arr。

• const arr2 = ["白骨精", "蜘蛛精", "玉兔精"]; 定义了另一个包含三个字符串元素的数组 arr2。

• let result = arr.concat(arr2, ["牛魔王","铁扇公主"]); 使用 concat() 方法合并数组 arr、arr2 和一个新数组 ["牛魔王","铁扇公主"]。concat() 方法不会改变原有的数组，而是返回一个新的数组，这个新数组包含了所有合并的元素。合并后的数组被赋值给变量 result。

• console.log(result); 打印变量 result 的值，也就是合并后的新数组。

indexOf() | lastIndexOf()

/*
    indexOf()
        - 获取元素在数组中第一次出现的索引
        - 参数：
            1. 要查询的元素
            2. 查询的其实位置
*/

console.log(result) 
// 输出：["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精", "蜘蛛精", "玉兔精", "牛魔王", "铁扇公主"]
let result = arr.indexOf("沙和尚", 3)

• indexOf() 方法用于查找元素在数组中首次出现的位置。

• 它接收两个参数：要查找的元素和（可选的）搜索的起始位置。

• 在这个例子中，我们从索引 3 开始搜索 "沙和尚" 在数组 arr 中的位置。

• 因为 "沙和尚" 在数组 arr 中的索引是 2，而 2 小于 3，所以 indexOf() 方法会返回 -1，表示未找到。

/*
    lastIndexOf()
        - 获取元素在数组中最后一次出现的位置

        - 返回值：
            找到了则返回元素的索引，
            没有找到返回-1
*/

console.log(result) 
// 输出：["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精", "蜘蛛精", "玉兔精", "牛魔王", "铁扇公主"]
result = arr.lastIndexOf("沙和尚", 3)

• lastIndexOf() 方法用于查找元素在数组中最后一次出现的位置。

• 它同样接收两个参数：要查找的元素和（可选的）搜索的起始位置。

• 在这个例子中，我们从索引 3 开始向前搜索 "沙和尚" 在数组 arr 中的最后一次出现的位置。

• 因为 "沙和尚" 在数组 arr 中的索引是 2，而 2 小于等于 3，所以 lastIndexOf() 方法会返回 2。

console.log(result) 
// 输出：["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精", "蜘蛛精", "玉兔精", "牛魔王", "铁扇公主"]
result = arr.indexOf("白骨精")

• 这里的 indexOf() 方法查找 "白骨精" 在数组 arr 中首次出现的位置。

• 因为 "白骨精" 不在数组 arr 中，所以 indexOf() 方法会返回 -1。

join() —— 将元素连接为一个字符串

/*
    join()
        - 将一个数组中的元素连接为一个字符串
        - ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"] -> "孙悟空,猪八戒,沙和尚,唐僧,沙和尚"
        - 参数：
            指定一个字符串作为连接符
*/
result = arr.join()
result = arr.join("@-@")
result = arr.join("")

slice() —— 用来截取数组

/*
   slice()
        - 用来截取数组（非破坏性方法）     
        - 参数：
            1. 截取的起始位置（包括该位置）
            2. 截取的结束位置（不包括该位置）   
                - 第二个参数可以省略不写，如果省略则会一直截取到最后
                - 索引可以是负值

            如果将两个参数全都省略，则可以对数组进行浅拷贝（浅复制）
*/
arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]
result = arr.slice(0, 2) //输出： ["孙悟空", "猪八戒"]
result = arr.slice(1, 3)
result = arr.slice(1, -1)
result = arr.slice()

• result = arr.slice(0, 2);

  • 这行代码从索引 0 开始提取，直到索引 2（不包括）为止。

  • 因此，它将返回数组中的前两个元素：["孙悟空", "猪八戒"]。

• result = arr.slice(1, 3);

  • 这行代码从索引 1 开始提取，直到索引 3（不包括）为止。

  • 因此，它将返回数组中的第二和第三个元素：["猪八戒", "沙和尚"]。

• result = arr.slice(1, -1);

  • 这行代码从索引 1 开始提取，直到数组倒数第一个元素（不包括）为止。

  • 因此，它将返回数组中除最后一个元素外的所有元素：["猪八戒", "沙和尚", "唐僧"]。

• result = arr.slice();

  • 当不提供任何参数时，slice() 方法将返回数组的一个浅拷贝。

  • 因此，它将返回原数组的一个副本：["孙悟空", "猪八戒", "沙和尚", "唐僧"]。

>数组的复制

xx.slice() ==> 数组

Object.assign ==> 对象

const arr = ["孙悟空", "猪八戒", "沙和尚"]
// const arr2 = arr  // 不是复制
// arr2[0] = "唐僧" // 如此修改，在此打印时会显示["唐僧", "猪八戒", "沙和尚"]，且全局更改

// 如何去复制一个对象 复制必须要产生新的对象
// 当调用slice时，会产生一个新的数组对象，从而完成对数组的复制
const arr3 = arr.slice()


// console.log(arr === arr2) 
// console.log(arr2)

arr3[0] = "唐僧"

console.log(arr) // 输出：["孙悟空", "猪八戒", "沙和尚"]
console.log(arr3) // 输出：["唐僧", "猪八戒", "沙和尚"]

/* 
    浅拷贝（shallow copy）
        - 通常对对象的拷贝都是浅拷贝
        - 浅拷贝顾名思义，只对对象的浅层进行复制（只复制一层）
        - 如果对象中存储的数据是原始值，那么拷贝的深浅是不重要
        - 浅拷贝只会对对象本身进行复制，不会复制对象中的属性（或元素）
*/

// 创建一个数组
const arr = [{name:"孙悟空"}, {name:"猪八戒"}] // 数组里的元素为对象
const arr2 = arr.slice() // 浅拷贝
console.log(arr)

/*
    深拷贝（deep copy）
        - 深拷贝指不仅复制对象本身，还复制对象中的属性和元素
        - 因为性能问题，通常情况不太使用深拷贝
*/

const arr3 = structuredClone(arr) // 专门用来深拷贝的方法
console.log(arr3)

const arr = ["孙悟空", "猪八戒", "沙和尚"]

const arr2 = arr.slice()

console.log(arr === arr2) // false

/* 
    ... (展开运算符)
        - 可以将一个数组中的元素展开到另一个数组中或者作为函数的参数传递
        - 通过它也可以对数组进行浅复制
*/

// const arr3 = [arr[0], arr[1], arr[2]] 等价于 const arr3 = [...arr]

const arr3 = [...arr]
// console.log(arr) // ["孙悟空", "猪八戒", "沙和尚"]

const arr3 = ["唐僧", ...arr, "白骨精"]
// console.log(arr3)  // ["唐僧", "孙悟空", "猪八戒", "沙和尚", "白骨精"]

/*
function 关键字用于定义函数。在你的代码中，sum 函数接受三个参数 a, b, 和 c，并返回它们的和。
定义了一个数组 arr4，包含三个元素：10, 20, 和 30。

用两种方式调用 sum 函数：

直接传递数组的元素作为参数：sum(arr4[0], arr4[1], arr4[2])。这种方式结果是 60。

使用扩展运算符传递数组中的所有元素：sum(...arr4)。这种方式也是将数组中的元素作为单独的参数传递给函数，结果同样是 60。
*/

function sum(a, b, c) {
    return a + b + c
}

const arr4 = [10, 20, 30]

let result = sum(arr4[0], arr4[1], arr4[2])

    result = sum(...arr4)

// console.log(result)


/* 
    对象的复制
        - Object.assign(目标对象, 被复制的对象)
        - 将被复制对象中的属性复制到目标对象里，并将目标对象返回

    - 也可以使用展开运算符对对象进行复制
*/

const obj = { name: "孙悟空", age: 18 }

// const obj2 = Object.assign({}, obj)
const obj2 = { address: "花果山", age: 28 } // 后复制的优先替换先前的，比如 age

Object.assign(obj2, obj)
// console.log(obj2)  // 输出: { address: "花果山", name: "孙悟空", age: 18 }

const obj3 = { address: "高老庄", ...obj, age: 48 } // 将obj中的属性在新对象中展开
// 输出: { address: "高老庄", name: "孙悟空", age: 48 }

>数组的方法(破坏性)

push() —— 向数组的末尾添加元素，并返回新的长度

push()
    - 向数组的末尾添加一个或多个元素，并返回新的长度

let arr = ["孙悟空", "猪八戒", "沙和尚"]
let result = arr.push("唐僧", "白骨精")
console.log(result); // 输出：5

• let arr = ["孙悟空", "猪八戒", "沙和尚"]; 定义了一个包含三个字符串元素的数组 arr。

• let result = arr.push("唐僧", "白骨精"); 调用了 push() 方法，向数组 arr 的末尾添加了两个新的元素："唐僧" 和 "白骨精"。

  • push() 方法会返回更新后数组的长度。

  • 在这个例子中，push() 方法将返回 5，因为添加新元素后数组 arr 的长度变成了 5。

• 变量 result 将被赋值为 5，这是更新后数组 arr 的长度。

pop() —— 删除并返回数组的最后一个元素

pop()
    - 删除并返回数组的最后一个元素

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]
result = arr.pop() // 输出："白骨精"

• result = arr.pop(); 调用了 pop() 方法，它会删除数组 arr 的最后一个元素，并将其值赋给变量 result。

  • pop() 方法会改变原数组，减少其长度。

  • 在这个例子中，如果 arr 的初始状态如上所述，pop() 方法将删除 "白骨精" 并返回它。

• 变量 result 将被赋值为 "白骨精"，这是原数组 arr 被删除的最后一个元素。

unshift() | shift()

unshift()
    - 向数组的开头添加一个或多个元素，并返回新的长度

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]
arr.unshift("牛魔王")
console.log(arr) // 输出: ["牛魔王","孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]


shift()
    - 删除并返回数组的第一个元素

arr.shift() //输出: “牛魔王”
console.log(arr) // 输出: ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]

splice() —— 删除、插入、替换数组中的元素

splice()
    - 可以删除、插入、替换数组中的元素
    - 参数：
        1. 删除的起始位置
        2. 删除的数量
        3. 要插入的元素

    - 返回值：
        - 返回被删除的元素

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]
console.log(arr) //输出: ['孙悟空']

result = arr.splice(1, 3) //输出：["猪八戒", "沙和尚", "唐僧"]
//将删除的元素赋值给 result 

result = arr.splice(1,2,'牛魔王')
console.log(result); // 输出：["猪八戒", "沙和尚"]
console.log(arr);    // 输出：["孙悟空", "牛魔王", "唐僧"]

• arr.splice(1, 2, '牛魔王') 调用了 splice() 方法，它接收至少两个参数：

  • 第一个参数 1 是开始修改的索引位置。

  • 第二个参数 2 是要删除的元素数量。

  • 第三个参数 '牛魔王' 是要添加进数组的元素，它会在删除元素的位置之后插入。

• splice() 方法会改变原数组，并返回一个包含被删除元素的新数组。

• 在这个例子中，从索引 1 开始，删除 2 个元素（即 "猪八戒" 和 "沙和尚"），然后在相同的位置插入 '牛魔王'。

• 变量 result 将被赋值为 ["猪八戒", "沙和尚"]，这是被删除的元素组成的数组。

执行这段代码后，原数组 arr 将变为 ["孙悟空", "牛魔王", "唐僧"]，并且变量 result 的值是 ["猪八戒", "沙和尚"]。

 result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿")

• arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿") 调用了 splice() 方法，它接收至少两个参数：

  • 第一个参数 1 是开始修改的索引位置。

  • 第二个参数 0 是要删除的元素数量。

  • 后续的参数（"牛魔王", "铁扇公主", "红孩儿"）是要添加进数组的元素，它们会在删除元素的位置之后插入。

• splice() 方法会改变原数组，并返回一个包含被删除元素的新数组。

• 在这个例子中，从索引 1 开始，我们不删除任何元素（删除数量为 0），然后在相同的位置插入 "牛魔王", "铁扇公主", "红孩儿" 这三个元素。

• 变量 result 将被赋值为 []，因为没有任何元素被删除。

执行这段代码后，原数组 arr 将变为 ["孙悟空", "牛魔王", "铁扇公主", "红孩儿", "猪八戒", "沙和尚", "唐僧"]，并且变量 result 的值是 []（空数组）。

reverse() —— 反转数组

reverse()
    - 反转数组

let arr = ["a", "b", "c", "d"]
arr.reverse() //输出：['d', 'c', 'b', 'a']

>数组的去重

有如下一个数组arr = [1,2,1,3,2,4,5,5,6,7],编写代码，去除数组中重复的元素。

// 定义一个包含重复数字的数组
const arr = [1, 2, 1, 3, 2, 2, 4, 5, 5, 6, 7];

// 外层循环：遍历数组中的每个元素
for (let i = 0; i < arr.length; i++) {
    // 内层循环：从当前元素的下一个元素开始，检查后面的所有元素
    for (let j = i + 1; j < arr.length; j++) {
        // 如果发现外层循环的元素与内层循环的元素相等，说明找到了一个重复的元素
        if (arr[i] === arr[j]) {
            // 使用 splice 方法删除重复的元素
            arr.splice(j, 1);
            // 因为删除了一个元素，后面的元素会向前移动一位，所以需要将 j 退回一位，以确保不会漏掉任何一个元素
            j--;
        }
    }
}

// 打印处理后的数组，此时数组中不再包含重复的元素
console.log(arr); // 输出：[1, 2, 3, 4, 5, 6, 7]

// 定义一个包含重复数字的数组
const arr = [1, 2, 1, 3, 2, 2, 4, 5, 5, 6, 7];

// 遍历数组中的每个元素
for (let i = 0; i < arr.length; i++) {
    // 查找当前元素在数组中从当前位置之后的第一次出现的位置
    const index = arr.indexOf(arr[i], i + 1);
    // 如果找到了重复元素（index不等于空值）
    if (index !== -1) {
        // 删除数组中该重复元素
        arr.splice(index, 1);
        // 由于删除了一个元素，数组的长度减少，需要调整循环变量以避免跳过元素
        i--;
    }
}

// 打印处理后的数组，此时数组中不再包含重复的元素
console.log(arr); // 输出：[1, 2, 3, 4, 5, 6, 7]

// 定义一个包含重复数字的数组
const arr = [1, 2, 1, 3, 2, 2, 4, 5, 5, 6, 7];

// 创建一个空数组，用于存储非重复的元素
const newArr = [];

// 遍历原始数组中的每个元素
for (let ele of arr) {
    // 检查当前元素是否已经在 newArr 中
    if (newArr.indexOf(ele) === -1) {
        // 如果当前元素不在 newArr 中，则将其添加到 newArr
        newArr.push(ele);
    }
}

// 打印包含非重复元素的新数组
console.log(newArr); // 输出：[1, 2, 3, 4, 5, 6, 7]

>冒泡排序

9, 1, 3, 2, 8, 0, 5, 7, 6, 4

- 比较相邻的两个元素，然后根据大小来决定是否交换它们的位置
- 例子：
    第一次排序：1, 3, 2, 8, 0, 5, 7, 6, 4, 9
    第二次排序：1, 2, 3, 0, 5, 7, 6, 4, 8, 9
    第三次排序：1, 2, 0, 3, 5, 6, 4, 7, 8, 9
    ...
    倒数第二次 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

const arr = [9, 1, 3, 2, 8, 0, 5, 7, 6, 4]

/*
for (let j = 0; j < arr.length - 1; j++) {
    for (let i = 0; i < arr.length - 1; i++) {
        // arr[i] 前边的元素 arr[i+1] 后边元素
        if (arr[i] < arr[i + 1]) {
            // 大数在前，小数在后，需要交换两个元素的位置
            let temp = arr[i] // 临时变量用来存储arr[i]的值
            arr[i] = arr[i + 1] // 将arr[i+1]的值赋给arr[i]
            arr[i + 1] = temp // 修改arr[i+1]的值
        }
    }
}
*/
优化代码：
for (let j = 0; j < arr.length - 1; j++) {
    for (let i = 0; i < arr.length - 1 - j; i++) {
        // arr[i] 前边的元素 arr[i+1] 后边元素
        if (arr[i] < arr[i + 1]) {
            // 大数在前，小数在后，需要交换两个元素的位置
            let temp = arr[i] // 临时变量用来存储arr[i]的值
            arr[i] = arr[i + 1] // 将arr[i+1]的值赋给arr[i]
            arr[i + 1] = temp // 修改arr[i+1]的值
        }
    }
}
console.log(arr)

- 这种排序方式，被称为冒泡排序，冒泡排序是最慢的排序方式，
  数字少还可以凑合用，不适用于数据量较大的排序

>选择排序

- 取出一个元素，然后将其他元素和该元素进行比较，如果其他元素比该元素小则交换两个元素的位置
- 例子：
    第一次排序：0, 9, 3, 2, 8, 1, 5, 7, 6, 4
    第二次排序：0, 1, 9, 3, 8, 2, 5, 7, 6, 4
    第二次排序：0, 1, 2, 9, 8, 3, 5, 7, 6, 4
    ...

console.log(arr)

// 遍历原始数组中的每个元素
for(let i=0; i<arr.length; i++){
    for(let j=i+1; j<arr.length; j++){
        if(arr[i] > arr[j]){
            // 交换两个元素的位置
            let temp = arr[i] // 临时变量用来存储arr[i]的值
            arr[i] = arr[j] // 将arr[i]的值赋给arr[j]
            arr[j] = temp   // 修改arr[j]的值
        }
        }
    }
}

console.log(arr)

  选择排序
    - 取出一个元素，然后将其他元素和该元素进行比较，如果其他元素比该元素小则交换两个元素的位置

>封装函数

const arr = [9, 1, 3, 2, 8, 0, 5, 7, 6, 4]
const arr2 = [9, 8, 7, 6, 5, 4, 3, 2, 1]

function sort(array) {
    const arr = [...array]
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] > arr[j]) {
                // 交换两个元素的位置
                let temp = arr[i]
                arr[i] = arr[j]
                arr[j] = temp
            }
        }
    }
    return arr
}

let result = sort(arr2)

// console.log(arr2)
// console.log(result)

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

const personArr = [
    new Person("孙悟空", 18),
    new Person("沙和尚", 38),
    new Person("红孩儿", 8),
    new Person("白骨精", 16),
]


// filter()函数用来对数组进行过滤
function filter(arr) {

    const newArr = []

    for (let i = 0; i < arr.length; i++) {
        if (arr[i].age < 18) {
            newArr.push(arr[i])
        }
    }

    return newArr
}

result = filter(personArr)
console.log(result)


- - - - - - - - - - - - - - - - - 

目前我们的函数只能过滤出数组中age属性小于18的对象，
    - 我们希望过滤更加灵活：
        比如：过滤数组中age大于18的对象
             过滤数组中age大于60的对象
             过滤数组中age大于n的对象
             过滤数组中name为xxx的对象
             过滤数组中的偶数
             ...

>回调函数

如果将函数作为参数传递，那么我们就称这个函数为回调函数（callback）

请注意！一个函数的参数也可以是函数

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

const personArr = [
    new Person("孙悟空", 18),
    new Person("沙和尚", 38),
    new Person("红孩儿", 8),
    new Person("白骨精", 16),

function filter(arr, cb) {
    const newArr = []  // 创建一个空数组用于存放符合条件的元素

    //遍历并获取里面的元素
    for (let i = 0; i < arr.length; i++) {
          
         // 当前数组元素 arr[i] 的 name 是否等于 '孙悟空'？”
        if (cb(arr[i])) {  // 这里的 cb 实际上就是 fn

        // 如果是 true（即当前元素符合条件），则将这个元素添加到结果数组中
            newArr.push(arr[i])  // 将符合条件的元素加入 newArr
        }
    }

    return newArr  // 返回新数组
}


function fn(a) {
    return a.name === "孙悟空" // a.name 是数组元素的 name 属性
}

// 调用 filter 函数，传递 personArr 数组和回调函数 fn 作为参数
let result = filter(personArr, fn)

// 打印 filter 函数的返回值，即满足条件的元素组成的数组
console.log(result)

>高阶函数

如果一个函数的参数或返回值是函数，则这个函数就称为高阶函数

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

const personArr = [
    new Person("孙悟空", 18),
    new Person("沙和尚", 38),
    new Person("红孩儿", 8),
    new Person("白骨精", 16),
]

function filter(arr, cb) {
    const newArr = [] // 创建一个空数组newArr

    for (let i = 0; i < arr.length; i++) { // 遍历数组中的每个元素
        if (cb(arr[i])) {                 // 如果回调函数对当前元素返回 true
            newArr.push(arr[i])          // 将当前元素添加到 newArr 中
        }
    }

    return newArr // 返回包含所有通过测试的元素的新数组
}

// 我们这种定义回调函数的形式比较少见，通常回调函数都是匿名函数

// function fn(a) {
//     return a.name === "孙悟空"
// }


result = filter(personArr, a => a.name === "孙悟空")  // 过滤出名字为 "孙悟空" 的 Person 对象
result = filter(personArr, a => a.age >= 18)

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
result = filter(arr, a => a % 2 === 0)

console.log(result)

/*
    希望在someFn()函数执行时，可以记录一条日志

    在不修改原函数的基础上，为其增加记录日志的功能

    可以通过高阶函数，来动态的生成一个新函数
*/

function someFn() {
    return "hello"
}

function outer(cb){
    return () => {
        console.log("记录日志~~~~~")
        const result = cb()
        return result
    }
}

let result = outer(someFn)

// console.log(result)


function test(){
    console.log("test~~~~")
    return "test"
}

let newTest = outer(test)

newTest()

>闭包简介

闭包就是能访问到外部函数作用域中变量的函数。

使用场景：

• 当我们需要隐藏一些不希望被别人访问的内容时就可以使用闭包。

构成闭包的要件：

1. 函数的嵌套

2. 内部函数要引用外部函数中的变量

3. 内部函数要作为返回值返回

/* 
创建一个函数，第一次调用时打印1，第二次调用打印2，以此类推
可以利用函数，来隐藏不希望被外部访问到的变量
*/

function outer(){
    let num = 0 // 位于函数作用域中

    return () => {
        num++
        console.log(num)
    }
}

    const newFn = outer()

    // console.log(newFn)
    newFn()

>闭包原理

函数在作用域，在函数创建时就已经确定的（词法作用域），和调用的位置无关。

闭包利用的就是词法作用域。

function fn(){
    console.log(a)
}


function fn2(){
    let a = "fn2中的a"

    fn()
}

// fn2()


function fn3(){
    let a = "fn3中的a"

    function fn4(){
        console.log(a)
    }

    return fn4
}

let fn4 = fn3()

fn4()

>闭包的注意事项

闭包的生命周期：

• 闭包在外部函数调用时产生，外部函数每次调用都会产生一个全新的闭包。

• 在内部函数丢失时销毁（内部函数被垃圾回收了，闭包才会消失）。

注意事项：

• 闭包主要用来隐藏一些不希望被外部访问的内容，这就意味着闭包需要占用一定的内存空间。

• 相对于类来说，闭包比较浪费内存空间（类可以使用原型而闭包不能），
  需要执行次数较少时，使用闭包，需要大量创建实例时，使用类。

function outer2(){
    let num = 0
    return () => {
        num++
        console.log(num)
    }
}

let fn1 = outer2() // 独立闭包
let fn2 = outer2() // 独立闭包

fn1()
fn2()

fn1 = null
fn2 = null

>递归

调用自身函数称为递归函数，递归的作用和循环是基本一致的.

编写递归函数，一定要包含两个要件：

• 基线条件 —— 递归的终止条件

• 递归条件 —— 如何对问题进行拆分

// 创建一个函数，可以用来求任意数的阶乘
/* 
    1! 1
    2! 1 x 2 = 2
    3! 1 x 2 x 3 = 6
    ...
    10! 1 x 2 x 3 x 4 x 5 x 6 x 7 x 8 x 9 x 10 = xxx

    如果用递归来解决阶乘的问题？
        5! = 4! x 5
        4! = 3! x 4
        3! = 2! x 3
        2! = 1! x 2
        1! = 1
*/

function jieCheng(num){
    // 创建一个变量用了记录结果
    let result = 1

    for(let i=2; i<=num; i++){
        result *= i
    }

    return result
}

let result = jieCheng(3)


/*
    递归的作用和循环是一致的，不同点在于，递归思路的比较清晰简洁，循环的执行性能比较好
        在开发中，一般的问题都可以通过循环解决，也是尽量去使用循环，少用递归
        只在一些使用循环解决比较麻烦的场景下，才使用递归
*/


function jieCheng2(num){

    // 基线条件
    if(num === 1){
        return 1
    }

    // 递归条件
    // num! = (num-1)! * num
    return jieCheng2(num-1) * num

}

result = jieCheng2(5)
/* 
    jieCheng2(5)
        - return jieCheng2(4) * 5
            - return jieCheng2(3) * 4
            - return jieCheng2(2) * 3
            - return jieCheng2(1) * 2
                - return 1
*/

console.log(result)

>递归练习

/* 
    一对兔子出生后的两个月后每个月都能生一对小兔子
        - 编写一个函数，可以用来计算第n个月的兔子的数量

    1   2   3   4   5   6   7   8   9   10  11  12
    1   1   2   3   5   8   13  21  34 ....
    - 规律，当前数等于前两个数之和（斐波那契数列）
*/

// 求斐波那契数列中的第n个数
function fib(n) {
    // 确定基线条件
    if (n < 3) {
        return 1
    }

    // 设置递归条件
    // 第n个数 = 第n-1个数 + 第n-2个数
    return fib(n - 1) + fib(n - 2)
}

let result = fib(10)

console.log(result)

>数组的方法（高阶函数）

sort() —— 排序[破坏性]

sort用来对数组进行排序（会改变原数组）。

sort默认会按照 Unicode 编码进行排序，所以如果直接通过 sort 对数字进行排序，可能会得到一个不正确的结果。

/* 
    参数：
      - 可以传递一个回调函数作为参数，通过回调函数来指定排序规则
      - (a, b) => a - b 升序排列
      - (a, b) => b - a 降序排列  
*/ 

let arr = ["a", "c", "e", "f", "d", "b"]
arr = [2, 3, 1, 9, 0, 4, 5, 7, 8, 6, 10]
arr.sort()

forEach() —— 用来遍历数组

forEach 需要一个回调函数作为参数。

数组中有几个元素，就会被调用几次；每次调用，都会将数组中的数据作为参数传递。

/* 
    参数：
      - element 当前的元素
      - index 当前元素的索引
      - array 当前的数组
*/ 

arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]

arr.forEach((element, index, array) => {
    console.log(array)
})

arr.forEach((element, index) => console.log(index, element))

filter() —— 将符合条件的数组保存到新数组并返回

filter 需要一个回调函数作为参数。

会为每一个元素去调用回调函数，并根据返回值来决定是否将元素添加到新数组中。

filter()是一个非破坏性方法，不会影响原数组。

/* 
    参数：
      - element 当前的元素
      - index 当前元素的索引
      - array 当前的数组
*/ 

arr = [1, 2, 3, 4, 5, 6, 7, 8]

// 获取数组中的所有偶数
let result = arr.filter((ele) => ele % 2 === 0)

result = arr.map((ele) => ele * 2)

map() —— 根据当前数组生成一个新数组

map() 需要一个回调函数作为参数。

回调函数的返回值会成为新数组中的元素。

map() 是一个非破坏性方法，不会影响原数组。

/* 
    参数：
      - element 当前的元素
      - index 当前元素的索引
      - array 当前的数组
*/ 

result = arr.map((ele) => ele * 2)

arr = ["孙悟空", "猪八戒", "沙和尚"]

result = arr.map((ele) => "<li>" + ele + "</li>")

reduce() —— 将数组中的元素整合成一个值

reduce()需要一个回调函数作为参数。

reduce()需要两个参数：

1. 回调函数，通过回调函数来指定合并的规则

2. 可选参数，初始值

arr = [1, 2, 3, 4, 5, 6, 7, 8]

result = arr.reduce((a, b) => {
    /* 
        1, 2
        3, 3
        6, 4
        10, 5
    
    */
    // console.log(a, b)

    return a * b
})

// result = arr.reduce((a, b) => a + b, 10)


console.log(result)

>可变参数

arguments 是函数中有一个隐含参数。

   /* 
        arguments
            - arguments是函数中又一个隐含参数
            - arguments是一个类数组对象（伪数组）
                和数组相似，可以通过索引来读取元素，也可以通过for循环变量，但是它不是一个数组对象，不能调用数组的方法
            - arguments用来存储函数的实参，
                无论用户是否定义形参，实参都会存储到arguments对象中
                可以通过该对象直接访问实参
    */

    // console.log(arguments[2])
    // console.log(Array.isArray(arguments))
    // for (let i = 0; i < arguments.length; i++) {
    //     console.log(arguments[i])
    // }

    // for(let v of arguments){
    //     console.log(v)
    // }

    arguments.forEach((ele) => console.log(ele))
}

// fn(1, 10, 33)

// 定义一个函数，可以求任意个数值的和
function sum() {
    // 通过arguments，可以不受参数数量的限制更加灵活的创建函数
    let result = 0

    for (let num of arguments) {
        result += num
    }

    return result
}

可变参数可以接收任意数量实参，并将他们统一存储到一个数组中返回。

/* 
    可变参数，在定义函数时可以将参数指定为可变参数
        - 可变参数可以接收任意数量实参，并将他们统一存储到一个数组中返回
        - 可变参数的作用和arguments基本是一致，但是也具有一些不同点：
            1. 可变参数的名字可以自己指定
            2. 可变参数就是一个数组，可以直接使用数组的方法
            3. 可变参数可以配合其他参数一起使用
*/

function fn2(...abc) {
    console.log(abc)
}

function sum2(...num) {
    return num.reduce((a, b) => a + b, 0)
}

// 当可变参数和普通参数一起使用时，需要将可变参数写到最后
function fn3(a, b, ...args) {
    // for (let v of arguments) {
    //     console.log(v)
    // }

    console.log(args)
}

fn3(123, 456, "hello", true, "1111")

>函数补充

根据函数调用方式的不同，this的值也不同：

• 以函数形式调用，this是window

• 以方法形式调用，this是调用方法的对象

• 构造函数中，this是新建的对象

• 箭头函数没有自己的this，由外层作用域决定

• 通过call和apply调用的函数，它们的第一个参数就是函数的this

• 通过bind返回的函数，this由bind第一个参数决定（无法修改）

function fn() {
    console.log("函数执行了~", this)
}

const obj = { name: "孙悟空", fn }

/* 
    调用函数除了通过 函数() 这种形式外，还可以通过其他的方式来调用函数
        比如，我们可以通过调用函数的call()和apply()来个方法来调用函数
            函数.call()
            函数.apply()
            - call 和 apply除了可以调用函数，还可以用来指定函数中的this
            - call和apply的第一个参数，将会成为函数的this
            - 通过call方法调用函数，函数的实参直接在第一个参数后一个一个的列出来
            - 通过apply方法调用函数，函数的实参需要通过一个数组传递
*/

// fn.call(obj)
// fn.apply(console)

function fn2(a, b) {
    console.log("a =", a, "b =", b, this)
}

// fn2.call(obj, "hello", true)
fn2.apply(obj, ["hello", true])

/* 
    bind() 是函数的方法，可以用来创建一个新的函数
        - bind可以为新函数绑定this
        - bind可以为新函数绑定参数

    箭头函数没有自身的this，它的this由外层作用域决定，
        - 也无法通过call apply 和 bind修改它的this 
        - 箭头函数中没有arguments
*/

function fn(a, b, c) {
    console.log("fn执行了~~~~", this)
    console.log(a, b, c)
}

const obj = {name:"孙悟空"}

const newFn = fn.bind(obj, 10, 20, 30)

// newFn()


const arrowFn = () => {
    console.log(this)
}

// arrowFn.call(obj)

const newArrowFn = arrowFn.bind(obj)

// newArrowFn()

class MyClass{
    fn = () => {
        console.log(this)
    }
}

const mc = new MyClass()

// mc.fn.call(window)

引入必要的文件

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

修改样式

 <style>
   .swiper-pagination-bullet {
            width: 25px;
            height: 5px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }
        .swiper-pagination-bullet-active {
            background-color: #3B82F6 !important;
            width: 35px;
        }
    </style>

html代码

       <div class="swiper mySwiper mb-12 rounded-lg overflow-hidden shadow-lg">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://source.unsplash.com/random/1200x400?nature" alt="Banner 1" class="w-full h-64 object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <div class="text-center">
                            <h2 class="text-3xl font-bold text-white mb-2">探索自然之美</h2>
                            <p class="text-xl text-gray-200">让我们一起领略大自然的魅力</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="https://source.unsplash.com/random/1200x400?technology" alt="Banner 2" class="w-full h-64 object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <div class="text-center">
                            <h2 class="text-3xl font-bold text-white mb-2">科技改变生活</h2>
                            <p class="text-xl text-gray-200">了解最新科技趋势</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="https://source.unsplash.com/random/1200x400?travel" alt="Banner 3" class="w-full h-64 object-cover">
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
                        <div class="text-center">
                            <h2 class="text-3xl font-bold text-white mb-2">环游世界</h2>
                            <p class="text-xl text-gray-200">分享精彩的旅行故事</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

js代码

    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '"></span>';
                },
            },
        });
    </script>

最终样式

什么是继承？

继承是面向对象编程中的一个概念，它允许我们创建一个基于另一个类的新类。新类（子类）继承了父类的属性和方法，并且可以添加或修改这些属性和方法。

什么是 super？

super 是一个关键字，用于访问和调用父类的函数。在子类的构造函数中，super() 调用父类的构造函数。在子类的方法中，super.methodName() 调用父类的 methodName 方法。

为什么要用 super？

• 初始化父类的属性：父类的构造函数通常用于初始化父类的属性。如果子类没有调用父类的构造函数，父类的属性就不会被初始化，可能会导致错误。

• 使用父类的方法：子类可以调用父类的方法，并在此基础上添加新的行为。

例子

假设我们有一个 Animal 类，它有一个构造函数来设置动物的名字：

class Animal {
  constructor(name) {
    this.name = name;
  }
}

现在，我们想要创建一个 Dog 类，它继承自 Animal：

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数，设置名字
    this.breed = breed; // 设置狗的品种
  }
}

在这个例子中，Dog 类的构造函数接受两个参数：name 和 breed。我们使用 super(name) 来调用 Animal 类的构造函数，这样我们就可以设置 Dog 的 name 属性。然后，我们设置 Dog 特有的属性 breed。

如果我们不使用 super(name)，那么 Dog 的 name 属性就不会被设置，因为 Animal 类的构造函数没有被调用。

为什么不能直接这样写？

class Cat extends Animal {
  constructor() {
    this.age = age;
  }
}

在这个例子中，你尝试直接在 Cat 的构造函数中给 this.age 赋值，但是没有调用 super()。这样做会导致错误，因为：

1. JavaScript 要求在访问 this 之前必须调用 super()。

2. 没有调用 Animal 类的构造函数，所以 Animal 类中定义的属性（如 name）不会被初始化。

总结

super 关键字是 JavaScript 中实现继承的重要工具。它确保父类的构造函数被正确地调用，以便初始化继承的属性，并且它允许子类调用父类的方法。

JavaScript 中的面向对象编程（OOP）是一种编程范式，它通过对象来模拟现实世界的事物和概念。对象可以包含属性（状态）和方法（行为）。JavaScript 支持构造函数、原型链、继承和类等 OOP 特性，使得代码组织更加结构化和模块化。通过这些特性，开发者可以创建可重用、易于维护和扩展的代码。

面向对象

>面向对象编程(OOP)

1. 程序是干嘛的？
 - 程序就是对现实世界的抽象（照片就是对人的抽象）

2. 对象是干嘛的？
 - 一个事物抽象到程序中后就变成了对象
 - 在程序的世界中，一切皆对象

例如：（ ）
心仪的女人：王老五
  - 一个事物通常由两部分组成：数据和功能
  - 一个对象由两部分组成：属性和方法
  - 事物的数据到了对象中，体现为属性
  - 事物的功能到了对象中，体现为方法

  - 数据：
        姓名
        年龄
        身高
        体重

  - 功能：
        睡
        吃  

const five = {
    //添加属性
    name:"王老五",
    age:48,
    height:180,
    weight:100,

    //添加方法
    eat(){
      console.log(this.name + "吃饭了")
    },
    
    sleep(){
      console.log(this.name + "睡觉了")
    }
    
}

3. 面向对象的编程
 - 面向对象的编程指，程序中的所有操作都是通过对象来完成
 - 做任何事情之前都需要先找到它的对象，然后通过对象来完成各种操作

>类

使用object创建的问题

• 无法区分不同类型的对象

• 不方便批量创建对象

- 在JS中可以通过类(class)来解决这个问题

    1. 类是对象模板，可以将对象中的属性和方法直接定义在类中，
       定义后，就可以直接通过类来创建对象

    2. 通过同一个类创建的对象，我们称为同类对象
       可以使用instanceof来检查一个对象是否是由某个类创建
       如果某个对象是由某个类所创建，则我们称该对象是这个类的实例

    语法：
        class 类名 {} // 类名要使用大驼峰命名
        const 类名 = class {}  
                    
    通过类创建对象
        new 类()

    // const Person = class {}

    // Person类专门用来创建人的对象
    class Person{

    }

    // Dog类式专门用来创建狗的对象
    class Dog{

    }

    const p1 = new Person()  // 调用构造函数创建对象
    const p2 = new Person()

    const d1 = new Dog()
    const d2 = new Dog()

    console.log(p1 instanceof Person) // true
    console.log(d1 instanceof Person) // false

    const five = {
        // 添加属性
        name: "王老五",
        age: 48,
        height: 180,
        weight: 100,

        // 添加方法
        sleep() {
            console.log(this.name + "睡觉了~")
        },

        eat() {
            console.log(this.name + "吃饭了~")
        },
    }

    const yellow = {
        name: "大黄",
        age: 3,
        sleep() {
            console.log(this.name + "睡觉了~")
        },

        eat() {
            console.log(this.name + "吃饭了~")
        },
    }

five.sleep(); // 输出: 王老五睡觉了~
five.eat();   // 输出: 王老五吃饭了~

yellow.sleep(); // 输出: 大黄睡觉了~
yellow.eat();   // 输出: 大黄吃饭了~

>属性

类是创建对象的模板，要创建第一件事就是定义类

class Person{
    /* 
        类的代码块，默认就是严格模式，
        类的代码块是用来设置对象的属性的，不是什么代码都能写
    */
    name = "孙悟空" // Person的实例属性name p1.name
    age = 18       // 实例属性只能通过实例访问 p1.age

    static test = "test静态属性" // 使用static声明的属性，是静态属性（类属性） Person.test
    static hh = "静态属性"   // 静态属性只能通过类去访问 Person.hh
}

// 创建Person类的实例
const p1 = new Person()
const p2 = new Person()

console.log(p1)
console.log(p2)

// 访问实例属性
console.log(p1.name); // 输出: 孙悟空
console.log(p1.age);  // 输出: 18

// 访问静态属性
console.log(Person.test); // 输出: test静态属性
console.log(Person.hh);   // 输出: 静态属性

>方法

class person {
    name = "孙悟空"

     sayHello == function(){

     }  添加方法的一种方式

    sayHello(){
        console.log(‘大家好，我是’ + this.name)
    } // 添加方法(实例方法)，实例方法中的this就是当前实例！ 谁调用了就是谁的this，例如P1调用，则this指向P1

    static test(){
      console.log('我是静态方法'，this)
    } // 静态方法（类方法）通过类来调用，静态方法中this 指向的是当前类，例如Person.test调用，则指向Person
} 

const p1 = new Person()
//console.log(P1)

// 调用实例方法
p1.sayHello(); // 输出: 大家好，我是孙悟空

// 调用静态方法
Person.test(); // 输出: 我是静态方法 [class Person]

>构造函数

// class Person{
//     name="孙悟空" // 当我们在类中直接指定实例属性的值时，
//                 // 意味着我们创建的所有对象的属性都是这个值
//     age=18
//     gender="男"

//     sayHello(){
//         console.log(this.name)
//     }
// }

// 创建一个Person的实例
// const p1 = new Person("孙悟空", 18, "男")
// const p2 = new Person("猪八戒", 28, "男")
// const p3 = new Person("沙和尚", 38, "男")

// console.log(p1)
// console.log(p2)
// console.log(p3)

class Person{
            
    // 在类中可以添加一个特殊的方法constructor
    // 该方法我们称为构造函数（构造方法）
    // 构造函数会在我们调用类创建对象时执行

    constructor(name, age, gender){

        // console.log("构造函数执行了~", name, age, gender)
        // 可以在构造函数中，为实例属性进行赋值
        // 在构造函数中，this表示当前所创建的对象

        this.name = name
        this.age = age
        this.gender = gender
    }
}

const p1 = new Person("孙悟空", 18, "男")
const p2 = new Person("猪八戒", 28, "男")
const p3 = new Person("沙和尚", 38, "男")

console.log(p1) //输出: Person { name: '孙悟空', age: 18, gender: '男' }
console.log(p2) //输出: Person { name: ' 猪八戒', age: 28, gender: '男' }
console.log(p3) //输出: Person { name: '沙和尚', age: 38, gender: '男' }

>封装

面向对象的特点：封装、继承、多态。

/* 

1、封装
  - 对象就是一个用来存储不同属性的容器
  - 对象不仅负责存储属性，还要负责数据的安全 例如 P1.name = -11 / haha 数据被修改，不安全
  - 直接添加到对象中的属性并不安全，因为它们可以被任意的修改

  - 如何确保数据的安全？
    ① 私有化数据 :  将需要保护的数据设置为私有，只能在类内部使用
    ② 提供 setter 和 getter 方法来开放对数据的操作 
       - 属性设置私有，通过 getter 和 setter 方法操作属性带来的好处？
         ？可以控制属性的读写权限
         ？可以在方法中对我们的属性值进行验证

  封装为了保护数据的安全，实现封装的方式：！私有化，！getter 及 setter 方法！
  
  get 属性名(){
    return this.#属性
  }
  
  set 属性名(参数){
    可以添加验证逻辑...
    this.#属性 = 参数
  
  }

*/ 

class Person{ 

   // #address = ”花果山“ //实例使用#开头就变成了私有属性，私有属性只能在类内部访问

  #name
  #age
  #gender //私有化属性必须要先声明

  constructor(name,age,gender){
    this.name = name 
    this.age = age 
    this.gender = gender
  } 

  sayHello(){
    console.log(this.#name)
  }
/*
  //getter方法用来读取属性
  getName(){
    return this.#name
  }

  //setter方法用来设置属性
  setName(name){
    this.#name = name
  }

  getAge {
    return this.#age
  }

  setAge(age){
    this.#age = age
  }

  //对属性进行验证
  setAge(age){
    if(age >= 0){
        this.#age = age
    }
  }
*/

  // js中的标准写法，使用属性来调用
  get gender(){
    console.log('getter执行了')
    return this.#gender
  }
  
  set gender(gender){
    this.#gender = gender 
  } // 此处调用则需要p1.gender = "女"
}
  
const p1 = new Person("孙悟空"，18，”男“)

// p1.name = "hello"

// p1.getName()
p1.setAge(-11) // p1.age = 11 // p1.age
p1.setName('猪八戒')

console.log(p1.gender)

>多态

class Person {
    constructor(name) {
        this.name = name
    }
}

class Dog {
    constructor(name) {
        this.name = name
    }
}

class Test {

}

const dog = new Dog('旺财')
const person = new Person("孙悟空")
const test = new Test()

// console.log(dog)
// console.log(person)

/* 
    定义一个函数，这个函数将接收一个对象作为参数，他可以输出hello并打印对象的name属性


    多态
        - 在JS中不会检查参数的类型，所以这就意味着任何数据都可以作为参数传递
        - 要调用某个函数，无需指定的类型，只要对象满足某些条件即可
        - 如果一个东西走路像鸭子，叫起来像鸭子，那么它就是鸭子
        - 多态为我们提供了灵活性
*/
function sayHello(obj) {
    // if(obj instanceof Person){
    console.log("Hello," + obj.name)
    // }
}

sayHello(dog) //输出：你好，旺财！

>继承 (详解)

/* 
    继承
        - 可以通过extends关键来完成继承
        - 当一个类继承另一个类时，就相当于将另一个类中的代码复制到了当前类中（简单理解）
        - 继承发生时，被继承的类称为 父类（超类），继承的类称为 子类
        - 通过继承可以减少重复的代码，并且可以在不修改一个类的前提对其进行扩展

        封装 —— 安全性
        继承 —— 扩展性
        多态 —— 灵活性
*/

class Animal{
    constructor(name){
        this.name = name
    }

    sayHello(){
        console.log("动物在叫~")
    }
}

class Dog extends Animal{

    // 在子类中，可以通过创建同名方法来重写父类的方法
    sayHello(){
        console.log("汪汪汪")
    }
    
}

class Cat extends Animal{

    // 重写构造函数
    constructor(name, age){
        // 重写构造函数时，构造函数的第一行代码必须为super()
        super(name) // 调用父类的构造函数

        this.age = age

    }
            
    sayHello(){

        // 调用一下父类的sayHello
        super.sayHello() // 在方法中可以使用super来引用父类的方法

        console.log("喵喵喵")
    }
}

const dog = new Dog('旺财')
const cat = new cat('汤姆')
dog.sayHello()
cat.sayHello()
console.log(dog)
console.log(cat)

>对象的结构

/* 
    对象中存储属性的区域实际有两个：

        1. 对象自身
            - 直接通过对象所添加的属性，位于对象自身中
            - 在类中通过 x = y 的形式添加的属性，位于对象自身中

        2. 原型对象（prototype）
            - 对象中还有一些内容，会存储到其他的对象里（原型对象）
            - 在对象中会有一个属性用来存储原型对象，这个属性叫做__proto__

            - 原型对象也负责为对象存储属性，
                当我们访问对象中的属性时，会优先访问对象自身的属性，
                对象自身不包含该属性时，才会去原型对象中寻找

            - 会添加到原型对象中的情况：
                1. 在类中通过xxx(){}方式添加的方法，位于原型中
                2. 主动向原型中添加的属性或方法

*/

class Person {
    name = "孙悟空"
    age = 18

    // constructor(){
    //     this.gender = "男"
    // }

    sayHello() {
        console.log("Hello，我是", this.name)
    } //此处的方法添加在原型对象中
}

const p = new Person()

// p.address = "花果山"
// p.sayHello = "hello"

console.log(p.sayHello)

>原型对象

class Person {
    name = "孙悟空"
    age = 18

    sayHello() {
        console.log("Hello，我是", this.name)
    }
}

const p = new Person()

// console.log(p)
// console.log(p.constructor) 打印p的构造函数，

/* 
    访问一个对象的原型对象
        1.对象.__proto__  
        ==> console.log(p.__proto__)

        2.Object.getPrototypeOf(对象) 
        ==> console.log(Object.getPrototypeOf(p)) 

        ==> console.log(Object.getPrototypeOf(p) === p.__proto__) // 判断是否全等 输出：true
            
    原型对象中的数据：
        1. 对象中的数据（属性、方法等）
        2. constructor（对象的构造函数）

    注意：
        原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同
            p对象的原型链：p对象 --> 原型 --> 原型 --> null
            obj对象的原型链：obj对象 --> 原型 --> null
*/

const obj = {} // obj.__proto__
console.log(p.__proto__.__proto__) 
console.log(p.__proto__.__proto__.__proto__) // 输出：null

class Person {
    name = "孙悟空"
    age = 18

    sayHello() {
        console.log("Hello，我是", this.name)
    }
}

const p = new Person()
const p2 = new Person()

// 所有的同类型对象它们的原型对象都是同一个，也就意味着，同类型对象的原型链是一样的.
console.log(p)
console.log(p2)
console.log(p.__proto__ === p2.__proto__) // 输出：ture


/* 
  原型的作用：
    - 原型就相当于是一个公共的区域，可以被所有该类实例访问，也可以将该类实例中，所有的公共属性（方法）统一存储到原型中,
      这样我们只需要创建一个属性，即可被所有实例访问.

    - 在对象中有些值是对象独有的，像属性（name，age，gender）每个对象都应该有自己值，
      但是有些值对于每个对象来说都是一样的，像各种方法，对于一样的值没必要重复的创建

      p.sayHello = hello
      console.log(p.sayHello) // 输出：hello
      console.log(p2.sayHello) // 输出： sayHello() {console.log("Hello，我是", this.name)}

*/

      // JS中继承就是通过原型来实现的,当继承时，子类的原型就是一个父类的实例
 
class Animal {
      
}

class Cat extends Animal {

}
  
const cat = new Cat()

// cat --> Amimal --> object -->Object原型 --> null 
console.log(cat.__proto__) //输出： Animal {}

/* 
  原型链：
    - 读取对象属性时，会优先对象自身属性，
      如果对象中有，则使用，没有则去对象的原型中寻找
      如果原型中有，则使用，没有则去原型的原型中寻找
      直到找到Object对象的原型（Object的原型没有原型（为null））
      如果依然没有找到，则返回undefined

    - 作用域链，是找变量的链，找不到会报错
    - 原型链，是找属性的链，找不到会返回undefined
*/

尝试：
  - 函数的原型链是什么样子的？

  function Person2() {

}
  // Person2 --> 原型 --> Object原型 --> null
  console.log(Person2.__proto__) //输出：原型
  console.log(Person2.__proto__.__proto__) //输出：obj原型
  console.log(Person2.__proto__.__proto__.__proto__) //输出：null

  - Object的原型链是什么样子的？
  
  const Person3 = Object()
  
  // Person3 --> Object原型 --> null
  console.log(Person3.__proto__) //输出：原型
  console.log(Person3.__proto__.__proto__) //输出：obj原型
 

>修改原型

// 大部分情况下，我们是不需要修改原型对象

class Person {
    name = "孙悟空";
    age = 18;

    sayHello() {
        console.log("Hello，我是", this.name);
    }
}

const p = new Person();
const p2 = new Person();

//通过对象修改原型，向原型中添加方法，修改后所有同类实例都能访问该方法 不要这么做
p.__proto__.run = () => { 
    console.log('我在跑~');
}

p.run(); // 输出: "我在跑~"
p2.run(); // 输出: "我在跑~"


/*   注意：千万不要通过类的实例去修改原型。
          1. 通过一个对象影响所有同类对象，这么做不合适
          2. 修改原型先得创建实例，麻烦
          3. 危险
*/

class Dog{

}

p.__proto__ = new Dog() //直接为对象赋值了一个新的原型  不要这么做
p.run(); //直接报错，因为原来的原型已经被覆盖

/* 
    处理通过__proto__能访问对象的原型外，还可以通过类的prototype属性，来访问实例的原型.
    修改原型时，最好通过通过类去修改.
    
    好处：
        1. 一修改就是修改所有实例的原型
        2. 无需创建实例即可完成对类的修改

    原则：
        1. 原型尽量不要手动改
        2. 要改也不要通过实例对象去改
        3. 通过 类.prototype 属性去修改
        4. 最好不要直接给prototype去赋值
*/ 

console.log(Person.prototype) // 访问Person实例的原型对象
console.log(Person.prototype === p.__proto__) // 输出: true

Person.prototype.fly = () => {
  console.log("我在飞！")
}

p.fly()
p2.fly()

>_instanceof和hasOwn

• instanceof检查的是对象的原型链上是否有该类实例

• Object.hasOwn(对象, 属性名)，用来检查一个对象的自身是否含有某个属性

// instanceof 用来检查一个对象是否是一个类的实例

class Animal {}

class Dog extends Animal {}

const dog = new Dog()

/* 
  - instanceof检查的是对象的原型链上是否有该类实例，只要原型链上有该类实例，就会返回true

console.log(dog instanceof Dog) // true 

  - dog -> Animal的实例 -> Object实例 -> Object原型

console.log(dog instanceof Animal) // true

 - Object是所有对象的原型，所以任何和对象和Object进行instanceof运算都会返回true

console.log(dog instanceof Object) // true
*/

//获取OBJ实例  
const obj = new Object()
console.log(obj.__proto__)  
console.log(Object.prototype)
dog.__proto__ / Dog.prototype


class Person {
    name = "孙悟空";
    age = 18;

    sayHello() {
        console.log("Hello，我是", this.name);
    }
}

// 使用in运算符检查属性时，无论属性在对象自身还是在原型中，都会返回true
console.log("sayHello" in p)

// 对象.hasOwnProperty(属性名) (不推荐使用)，用来检查一个对象的自身是否含有某个属性
console.log(p.hasOwnProperty("sayHello")) //输出：false

// Object.hasOwn(对象, 属性名)（推介的方法），用来检查一个对象的自身是否含有某个属性
 console.log(Object.hasOwn(p, "name"))

>旧类

• 一个函数如果直接调用 xxx() 那么这个函数就是一个普通函数

• 一个函数如果通过new调用 new xxx() 那么这个函数就是一个构造函数

/* 
    等价于：
        class Person{

        }
    
*/

var Person = (function () {
    function Person(name, age) {
        // 在构造函数中，this表示新建的对象
        this.name = name
        this.age = age

        // this.sayHello = function(){
        //     console.log(this.name)
        // }
    }

    // 向原型中添加属性（方法）
    Person.prototype.sayHello = function () {
        console.log(this.name)
    }

    // 静态属性
    Person.staticProperty = "xxx"
    // 静态方法
    Person.staticMethod = function () {}

    return Person
})()

const p = new Person("孙悟空", 18)

// console.log(p)


var Animal = (function(){
    function Animal(){

    }

    return Animal
})()


var Cat = (function(){
    function Cat(){

    }

    // 继承Animal
    Cat.prototype = new Animal()

    return Cat
})()

var cat = new Cat()

console.log(cat)

>new运算符

• new运算符是创建对象时要使用的运算符

当使用new去调用一个函数时，这个函数将会作为构造函数调用，
使用new调用函数时，将会发生这些事：


function MyClass(){

1. 创建一个普通的JS对象（Object对象 {}）, 为了方便，称其为新对象
    // var newInstance = {}

2. 将构造函数的prototype属性设置为新对象的原型
    // newInstance.__proto__ = MyClass.prototype
}

3. 使用实参来执行构造函数，并且将新对象设置为函数中的this
 var mc = new MyClass()


4. 如果构造函数返回的是一个非原始值，则该值会作为new运算的返回值返回（千万不要这么做）
   如果构造函数的返回值是一个原始值或者没有指定返回值，则新的对象将会作为返回值返回
   通常不会为构造函数指定返回值

class Person{

    constructor(){

    }

}

new Person()

>总结

面向对象本质就是，编写代码时所有的操作都是通过对象来进行的。

    面向对象的编程的步骤：
        1. 找对象
        2. 搞对象
    
    学习对象：
        1. 明确这个对象代表什么，有什么用    
        2. 如何获取到这个对象
        3. 如何使用这个对象（对象中的属性和方法）

    对象的分类：
        内建对象
            - 由ES标准所定义的对象
            - 比如 Object Function String Number ....

        宿主对象
            - 由浏览器提供的对象
            - BOM、DOM

        自定义对象
            - 由开发人员自己创建的对象