# JavaScript练习-24级

**Repository Path**: myhfw003/javascript-exercise-grade24

## Basic Information

- **Project Name**: JavaScript练习-24级
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2025-11-26
- **Last Updated**: 2025-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 24级全栈开发方向js练习集


## 一、JavaScript基础

### 开发环境与初体验

### 变量、常量与基础数据类型

1. 完成如下任务
- 题目描述：
声明一个变量 name，赋值为你的名字，再声明一个常量 SCHOOL，赋值为"某某职业学院"，最后输出这两个值
- 输出示例：
"张三"
"某某职业学院"

2. 完成如下任务
- 题目描述：
判断给定的变量 value 是什么数据类型，并返回类型名称的字符串
- 输入示例：
123
- 输出示例：
"number"

3. 完成如下任务
- 题目描述：
创建一个变量 age，初始值为 18，然后将其修改为 20，最后输出修改后的值
- 输出示例：
20

4. 完成如下任务
- 题目描述：
声明三个变量分别存储一个学生的姓名（字符串）、年龄（数字）、是否及格（布尔值），然后分别输出这三个变量的值和类型
- 输出示例：
姓名: "李四", 类型: string
年龄: 19, 类型: number
及格: true, 类型: boolean

5. 完成如下任务
- 题目描述：
理解 null 和 undefined 的区别，分别创建这两种类型的变量并输出
- 输出示例：
undefined 变量: undefined, 类型: undefined
null 变量: null, 类型: object

6. 完成如下任务
- 题目描述：
理解变量的作用域，演示块级作用域（let、const）和函数作用域（var）的区别
- 输出示例：
let 和 const 有块级作用域
var 只有函数作用域

7. 完成如下任务
- 题目描述：
理解变量提升（Hoisting），对比 var、let、const 的行为
- 输出示例：
var 声明会提升，但值为 undefined
let 和 const 存在暂时性死区

8. 完成如下任务
- 题目描述：
使用模板字符串拼接变量和表达式
- 输入示例：
name = "张三", age = 20, score = 85
- 输出示例：
`${name}今年${age}岁，考了${score}分，${score >= 60 ? '及格' : '不及格'}`

9. 完成如下任务
- 题目描述：
理解基本数据类型和引用数据类型的区别
- 输出示例：
基本类型：Number、String、Boolean、Undefined、Null、Symbol、BigInt
引用类型：Object、Array、Function

### 运算符与类型转换

1. 完成如下任务
- 题目描述：
计算两个数字 a 和 b 的加、减、乘、除、取余结果，并返回一个包含这些结果的对象
- 输入示例：
10, 3
- 输出示例：
{ 加: 13, 减: 7, 乘: 30, 除: 3.33, 余: 1 }

2. 完成如下任务
- 题目描述：
将字符串 "123" 转换为数字类型，将数字 456 转换为字符串类型，并分别返回它们的值和类型
- 输出示例：
转换后的数字: 123, 类型: number
转换后的字符串: "456", 类型: string

3. 完成如下任务
- 题目描述：
比较两个变量 a 和 b，返回 a 是否大于 b、是否等于 b、是否不等于 b 的布尔值结果
- 输入示例：
5, 3
- 输出示例：
{ 大于: true, 等于: false, 不等于: true }

4. 完成如下任务
- 题目描述：
给定三个变量 x = "5", y = 5, z = "5"，使用 == 和 === 分别比较 x 和 y、x 和 z，理解并返回比较结果
- 输出示例：
x == y: true, x === y: false
x == z: true, x === z: true

5. 完成如下任务
- 题目描述：
使用逻辑运算符（&&、||、!）判断：年龄在18-60岁之间且有驾照的人可以开车
- 输入示例：
age = 25, hasLicense = true
- 输出示例：
true (可以开车)

6. 完成如下任务
- 题目描述：
理解隐式类型转换，计算各种表达式的结果
- 输入示例：
"5" + 3, "5" - 3, true + 1, "10" * "2"
- 输出示例：
"53", 2, 2, 20

7. 完成如下任务
- 题目描述：
使用一元运算符进行类型转换（+, -, !）
- 输入示例：
+"123", -"45", !!"hello"
- 输出示例：
123, -45, true

8. 完成如下任务
- 题目描述：
理解 NaN 的特性，如何检测 NaN
- 输出示例：
NaN === NaN // false
isNaN(NaN) // true
Number.isNaN(NaN) // true

9. 完成如下任务
- 题目描述：
使用位运算符进行简单计算（如取整、判断奇偶）
- 输入示例：
5.8, 7
- 输出示例：
~~5.8 = 5 (取整)
7 & 1 = 1 (判断奇偶，结果为1表示奇数)

10. 完成如下任务
- 题目描述：
使用三元运算符和短路求值进行条件赋值
- 输入示例：
score = 85
- 输出示例：
const level = score >= 60 ? '及格' : '不及格';
const name = userName || '游客';

### 流程控制

1. 完成如下任务
- 题目描述：
给定一个分数 score，判断成绩等级：90分以上为"优秀"，80-89分为"良好"，60-79分为"及格"，60分以下为"不及格"
- 输入示例：
85
- 输出示例：
"良好"

2. 完成如下任务
- 题目描述：
使用 for 循环计算 1 到 n 的累加和
- 输入示例：
100
- 输出示例：
5050

3. 完成如下任务
- 题目描述：
遍历数组 arr，输出所有偶数
- 输入示例：
[1, 2, 3, 4, 5, 6, 7, 8]
- 输出示例：
[2, 4, 6, 8]

4. 完成如下任务
- 题目描述：
判断给定数字 num 是否为质数（只能被1和自身整除的大于1的自然数）
- 输入示例：
17
- 输出示例：
true

5. 完成如下任务
- 题目描述：
使用 while 循环找出小于 n 的所有3的倍数
- 输入示例：
20
- 输出示例：
[3, 6, 9, 12, 15, 18]

6. 完成如下任务
- 题目描述：
使用 switch 语句根据星期几输出不同的信息
- 输入示例：
dayOfWeek = 1 (周一)
- 输出示例：
"今天是工作日，要上班"

7. 完成如下任务
- 题目描述：
使用 for...of 循环遍历数组
- 输入示例：
['苹果', '香蕉', '橙子']
- 输出示例：
依次输出每个水果名称

8. 完成如下任务
- 题目描述：
使用 for...in 循环遍历对象的属性
- 输入示例：
{ name: "张三", age: 20, city: "北京" }
- 输出示例：
name: 张三
age: 20
city: 北京

9. 完成如下任务
- 题目描述：
使用 break 和 continue 控制循环流程
- 输入示例：
查找数组中第一个大于50的数，跳过所有负数
- 输出示例：
演示 break（跳出循环）和 continue（跳过本次循环）的使用

10. 完成如下任务
- 题目描述：
使用嵌套循环打印九九乘法表
- 输出示例：
1*1=1
1*2=2 2*2=4
1*3=3 2*3=6 3*3=9
...

11. 完成如下任务
- 题目描述：
使用条件运算符和 if-else 对比，实现同样的逻辑
- 输入示例：
age = 18
- 输出示例：
const status = age >= 18 ? '成年' : '未成年'; (三元运算符)
if (age >= 18) { status = '成年'; } else { status = '未成年'; }

12. 完成如下任务
- 题目描述：
实现一个简单的猜数字游戏，使用循环和条件判断
- 输出示例：
生成1-100随机数，用户猜测，给出"太大"、"太小"或"猜对了"的提示

## 二、核心数据结构与函数

### 数组

1. 完成如下任务
- 题目描述：
计算并返回给定数组 arr 中所有元素的总和
- 输入示例：
[ 1, 2, 3, 4 ]
- 输出示例：
10

2. 完成如下任务
- 题目描述：
合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组
- 输入示例：
[1, 2, 3, 4], ['a', 'b', 'c', 1]
- 输出示例：
[1, 2, 3, 4, 'a', 'b', 'c', 1]

3. 完成如下任务
- 题目描述：
统计数组 arr 中值等于 item 的元素出现的次数

- 输入示例：
[1, 2, 4, 4, 3, 4, 3], 4

- 输出示例：
3

4. 完成如下任务

- 题目描述（15分）：
找出数组 arr 中重复出现过的元素（不用考虑返回顺序）

- 输入示例：
[1, 2, 4, 4, 3, 3, 1, 5, 3]

- 输出示例：
[1, 3, 4]

5. 完成如下任务
- 题目描述：
删除数组 arr 中的指定元素 item，返回新数组（不修改原数组）
- 输入示例：
[1, 2, 3, 4, 2, 5], 2
- 输出示例：
[1, 3, 4, 5]

6. 完成如下任务
- 题目描述：
使用数组方法 filter 和 map，从学生数组中筛选出及格的学生，并返回他们的姓名数组
- 输入示例：
[{name: "小明", score: 85}, {name: "小红", score: 55}, {name: "小刚", score: 90}]
- 输出示例：
["小明", "小刚"]

#### 数组高阶函数（重点）

7. 完成如下任务
- 题目描述：
使用 map() 方法将数组中的每个数字都乘以 2
- 输入示例：
[1, 2, 3, 4, 5]
- 输出示例：
[2, 4, 6, 8, 10]

8. 完成如下任务
- 题目描述：
使用 filter() 方法筛选出数组中的所有奇数
- 输入示例：
[1, 2, 3, 4, 5, 6, 7, 8, 9]
- 输出示例：
[1, 3, 5, 7, 9]

9. 完成如下任务
- 题目描述：
使用 reduce() 方法计算数组中所有数字的总和
- 输入示例：
[10, 20, 30, 40, 50]
- 输出示例：
150

10. 完成如下任务
- 题目描述：
使用 reduce() 方法找出数组中的最大值
- 输入示例：
[3, 7, 2, 9, 1, 5]
- 输出示例：
9

11. 完成如下任务
- 题目描述：
使用 find() 方法查找数组中第一个大于 10 的数字
- 输入示例：
[2, 5, 8, 12, 15, 7]
- 输出示例：
12

12. 完成如下任务
- 题目描述：
使用 findIndex() 方法查找数组中第一个负数的索引位置
- 输入示例：
[1, 5, 3, -2, 8, -5]
- 输出示例：
3

13. 完成如下任务
- 题目描述：
使用 some() 方法判断数组中是否存在偶数
- 输入示例：
[1, 3, 5, 7, 8]
- 输出示例：
true

14. 完成如下任务
- 题目描述：
使用 every() 方法判断数组中的所有数字是否都大于 0
- 输入示例：
[1, 2, 3, 4, 5]
- 输出示例：
true

15. 完成如下任务
- 题目描述：
使用 sort() 方法对数字数组进行升序排序（注意：sort 默认按字符串排序）
- 输入示例：
[40, 100, 1, 5, 25, 10]
- 输出示例：
[1, 5, 10, 25, 40, 100]

16. 完成如下任务
- 题目描述：
对对象数组按指定属性排序，使用 sort() 方法按学生年龄从小到大排序
- 输入示例：
[{name: "小明", age: 20}, {name: "小红", age: 18}, {name: "小刚", age: 22}]
- 输出示例：
[{name: "小红", age: 18}, {name: "小明", age: 20}, {name: "小刚", age: 22}]

17. 完成如下任务
- 题目描述：
使用 forEach() 方法遍历数组，输出每个元素及其索引
- 输入示例：
['apple', 'banana', 'orange']
- 输出示例：
索引0: apple
索引1: banana
索引2: orange

18. 完成如下任务
- 题目描述：
使用 reduce() 方法将数组扁平化（数组降维）
- 输入示例：
[[1, 2], [3, 4], [5, 6]]
- 输出示例：
[1, 2, 3, 4, 5, 6]

19. 完成如下任务
- 题目描述：
使用 reduce() 方法统计数组中每个元素出现的次数
- 输入示例：
['apple', 'banana', 'apple', 'orange', 'banana', 'apple']
- 输出示例：
{ apple: 3, banana: 2, orange: 1 }

20. 完成如下任务
- 题目描述：
链式调用多个数组方法：筛选出价格大于50的商品，然后按价格升序排序，最后只返回商品名称
- 输入示例：
[
  {name: "鼠标", price: 29},
  {name: "键盘", price: 89},
  {name: "显示器", price: 899},
  {name: "耳机", price: 199}
]
- 输出示例：
["键盘", "耳机", "显示器"]

21. 完成如下任务
- 题目描述：
使用 map() 和 filter() 组合：将数组中的数字先乘以 2，再筛选出大于 10 的数字
- 输入示例：
[2, 5, 8, 3, 9]
- 输出示例：
[16, 18]

22. 完成如下任务
- 题目描述：
使用 reduce() 实现数组去重
- 输入示例：
[1, 2, 2, 3, 4, 4, 5, 1]
- 输出示例：
[1, 2, 3, 4, 5]

23. 完成如下任务
- 题目描述：
使用数组高阶函数计算学生的平均分
- 输入示例：
[
  {name: "小明", score: 85},
  {name: "小红", score: 92},
  {name: "小刚", score: 78},
  {name: "小丽", score: 88}
]
- 输出示例：
85.75

24. 完成如下任务
- 题目描述：
使用 filter() 和 map() 实现数据转换：从用户数组中筛选出成年人，并返回他们的姓名和年龄组成的字符串数组
- 输入示例：
[
  {name: "张三", age: 17},
  {name: "李四", age: 20},
  {name: "王五", age: 25},
  {name: "赵六", age: 16}
]
- 输出示例：
["李四(20岁)", "王五(25岁)"]

### 函数

1. 完成如下任务
- 题目描述：
编写一个函数 greet，接收一个名字参数，返回问候语 "你好，XXX！"
- 输入示例：
"小明"
- 输出示例：
"你好，小明！"

2. 完成如下任务
- 题目描述：
编写一个函数 max，接收两个数字参数，返回较大的那个数
- 输入示例：
15, 23
- 输出示例：
23

3. 完成如下任务
- 题目描述：
编写一个函数 calculateArea，可以计算矩形面积（两个参数）或正方形面积（一个参数），使用默认参数实现
- 输入示例：
5, 10 或 5
- 输出示例：
50 或 25

4. 完成如下任务
- 题目描述：
编写一个箭头函数 filterEven，接收一个数组，返回所有偶数组成的新数组
- 输入示例：
[1, 2, 3, 4, 5, 6]
- 输出示例：
[2, 4, 6]

5. 完成如下任务
- 题目描述：
编写一个函数 sumAll，使用剩余参数接收任意数量的数字，返回它们的总和
- 输入示例：
1, 2, 3, 4, 5
- 输出示例：
15

6. 完成如下任务
- 题目描述：
理解函数声明和函数表达式的区别，分别创建并调用
- 输出示例：
函数声明可以在定义前调用（函数提升）
函数表达式只能在定义后调用

7. 完成如下任务
- 题目描述：
编写一个闭包函数，创建一个计数器，每次调用返回递增的数字
- 输出示例：
第一次调用: 1
第二次调用: 2
第三次调用: 3

8. 完成如下任务
- 题目描述：
理解函数作用域，演示全局变量和局部变量的区别
- 输出示例：
局部变量只在函数内部可访问
全局变量在任何地方都可访问

9. 完成如下任务
- 题目描述：
编写一个回调函数示例，创建 processArray(arr, callback) 函数，对数组每个元素执行回调操作
- 输入示例：
[1, 2, 3, 4], (num) => num * 2
- 输出示例：
[2, 4, 6, 8]

10. 完成如下任务
- 题目描述：
编写一个递归函数计算阶乘 factorial(n)
- 输入示例：
5
- 输出示例：
120 (因为 5! = 5 × 4 × 3 × 2 × 1 = 120)

11. 完成如下任务
- 题目描述：
编写一个递归函数实现斐波那契数列 fibonacci(n)
- 输入示例：
7
- 输出示例：
13 (斐波那契数列: 0,1,1,2,3,5,8,13...)

12. 完成如下任务
- 题目描述：
使用立即执行函数表达式（IIFE）创建私有变量
- 输出示例：
(function(){ var private = "私有"; })();
外部无法访问 private 变量

13. 完成如下任务
- 题目描述：
编写一个高阶函数，接收一个函数作为参数并返回一个新函数
- 输入示例：
function multiply(x) { return x * 2; }
- 输出示例：
创建一个包装函数，可以在原函数执行前后添加日志

14. 完成如下任务
- 题目描述：
理解箭头函数中的 this 绑定，对比普通函数和箭头函数的 this
- 输出示例：
箭头函数的 this 继承自外层作用域
普通函数的 this 指向调用者

15. 完成如下任务
- 题目描述：
使用函数柯里化（Currying）实现一个加法函数 add(a)(b)
- 输入示例：
add(3)(5)
- 输出示例：
8

16. 完成如下任务
- 题目描述：
编写一个防抖（debounce）函数，延迟执行函数调用
- 输出示例：
用户停止输入500ms后才执行搜索函数

17. 完成如下任务
- 题目描述：
编写一个节流（throttle）函数，限制函数执行频率
- 输出示例：
滚动事件每300ms最多执行一次处理函数

18. 完成如下任务
- 题目描述：
使用解构赋值从函数参数中提取值
- 输入示例：
function getUser({name, age, city}) { }
getUser({name: "张三", age: 25, city: "北京", job: "工程师"})
- 输出示例：
只提取需要的 name, age, city

### 对象

1. 完成如下任务
- 题目描述：
创建一个学生对象 student，包含姓名、年龄、专业三个属性，并输出该对象
- 输出示例：
{ name: "张三", age: 20, major: "软件技术" }

2. 完成如下任务
- 题目描述：
给定一个对象 person，访问并返回其 name 属性和 age 属性的值
- 输入示例：
{ name: "李四", age: 22, city: "北京" }
- 输出示例：
姓名: "李四", 年龄: 22

3. 完成如下任务
- 题目描述：
创建一个商品对象，包含名称、价格、库存，并添加一个方法 getInfo() 返回商品信息字符串
- 输出示例：
调用 getInfo() 返回: "商品：手机，价格：2999元，库存：50件"

4. 完成如下任务
- 题目描述：
给定一个对象数组 students，筛选出年龄大于18岁的学生
- 输入示例：
[
  { name: "小明", age: 17 },
  { name: "小红", age: 19 },
  { name: "小刚", age: 20 }
]
- 输出示例：
[
  { name: "小红", age: 19 },
  { name: "小刚", age: 20 }
]

5. 完成如下任务
- 题目描述：
使用对象解构，从给定对象中提取 name 和 age 属性
- 输入示例：
{ name: "王五", age: 25, job: "工程师", city: "上海" }
- 输出示例：
name: "王五", age: 25

6. 完成如下任务
- 题目描述：
使用 Object.keys()、Object.values()、Object.entries() 遍历对象
- 输入示例：
{ name: "张三", age: 20, city: "北京" }
- 输出示例：
keys: ["name", "age", "city"]
values: ["张三", 20, "北京"]
entries: [["name", "张三"], ["age", 20], ["city", "北京"]]

7. 完成如下任务
- 题目描述：
使用 Object.assign() 或展开运算符合并多个对象
- 输入示例：
{name: "李四"}, {age: 25}, {city: "上海"}
- 输出示例：
{name: "李四", age: 25, city: "上海"}

8. 完成如下任务
- 题目描述：
实现对象的深拷贝和浅拷贝，理解它们的区别
- 输入示例：
{ name: "张三", profile: { age: 20, city: "北京" } }
- 输出示例：
浅拷贝：只复制第一层
深拷贝：递归复制所有层级

9. 完成如下任务
- 题目描述：
使用 this 关键字，创建一个对象方法访问对象自身的属性
- 输出示例：
```javascript
const person = {
  name: "张三",
  greet() { return `你好，我是${this.name}`; }
}
```

10. 完成如下任务
- 题目描述：
使用构造函数创建对象，理解 new 关键字的作用
- 输出示例：
```javascript
function Person(name, age) {
  this.name = name;
  this.age = age;
}
const p = new Person("李四", 25);
```

11. 完成如下任务
- 题目描述：
使用 ES6 的 class 语法创建类和对象
- 输出示例：
```javascript
class Student {
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }
}
```

12. 完成如下任务
- 题目描述：
为类添加方法，包括实例方法和静态方法
- 输出示例：
实例方法：每个对象都可以调用
静态方法：只能通过类名调用

13. 完成如下任务
- 题目描述：
理解对象的属性描述符，使用 Object.defineProperty() 定义属性
- 输出示例：
设置属性为只读、不可枚举或不可配置

14. 完成如下任务
- 题目描述：
使用 getter 和 setter 控制属性的访问
- 输出示例：
```javascript
const obj = {
  _age: 0,
  get age() { return this._age; },
  set age(value) { this._age = value; }
}
```

15. 完成如下任务
- 题目描述：
实现对象的继承，使用原型链或 class extends
- 输出示例：
子类继承父类的属性和方法

16. 完成如下任务
- 题目描述：
使用 Object.freeze() 和 Object.seal() 控制对象的可修改性
- 输出示例：
freeze：完全冻结，不可修改
seal：密封，可修改现有属性，不可添加删除

17. 完成如下任务
- 题目描述：
检查对象中是否存在某个属性，使用 in 运算符和 hasOwnProperty()
- 输入示例：
{ name: "张三", age: 20 }
- 输出示例：
"name" in obj: true
obj.hasOwnProperty("age"): true

18. 完成如下任务
- 题目描述：
使用计算属性名动态创建对象属性
- 输入示例：
const key = "score";
const student = { [key]: 85 }
- 输出示例：
{ score: 85 }

19. 完成如下任务
- 题目描述：
实现一个简单的对象工厂函数，批量创建相似对象
- 输入示例：
createUser("张三", 20), createUser("李四", 25)
- 输出示例：
返回两个用户对象

20. 完成如下任务
- 题目描述：
遍历对象数组，根据某个属性分组（使用 reduce）
- 输入示例：
[
  {name: "张三", dept: "技术部"},
  {name: "李四", dept: "销售部"},
  {name: "王五", dept: "技术部"}
]
- 输出示例：
{
  技术部: [{name: "张三", dept: "技术部"}, {name: "王五", dept: "技术部"}],
  销售部: [{name: "李四", dept: "销售部"}]
}

## 三、DOM 操作

### DOM 基础

1. 完成如下任务
- 题目描述：
使用 getElementById 获取 id 为 "title" 的元素，并在控制台输出该元素
- HTML 结构：
```html
<h1 id="title">欢迎学习JavaScript</h1>
```
- 输出示例：
控制台输出该 h1 元素对象

2. 完成如下任务
- 题目描述：
使用 querySelector 获取 class 为 "item" 的第一个元素
- HTML 结构：
```html
<ul>
  <li class="item">项目1</li>
  <li class="item">项目2</li>
  <li class="item">项目3</li>
</ul>
```
- 输出示例：
返回第一个 li 元素

3. 完成如下任务
- 题目描述：
使用 querySelectorAll 获取所有 class 为 "card" 的元素，并返回元素个数
- HTML 结构：
```html
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
```
- 输出示例：
3

4. 完成如下任务
- 题目描述：
使用 getElementsByClassName 和 getElementsByTagName 获取元素，理解它们返回的 HTMLCollection
- HTML 结构：
```html
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<p>段落</p>
```
- 输出示例：
class为"box"的元素个数: 2，p标签个数: 1

5. 完成如下任务
- 题目描述：
遍历一个 NodeList 或 HTMLCollection，为每个元素添加序号文本
- HTML 结构：
```html
<ul>
  <li>项目</li>
  <li>项目</li>
  <li>项目</li>
</ul>
```
- 输出示例：
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>

6. 完成如下任务
- 题目描述：
理解 DOM 树结构，访问元素的父节点、子节点和兄弟节点
- HTML 结构：
```html
<div id="parent">
  <p id="child1">段落1</p>
  <p id="child2">段落2</p>
</div>
```
- 输出示例：
获取 child1 的父节点、下一个兄弟节点

7. 完成如下任务
- 题目描述：
使用高级选择器，如属性选择器、伪类选择器
- HTML 结构：
```html
<input type="text" name="username">
<input type="password" name="password">
<li>第一项</li>
<li>第二项</li>
```
- 输出示例：
querySelector('input[type="text"]')
querySelector('li:first-child')

8. 完成如下任务
- 题目描述：
理解 NodeList 和 HTMLCollection 的区别，以及静态与动态集合
- 输出示例：
querySelectorAll 返回静态 NodeList
getElementsByClassName 返回动态 HTMLCollection

### 操作元素内容与属性

1. 完成如下任务
- 题目描述：
获取 id 为 "content" 的 div 元素，将其文本内容修改为 "新的内容"
- HTML 结构：
```html
<div id="content">原始内容</div>
```
- 输出示例：
页面显示 "新的内容"

2. 完成如下任务
- 题目描述：
获取 id 为 "link" 的 a 标签，修改其 href 属性为 "https://www.example.com"，并修改文本为 "访问示例网站"
- HTML 结构：
```html
<a id="link" href="#">链接</a>
```
- 输出示例：
<a id="link" href="https://www.example.com">访问示例网站</a>

3. 完成如下任务
- 题目描述：
获取 id 为 "box" 的 div，为其添加 class "highlight"，并设置背景色为黄色
- HTML 结构：
```html
<div id="box">这是一个盒子</div>
```
- 输出示例：
<div id="box" class="highlight" style="background-color: yellow;">这是一个盒子</div>

4. 完成如下任务
- 题目描述：
获取 id 为 "image" 的图片元素，修改其 src 属性和 alt 属性
- HTML 结构：
```html
<img id="image" src="old.jpg" alt="旧图片">
```
- 输出示例：
<img id="image" src="new.jpg" alt="新图片">

5. 完成如下任务
- 题目描述：
使用 innerHTML 和 textContent 的区别，分别设置元素内容并观察效果
- HTML 结构：
```html
<div id="demo1"></div>
<div id="demo2"></div>
```
- 输出示例：
理解 innerHTML 可以解析HTML标签，textContent 只显示纯文本

6. 完成如下任务
- 题目描述：
使用 classList 操作元素的 class，添加、删除、切换类名
- HTML 结构：
```html
<div id="box" class="container">盒子</div>
```
- 输出示例：
box.classList.add('active')
box.classList.remove('container')
box.classList.toggle('show')

7. 完成如下任务
- 题目描述：
使用 dataset 访问和修改 data-* 自定义属性
- HTML 结构：
```html
<div id="user" data-id="123" data-role="admin">用户</div>
```
- 输出示例：
user.dataset.id // "123"
user.dataset.role = "user"

8. 完成如下任务
- 题目描述：
获取和设置表单元素的值（input, textarea, select）
- HTML 结构：
```html
<input type="text" id="username" value="旧值">
<select id="city">
  <option value="bj">北京</option>
  <option value="sh" selected>上海</option>
</select>
```
- 输出示例：
读取和修改表单元素的 value 属性

9. 完成如下任务
- 题目描述：
操作元素的样式，使用 style 属性和 getComputedStyle()
- HTML 结构：
```html
<div id="box" style="width: 100px;">盒子</div>
```
- 输出示例：
设置：box.style.backgroundColor = 'red'
获取：getComputedStyle(box).width

10. 完成如下任务
- 题目描述：
操作布尔属性，如 disabled、checked、selected
- HTML 结构：
```html
<button id="btn">按钮</button>
<input type="checkbox" id="agree">
```
- 输出示例：
btn.disabled = true
agree.checked = true

### 处理用户交互 - 事件

1. 完成如下任务
- 题目描述：
为 id 为 "btn" 的按钮添加点击事件，点击时弹出提示框显示 "按钮被点击了！"
- HTML 结构：
```html
<button id="btn">点击我</button>
```
- 输出示例：
点击按钮后弹出提示框

2. 完成如下任务
- 题目描述：
为 id 为 "input" 的输入框添加输入事件，每次输入时在控制台输出当前输入的内容
- HTML 结构：
```html
<input type="text" id="input" placeholder="请输入内容">
```
- 输出示例：
控制台实时显示输入的内容

3. 完成如下任务
- 题目描述：
为 id 为 "myDiv" 的 div 添加鼠标移入和移出事件，移入时背景变为蓝色，移出时恢复白色
- HTML 结构：
```html
<div id="myDiv" style="width: 200px; height: 200px; background: white;">鼠标移入我</div>
```
- 输出示例：
鼠标移入时 div 背景变蓝，移出时变白

4. 完成如下任务
- 题目描述：
为表单添加提交事件，阻止默认提交行为，并在控制台输出表单数据
- HTML 结构：
```html
<form id="myForm">
  <input type="text" name="username" placeholder="用户名">
  <button type="submit">提交</button>
</form>
```
- 输出示例：
控制台输出表单数据，页面不刷新

5. 完成如下任务
- 题目描述：
理解事件冒泡，为父元素和子元素都添加点击事件，观察触发顺序
- HTML 结构：
```html
<div id="parent" style="padding: 20px; background: lightblue;">
  父元素
  <button id="child">子元素按钮</button>
</div>
```
- 输出示例：
点击子元素时，先触发子元素事件，再触发父元素事件

6. 完成如下任务
- 题目描述：
使用 event.stopPropagation() 阻止事件冒泡
- HTML 结构：
```html
<div id="outer">
  外层
  <div id="inner">内层</div>
</div>
```
- 输出示例：
点击内层时，阻止事件冒泡到外层

7. 完成如下任务
- 题目描述：
使用事件委托优化性能，为父元素添加事件监听，处理子元素的点击
- HTML 结构：
```html
<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>
```
- 输出示例：
只为 ul 添加一个事件监听器，处理所有 li 的点击

8. 完成如下任务
- 题目描述：
获取事件对象的常用属性：target、currentTarget、type、keyCode 等
- 输出示例：
event.target：触发事件的元素
event.currentTarget：绑定事件的元素
event.type：事件类型（如 "click"）

9. 完成如下任务
- 题目描述：
处理键盘事件，监听特定按键（如 Enter、Esc）
- HTML 结构：
```html
<input type="text" id="search" placeholder="按Enter搜索">
```
- 输出示例：
按下 Enter 键时执行搜索

10. 完成如下任务
- 题目描述：
使用 addEventListener 和 removeEventListener 管理事件监听器
- 输出示例：
添加事件监听，之后移除该监听器

11. 完成如下任务
- 题目描述：
处理鼠标事件，获取鼠标位置（clientX, clientY, pageX, pageY）
- 输出示例：
显示鼠标在页面中的坐标

12. 完成如下任务
- 题目描述：
实现拖拽功能，使用 mousedown、mousemove、mouseup 事件
- HTML 结构：
```html
<div id="draggable" style="width:100px;height:100px;background:red;position:absolute;">
  拖拽我
</div>
```
- 输出示例：
可以拖动该元素在页面中移动

### 动态创建与修改DOM

1. 完成如下任务
- 题目描述：
使用 JavaScript 创建一个新的 li 元素，设置文本为 "新项目"，并添加到 id 为 "list" 的 ul 中
- HTML 结构：
```html
<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
</ul>
```
- 输出示例：
```html
<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>新项目</li>
</ul>
```

2. 完成如下任务
- 题目描述：
删除 id 为 "container" 的 div 中的第一个子元素
- HTML 结构：
```html
<div id="container">
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
</div>
```
- 输出示例：
```html
<div id="container">
  <p>段落2</p>
  <p>段落3</p>
</div>
```

3. 完成如下任务
- 题目描述：
创建一个包含图片、标题、描述的卡片元素，并添加到页面的 body 中
- 输出示例：
```html
<div class="card">
  <img src="image.jpg" alt="图片">
  <h3>卡片标题</h3>
  <p>卡片描述内容</p>
</div>
```

4. 完成如下任务
- 题目描述：
克隆 id 为 "template" 的元素，修改克隆后的内容，并添加到页面中
- HTML 结构：
```html
<div id="template">
  <h3>模板标题</h3>
  <p>模板内容</p>
</div>
```
- 输出示例：
页面中出现一个克隆的元素，内容已修改

5. 完成如下任务
- 题目描述：
使用 insertBefore 在指定元素前插入新元素
- HTML 结构：
```html
<ul id="list">
  <li id="item2">项目2</li>
  <li>项目3</li>
</ul>
```
- 输出示例：
在"项目2"前插入"项目1"

6. 完成如下任务
- 题目描述：
使用 replaceChild 替换现有元素
- HTML 结构：
```html
<ul id="list">
  <li id="old">旧项目</li>
</ul>
```
- 输出示例：
将旧项目替换为新项目

7. 完成如下任务
- 题目描述：
批量创建元素，使用 DocumentFragment 优化性能
- 输出示例：
创建100个 li 元素，一次性添加到页面，避免多次重排

8. 完成如下任务
- 题目描述：
动态创建带有属性和样式的复杂元素
- 输出示例：
创建一个包含 class、id、data-* 属性和内联样式的 div

9. 完成如下任务
- 题目描述：
使用模板字符串和 innerHTML 批量创建HTML结构
- 输入示例：
数据数组：[{name: "商品1", price: 99}, {name: "商品2", price: 199}]
- 输出示例：
生成商品卡片列表的HTML

10. 完成如下任务
- 题目描述：
清空容器中的所有子元素（多种方法）
- HTML 结构：
```html
<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>
```
- 输出示例：
方法1：innerHTML = ''
方法2：循环 removeChild
方法3：replaceChildren()

## 四、数据交互与异步编程

### 异步编程入门

1. 完成如下任务
- 题目描述：
使用 setTimeout 创建一个延迟 2 秒后输出 "Hello World" 的程序
- 输出示例：
2秒后控制台输出 "Hello World"

2. 完成如下任务
- 题目描述：
使用 setInterval 创建一个每隔 1 秒输出当前时间的程序，5秒后停止
- 输出示例：
控制台每秒输出时间，5秒后停止

3. 完成如下任务
- 题目描述：
编写一个回调函数示例，模拟异步加载数据：创建函数 loadData(callback)，1秒后调用回调函数并传入数据
- 输出示例：
1秒后输出 "数据加载完成：{ id: 1, name: '商品' }"

4. 完成如下任务
- 题目描述：
创建一个倒计时功能，从10秒倒数到0，每秒更新页面显示
- 输出示例：
页面显示 10、9、8...1、0，然后显示"倒计时结束"

5. 完成如下任务
- 题目描述：
理解同步和异步的区别，编写代码证明 setTimeout 是异步执行的
- 输出示例：
先输出"开始"，再输出"结束"，最后输出"延迟执行"

6. 完成如下任务
- 题目描述：
使用 setTimeout 实现一个简单的异步任务队列
- 输出示例：
任务1 -> 1秒后 -> 任务2 -> 1秒后 -> 任务3

7. 完成如下任务
- 题目描述：
实现一个进度条更新功能，使用 setInterval 模拟进度增长
- 输出示例：
进度从 0% 到 100%，每100ms增加10%

8. 完成如下任务
- 题目描述：
理解回调地狱问题，编写一个嵌套的回调函数示例
- 输出示例：
演示多层嵌套回调的可读性问题

### Promise

1. 完成如下任务
- 题目描述：
创建一个 Promise，模拟异步操作：2秒后成功返回 "操作成功"
- 输出示例：
2秒后输出 "操作成功"

2. 完成如下任务
- 题目描述：
创建一个 Promise，根据传入的参数决定成功或失败，使用 then 和 catch 处理结果
- 输入示例：
true 或 false
- 输出示例：
true: "Promise 成功"
false: "Promise 失败"

3. 完成如下任务
- 题目描述：
使用 Promise.all 同时执行三个异步操作，等待所有操作完成后输出结果数组
- 输出示例：
["结果1", "结果2", "结果3"]

4. 完成如下任务
- 题目描述：
使用 async/await 改写 Promise 代码，实现一个异步函数获取用户信息
- 输出示例：
{ id: 1, name: "张三", age: 20 }

5. 完成如下任务
- 题目描述：
使用 Promise 链式调用（then），依次执行三个异步操作，每个操作依赖前一个的结果
- 输出示例：
步骤1 -> 步骤2 -> 步骤3 -> 最终结果

6. 完成如下任务
- 题目描述：
使用 Promise.race 实现超时控制，如果请求超过3秒则超时
- 输出示例：
Promise.race([fetchData(), timeout(3000)])
先完成的Promise决定最终结果

7. 完成如下任务
- 题目描述：
使用 Promise.allSettled 获取所有Promise的结果，无论成功或失败
- 输入示例：
[promise1, promise2, promise3] （有成功有失败）
- 输出示例：
[
  {status: "fulfilled", value: "成功1"},
  {status: "rejected", reason: "失败"},
  {status: "fulfilled", value: "成功2"}
]

8. 完成如下任务
- 题目描述：
将回调函数风格的代码改写为 Promise 风格（Promise化）
- 输入示例：
setTimeout(callback, 1000)
- 输出示例：
new Promise(resolve => setTimeout(resolve, 1000))

9. 完成如下任务
- 题目描述：
实现 Promise 的错误重试机制，失败后自动重试指定次数
- 输出示例：
最多重试3次，成功则返回，3次都失败则抛出错误

10. 完成如下任务
- 题目描述：
理解微任务和宏任务，观察 Promise 和 setTimeout 的执行顺序
- 输出示例：
同步代码 -> 微任务(Promise) -> 宏任务(setTimeout)

### Fetch Api

1. 完成如下任务
- 题目描述：
使用 Fetch API 从指定 URL 获取 JSON 数据，并在控制台输出
- 输入示例：
'https://api.example.com/users'
- 输出示例：
控制台输出获取的用户数据

2. 完成如下任务
- 题目描述：
使用 Fetch API 发送 POST 请求，提交用户注册信息
- 输入示例：
{ username: "test", password: "123456", email: "test@example.com" }
- 输出示例：
控制台输出服务器响应结果

3. 完成如下任务
- 题目描述：
使用 Fetch API 获取数据，添加错误处理，捕获网络错误或HTTP错误
- 输出示例：
成功时输出数据，失败时输出错误信息

4. 完成如下任务
- 题目描述：
使用 async/await 配合 Fetch 获取数据，并使用 try-catch 处理错误
- 输出示例：
异步获取数据并正确处理可能的错误

5. 完成如下任务
- 题目描述：
使用 Fetch API 上传文件到服务器（模拟 FormData 提交）
- 输入示例：
文件对象 + 其他表单数据
- 输出示例：
成功上传并接收服务器响应

6. 完成如下任务
- 题目描述：
使用 Fetch 设置请求头，如 Authorization、Content-Type
- 输出示例：
```javascript
fetch(url, {
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  }
})
```

7. 完成如下任务
- 题目描述：
实现一个通用的 HTTP 请求封装函数，支持 GET、POST、PUT、DELETE
- 输出示例：
request(url, method, data, headers)

8. 完成如下任务
- 题目描述：
使用 Fetch 实现请求取消（使用 AbortController）
- 输出示例：
const controller = new AbortController();
fetch(url, { signal: controller.signal })
controller.abort(); // 取消请求

9. 完成如下任务
- 题目描述：
处理 Fetch 的响应状态码，区分 200、404、500 等不同情况
- 输出示例：
if (!response.ok) throw new Error(`HTTP ${response.status}`)

10. 完成如下任务
- 题目描述：
使用 Fetch 实现文件下载功能
- 输出示例：
fetch(url).then(res => res.blob()).then(blob => 下载)

### 数据格式：JSON

1. 完成如下任务
- 题目描述：
将 JavaScript 对象转换为 JSON 字符串
- 输入示例：
{ name: "张三", age: 20, hobbies: ["读书", "运动"] }
- 输出示例：
'{"name":"张三","age":20,"hobbies":["读书","运动"]}'

2. 完成如下任务
- 题目描述：
将 JSON 字符串解析为 JavaScript 对象
- 输入示例：
'{"id":1,"title":"学习JavaScript","completed":false}'
- 输出示例：
{ id: 1, title: "学习JavaScript", completed: false }

3. 完成如下任务
- 题目描述：
从服务器获取 JSON 格式的商品列表，解析后提取所有商品名称
- 输入示例：
'[{"id":1,"name":"手机"},{"id":2,"name":"电脑"},{"id":3,"name":"平板"}]'
- 输出示例：
["手机", "电脑", "平板"]

4. 完成如下任务
- 题目描述：
处理嵌套的 JSON 数据，提取指定字段的信息
- 输入示例：
'{"user":{"name":"李四","profile":{"age":25,"city":"北京"}}}'
- 输出示例：
姓名: "李四", 年龄: 25, 城市: "北京"

5. 完成如下任务
- 题目描述：
使用 JSON.stringify 的第三个参数实现格式化输出（美化JSON）
- 输入示例：
{ name: "张三", age: 20, hobbies: ["读书", "运动"] }
- 输出示例：
格式化的JSON字符串，带缩进

6. 完成如下任务
- 题目描述：
使用 JSON.stringify 的第二个参数过滤属性
- 输入示例：
{ name: "张三", age: 20, password: "123456" }
JSON.stringify(obj, ['name', 'age'])
- 输出示例：
只包含 name 和 age 的JSON字符串

7. 完成如下任务
- 题目描述：
处理 JSON 中的特殊值（undefined、函数、Symbol）
- 输入示例：
{ name: "张三", age: undefined, greet: function(){} }
- 输出示例：
JSON.stringify 会忽略 undefined 和函数

8. 完成如下任务
- 题目描述：
实现对象的深拷贝（使用 JSON 方法）
- 输入示例：
{ name: "张三", info: { age: 20, city: "北京" } }
- 输出示例：
JSON.parse(JSON.stringify(obj))
注意：无法复制函数、undefined、Symbol

9. 完成如下任务
- 题目描述：
自定义 JSON 序列化行为（使用 toJSON 方法）
- 输出示例：
```javascript
const obj = {
  name: "张三",
  toJSON() { return { customName: this.name }; }
}
```

10. 完成如下任务
- 题目描述：
从 API 获取 JSON 数据并进行数据清洗和转换
- 输入示例：
API返回的原始数据（可能包含多余字段）
- 输出示例：
提取需要的字段，格式化日期，计算派生值

## 五、jQuery 入门

### jQuery 基础

1. 完成如下任务
- 题目描述：
引入 jQuery 库，使用 $(document).ready() 确保 DOM 加载完成后执行代码，输出 "jQuery 已就绪"
- 输出示例：
页面加载完成后控制台输出 "jQuery 已就绪"

2. 完成如下任务
- 题目描述：
比较 $ 和 jQuery 的使用，验证它们是同一个对象
- 输出示例：
true

3. 完成如下任务
- 题目描述：
使用 jQuery 获取 id 为 "demo" 的元素，并输出该元素的 jQuery 对象
- HTML 结构：
```html
<div id="demo">演示内容</div>
```
- 输出示例：
控制台输出 jQuery 对象

4. 完成如下任务
- 题目描述：
理解 jQuery 对象和原生 DOM 对象的区别，实现两者之间的转换
- 输出示例：
jQuery对象转DOM对象：`$('#demo')[0] 或 $('#demo').get(0)`
DOM对象转jQuery对象：`$(domElement)`

5. 完成如下任务
- 题目描述：
使用 jQuery 的链式调用，一次性完成多个操作
- HTML 结构：
```html
<div id="box">内容</div>
```
- 输出示例：
`$('#box').css('color', 'red').addClass('active').fadeIn()`

### jQuery 选择器与操作

1. 完成如下任务
- 题目描述：
使用 jQuery 选择器选中所有 class 为 "item" 的元素，并修改它们的文本颜色为红色
- HTML 结构：
```html
<p class="item">项目1</p>
<p class="item">项目2</p>
<p class="item">项目3</p>
```
- 输出示例：
所有项目文本变为红色

2. 完成如下任务
- 题目描述：
使用 jQuery 选择所有 li 元素中的第一个和最后一个，分别添加不同的背景色
- HTML 结构：
```html
<ul>
  <li>项1</li>
  <li>项2</li>
  <li>项3</li>
  <li>项4</li>
</ul>
```
- 输出示例：
第一个 li 背景色为蓝色，最后一个为绿色

3. 完成如下任务
- 题目描述：
使用 jQuery 的 .find() 方法查找 id 为 "container" 的 div 中所有的 span 元素，并修改它们的文本
- HTML 结构：
```html
<div id="container">
  <p>段落 <span>文本1</span></p>
  <p>段落 <span>文本2</span></p>
</div>
```
- 输出示例：
所有 span 文本被修改

4. 完成如下任务
- 题目描述：
使用 jQuery 选择器选中所有偶数行的表格行，并为其添加背景色
- HTML 结构：
```html
<table>
  <tr><td>第1行</td></tr>
  <tr><td>第2行</td></tr>
  <tr><td>第3行</td></tr>
  <tr><td>第4行</td></tr>
</table>
```
- 输出示例：
第2、4行有背景色

5. 完成如下任务
- 题目描述：
使用 jQuery 的 .each() 方法遍历元素集合，为每个元素设置不同的内容
- HTML 结构：
```html
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
```
- 输出示例：
第1个item、第2个item、第3个item

### jQuery 事件处理

1. 完成如下任务
- 题目描述：
使用 jQuery 为按钮添加点击事件，点击时改变页面标题
- HTML 结构：
```html
<h1 id="title">原标题</h1>
<button id="changeBtn">改变标题</button>
```
- 输出示例：
点击按钮后标题变为 "新标题"

2. 完成如下任务
- 题目描述：
使用 jQuery 的 .hover() 方法为元素添加鼠标悬停效果
- HTML 结构：
```html
<div id="box" style="width:100px;height:100px;background:gray;">悬停我</div>
```
- 输出示例：
鼠标悬停时背景变色，离开时恢复

3. 完成如下任务
- 题目描述：
使用 jQuery 事件委托，为动态添加的列表项添加点击事件
- HTML 结构：
```html
<ul id="list">
  <li>项目1</li>
</ul>
<button id="addBtn">添加项目</button>
```
- 输出示例：
新添加的列表项也能响应点击事件

4. 完成如下任务
- 题目描述：
使用 jQuery 的 .on() 方法为表单添加提交事件，阻止默认提交并显示输入内容
- HTML 结构：
```html
<form id="myForm">
  <input type="text" id="username" placeholder="用户名">
  <button type="submit">提交</button>
</form>
```
- 输出示例：
表单不刷新，显示输入的用户名

5. 完成如下任务
- 题目描述：
使用 jQuery 的 .off() 方法移除事件监听器
- HTML 结构：
```html
<button id="btn">点击我</button>
<button id="removeBtn">移除事件</button>
```
- 输出示例：
点击"移除事件"后，第一个按钮点击无效

### jQuery 动画与效果

1. 完成如下任务
- 题目描述：
使用 jQuery 的 .hide() 和 .show() 方法实现元素的显示和隐藏
- HTML 结构：
```html
<div id="box">我是一个盒子</div>
<button id="toggleBtn">切换显示</button>
```
- 输出示例：
点击按钮切换盒子的显示状态

2. 完成如下任务
- 题目描述：
使用 jQuery 的 .fadeIn() 和 .fadeOut() 实现淡入淡出效果
- HTML 结构：
```html
<img id="image" src="photo.jpg" alt="图片">
<button id="fadeBtn">淡入淡出</button>
```
- 输出示例：
图片淡入淡出切换

3. 完成如下任务
- 题目描述：
使用 jQuery 的 .slideDown() 和 .slideUp() 实现下拉菜单效果
- HTML 结构：
```html
<button id="menuBtn">菜单</button>
<ul id="menu" style="display:none;">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>
```
- 输出示例：
点击按钮，菜单滑动展开/收起

4. 完成如下任务
- 题目描述：
使用 jQuery 的 .animate() 方法自定义动画，让元素移动并改变大小
- HTML 结构：
```html
<div id="box" style="width:50px;height:50px;background:blue;position:relative;">动画盒子</div>
<button id="animateBtn">开始动画</button>
```
- 输出示例：
盒子向右移动100px，同时宽高变为100px

5. 完成如下任务
- 题目描述：
使用 jQuery 的 .stop() 和 .delay() 方法控制动画的执行
- HTML 结构：
```html
<div id="box" style="width:100px;height:100px;background:green;">盒子</div>
<button id="startBtn">开始</button>
<button id="stopBtn">停止</button>
```
- 输出示例：
点击开始延迟1秒后执行动画，点击停止可中断

### jQuery DOM 操作

1. 完成如下任务
- 题目描述：
使用 jQuery 的 .append() 方法向列表末尾添加新项目
- HTML 结构：
```html
<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
</ul>
<button id="addBtn">添加项目</button>
```
- 输出示例：
点击按钮后列表末尾添加 "新项目"

2. 完成如下任务
- 题目描述：
使用 jQuery 的 .remove() 方法删除指定元素
- HTML 结构：
```html
<div id="container">
  <p class="text">段落1</p>
  <p class="text">段落2</p>
  <p class="special">特殊段落</p>
</div>
<button id="removeBtn">删除特殊段落</button>
```
- 输出示例：
点击按钮删除 class 为 "special" 的段落

3. 完成如下任务
- 题目描述：
使用 jQuery 的 .clone() 方法克隆元素并添加到页面
- HTML 结构：
```html
<div id="original" class="box">原始盒子</div>
<button id="cloneBtn">克隆盒子</button>
```
- 输出示例：
点击按钮后页面出现克隆的盒子

4. 完成如下任务
- 题目描述：
使用 jQuery 的 .wrap() 方法为每个段落包裹一个 div 容器
- HTML 结构：
```html
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
```
- 输出示例：
```html
<div class="wrapper"><p>段落1</p></div>
<div class="wrapper"><p>段落2</p></div>
<div class="wrapper"><p>段落3</p></div>
```

5. 完成如下任务
- 题目描述：
使用 jQuery 的 .attr() 和 .css() 方法批量修改元素属性和样式
- HTML 结构：
```html
<img id="photo" src="old.jpg" width="100">
<button id="updateBtn">更新图片</button>
```
- 输出示例：
点击按钮后图片 src 改变，宽度变为 200px，边框添加

## 六、综合实战与进阶概念

### 本地存储

1. 完成如下任务
- 题目描述：
使用 localStorage 存储用户名，页面刷新后仍能读取
- 输入示例：
"张三"
- 输出示例：
刷新页面后仍显示 "欢迎回来，张三！"

2. 完成如下任务
- 题目描述：
使用 localStorage 存储和读取一个对象（如用户信息）
- 输入示例：
{ name: "李四", age: 20, email: "lisi@example.com" }
- 输出示例：
从 localStorage 读取并显示用户信息

3. 完成如下任务
- 题目描述：
创建一个简单的待办事项列表，使用 localStorage 持久化存储数据
- 输出示例：
添加、删除待办事项后，刷新页面数据不丢失

4. 完成如下任务
- 题目描述：
使用 sessionStorage 实现页面间的数据传递（仅在当前会话有效）
- 输出示例：
在一个页面设置数据，在另一页面读取（关闭浏览器后失效）

5. 完成如下任务
- 题目描述：
实现一个"记住我"功能，使用 localStorage 保存用户登录状态
- 输出示例：
勾选"记住我"后，下次打开页面自动填充用户名

6. 完成如下任务
- 题目描述：
清除 localStorage 中的指定数据或全部数据
- 输出示例：
点击"清除数据"按钮后，localStorage 中的数据被删除

### 错误处理

1. 完成如下任务
- 题目描述：
使用 try-catch 捕获并处理 JSON.parse() 可能产生的错误
- 输入示例：
'{"name": "张三"' (错误的 JSON 格式)
- 输出示例：
输出友好的错误提示："JSON 格式错误，请检查"

2. 完成如下任务
- 题目描述：
创建自定义错误类型，用于特定业务场景的错误处理
- 输出示例：
class ValidationError extends Error，用于表单验证错误

3. 完成如下任务
- 题目描述：
使用 try-catch-finally 处理文件读取操作，确保资源正确释放
- 输出示例：
无论是否出错，finally 块都会执行清理操作

4. 完成如下任务
- 题目描述：
在异步函数中使用 try-catch 处理 async/await 的错误
- 输出示例：
捕获 fetch 请求失败的错误并显示友好提示

5. 完成如下任务
- 题目描述：
使用 throw 语句主动抛出错误，实现参数验证
- 输入示例：
function divide(a, b) - 当 b 为 0 时抛出错误
- 输出示例：
"错误：除数不能为零"

6. 完成如下任务
- 题目描述：
设置全局错误处理器，捕获未处理的错误和 Promise rejections
- 输出示例：
使用 window.onerror 和 window.onunhandledrejection

### 模块化（选做）

1. 完成如下任务
- 题目描述：
使用 ES6 模块语法 export 导出一个函数和一个常量
- 输出示例：
```javascript
// utils.js
export const PI = 3.14159;
export function square(x) { return x * x; }
```

2. 完成如下任务
- 题目描述：
使用 import 语法导入模块中的函数和变量
- 输出示例：
```javascript
// main.js
import { PI, square } from './utils.js';
console.log(square(5)); // 25
```

3. 完成如下任务
- 题目描述：
使用 export default 导出默认模块，并在另一文件中导入
- 输出示例：
```javascript
// calculator.js
export default class Calculator { }
// main.js
import Calculator from './calculator.js';
```

4. 完成如下任务
- 题目描述：
创建一个工具模块，包含多个辅助函数，使用命名导出
- 输出示例：
创建 stringUtils.js，包含 capitalize、trim、reverse 等函数

5. 完成如下任务
- 题目描述：
使用 import * as 语法导入模块的所有导出
- 输出示例：
```javascript
import * as utils from './utils.js';
utils.square(5);
```

6. 完成如下任务
- 题目描述：
重命名导入的模块成员，避免命名冲突
- 输出示例：
```javascript
import { name as userName } from './user.js';
import { name as productName } from './product.js';
```

### 综合实战项目