diff --git "a/\351\255\217\351\212\256\346\263\223/20251110-js\345\237\272\347\241\200\347\254\224\350\256\260.md" "b/\351\255\217\351\212\256\346\263\223/20251110-js\345\237\272\347\241\200\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..7540424bf4a51b8dd84e58cd692f6a55ea154f32 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251110-js\345\237\272\347\241\200\347\254\224\350\256\260.md" @@ -0,0 +1,118 @@ +# JavaScript 基础笔记 + +## 1. 编程语言概述 + +### 1.1 常见编程语言 +- **前端语言**：JavaScript, TypeScript +- **后端语言**：C#, Java, Python, Go, PHP, Swift, Kotlin +- **系统级语言**：C/C++, Rust + +### 1.2 高级语言与低级语言的区别 +- **高级语言**：更接近人类自然语言，易于理解和编写 + - 优势：开发效率高，代码可读性强，跨平台性好 + - 代表：JavaScript, Python, Java, C#等 +- **低级语言**：更接近计算机硬件的语言，如汇编语言和机器语言（二进制代码101101） + - 优势：执行效率高，可直接操作硬件 + - 代表：汇编语言，部分低级功能的C/C++代码 + +## 2. JavaScript 简介 + +### 2.1 JavaScript 的特点 +- **脚本语言**：无需编译，直接由浏览器解释执行 +- **弱类型语言**：变量类型可动态改变 +- **面向对象**：支持对象编程，但基于原型而非类（ES6引入class） +- **事件驱动**：通过事件响应用户操作 +- **跨平台**：可在不同浏览器中运行 + +### 2.2 JavaScript 的组成部分 +- **ECMAScript**：核心语法标准 +- **DOM (Document Object Model)**：文档对象模型，操作网页元素 +- **BOM (Browser Object Model)**：浏览器对象模型，操作浏览器功能 + +## 3. JavaScript 的使用方式 + +### 3.1 内联方式 +将JavaScript代码直接写在HTML标签的事件属性中 + +```html + + + +``` + +### 3.2 嵌入式 +将JavaScript代码写在HTML文件的` + +``` + +**script.js 文件内容：** +```javascript +// 这是外部JavaScript文件 +alert('这是从外部文件加载的JavaScript'); +``` + +## 4. 基本语法 + +### 4.1 变量声明 +```javascript +// 使用var声明变量（函数作用域） +var name = 'JavaScript'; + +// 使用let声明变量（块级作用域，ES6） +let age = 25; + +// 使用const声明常量（块级作用域，ES6） +const PI = 3.14159; +``` + +### 4.2 运算符 +- **算术运算符**：+, -, *, /, %, ++, -- +- **赋值运算符**：=, +=, -=, *=, /=, %= +- **比较运算符**：==, ===, !=, !==, >, <, >=, <= +- **逻辑运算符**：&&, ||, ! + +### 4.3 字符串与转义字符 +在JavaScript中，字符串是最常用的数据类型之一。当我们需要在字符串中包含一些特殊字符时，就需要使用转义字符。 + +#### 4.3.1 转义字符的概念 +转义字符是以反斜杠（\\）开头的特殊字符序列，用于表示那些难以直接输入的字符。 + +#### 4.3.2 常用转义字符列表 + +| 转义字符 | 描述 | 示例 | +|---------|------|------| +| \\ | 反斜杠 | `"\\"` → "\\" | +| \' | 单引号 | `'\'Hello\''` → "'Hello'" | +| \" | 双引号 | `"\"Hello\""` → '"Hello"' | +| \n | 换行符 | `"Hello\nWorld"` → 输出时换行 | +| \t | 制表符 | `"Hello\tWorld"` → 输出时产生Tab空格 | +| \r | 回车符 | `"Hello\rWorld"` → 光标回到行首 | +| \b | 退格符 | `"Hel\blo"` → "Hello" | +| \f | 换页符 | 用于打印机换页 | +| \0 | 空字符 | 表示字符串结束 | + +# 练习 +```html + + + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..f269ea71bcce8074b8147b7053934baf3e9a4499 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251112-js\345\237\272\347\241\200\347\273\203\344\271\240.md" @@ -0,0 +1,44 @@ +# 练习 + +```html + +``` + +# 演示 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116182124947.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..b2318475d248e65461fce655c4b7558cad77ec51 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251113-js\345\276\252\347\216\257\347\273\203\344\271\240.md" @@ -0,0 +1,101 @@ +# 练习 +```html + + + +``` + +# 效果 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116182545752.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" new file mode 100644 index 0000000000000000000000000000000000000000..6846e12b94f4e77095a2b37e60ea394768a8d7b9 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,112 @@ +# 练习 + +```html + + +``` + +# 效果图 + +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251116183031305.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251117-\345\207\275\346\225\260.md" "b/\351\255\217\351\212\256\346\263\223/20251117-\345\207\275\346\225\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..3d7dedc2948a55676f55adf5c64b8eb139255690 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251117-\345\207\275\346\225\260.md" @@ -0,0 +1,69 @@ +# JavaScript 函数笔记 + +## 函数的定义 + +函数是一段可重复使用的代码块，用于执行特定任务。通过函数可以避免重复编写相同的代码，并提高代码的可维护性。 + +### 定义和调用 + +#### 函数的基本概念 +- **函数定义**：创建函数的过程，需要指定函数名、参数和函数体 +- **函数调用**：执行函数的过程，可以在程序的不同位置多次调用同一个函数 +- **形参**：在函数定义时声明的参数，作为占位符 +- **实参**：在函数调用时传递给函数的具体值 + +#### 函数的定义方式 + +1. **函数声明（Function Declaration）** +```javascript +function functionName(parameter1, parameter2) { +} +``` + +2. **函数表达式（Function Expression）** +```javascript +let functionName = function(parameter1, parameter2) { +}; +``` + +3. **箭头函数（Arrow Function）ES6新增** +```javascript +let functionName = (parameter1, parameter2) => { +}; +``` + +#### 函数调用的特点 +- 定义时可指定形参 +- 调用的时候可任意指定实参，也可不指定 +- 实参的数量可以与形参数量不一致 + - 实参多于形参：多余的实参会被忽略 + - 实参少于形参：缺少的形参值为 undefined + +### 返回值 + +- 有 return，则有返回值，而且通常不为 undefined +- 无 return，总是私下返回一个 undefined +- return 语句会立即终止函数的执行，并将结果返回给调用者 + +### 练习 +```html + +``` + +### 效果 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123175607157.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251119-\345\207\275\346\225\260&\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251119-\345\207\275\346\225\260&\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..0095764f44154b7b6e9a777724938eec0090eafa --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251119-\345\207\275\346\225\260&\345\257\271\350\261\241.md" @@ -0,0 +1,332 @@ +# JavaScript 函数与对象笔记 + +## 函数 + +### 1. 函数的嵌套 +函数可以嵌套调用，即在一个函数内部调用另一个函数。 + +```javascript +function a() { + alert('函数a被调用'); +} + +function b() { + a(); +} + +b(); +``` + +### 2. 递归函数 +递归函数是在函数体内调用自己的函数，必须有结束条件防止无限递归。 + +```javascript +function factorial(num) { + if (num <= 1) { + return 1; + } else { + return factorial(num - 1) * num; + } +} + +alert('10!的结果为' + factorial(10)); +``` + +### 3. 内置函数 + +#### 数值处理函数 +```javascript +// 1. parseInt()函数 - 将字符串转换为整数 +let str1 = "123abc"; +document.write(parseInt(str1)); // 输出：123 + +// 2. parseFloat()函数 - 将字符串转换为浮点数 +let str2 = "123.45abc"; +document.write(parseFloat(str2)); // 输出：123.45 + +// 3. isNaN()函数 - 检查值是否为NaN（非数字） +let num1 = 456; +let num2 = "abc"; +document.write(isNaN(num1)); // 输出：false（456是数字） +document.write(isNaN(num2)); // 输出：true（"abc"不是数字） + +// 4. isFinite()函数 - 检查数值是否为有限数 +document.write(isFinite(567)); // 输出：true（567是有限数） +document.write(isFinite(10/0)); // 输出：false（无穷大） +``` + +#### 字符串处理函数 +```javascript +// 1. eval()函数 - 计算字符串表达式的值 +document.write(eval("5+7")); // 输出：12 +eval("let x=7, y=9; document.write(x*y)"); // 输出：63 + +// 2. encodeURI()函数 - 对URL进行编码 +let url = "https://example.com/search?q=hello world"; +let encodedUrl = encodeURI(url); +document.write(encodedUrl); // 输出编码后的URL + +// 3. decodeURI()函数 - 对已编码的URL进行解码 +document.write(decodeURI(encodedUrl)); // 输出解码后的URL +``` + +### 4. 匿名函数 +匿名函数是没有名称的函数，通常赋值给变量或作为参数传递。 + +```javascript +// 方式一：赋值给变量 +let showMessage = function(message) { + alert(message); +}; +showMessage("Hello World!"); + +// 方式二：使用Function构造函数 +let sum = new Function("x", "y", "return x + y;"); +let result = sum(100, 200); +document.write(result); // 输出：300 + +// 方式三：立即执行函数表达式(IIFE) +(function() { + alert("这是一个立即执行的匿名函数"); +})(); +``` + +## 对象（Object） + +### 1. 什么是对象 +对象是包含属性和方法的数据集合。属性是对象的特征，方法是对象的行为。 + +### 2. 创建对象的方式 + +#### 对象字面量 +```javascript +let person = { + name: "张三", + age: 25, + gender: "男", + sayHello: function() { + alert("你好，我是" + this.name); + } +}; + +// 访问对象属性 +document.write(person.name); +document.write(person["age"]); + +person.sayHello(); +``` +#### 构造函数 +```javascript +function Student(name, age, grade) { + this.name = name; + this.age = age; + this.grade = grade; + this.introduce = function() { + document.write("我是" + this.name + "，今年" + this.age + "岁，" + this.grade + "年级"); + }; +} + +// 创建对象实例 +let student1 = new Student("小明", 12, 6); +let student2 = new Student("小红", 11, 5); +``` + +### 3. 对象的常用操作 + +#### 添加属性 +```javascript +let obj = {}; +obj.newProperty = "新属性值"; +``` + +#### 删除属性 +```javascript +delete obj.propertyName; +``` + +#### 检查属性是否存在 +```javascript +// 方法一：使用in操作符 +if ("name" in person) { + document.write("name属性存在"); +} + +// 方法二：检查属性值是否为undefined +if (person.age !== undefined) { + document.write("age属性存在"); +} +``` + +### 4. 对象遍历 +```javascript +let user = { + name: "李四", + age: 30, + city: "北京" +}; + +// 遍历对象的所有属性 +for (let key in user) { + document.write(key + ": " + user[key] + "
"); +} +``` + +### 练习 +```html + + + + +``` + +### 效果图 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123180811125.png) +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123180824991.png) +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251123180854609.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251120-\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251120-\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..f01c7faf11f750c7451d40f58273c068668d2a33 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251120-\345\257\271\350\261\241.md" @@ -0,0 +1,212 @@ +# JavaScript 对象笔记 + +## 1. 对象的概念 + +对象是一个容器，用来存储相关的数据和功能。 +- **属性**：描述对象特征的数据（如姓名、年龄） +- **方法**：对象能执行的动作（如说话、走路） + +```javascript +// 对象示例 +var person = { + name: "小明", // 属性 + age: 18, // 属性 + sayHi: function() { // 方法 + alert("你好！"); + } +}; +``` + +## 2. 创建对象 + +### 对象字面量（最常用） +```javascript +var 对象名 = { + 属性名1: 属性值1, + 属性名2: 属性值2, + 方法名: function() { + // 方法体 + } +}; +``` + + +## 3. 操作对象 + +### 访问属性（两种方式） +```javascript +var car = { + brand: "丰田", + color: "红色" +}; + +// 方式一 +console.log(car.brand); + +// 方式二 +console.log(car["color"]); +``` + +### 添加属性 +```javascript +var phone = { + brand: "华为" +}; + +phone.price = 3999; // 添加价格属性 +phone["model"] = "P40"; // 添加型号属性 +``` + +### 删除属性 +```javascript +var computer = { + brand: "联想", + price: 5000 +}; + +delete computer.price; // 删除price属性 +``` + +### 添加方法 +```javascript +var calculator = { + // 添加加法方法 + add: function(a, b) { + return a + b; + }, + // 添加减法方法 + subtract: function(a, b) { + return a - b; + } +}; + +// 调用方法 +console.log(calculator.add(5, 3)); // 输出：8 +``` + +## 4. 遍历对象 + +使用 `for...in` 循环遍历对象的所有属性： + +```javascript +var book = { + title: "JavaScript入门", + author: "张老师", + pages: 300 +}; + +// 遍历对象 +for(let key in book) { + console.log(key + ": " + book[key]); +} + +// 输出： +// title: JavaScript入门 +// author: 张老师 +// pages: 300 +``` + +## 5. 常用内置对象 + +### Math对象（数学相关） +```javascript +// 常用方法 +Math.PI // 圆周率 +Math.max(1,2,3) // 最大值：3 +Math.min(1,2,3) // 最小值：1 +Math.random() // 随机数(0-1之间) +Math.floor(3.7) // 向下取整：3 +Math.ceil(3.2) // 向上取整：4 +Math.round(3.5) // 四舍五入：4 +``` + +### Date对象（日期时间相关） +```javascript +// 创建日期对象 +var now = new Date(); // 当前日期时间 +var specificDate = new Date("2025-11-20"); // 指定日期 + +// 常用方法 +now.getFullYear(); // 获取年份 +now.getMonth(); // 获取月份（0-11） +now.getDate(); // 获取日期 +now.getHours(); // 获取小时 +now.getMinutes(); // 获取分钟 +``` + +### Event对象（事件相关） +Event对象包含了事件发生时的相关信息： + +```javascript +// 示例：获取鼠标点击位置 +document.onclick = function(event) { + console.log("X坐标：" + event.clientX); + console.log("Y坐标：" + event.clientY); +}; +``` + +### 练习 +```html + + +``` + +### 效果 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/Video_2025-11-23_181543.gif) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251121-\346\225\260\347\273\204.md" "b/\351\255\217\351\212\256\346\263\223/20251121-\346\225\260\347\273\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..ca45494d333733f8d8ab594e8654843a050fcdc2 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251121-\346\225\260\347\273\204.md" @@ -0,0 +1,33 @@ +## 数组 + +数组是用来存储多个值的变量容器，可以存储不同类型的数据。 + +### 定义数组 + +1. 定义空数组: `arrayObject = new Array();` + +2. 指定数组长度: `arrayObject = new Array(size);` + +3. 指定数组元素: `arrayObject = new Array(element1,element2,element3,...);` + +4. 直接定义数组(最常用的): `arrayObject = [element1,element2,element3,...];` + +### 数组的增删改查 + +1. `push(a,b,c...)` - 在末尾添加元素，返回新长度 + +2. `pop()` - 删除末尾元素，返回删除的元素 + +3. `splice(index, count, item1, item2...)` - 添加/删除元素W + - index: 起始位置 + - count: 删除元素个数(0表示不删除) + - item: 添加的新元素 + +### 数组其他常用方法 + +- `unshift()` - 在开头添加元素 +- `shift()` - 删除开头元素 +- `slice(start, end)` - 提取部分数组 +- `concat()` - 合并数组 +- `indexOf()` - 查找元素索引 +- `length` - 获取数组长度 \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251124-\346\225\260\347\273\204\344\275\234\344\270\232.md" "b/\351\255\217\351\212\256\346\263\223/20251124-\346\225\260\347\273\204\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..01b9312b413fe4ff59aaf4e7bd0b54b74a1f0550 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251124-\346\225\260\347\273\204\344\275\234\344\270\232.md" @@ -0,0 +1,73 @@ +# 练习 +```html + + + + + +``` + +# 效果图 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251130201532796.png) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\351\255\217\351\212\256\346\263\223/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..1b3ea66d53728d80c57773c497b23b34072e7258 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251126-\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" @@ -0,0 +1,52 @@ +# JavaScript正则表达式笔记 + +正则表达式是用来匹配和处理文本的强大工具，在JavaScript中主要用于表单验证、搜索替换和字符串提取等场景。 + +### 创建方式 + +```javascript +// 字面量方式（推荐） +const reg1 = /pattern/flags; + +// 构造函数方式（支持动态构建） +const reg2 = new RegExp('pattern', 'flags'); +``` + +### 常用修饰符 + +- **i**：忽略大小写 +- **g**：全局匹配 +- **m**：多行匹配 + +### 核心元字符 + +| 字符 | 含义 | +| ---- | ----------------------------- | +| `\d` | 数字（0-9） | +| `\w` | 单词字符（字母/数字/下划线） | +| `\s` | 空白字符（空格/制表符等） | +| `.` | 任意字符（除换行符） | + +### 边界符 + +- **`^`**：匹配字符串开始 +- **`$`**：匹配字符串结束 +- **`\b`**：单词边界 + +### 常用量词 + +- **`*`**：0次或多次 +- **`+`**：1次或多次 +- **`?`**：0次或1次 +- **`{n}`**：精确n次 +- **`{n,}`**：至少n次 +- **`{n,m}`**：n到m次 + +### 常用方法 + +- `test()`：检测是否匹配，返回布尔值 +- `exec()`：执行搜索，返回匹配结果 +- `match()`：字符串方法，返回匹配结果 +- `replace()`：字符串替换 +- `search()`：字符串方法，返回匹配位置 +- `split()`：字符串方法，按匹配项分割字符串 \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\350\260\203\350\257\225.md" "b/\351\255\217\351\212\256\346\263\223/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\350\260\203\350\257\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..b5ae9fc4bc356a1fc18bd8cfabbb0428e600a400 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251127-\345\274\202\345\270\270\345\244\204\347\220\206\344\270\216\350\260\203\350\257\225.md" @@ -0,0 +1,171 @@ +# JS异常处理与程序调试笔记 + +### 一、异常处理基础 + +#### 1. 常见异常类型 + +- **语法错误**：代码不符合JS语法规则 +- **运行时错误**：代码逻辑错误导致程序无法继续执行 +- **引用错误**：访问不存在的对象属性或变量 +- **类型错误**：操作类型不匹配 +- **逻辑错误**：程序能运行但结果错误 + +#### 2. 异常处理机制 + +#### try-catch-finally + +```javascript +try { + // 可能出错的代码 +} catch (error) { + // 处理错误 +} finally { + // 无论是否出错都会执行 +} +``` + +- **`error`对象属性**：`name`（错误类型）、`message`（描述）、`stack`（调用栈） +- 嵌套`try-catch`时，优先匹配最近的`catch`块 + +##### throw 自定义异常 + +```javascript +function validateAge(age) { + if (age < 0) throw new Error("年龄不能为负数"); +} +``` + +#### 3. 错误边界（Error Boundaries） + +- 在React等框架中，可通过组件生命周期方法捕获子组件错误 + +### 二、程序调试技巧 + +#### 1. 浏览器开发者工具 + +##### 断点调试 + +1. 在代码行号左侧点击设置断点 +2. 使用调试面板： + - **继续执行**（F8） + - **单步跳过**（F10） + - **单步进入**（F11） + - **查看调用栈**（Call Stack） + - **监视表达式**（Watch） + +##### 控制台调试 + +- `console.log()`：输出变量值 +- `console.error()`：高亮显示错误 +- `console.warn()`：警告信息 +- `console.table()`：表格化显示数据 +- `console.time()`/`timeEnd()`：性能测量 + +#### 2. 常见调试场景 + +##### 变量未定义 + +- 现象：`ReferenceError: x is not defined` +- 解决：检查变量声明和作用域 + +##### 函数未执行 + +- 现象：预期输出未出现 +- 解决： + - 检查函数是否被调用 + - 验证回调函数是否正确传递 + - 使用`debugger`语句强制暂停 + +##### 异步问题 + +- 现象：回调未按预期执行 +- 解决： + - 使用`Promise.then()`/`await`替代回调 + - 验证异步回调函数 + +#### 3. 调试技巧 + +- **二分法**：注释掉一半代码，逐步缩小问题范围 +- **日志法**：在关键位置添加`console.log`输出流程 +- **模拟数据**：使用`mock`数据隔离问题 +- **版本对比**：通过Git对比代码变更 + +# 练习 +```html + + + +

第一题

+ +
+ + +
+

第二题

+ +
+ + + +``` + + +# 效果图 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251130202352457.png) +![](http://t5tdbg5r1.hn-bkt.clouddn.com/20251130202408050.png) +![](http://t5tdbg5r1.hn-bkt.clouddn.com/Video_2025-11-27_130107.gif) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/\351\255\217\351\212\256\346\263\223/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" new file mode 100644 index 0000000000000000000000000000000000000000..b47ce7c3c2752784c1e479572c5a225d898b52a6 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251128-\344\272\213\344\273\266\345\244\204\347\220\206.md" @@ -0,0 +1,211 @@ +# JavaScript 事件处理笔记 + +### 一、事件基础 + +#### 1. 事件类型 + +- **用户交互**：`click`（点击）、`mouseover`（鼠标悬停）、`keydown`（按键） +- **页面变化**：`load`（页面加载完成）、`resize`（窗口大小变化） +- **表单相关**：`submit`（表单提交）、`input`（输入内容变化） + +#### 2. 事件流 + +- **冒泡**：从目标元素向上传播到 `document` +- **捕获**：从 `document` 向下传播到目标元素 + +### 二、事件绑定方式 + +#### 1. HTML 内联式 + +```html + +``` + +**缺点**：HTML 和 JS 混合，难以维护。 + +#### 2. DOM 属性绑定 + +```javascript +const button = document.querySelector('button'); +button.onclick = function() { + // 事件处理逻辑 +}; +``` + +**缺点**：只能绑定一个事件，后绑定的会覆盖之前的。 + +#### 3. `addEventListener`（推荐） + +```javascript +const button = document.querySelector('button'); +button.addEventListener('click', function() { + // 事件处理逻辑 +}); +``` + +**优点**： +- 可绑定多个事件 +- 支持事件流阶段（捕获或冒泡） +- 可移除事件（`removeEventListener`） + +#### 4. 移除事件监听 + +```javascript +const handler = function() { + // 事件处理逻辑 +}; +button.addEventListener('click', handler); +// 移除时需引用相同的函数 +button.removeEventListener('click', handler); +``` + +### 三、事件对象（`event`） + +事件触发时自动传入回调函数，包含事件信息： + +```javascript +element.addEventListener('click', function(event) { + // 事件处理逻辑 +}); +``` + +#### 常用属性和方法 + +- `event.preventDefault()`：阻止默认行为 +- `event.stopPropagation()`：阻止事件冒泡 +- `event.target`：触发事件的元素 +- `event.currentTarget`：绑定事件的元素 + +### 四、事件委托 + +利用事件冒泡，将事件绑定到父元素，通过 `event.target` 判断具体元素： + +```javascript +parentElement.addEventListener('click', function(event) { + if (event.target.matches('selector')) { + // 处理特定子元素的事件 + } +}); +``` + +**优点**：减少事件绑定，动态添加元素时无需重新绑定。 + +### 五、常用事件处理 + +#### 1. 表单事件 + +- `submit`：表单提交 +- `input`：输入内容变化 +- `change`：表单控件值改变 + +#### 2. 键盘事件 + +- `keydown`：按键按下 +- `keyup`：按键释放 +- `keypress`：按键按下（仅字符键） + +#### 3. 鼠标事件 + +- `click`：点击 +- `dblclick`：双击 +- `mouseover`：鼠标悬停 +- `mouseout`：鼠标离开 +- `mousedown`：鼠标按下 +- `mouseup`：鼠标释放 + +### 六、最佳实践 + +> **提示**：优先使用 `addEventListener`，避免直接修改 DOM 属性（如 `onclick`）。 + +# 练习 +```html + + + +``` + +# 效果图 +![](http://t5tdbg5r1.hn-bkt.clouddn.com/Video_2025-11-27_130107~1.gif) \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251201-\344\272\213\344\273\266\345\244\204\347\220\206\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251201-\344\272\213\344\273\266\345\244\204\347\220\206\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..e427ec958958579f5e04dffaed6c6454857f8ef5 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251201-\344\272\213\344\273\266\345\244\204\347\220\206\347\273\203\344\271\240.md" @@ -0,0 +1,70 @@ +# 练习2 + +### 1 +```html + + + + + + Document + + + + + + + + +``` + +### 2 +```html +
+
+ +
这是一段文字 +
+
+ + + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251203-Docment\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251203-Docment\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..ba890460dba659eb734e578d9d6acfb82ebcdc52 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251203-Docment\345\257\271\350\261\241.md" @@ -0,0 +1,228 @@ +# JavaScript Document 对象笔记 + +## 一、基础文档信息 + +### 文档属性 +- `document.title` - 文档标题 +- `document.URL` - 文档URL +- `document.characterSet` - 文档字符集 +- `document.lastModified` - 最后修改时间 +- `document.readyState` - 文档加载状态 + +### 文档结构访问 +- `document.documentElement` - 根元素（HTML） +- `document.head` - 头部元素 +- `document.body` - 主体元素 +- `document.styleSheets` - 所有样式表 + +## 二、元素选择方法 + +| 方法 | 描述 | 返回值类型 | +|------|------|------------| +| `getElementById()` | 通过ID获取元素 | 单个元素 | +| `getElementsByClassName()` | 通过类名获取元素集合 | HTMLCollection | +| `getElementsByTagName()` | 通过标签名获取元素集合 | HTMLCollection | +| `querySelector()` | CSS选择器获取第一个匹配元素 | 单个元素 | +| `querySelectorAll()` | CSS选择器获取所有匹配元素 | NodeList | + +## 三、节点操作方法 + +### 创建节点 +- `createElement()` - 创建HTML元素 +- `createTextNode()` - 创建文本节点 +- `createAttribute()` - 创建属性节点 + +### 插入节点 +- `appendChild()` - 追加到末尾 +- `insertBefore()` - 在指定节点前插入 + +### 删除与替换 +- `removeChild()` - 移除子节点 +- `replaceChild()` - 替换子节点 +- `cloneNode()` - 克隆节点 + +## 四、内容操作方法 + +| 属性 | 描述 | 安全性 | +|------|------|--------| +| `innerHTML` | 获取/设置HTML内容 | 需注意XSS | +| `textContent` | 获取/设置文本内容 | 安全，不解析HTML | +| `innerText` | 获取/设置可见文本内容 | 考虑CSS样式 | + +## 五、属性操作方法 + +### 标准属性操作 +- `setAttribute()` - 设置属性 +- `getAttribute()` - 获取属性 +- `removeAttribute()` - 移除属性 + +### 自定义属性 +- `dataset` - 访问data-*自定义属性 + +### 样式与类名 +- `style` - 操作内联样式 +- `classList` - 操作类名（add/remove/toggle/contains） + +## 六、表单相关 + +### 表单访问 +- `document.forms` - 访问页面中的表单 +- `form.elements` - 访问表单元素 + +### 表单方法 +- `form.submit()` - 提交表单 +- `form.reset()` - 重置表单 +- `event.preventDefault()` - 阻止表单默认提交 + +## 七、事件处理 + +### 事件监听 +- `addEventListener()` - 添加事件监听 +- `removeEventListener()` - 移除事件监听 + +### 事件委托 +- 利用事件冒泡处理动态元素 +- 通过父元素监听子元素事件 + +## 八、节点关系 + +### 节点访问 +- `parentNode` - 父节点 +- `childNodes` - 所有子节点 +- `children` - 元素子节点 +- `firstChild/lastChild` - 第一个/最后一个子节点 +- `previousSibling/nextSibling` - 前一个/后一个兄弟节点 + +### 元素遍历 +- `parentElement` - 父元素 +- `firstElementChild/lastElementChild` - 第一个/最后一个子元素 +- `previousElementSibling/nextElementSibling` - 前一个/后一个兄弟元素 + + +```html +111111 + + +
+ + +``` + +```html + + + +``` +# 练习 +```html + + + +``` + +```html +查看图片 + +
+
+ × + 示例图片 +
+
+ + +``` + +```html + +
+ + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\255\217\351\212\256\346\263\223/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..2a47f8c5c1737d90993c3c3c394efeda9b6084fc --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" @@ -0,0 +1,515 @@ +# JavaScript DOM 笔记 + +## 1. DOM 概述 + +**DOM（Document Object Model）**：HTML 和 XML 文档的编程接口，将文档表示为节点树，允许程序访问和操作文档的内容、结构和样式。 + +### DOM 树结构 +DOM 将文档表示为树形结构，每个部分（元素、属性、文本）都是树上的节点。 + +### DOM 标准化 +DOM 由 W3C 标准化，分为不同级别，现代浏览器支持 DOM Level 3。 + +--- + +## DOM 节点属性 + +### 通用节点属性 +所有 DOM 节点都有的通用属性： +- `nodeName`：节点名称 +- `nodeType`：节点类型 +- `nodeValue`：节点值 +- `parentNode`：父节点 +- `childNodes`：子节点集合 +- `firstChild`：第一个子节点 +- `lastChild`：最后一个子节点 + +### 元素节点属性 +元素节点特有的属性： +- `tagName`：标签名 +- `innerHTML`：HTML内容 +- `textContent`：文本内容 +- `innerText`：内部文本（考虑CSS可见性） +- `attributes`：所有属性 +- `className`：类名 +- `id`：ID属性 + +### 样式相关属性 +- `style`：内联样式对象 +- `classList`：类名列表（add/remove/toggle） +- `getComputedStyle()`：获取计算后的样式 + +--- + +## DOM 节点类型 + +### 节点类型常量 +DOM 定义了12种节点类型： +- `Node.ELEMENT_NODE`：元素节点（1） +- `Node.TEXT_NODE`：文本节点（3） +- `Node.COMMENT_NODE`：注释节点（8） +- `Node.DOCUMENT_NODE`：文档节点（9） +- `Node.DOCUMENT_FRAGMENT_NODE`：文档片段节点（11） + +### 主要节点类型 +- **文档节点**：DOM树的根节点，表示整个文档 +- **元素节点**：表示HTML标签 +- **文本节点**：包含元素的文本内容 +- **属性节点**：表示元素的属性 +- **注释节点**：表示HTML注释 +- **文档片段节点**：轻量级的文档节点，用于批量操作DOM + +--- + +## 获取文档指定元素 + +### 传统获取方法 +| 方法 | 描述 | 返回类型 | +| ------------------------------- | ---------------- | -------------- | +| `getElementById(id)` | 通过ID获取元素 | 单个元素 | +| `getElementsByTagName(tag)` | 通过标签名获取 | HTMLCollection | +| `getElementsByClassName(class)` | 通过类名获取 | HTMLCollection | +| `getElementsByName(name)` | 通过name属性获取 | NodeList | + +### querySelector 方法 +| 方法 | 描述 | 返回类型 | +| ---------------------------- | ------------------ | ---------------- | +| `querySelector(selector)` | 获取第一个匹配元素 | 单个元素 | +| `querySelectorAll(selector)` | 获取所有匹配元素 | NodeList（静态） | + +### 选择器类型 +- **基本选择器**：ID选择器、类选择器、元素选择器 +- **属性选择器**：`[href]`、`[href="#"]`、`[href^="https"]` +- **伪类选择器**：`:hover`、`:checked`、`:nth-child()` +- **组合选择器**：`div.warning`、`ul > li`、`p + img` + +### 遍历节点树 +通过节点关系获取元素： +- **向上遍历**：`parentNode`、`parentElement` +- **向下遍历**：`childNodes`、`children`、`firstChild`、`lastChild` +- **水平遍历**：`previousSibling`、`nextSibling` + +### 节点集合类型 +- **HTMLCollection**：动态集合，DOM变化自动更新 +- **NodeList**：可能是静态或动态的 +- **转换数组**：`Array.from()` 或扩展运算符 `[...]` + +--- + +## 与 DHTML 对应的 DOM 操作 + +### DHTML 概念 +DHTML（Dynamic HTML）是使用 HTML、CSS 和 JavaScript 创建交互式网页的技术。 + +### 动态内容修改 +- 使用 `innerHTML` 直接修改HTML内容 +- 使用 `createElement` 和 `appendChild` 安全创建元素 + +### 动态样式修改 +- 直接设置 `style` 属性 +- 使用 `classList` 操作CSS类 +- 使用 `cssText` 批量修改样式 + +### 动态定位和大小 +- 设置 `position`、`left`、`top` 属性 +- 设置 `width`、`height` 属性 +- 使用 `getBoundingClientRect()` 获取元素位置和尺寸 + +### 显示/隐藏元素 +| 方法 | 效果 | 特点 | +| -------------------- | -------- | ------- | +| `display: none` | 完全隐藏 | 不占位 | +| `visibility: hidden` | 不可见 | 占位 | +| `classList.toggle()` | 切换类名 | CSS控制 | + +### 动态创建和插入 +- `createElement()`：创建新元素 +- `appendChild()`：添加到末尾 +- `insertBefore()`：插入到指定位置 +- `replaceChild()`：替换元素 + +### 事件处理 +- `onclick`：传统事件处理 +- `addEventListener()`：现代事件处理 +- `preventDefault()`：阻止默认行为 +- `stopPropagation()`：停止事件传播 + +### 表单动态操作 +- 访问表单元素：`form.elements[name]` +- 修改字段值：`element.value` +- 设置禁用状态：`element.disabled` +- 动态验证：表单提交事件处理 + +### 动态表格操作 +- `createTHead()`：创建表头 +- `insertRow()`：插入行 +- `insertCell()`：插入单元格 +- 表格数据绑定和事件处理 + +### 动态内容过滤和搜索 +- 实时搜索：根据文本内容过滤显示 +- 动态排序：根据属性值重新排列元素 +- 分页功能：控制显示的数据范围 + +### 动画效果 +- 使用 `requestAnimationFrame` 实现平滑动画 +- 缓动函数：控制动画速度变化 +- 属性动画：动态修改CSS属性值 + +### 拖放功能 +- 鼠标事件：`mousedown`、`mousemove`、`mouseup` +- 位置计算：根据鼠标位置设置元素位置 +- 拖放检测：判断元素是否拖放到目标区域 + +--- + +## DOM 核心方法总结 + +### 创建方法 +| 方法 | 描述 | +| -------------------------- | ------------ | +| `createElement(tag)` | 创建元素 | +| `createTextNode(text)` | 创建文本节点 | +| `createComment(text)` | 创建注释 | +| `createDocumentFragment()` | 创建文档片段 | + +### 查找方法 +| 方法 | 描述 | +| ------------------------- | -------------- | +| `getElementById(id)` | 通过ID查找 | +| `querySelector(selector)` | CSS选择器查找 | +| `parentNode` | 父节点 | +| `children` | 子元素 | +| `previousElementSibling` | 前一个兄弟元素 | +| `nextElementSibling` | 后一个兄弟元素 | + +### 操作方法 +| 方法 | 描述 | +| --------------------------- | ---------- | +| `appendChild(node)` | 添加子节点 | +| `insertBefore(new, ref)` | 插入节点 | +| `removeChild(node)` | 删除子节点 | +| `replaceChild(new, old)` | 替换子节点 | +| `setAttribute(name, value)` | 设置属性 | +| `getAttribute(name)` | 获取属性 | +| `removeAttribute(name)` | 删除属性 | + + +```html + + + + +``` + +```html + +

猜歌名

+

+ 對這個世界 如果你有太多的抱怨
+ 跌倒了就不敢繼續往前走
+ 為什麼人要這麼地脆弱墮落? +

+ + + + +``` + +```html + + + +

最新电影资讯

+
+

+ 1.《金蝉脱壳》两大动作做巨星联手 +

+

+ 2.《阿甘正传》励志而传奇的一生 +

+

+ 3.《爱乐之城》爱情与梦想的交织 +

+

+ 4.《头号玩家》游戏梦想照进现实 +

+
+
+ + + +
+ + + +``` + +```html + + + + +
+ + + + +``` + +```html + + + +

在《倚天屠龙记》中，张三丰是_____派的掌门

+ A.少林 + B.武当 + C.峨眉 + D.昆仑 + + + +``` + +```html +百度一下
+
+
+ + + +``` + +```html + + + +
+ + + +``` + +```html +一生只爱一人
+ 将粗体改为斜体 + + +``` + +```html + + + + + +``` +```html + + +

选择表情

+ + +
+
+ + + +``` diff --git "a/\351\255\217\351\212\256\346\263\223/20251205-window\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\255\217\351\212\256\346\263\223/20251205-window\345\257\271\350\261\241\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..3fa1ab7a02bae0d39c71822e4e1b0e8419a8a0e6 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251205-window\345\257\271\350\261\241\346\250\241\345\236\213.md" @@ -0,0 +1,325 @@ +# Window 对象全面笔记 + +## 1. Window 对象基础 + +### Window 对象 +Window 对象代表浏览器窗口，是 JavaScript 的全局对象，包含所有全局变量、函数和对象。 + +### Window 对象关系 +Window 对象包含以下主要子对象： +- `document`：Document 对象 +- `location`：Location 对象 +- `history`：History 对象 +- `navigator`：Navigator 对象 +- `screen`：Screen 对象 +- `localStorage`：Storage 对象 + +### 全局作用域 +- 在浏览器中，全局作用域就是 Window 对象 +- `var` 声明的变量会成为 window 的属性 +- `let/const` 声明的变量不会成为 window 的属性 +- 严格模式下，全局作用域中的 `this` 为 undefined + +--- + +## 2. 对话框方法 + +### alert() 方法 +显示警告对话框，包含指定消息和"确定"按钮，会阻塞代码执行。 + +### confirm() 方法 +显示确认对话框，包含指定消息和"确定"/"取消"按钮，返回布尔值。 + +### prompt() 方法 +显示提示对话框，包含输入框和"确定"/"取消"按钮，返回输入值或 null。 + +### 对话框方法对比 +| 方法 | 功能 | 返回值 | 特点 | +|------|------|--------|------| +| `alert()` | 警告信息 | undefined | 阻塞执行 | +| `confirm()` | 确认选择 | boolean | true/false | +| `prompt()` | 输入信息 | string/null | 用户输入或取消 | + +--- + +## 3. 窗口的打开与关闭 + +### window.open() 方法 +打开新的浏览器窗口或标签页： +- `window.open(url)`：在新标签页打开 +- `window.open(url, name)`：指定窗口名称 +- `window.open(url, name, features)`：控制窗口特性 + +### 窗口特性参数 +| 参数 | 描述 | 示例值 | +|------|------|--------| +| `width` | 窗口宽度 | `width=800` | +| `height` | 窗口高度 | `height=600` | +| `left` | 左边缘距离 | `left=100` | +| `top` | 上边缘距离 | `top=100` | +| `resizable` | 是否可调整大小 | `resizable=yes` | +| `scrollbars` | 是否显示滚动条 | `scrollbars=yes` | +| `toolbar` | 是否显示工具栏 | `toolbar=no` | + +### window.close() 方法 +关闭当前窗口或指定窗口： +- `window.close()`：关闭当前窗口 +- `openedWindow.close()`：关闭指定窗口 + +### 窗口状态检测 +- `window.closed`：检查窗口是否已关闭 +- 定期检查子窗口状态 +- 窗口间通信限制（同源策略） + +--- + +## 4. 窗口控制 + +### 移动窗口 +| 方法 | 描述 | 适用场景 | +|------|------|----------| +| `window.moveTo(x, y)` | 移动到指定位置 | 脚本打开的窗口 | +| `window.moveBy(dx, dy)` | 相对移动 | 脚本打开的窗口 | + +### 调整窗口大小 +| 方法 | 描述 | 适用场景 | +|------|------|----------| +| `window.resizeTo(w, h)` | 调整到指定尺寸 | 脚本打开的窗口 | +| `window.resizeBy(dw, dh)` | 相对调整尺寸 | 脚本打开的窗口 | + +### 窗口滚动控制 +| 方法 | 描述 | 参数选项 | +|------|------|----------| +| `window.scrollTo(x, y)` | 滚动到指定位置 | `behavior: "smooth"` | +| `window.scrollBy(dx, dy)` | 相对滚动 | `behavior: "smooth"` | +| `element.scrollIntoView()` | 滚动到元素 | `block: "start/center/end"` | + +### 获取滚动位置 +```javascript +{ + x: window.pageXOffset || document.documentElement.scrollLeft, + y: window.pageYOffset || document.documentElement.scrollTop +} +``` + +### 窗口焦点控制 +| 方法 | 描述 | +|------|------| +| `window.focus()` | 设置窗口焦点 | +| `window.blur()` | 使窗口失去焦点 | +| `document.hasFocus()` | 检查是否有焦点 | + +### 焦点事件 +- `focus` 事件：窗口获得焦点 +- `blur` 事件：窗口失去焦点 +- 可用于跟踪用户活跃状态 + +--- + +## 5. 核心概念总结 + +### 安全限制 +- 现代浏览器出于安全考虑，限制脚本对主窗口的控制 +- 大部分窗口控制方法仅适用于脚本打开的窗口 +- 弹出窗口可能被浏览器阻止 + +### 最佳实践 +- 谨慎使用弹出窗口，考虑用户体验 +- 提供明确的用户交互触发窗口操作 +- 处理窗口操作失败的情况 +- 考虑移动端兼容性 + +### 常用场景 +- 对话框交互：alert/confirm/prompt +- 新窗口打开链接：window.open +- 页面内滚动：scrollTo/scrollBy +- 焦点管理：focus/blur事件 +- 窗口状态监控：closed属性检测 + + +# 练习 +```html + +月亮之上 + + + +退出登录 + + +
+
影片1：流浪地球
+
影片2：环太平洋
+
+ +
+ 影片详情图 + +
+ + + + + + + + +
00:00:00
+ + + + + + + + + + + + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\351\255\217\351\212\256\346\263\223/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..85287f2b1781b59e159a4ef9cd542d1020952088 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" @@ -0,0 +1,145 @@ +# 浏览器对象模型 (BOM) + +## 什么是BOM +- Browser Object Model（浏览器对象模型） +- 用于与浏览器窗口进行交互的API +- 不是JavaScript语言的一部分，而是由浏览器厂商实现的功能 +- 核心是window对象，它是所有BOM对象的顶层对象 + +## window对象 +### 基本概念 +- JavaScript中的全局对象 +- 代表浏览器窗口 +- 所有全局变量和函数都成为window的属性和方法 + +### 常用属性和方法 +```javascript +// 窗口尺寸 +window.innerWidth // 窗口内部宽度 +window.innerHeight // 窗口内部高度 + +// 窗口操作 +window.open() // 打开新窗口 +window.close() // 关闭窗口 +window.moveTo() // 移动窗口 +window.resizeTo() // 调整窗口大小 + +// 全局函数（也是window的方法） +window.alert() // 弹出警告框 +window.confirm() // 弹出确认框 +window.prompt() // 弹出输入框 +``` + +## location对象 +### 作用 +- 用于获取和设置当前页面的URL信息 + +### 常用属性 +```javascript +window.location.href // 完整URL +window.location.hostname // 主机名 +window.location.pathname // 路径名 +window.location.protocol // 协议 +window.location.port // 端口号 +``` + +### 常用方法 +```javascript +location.assign("http://example.com") // 加载新页面 +location.replace("http://example.com") // 替换当前页面 +location.reload() // 重新加载页面 +``` + +## navigator对象 +### 作用 +- 包含有关访问者浏览器的信息 + +### 常用属性 +```javascript +navigator.appName // 浏览器名称 +navigator.appVersion // 浏览器版本 +navigator.userAgent // 用户代理字符串 +navigator.platform // 操作系统平台 +navigator.language // 浏览器语言 +navigator.onLine // 是否在线 +navigator.cookieEnabled // cookie是否启用 +``` + +## screen对象 +### 作用 +- 包含有关用户屏幕的信息 + +### 常用属性 +```javascript +screen.width // 屏幕宽度 +screen.height // 屏幕高度 +screen.availWidth // 可用屏幕宽度 +screen.availHeight // 可用屏幕高度 +screen.colorDepth // 颜色深度 +``` + +## history对象 +### 作用 +- 包含浏览器历史记录的信息 + +### 常用方法 +```javascript +history.back() // 后退 +history.forward() // 前进 +history.go(n) // 跳转到历史记录中的特定页面 +``` + +## document对象 +### 说明 +- 虽然属于DOM，但通过window.document访问 +- 代表整个HTML文档 + +### 常用操作 +```javascript +document.title // 文档标题 +document.URL // 文档URL +document.referrer // 来源页面URL +document.domain // 域名 +``` + +## 定时器 +### setTimeout 和 setInterval +```javascript +// 延迟执行 +let timerId = setTimeout(function() { + console.log("延迟执行"); +}, 1000); + +// 重复执行 +let intervalId = setInterval(function() { + console.log("每秒执行一次"); +}, 1000); + +// 清除定时器 +clearTimeout(timerId); +clearInterval(intervalId); +``` + +## 对话框 +### 三种常用对话框 +```javascript +// 警告框 +alert("这是一个警告"); + +// 确认框 +let result = confirm("确定要删除吗？"); +if (result) { + console.log("用户点击了确定"); +} else { + console.log("用户点击了取消"); +} + +// 输入框 +let name = prompt("请输入您的姓名：", "张三"); +console.log("用户输入：" + name); +``` + +## 总结 +- BOM提供了与浏览器窗口交互的对象和方法 +- window对象是BOM的核心，其他对象都是其子对象 +- 掌握BOM有助于创建更丰富的Web应用程序体验 \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251210-Styled\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251210-Styled\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..e43a90e5a5275f5506859c26b72fcf5a5c9d89b6 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251210-Styled\345\257\271\350\261\241.md" @@ -0,0 +1,382 @@ +# Style对象 + +## 什么是Style对象 +- Style对象代表HTML元素的内联样式 +- 通过element.style可以访问和修改元素的CSS样式 +- 只能读写内联样式（style属性中定义的样式），不能读取外部样式表或内部样式块中的样式 + +## Style对象的特点 +1. 属性名使用驼峰命名法（camelCase） +2. 属性值为字符串类型 +3. CSS属性名中的连字符(-)需转换为驼峰命名 + +## 常用CSS属性对照表 + +| CSS属性 | Style对象属性 | +|---------|---------------| +| background-color | backgroundColor | +| border-width | borderWidth | +| font-size | fontSize | +| font-family | fontFamily | +| text-align | textAlign | +| margin-left | marginLeft | +| padding-top | paddingTop | +| z-index | zIndex | +| line-height | lineHeight | + +## 基本用法 + +### 获取和设置样式 +```javascript +// 获取元素 +let element = document.getElementById("myDiv"); + +// 设置单个样式属性 +element.style.backgroundColor = "blue"; +element.style.fontSize = "20px"; +element.style.marginTop = "10px"; + +// 获取样式属性值 +let bgColor = element.style.backgroundColor; +let fontSize = element.style.fontSize; +``` + +### 批量设置样式 +```javascript +// 使用cssText属性批量设置 +element.style.cssText = "color: red; font-size: 24px; background-color: yellow;"; + +// 或者逐个设置多个属性 +element.style.color = "red"; +element.style.fontSize = "24px"; +element.style.backgroundColor = "yellow"; +``` + +## 常用样式属性操作 + +### 盒模型相关 +```javascript +// 宽高 +element.style.width = "200px"; +element.style.height = "100px"; + +// 边距 +element.style.margin = "10px"; +element.style.padding = "5px"; + +// 边框 +element.style.border = "1px solid black"; +element.style.borderWidth = "2px"; +element.style.borderColor = "red"; +element.style.borderStyle = "dashed"; +``` + +### 定位相关 +```javascript +// 定位类型 +element.style.position = "absolute"; // absolute, relative, fixed + +// 定位坐标 +element.style.top = "50px"; +element.style.left = "100px"; +element.style.right = "20px"; +element.style.bottom = "30px"; + +// 层级 +element.style.zIndex = "10"; +``` + +### 文本和字体相关 +```javascript +// 颜色 +element.style.color = "#ff0000"; +element.style.backgroundColor = "rgba(0,0,0,0.5)"; + +// 字体 +element.style.fontFamily = "Arial, sans-serif"; +element.style.fontSize = "16px"; +element.style.fontWeight = "bold"; // normal, bold, lighter, bolder 或数字 100-900 + +// 文本对齐 +element.style.textAlign = "center"; // left, center, right +element.style.textDecoration = "underline"; // none, underline, overline, line-through + +// 行高 +element.style.lineHeight = "1.5"; +``` + +### 显示和可见性 +```javascript +// 显示方式 +element.style.display = "block"; // block, inline, inline-block, none + +// 可见性 +element.style.visibility = "visible"; // visible, hidden + +// 透明度 +element.style.opacity = "0.5"; +``` + +## 实际应用示例 + +### 动态改变元素样式 +```javascript +// 鼠标悬停效果 +let button = document.getElementById("myButton"); + +button.addEventListener("mouseenter", function() { + this.style.backgroundColor = "lightblue"; + this.style.transform = "scale(1.1)"; +}); + +button.addEventListener("mouseleave", function() { + this.style.backgroundColor = "white"; + this.style.transform = "scale(1)"; +}); +``` + +### 切换类样式 +```javascript +// 切换显示/隐藏状态 +function toggleVisibility(elementId) { + let element = document.getElementById(elementId); + + if (element.style.display === "none") { + element.style.display = "block"; + } else { + element.style.display = "none"; + } +} +``` + +### 创建动画效果 +```javascript +// 简单的移动动画 +function moveElement(elementId) { + let element = document.getElementById(elementId); + let pos = 0; + let id = setInterval(frame, 10); + + function frame() { + if (pos == 200) { + clearInterval(id); + } else { + pos++; + element.style.left = pos + "px"; + } + } +} +``` + +## 注意事项 + +1. **单位问题**：设置数值型样式时必须包含单位（如px, em, %等） + ```javascript + // 正确 + element.style.width = "100px"; + + // 错误（可能不生效） + element.style.width = 100; + ``` + +2. **优先级**：内联样式具有较高优先级，会覆盖CSS文件中的样式 + +3. **复合属性**：某些CSS复合属性需要拆分为单独的属性来设置 + ```javascript + // 不推荐 + element.style.border = "1px solid red"; + + // 更清晰的方式 + element.style.borderWidth = "1px"; + element.style.borderStyle = "solid"; + element.style.borderColor = "red"; + ``` + +4. **兼容性**：某些CSS3属性可能需要添加浏览器前缀 + ```javascript + element.style.webkitTransform = "rotate(45deg)"; // Chrome/Safari + element.style.mozTransform = "rotate(45deg)"; // Firefox + element.style.transform = "rotate(45deg)"; // 标准语法 + ``` + +## 与其他样式操作方法的区别 + +| 方法 | 特点 | +|------|------| +| element.style | 只操作内联样式 | +| getComputedStyle() | 获取计算后的最终样式（包括CSS文件中的样式） | +| className/classList | 操作元素的CSS类 | + + + +# 作业 + +### 1 +```html +
+ 123 +
+ + + +``` + +### 2 +```html + + +
+
+ + +``` + +### 3 +```html + + + +
+
HTML/CSS讨论区
+
Android讨论区
+
Python讨论区
+
+ + + +``` + +### 4 +```html + + + +
+
+
+
+
+ + + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251211-Form\345\257\271\350\261\241.md" "b/\351\255\217\351\212\256\346\263\223/20251211-Form\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..a9ce367493e8b163e3701a2d3d563b12abf83583 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251211-Form\345\257\271\350\261\241.md" @@ -0,0 +1,534 @@ +# Form对象 + +## 什么是Form对象 +- Form对象代表HTML中的表单元素（`
`标签） +- 是Document对象的一个重要组成部分 +- 用于收集用户输入数据并提交到服务器 +- 提供了访问和操作表单元素的方法和属性 + +## 获取Form对象的方法 +```javascript +// 1. 通过getElementById() +let form = document.getElementById("myForm"); + +// 2. 通过表单名称 +let form = document.forms["formName"]; +// 或者 +let form = document.forms.formName; + +// 3. 通过索引（从0开始） +let form = document.forms[0]; + +// 4. 通过querySelector() +let form = document.querySelector("#myForm"); +``` + +## Form对象的常用属性 + +| 属性 | 描述 | +|------|------| +| action | 表单提交的URL地址 | +| method | 表单提交方法（GET或POST） | +| name | 表单名称 | +| target | 表单提交后在哪里显示响应 | +| elements | 表单中所有控件的集合 | +| length | 表单中控件的数量 | + +```javascript +// 示例 +let form = document.forms[0]; +console.log(form.action); // 获取表单action属性 +console.log(form.method); // 获取表单method属性 +console.log(form.name); // 获取表单名称 +``` + +## Form对象的常用方法 + +| 方法 | 描述 | +|------|------| +| submit() | 提交表单 | +| reset() | 重置表单 | + +```javascript +// 提交表单 +form.submit(); + +// 重置表单 +form.reset(); +``` + +## 访问表单元素 + +### 通过elements集合 +```javascript +let form = document.forms[0]; + +// 通过索引访问 +let firstElement = form.elements[0]; + +// 通过name属性访问 +let usernameInput = form.elements["username"]; + +// 获取元素数量 +let elementCount = form.elements.length; +``` + +### 通过表单元素的name属性直接访问 +```javascript +// 如果表单元素有name="username" +let usernameInput = form.username; +// 或者 +let usernameInput = form["username"]; +``` + +## 表单元素对象 + +### Input元素 +```javascript +let input = form.elements["inputName"]; + +// 常用属性 +input.value // 当前值 +input.type // 类型（text, password, email等） +input.name // 名称 +input.disabled // 是否禁用 +input.readOnly // 是否只读 +input.checked // 对于checkbox/radio是否选中 +``` + +### Select元素 +```javascript +let select = form.elements["selectName"]; + +// 常用属性 +select.options // 所有选项的集合 +select.selectedIndex // 当前选中项的索引 +select.value // 当前选中项的值 +select.length // 选项数量 + +// 获取选中项 +let selectedOption = select.options[select.selectedIndex]; +``` + +### Textarea元素 +```javascript +let textarea = form.elements["textareaName"]; + +// 常用属性 +textarea.value // 当前文本内容 +textarea.name // 名称 +textarea.rows // 行数 +textarea.cols // 列数 +``` + +## 表单事件处理 + +### onSubmit事件 +```javascript +// 方法1：在HTML中指定 +// + +// 方法2：通过JavaScript绑定 +form.onsubmit = function(event) { + // 验证表单 + if (!validateForm()) { + event.preventDefault(); // 阻止表单提交 + return false; + } + // 表单验证通过，正常提交 +}; + +// 方法3：使用addEventListener（推荐） +form.addEventListener("submit", function(event) { + // 验证表单 + if (!validateForm()) { + event.preventDefault(); // 阻止表单提交 + return; + } + // 表单验证通过，正常提交 +}); +``` + +### onReset事件 +```javascript +form.onreset = function() { + return confirm("确定要重置表单吗？"); +}; +``` + +## 表单验证示例 + +```javascript +function validateForm() { + let form = document.forms["myForm"]; + let username = form.elements["username"].value; + let email = form.elements["email"].value; + + // 验证用户名 + if (username == null || username == "") { + alert("用户名不能为空"); + return false; + } + + // 验证邮箱 + let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(email)) { + alert("邮箱格式不正确"); + return false; + } + + return true; // 验证通过 +} +``` + +## 实际应用示例 + +### 动态创建表单 +```javascript +// 创建表单元素 +let form = document.createElement("form"); +form.action = "/submit"; +form.method = "post"; + +// 创建输入框 +let usernameInput = document.createElement("input"); +usernameInput.type = "text"; +usernameInput.name = "username"; +usernameInput.placeholder = "请输入用户名"; + +// 创建提交按钮 +let submitBtn = document.createElement("input"); +submitBtn.type = "submit"; +submitBtn.value = "提交"; + +// 添加元素到表单 +form.appendChild(usernameInput); +form.appendChild(submitBtn); + +// 添加表单到页面 +document.body.appendChild(form); +``` + +### 表单数据序列化 +```javascript +function serializeForm(form) { + let formData = []; + + for (let i = 0; i < form.elements.length; i++) { + let element = form.elements[i]; + + // 跳过没有name属性的元素和禁用的元素 + if (!element.name || element.disabled) { + continue; + } + + // 处理不同类型的元素 + if (element.type === "checkbox" || element.type === "radio") { + if (element.checked) { + formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); + } + } else { + formData.push(encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value)); + } + } + + return formData.join("&"); +} + +// 使用示例 +let form = document.forms[0]; +let serializedData = serializeForm(form); +console.log(serializedData); +``` + +## 使用FormData对象（现代方法） + +```javascript +// 创建FormData对象 +let form = document.forms[0]; +let formData = new FormData(form); + +// 添加额外数据 +formData.append("timestamp", Date.now()); + +// 发送数据到服务器 +fetch("/submit", { + method: "POST", + body: formData +}) +.then(response => response.json()) +.then(data => console.log(data)) +.catch(error => console.error(error)); +``` + +## 常见技巧和注意事项 + +### 1. 禁用提交按钮防止重复提交 +```javascript +form.onsubmit = function() { + let submitBtn = this.querySelector("input[type='submit']"); + submitBtn.disabled = true; + submitBtn.value = "提交中..."; + + // 在一定时间后重新启用按钮（防止网络问题导致一直禁用） + setTimeout(() => { + submitBtn.disabled = false; + submitBtn.value = "提交"; + }, 5000); + + return true; +}; +``` + +### 2. 表单自动填充检测 +```javascript +// 检测表单字段是否被自动填充 +function checkAutofill() { + let inputs = form.querySelectorAll("input"); + inputs.forEach(input => { + if (input.value && !input.classList.contains("filled")) { + input.classList.add("autofilled"); + } + }); +} +``` + +### 3. 表单字段依赖关系 +```javascript +// 根据一个字段的值改变另一个字段的状态 +let countrySelect = form.elements["country"]; +let stateInput = form.elements["state"]; + +countrySelect.onchange = function() { + if (this.value === "USA") { + stateInput.disabled = false; + } else { + stateInput.disabled = true; + stateInput.value = ""; + } +}; +``` + +## 总结 + +Form对象是Web开发中处理用户输入的关键部分。通过JavaScript操作Form对象，我们可以： +1. 获取和设置表单属性 +2. 访问表单中的各个元素 +3. 进行表单验证 +4. 控制表单提交行为 +5. 动态创建和修改表单 + +# 作业 + +```html + +
+
1. 取票功能
+ +
+
+
+
2. 文本区域调整高度
+ + + +
+
+
+
3. 课程选择（最多6门）
+ C语言
+ 机械制图
+ 单片机
+ 自动控制
+ 传感器
+ 高等数学
+ 计算机基础
+ Oracle数据库
+ 商务英语
+ PLC设计基础
+
+
+
+
+
4. 问答题
+

电影《变相怪杰》的主演是谁？

+ 布拉德·皮特
+ 亚当·桑德勒
+ 金凯瑞
+ 杰夫·丹尼尔斯
+ +
+
+
+
+
5. 爱好选择
+ 看电影
+ 听音乐
+ 演奏乐器
+ 打篮球
+ 看书
+ 上网
+ + + +
+
+
+
6. 城市选择
+ 选择省份： + + 选择城市： + +
+ + + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251212-Json.md" "b/\351\255\217\351\212\256\346\263\223/20251212-Json.md" new file mode 100644 index 0000000000000000000000000000000000000000..dc271b79d163cd77b06bd05338b5ed80ee87157c --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251212-Json.md" @@ -0,0 +1,87 @@ +# Promise与JSON + +## JSON (JavaScript Object Notation) +### 什么是JSON +- 轻量级数据交换格式 +- 易于人阅读和编写 +- 易于机器解析和生成 +- 独立于语言的文本格式 + +### JSON语法 +```javascript +// 对象表示 +{"name": "张三", "age": 25, "city": "北京"} + +// 数组表示 +[{"name": "张三"}, {"name": "李四"}] + +// 嵌套结构 +{ + "students": [ + {"name": "张三", "scores": [85, 92, 78]}, + {"name": "李四", "scores": [90, 88, 95]} + ] +} +``` + +### JSON与JS对象转换 +```javascript +// JS对象转JSON字符串 +let obj = {name: "张三", age: 25}; +let jsonStr = JSON.stringify(obj); + +// JSON字符串转JS对象 +let str = '{"name": "张三", "age": 25}'; +let jsonObj = JSON.parse(str); +``` + +## Promise +### 什么是Promise +- 异步编程解决方案 +- 表示一个异步操作最终完成或失败的对象 +- 解决回调地狱问题 + +### Promise状态 +1. Pending（待定）- 初始状态 +2. Fulfilled（已成功）- 操作成功完成 +3. Rejected（已失败）- 操作失败 + +### Promise基本用法 +```javascript +// 创建Promise +let promise = new Promise((resolve, reject) => { + let success = true; + if (success) { + resolve("操作成功"); + } else { + reject("操作失败"); + } +}); + +// 使用Promise +promise + .then(result => console.log(result)) + .catch(error => console.log(error)); +``` + +### Promise链式调用 +```javascript +fetch('/api/data') + .then(response => response.json()) + .then(data => processData(data)) + .then(result => console.log(result)) + .catch(error => console.error(error)); +``` + +### async/await语法 +```javascript +async function fetchData() { + try { + let response = await fetch('/api/data'); + let data = await response.json(); + console.log(data); + } catch (error) { + console.error(error); + } +} +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251215-\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251215-\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..cdc1c3122412eee5cb061a0424f9bf133c2967d6 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251215-\347\273\203\344\271\240.md" @@ -0,0 +1,14 @@ +```html + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251217-jQuery.md" "b/\351\255\217\351\212\256\346\263\223/20251217-jQuery.md" new file mode 100644 index 0000000000000000000000000000000000000000..a07e87dfac6c3d88c1c0defb092ba6ce36845e45 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251217-jQuery.md" @@ -0,0 +1,228 @@ +# jQuery 笔记 + +## 基础概念 +- 轻量级JavaScript库，Write Less, Do More +- 简化DOM操作、事件处理、动画、AJAX + +## 快速开始 +```html + + +``` + +## 选择器 +### 基础选择器 +```javascript +$('#id') // ID选择器 +$('.class') // 类选择器 +$('tag') // 标签选择器 +$('*') // 所有元素 +``` + +### 层级选择器 +```javascript +$('parent child') // 后代元素 +$('parent > child') // 直接子元素 +$('prev + next') // 相邻兄弟 +$('prev ~ siblings') // 所有兄弟 +``` + +### 常用过滤选择器 +```javascript +$('li:first') // 第一个 +$('li:last') // 最后一个 +$('li:eq(2)') // 索引为2 +$('li:even') // 偶数索引 +$('li:odd') // 奇数索引 +$(':checked') // 选中的表单元素 +$(':visible') // 可见元素 +$(':hidden') // 隐藏元素 +``` + +## DOM操作 +### 内容操作 +```javascript +// 获取/设置内容 +$('#el').html() // 获取HTML +$('#el').html('

新内容

') // 设置HTML +$('#el').text() // 获取文本 +$('#el').val() // 获取表单值 +``` + +### 属性操作 +```javascript +// 属性操作 +$('#el').attr('src') // 获取属性 +$('#el').attr('src', 'new.jpg') // 设置属性 +$('#el').removeAttr('title') // 移除属性 + +// 状态操作（表单元素） +$(':checkbox').prop('checked') // 获取选中状态 +$(':checkbox').prop('checked', true) // 设置选中 +``` + +### 样式操作 +```javascript +// CSS样式 +$('#el').css('color') // 获取样式 +$('#el').css('color', 'red') // 设置样式 +$('#el').css({color: 'red', fontSize: '16px'}) // 批量设置 + +// 类操作 +$('#el').addClass('active') // 添加类 +$('#el').removeClass('active') // 移除类 +$('#el').toggleClass('active') // 切换类 +$('#el').hasClass('active') // 判断类 +``` + +### 元素操作 +```javascript +// 创建元素 +const $newEl = $('
新元素
'); + +// 添加元素 +$('#parent').append($newEl) // 末尾添加 +$('#parent').prepend($newEl) // 开头添加 +$('#el').after($newEl) // 之后添加 +$('#el').before($newEl) // 之前添加 + +// 删除元素 +$('#el').remove() // 删除元素 +$('#el').empty() // 清空内容 +``` + +### 遍历元素 +```javascript +// 遍历 +$('li').each(function(index, element) { + console.log(index, $(element).text()); +}); + +// 查找相关元素 +$('#el').parent() // 父元素 +$('#el').parents('selector') // 祖先元素 +$('#el').children() // 子元素 +$('#el').siblings() // 兄弟元素 +$('#el').find('selector') // 后代元素 +``` + +## 事件处理 +### 事件绑定 +```javascript +// 快捷绑定 +$('#btn').click(function() { + console.log('点击事件'); +}); + +// on方法（推荐） +$('#btn').on('click', function() { + console.log('点击事件'); +}); + +// 事件委托 +$('#list').on('click', 'li', function() { + console.log($(this).text()); +}); + +// 多个事件 +$('#input').on({ + focus: function() { $(this).css('border', 'red') }, + blur: function() { $(this).css('border', '#ccc') } +}); +``` + +### 事件解绑与触发 +```javascript +// 解绑事件 +$('#btn').off('click') // 解绑点击事件 +$('#btn').off() // 解绑所有事件 + +// 触发事件 +$('#btn').click() // 触发点击 +$('#btn').trigger('click') // 触发事件 +``` + +### 事件对象 +```javascript +$('#btn').click(function(e) { + e.preventDefault() // 阻止默认行为 + e.stopPropagation() // 阻止冒泡 + console.log(e.target) // 触发元素 +}); +``` + +## 动画效果 +```javascript +// 显示隐藏 +$('#el').show() // 显示 +$('#el').hide() // 隐藏 +$('#el').toggle() // 切换 + +// 淡入淡出 +$('#el').fadeIn() // 淡入 +$('#el').fadeOut() // 淡出 +$('#el').fadeToggle() // 切换 + +// 滑动 +$('#el').slideDown() // 下滑 +$('#el').slideUp() // 上滑 +$('#el').slideToggle() // 切换 + +// 自定义动画 +$('#el').animate({ + left: '200px', + opacity: 0.5 +}, 1000); +``` + +## AJAX请求 +```javascript +// GET请求 +$.get('url', function(data) { + console.log(data); +}); + +// POST请求 +$.post('url', {name: 'value'}, function(data) { + console.log(data); +}); + +// 完整AJAX +$.ajax({ + url: 'api/data', + type: 'GET', + dataType: 'json', + success: function(data) { + console.log(data); + }, + error: function(xhr, status, error) { + console.error(error); + } +}); +``` + +## 实用技巧 +### DOM对象转换 +```javascript +// jQuery转DOM +const domEl = $('#el')[0] +const domEl2 = $('#el').get(0) + +// DOM转jQuery +const $el = $(document.getElementById('el')) +``` + +### 链式调用 +```javascript +$('#el') + .css('color', 'red') + .addClass('active') + .html('新内容') + .click(function() { + alert('点击'); + }); +``` diff --git "a/\351\255\217\351\212\256\346\263\223/20251218-jQuery\345\212\250\347\224\273.md" "b/\351\255\217\351\212\256\346\263\223/20251218-jQuery\345\212\250\347\224\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..149358651027b1a4cc6660c6fa7424e32627a616 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251218-jQuery\345\212\250\347\224\273.md" @@ -0,0 +1,196 @@ +# jQuery 动画与AJAX + +## 动画效果 + +### 基础动画 +```javascript +// 显示隐藏 +$('#el').show(500) // 显示（500ms） +$('#el').hide('slow') // 隐藏（慢速） +$('#el').toggle() // 切换 + +// 滑动效果 +$('#el').slideDown(300) // 下滑显示 +$('#el').slideUp() // 上滑隐藏 +$('#el').slideToggle() // 切换滑动 + +// 淡入淡出 +$('#el').fadeIn() // 淡入 +$('#el').fadeOut() // 淡出 +$('#el').fadeToggle() // 切换淡入淡出 +$('#el').fadeTo(500, 0.5) // 淡到50%透明度 +``` + +### 自定义动画 +```javascript +// 数值型样式动画 +$('#el').animate({ + left: '200px', + width: '300px', + opacity: 0.8 +}, 1000, function() { + // 动画完成回调 + console.log('动画结束'); +}); + +// 动画控制 +$('#el').stop() // 停止动画 +$('#el').delay(500) // 延迟500ms +``` + +### 动画队列 +```javascript +// 链式动画 +$('#el') + .slideDown(500) + .delay(300) + .fadeOut(400) + .fadeIn(400); +``` + +## AJAX操作 + +### 基础请求 +```javascript +// GET请求 +$.get('api/data', {id: 1}, function(res) { + console.log(res); +}, 'json'); + +// POST请求 +$.post('api/add', {name: 'test'}, function(res) { + console.log(res); +}); + +// JSON请求 +$.getJSON('api/json', function(res) { + console.log(res); +}); +``` + +### 完整AJAX配置 +```javascript +$.ajax({ + url: 'api/data', + type: 'GET', + dataType: 'json', + data: {id: 1, name: 'test'}, + timeout: 5000, + beforeSend: function(xhr) { + xhr.setRequestHeader('Token', '123456'); + }, + success: function(res) { + console.log('成功:', res); + }, + error: function(xhr, status, error) { + console.log('失败:', error); + }, + complete: function() { + console.log('请求完成'); + } +}); +``` + +## 工具方法 + +### 数据处理 +```javascript +// 遍历 +$.each([1,2,3], function(index, val) { + console.log(index, val); +}); + +// 类型判断 +$.type('abc') // "string" +$.isArray([]) // true +$.isFunction(function(){}) // true + +// 对象操作 +$.extend({}, {a:1}, {b:2}) // {a:1, b:2} +``` + +### JSON处理 +```javascript +// JSON解析 +const obj = $.parseJSON('{"name":"test"}') + +// 在现代浏览器中也可使用 +const obj2 = JSON.parse('{"name":"test"}') +``` + +## 实用技巧 + +### 动画回调 +```javascript +$('#el').fadeOut(500, function() { + // 动画完成后执行 + $(this).remove(); +}); +``` + +### 链式动画 +```javascript +$('#box') + .animate({left: '100px'}, 500) + .animate({top: '50px'}, 500) + .fadeOut(300); +``` + +### 动画事件 +```javascript +$('#el') + .on('click', function() { + $(this).stop().fadeToggle(); + }) + .on('mouseenter', function() { + $(this).addClass('hover'); + }) + .on('mouseleave', function() { + $(this).removeClass('hover'); + }); +``` + +## 性能优化 + +### 缓存对象 +```javascript +const $elements = $('.items'); // 缓存选择结果 +$elements.hide().fadeIn(500); +``` + +### 批量操作 +```javascript +// 批量动画 +$('.items').each(function(index) { + $(this).delay(index * 100).fadeIn(300); +}); +``` + +### 事件委托 +```javascript +// 动态元素事件处理 +$('#container').on('click', '.item', function() { + $(this).fadeOut(); +}); +``` + +## 兼容性处理 + +### 版本冲突 +```javascript +// 解决$冲突 +const jq = jQuery.noConflict(); +jq('#el').fadeIn(); +``` + +### 浏览器兼容 +```javascript +// 特性检测 +if ($.support.ajax) { + // 支持AJAX + $.get('api/data', function(res) { + console.log(res); + }); +} +``` + diff --git "a/\351\255\217\351\212\256\346\263\223/20251219-js\345\244\215\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251219-js\345\244\215\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..de8bba9d487f0e0c3de52ee1ff6966cd859fc66f --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251219-js\345\244\215\344\271\240.md" @@ -0,0 +1,80 @@ +# js复习 + +### 开发环境与初体验 +- 浏览器控制台（F12）：测试简单代码 +- Node.js：服务器端JavaScript运行环境 +- 基本语法：分号、注释（// 和 /* */） + +### 变量与常量 +```javascript +// 变量（可修改） +let name = "张三"; +var age = 25; + +// 常量（不可修改） +const PI = 3.14159; +``` + +### 数据类型与运算符 +- 基本类型：String、Number、Boolean、Null、Undefined、Symbol +- 引用类型：Object、Array、Function +- 运算符：算术(+,-,*,/)、比较(==,===)、逻辑(&&,||,!) + +### 流程控制 +```javascript +// 条件语句 +if (condition) { /* 代码块 */ } +else if (condition) { /* 代码块 */ } +else { /* 代码块 */ } + +// 循环语句 +for (let i = 0; i < 10; i++) { /* 代码块 */ } +while (condition) { /* 代码块 */ } +do { /* 代码块 */ } while (condition); + +// 分支语句 +switch (expression) { + case value1: /* 代码块 */; break; + default: /* 代码块 */; +} +``` + +## 核心数据结构及用法 + +### 数组 +```javascript +let arr = [1, 2, 3, "a", true]; +arr.push(4); // 末尾添加 +arr.pop(); // 末尾删除 +arr[0] = "new"; // 修改元素 +arr.length; // 数组长度 +``` + +### 函数 +```javascript +// 函数声明 +function add(a, b) { + return a + b; +} + +// 函数表达式 +const multiply = function(a, b) { + return a * b; +}; + +// 箭头函数 +const divide = (a, b) => a / b; +``` + +### 对象 +```javascript +let person = { + name: "张三", + age: 25, + sayHello: function() { + console.log("你好！"); + } +}; +person.name; // 访问属性 +person.sayHello(); // 调用方法 +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251222-\345\215\232\345\256\242.md" "b/\351\255\217\351\212\256\346\263\223/20251222-\345\215\232\345\256\242.md" new file mode 100644 index 0000000000000000000000000000000000000000..7e962b99bcbeb58b84fcb3fb9ba0e5c1214b498d --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251222-\345\215\232\345\256\242.md" @@ -0,0 +1,319 @@ +# 博客增删改查 + +```html + + + + + + 博客列表 + + + +
+

博客列表

+
+ + + +
+
+ + + + + + + + + +
序号标题内容摘要作者发布日期操作
+
+
+ +
+ + + + + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251224-200\347\273\203\344\271\240\351\242\230.md" "b/\351\255\217\351\212\256\346\263\223/20251224-200\347\273\203\344\271\240\351\242\230.md" new file mode 100644 index 0000000000000000000000000000000000000000..cd2f07fc66d9f69b08c3f101ee1e014a0f4ea684 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251224-200\347\273\203\344\271\240\351\242\230.md" @@ -0,0 +1,20 @@ +## 柯理化函数 +```html + +``` \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251225-\345\260\206\347\275\221\351\241\265\345\270\203\347\275\256\345\210\260\346\234\215\345\212\241\345\231\250.md" "b/\351\255\217\351\212\256\346\263\223/20251225-\345\260\206\347\275\221\351\241\265\345\270\203\347\275\256\345\210\260\346\234\215\345\212\241\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..6c68cf3b6ee87c7a0daaf4b1446af74245c6cacd --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251225-\345\260\206\347\275\221\351\241\265\345\270\203\347\275\256\345\210\260\346\234\215\345\212\241\345\231\250.md" @@ -0,0 +1,187 @@ +# 将网页布置到服务器 + +## 一、服务器基础操作 + +### 1. 登录服务器 +```bash +# 使用SSH登录Linux服务器 +ssh root@服务器公网IP + +# 首次登录需要确认服务器指纹 +# 输入yes后，输入服务器密码 +``` + +### 2. 文件和目录操作 +```bash +# 创建文件 +touch 文件名 # 创建空文件 +vim 文件名 # 使用vim创建并编辑文件 + +# 创建文件夹 +mkdir 文件夹名 # 创建单个文件夹 +mkdir -p 路径/文件夹名 # 创建多级文件夹 + +# 切换目录 +cd 目录路径 # 进入指定目录 +cd .. # 返回上一级目录 +cd ~ # 回到用户主目录 + +# 列出目录内容 +ls # 列出当前目录内容 +ls -l # 详细列出文件信息 +ls -la # 显示所有文件（包括隐藏文件） +ls 目录路径 # 列出指定目录内容 + +# 复制文件/目录 +cp 源文件 目标文件 +cp -r 源目录 目标目录 + +# 移动/重命名文件/目录 +mv 源文件 目标文件 +mv 源目录 目标目录 + +# 删除文件/目录 +rm 文件名 # 删除文件 +rm -f 文件名 # 强制删除文件（不提示） +rm -r 目录名 # 删除目录及其内容 +rm -rf 目录名 # 强制删除目录（不提示） +``` + +### 3. 文件内容操作 +```bash +# 查看文件内容 +cat 文件名 # 显示文件全部内容 +head 文件名 # 显示文件前10行 +head -n 20 文件名 # 显示文件前20行 +tail 文件名 # 显示文件后10行 +tail -n 20 文件名 # 显示文件后20行 +tail -f 日志文件 # 实时查看日志文件 + +# 编辑文件 +vim 文件名 # 使用vim编辑器 +nano 文件名 # 使用nano编辑器（更简单） + +# 文件权限设置 +chmod 755 文件名 # 设置文件权限 +chown 用户:组 文件名 # 更改文件所有者 +``` + +## 三、安装和配置Nginx + +### 1. 安装Nginx +```bash +# 更新软件包列表 +apt update + +# 安装Nginx +apt install nginx -y + +# 查看Nginx状态 +systemctl status nginx + +# 启动/停止/重启Nginx +systemctl start nginx +systemctl stop nginx +systemctl restart nginx + +# 设置Nginx开机自启 +systemctl enable nginx +``` + +### 2. 配置Nginx +```bash +# 查看Nginx配置文件位置 +# 主配置文件：/etc/nginx/nginx.conf +# 网站配置文件：/etc/nginx/sites-available/ + +# 创建新的网站配置 +vim /etc/nginx/sites-available/mywebsite + +# 基本配置示例 +server { + listen 80; + server_name 你的域名 或 服务器IP; + + root /var/www/mywebsite; + index index.html index.htm; + + location / { + try_files $uri $uri/ =404; + } +} + +# 启用网站配置 +ln -s /etc/nginx/sites-available/mywebsite /etc/nginx/sites-enabled/ + +# 测试Nginx配置 +nginx -t + +# 重启Nginx使配置生效 +systemctl restart nginx +``` + +## 四、上传网页文件 + +### 1. 使用SCP上传 +```bash +# 上传单个文件 +scp 本地文件路径 root@服务器IP:/目标路径 + +# 上传整个目录 +scp -r 本地目录路径 root@服务器IP:/目标路径 +``` +## 五、域名解析设置 + +### 1. 添加A记录 +1. 登录域名管理后台 +2. 找到域名解析设置 +3. 添加A记录： + - 主机记录：@ 或 www + - 记录类型：A + - 记录值：服务器公网IP + - TTL：默认值（如10分钟） + +### 2. 验证域名解析 +```bash +# 使用ping命令验证 +ping 你的域名 + +# 使用nslookup命令验证 +nslookup 你的域名 +``` + +## 六、网站测试和维护 + +### 1. 访问网站 +- 在浏览器中输入 `http://你的域名` 或 `http://服务器IP` +- 检查网站是否正常显示 + +### 2. 查看网站日志 +```bash +# 访问日志 +tail -f /var/log/nginx/access.log + +# 错误日志 +tail -f /var/log/nginx/error.log +``` + +### 3. 更新网站内容 +- 重新上传修改后的文件 +- 清除浏览器缓存后刷新页面查看效果 + +## 七、常见问题及解决方案 + +### 1. 无法访问网站 +- 检查服务器是否已启动 +- 检查Nginx服务是否运行 +- 检查服务器安全组是否开放80端口 +- 检查域名解析是否生效 + +### 2. 403 Forbidden错误 +- 检查网站目录权限 +- 检查Nginx配置中的root路径是否正确 +- 确保目录中存在index.html文件 + +### 3. 502 Bad Gateway错误 +- 检查Nginx配置是否正确 +- 检查后端服务（如PHP-FPM）是否运行 \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251226-\347\273\231\347\275\221\347\253\231\346\267\273\345\212\240https\350\257\201\344\271\246.md" "b/\351\255\217\351\212\256\346\263\223/20251226-\347\273\231\347\275\221\347\253\231\346\267\273\345\212\240https\350\257\201\344\271\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..e2878c603276eed5ec711189dce845f2f801ecbb --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251226-\347\273\231\347\275\221\347\253\231\346\267\273\345\212\240https\350\257\201\344\271\246.md" @@ -0,0 +1,8 @@ +# 给网站添加https证书 + + +### 看老胡的仓库 + +### 我的网站 +` wuhfly.xyz ` + \ No newline at end of file diff --git "a/\351\255\217\351\212\256\346\263\223/20251229-\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251229-\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..2e471e6f9611ec71c896e97f4c3051ecb48896c3 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251229-\347\273\203\344\271\240.md" @@ -0,0 +1,376 @@ +## 练习 + +```js +//练习4 + function findSameNum(objArr){ + let countObj = {}; + let sameNum = []; + + for(let i = 0;i< objArr.length;i++){ + let currentItem = objArr[i]; + console.log(currentItem); + if(countObj[currentItem]){ + countObj[currentItem] = countObj[currentItem] + 1; + }else{ + countObj[currentItem] = 1; + } + } + + let keys = Object.keys(countObj); + for(let j = 0;j1){ + let numKey = Number(key); + if(!sameNum.includes(numKey)){ + sameNum.push(numKey); + } + } + } + return sameNum; + } + + let arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]; + console.log(findSameNum(arr)); + + //练习5 + function removeArr(arr,item){ + let newArr = []; + + for(let i = 0;i item * 2); + console.log(newNum); + + //练习8 + let arr = [1,2,3,4,5,6,7,8,9]; + let newNum = arr.filter(item => item % 2 == 1); + console.log(newNum); + + //练习9 + let arr = [10, 20, 30, 40, 50]; + let newNum = arr.reduce((a, b) => a + b, 0); + console.log(newNum); + + //练习10 + let arr = [3, 7, 2, 9, 1, 5]; + let newNum = arr.reduce((a, b) => a > b ? a : b, -Infinity); + console.log(newNum); + + //练习11 + let arr = [2, 5, 8, 12, 15, 7]; + let newNum = arr.find(item => item > 10); + console.log(newNum); + + //练习12 + let arr = [1,5,3,-2,8,-5]; + let newNum = arr.findIndex(item => item < 0); + console.log(newNum); + + //练习13 + let arr = [1,3,5,7,8]; + let newNum = arr.some(item => item % 2 == 0); + console.log(newNum); + + //练习14 + let arr = [1,2,3,4,5] + let newNum = arr.every(item => item >0); + console.log(newNum); + + + //练习15 + let arr = [40, 100, 1, 5, 25, 10]; + let newNum = arr.sort((a, b) => a - b); + console.log(newNum); + + //练习16 + let arr = [{ name: "小明", age: 20 }, { name: "小红", age: 18 }, { name: "小刚", age: 22 }]; + let newArr = arr.sort((a,b) => a.age-b.age); + console.log(newArr); + + //练习17 + let arr = ['apple','banana','orange']; + arr.forEach((item,index) =>{ + console.log(`索引${index}:${item}`); + }) + + //练习18 + let arr = [[1,2],[3,4],[5,6]]; + let flatArr = arr.reduce((acc,curr) => { + return acc.concat(curr); + },[]); + console.log(flatArr); + + //练习19 + let arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; + let furit = arr.reduce((acc, curr) => { + if (acc[curr]) { + acc[curr]++; + } else { + acc[curr] = 1; + } + return acc; + }, {}) + console.log(furit); + + // 练习21 + let arr = [2, 5, 8, 3, 9]; + let doubleArr = arr.map(num => num * 2); + let newArr = doubleArr.filter(item => item>10); + console.log(newArr); + + //练习22 + let arr = [1, 2, 2, 3, 4, 4, 5, 1]; + + let newArr = arr.reduce((acc,curr)=>{ + if(!acc.includes(curr)){ + acc.push(curr); + } + return acc; + },[]) + console.log(newArr); + + /* 函数 */ + //练习2 + function max(num1, num2) { + if (num1 < num2) { + num1 = num2; + } + return num1; + } + let num1 = 200; + let num2 = 23; + console.log(max(num1, num2)); + + // 练习4 + let filterEven = arr => arr.filter(num => num%2 == 0); + let arr = [1, 2, 3, 4, 5, 6]; + console.log(filterEven(arr)); + + //练习5 + function sumAll(...number) { + let newNum = number.reduce((acc, curr) => acc + curr, 0); + return newNum; + } + console.log(sumAll(1, 2, 3, 4, 5)); + + //练习7 + function createCount() { + let count = 0; + + return function () { + count++; + return count; + } + } + let counter = createCount(); + + console.log(counter()); + console.log(counter()); + console.log(counter()); + console.log(counter()); + + //练习9 + function processArray(arr, callback) { + let result = []; + for (let i = 0; i < arr.length; i++) { + result.push(callback(arr[i])); + } + return result; + } + + let beforeArr = [1, 2, 3, 4]; + let doubleCallback = (num) => num * 2; + + console.log(processArray(beforeArr, doubleCallback)); + + //练习10 + function factorial(n) { + if (n === 0 || n === 1) { + return 1; + } + return n * factorial(n - 1); + } + console.log(factorial(5)); + + //练习11 + function fibonacci(n) { + if (n === 1) { + return 1; + } + + return (n - 1) + fibonacci(n - 2); + } + console.log(fibonacci(7)); + + /* 对象 */ + //练习1 + const student = { + name : "张三", + age : 20, + major :"软件技术" + }; + console.log(student['name']); + console.log(student.age); + + //练习3 + const product = { + name: '手机', + price: 2999, + count: 50, + getInfo: function () { + return { "商品": this.name, "价格": this.price, "库存": this.count }; + } + }; + + console.log(product.getInfo()); + + //练习4 + const student = [ + { name: "小明", age: 17 }, + { name: "小红", age: 19 }, + { name: "小刚", age: 20 } + ]; + + const adultStudent = student.filter(students => students.age >= 18); + console.log(adultStudent); + + //练习5 + const person = { + name: "王五", + fsdf: 25, + job: "工程师", + city: "上海" + } + const { name, fsdf } = person; + console.log(fsdf); + + //练习6 + const person = { + name: "张三", + age: 20, + city: "北京" + }; + let key = Object.keys(person); + let value = Object.values(person); + let entrie = Object.entries(person); + console.log(key); + console.log(value); + console.log(entrie); + + //练习7 + const personName = {name: "李四"}; + const personAge = {age: 25}; + const personLive = {city: "上海"}; + let assigns = Object.assign(personName,personAge,personLive); + console.log(assigns); + + //练习9 + const person = { + name: "张三", + getName : function(){ + console.log(`你好，我是${this.name}`); + } + } + person.getName(); + + //练习10 + function person(name, age) { + this.name = name; + this.age = age; + } + const p = new person("李四", 25); + console.log(p); + + //练习12 + class student { + constructor(name, grade) { + this.name = name; + this.grade = grade; + } + + personInfo(){ + console.log(`姓名：${this.name},成绩：${this.age}`); + + } + } + student.personInfo(); + + //练习18 + const key = "score"; + const student = { [key]: 85 }; + console.log(student); + + //练习19 + function createUser(name, age) { + return { + name: name, + age: age + }; + } + + const user1 = createUser("张三", 25); + const user2 = createUser("李四", 20); + console.log(user1); + console.log(user2); + + //练习20 + + function groupBy(arr, conduct) { + let newArr = conductArr.reduce((acc, curr) => { + let key = curr[conduct]; + if (!acc[key]) { + acc[key] = []; + } + + acc[key].push(curr); + return acc; + }, {}) + + return newArr; + } + const conductArr = [ + { name: "张三", dept: "技术部" }, + { name: "李四", dept: "销售部" }, + { name: "王五", dept: "技术部" } + ] + let aaa = groupBy(conductArr, 'dept') + console.log(aaa); + + let btn = document.getElementById('btn'); + let agree = document.getElementById('agree'); + btn.disabled = true; + agree.checked = true; + console.log(`btn.disabled = ${btn.disabled} agree.checked = ${agree.checked}`); + + /* 动态创建与修改 */ + //练习1 + function addLi() { + let li = document.createElement('li'); + li.textContent = '新项目'; + let list = document.getElementById('list'); + list.append(li); + } + + //练习2 + function deleteP() { + let container1 = document.getElementById('container'); + let firstP = container1.firstElementChild; + if (firstP) { + firstP.remove(); + } + } +``` diff --git "a/\351\255\217\351\212\256\346\263\223/20251231-\347\273\203\344\271\240.md" "b/\351\255\217\351\212\256\346\263\223/20251231-\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..569064347da87acda2ff32c008ba0288833625e6 --- /dev/null +++ "b/\351\255\217\351\212\256\346\263\223/20251231-\347\273\203\344\271\240.md" @@ -0,0 +1,71 @@ +## 练习 +```js +//练习3 +function createCard() { + let card = document.createElement('div'); + card.className = 'card'; + + let img = document.createElement('img'); + img.src = 'image.jpg'; + img.alt = '图片'; + + let h3 = document.createElement('h3'); + h3.textContent = '卡片标题'; + + let p = document.createElement('p'); + p.textContent = '卡片描述内容'; + + document.body.appendChild(card); + card.appendChild(img); + card.appendChild(h3); + card.appendChild(p); +} + +//练习4 +let template = document.getElementById('template'); +let shallowClone = template.cloneNode(); +let p = document.createElement('p'); +p.textContent = '模版111'; +document.body.appendChild(shallowClone); +shallowClone.appendChild(p); + +//练习5 +function insert(){ + let list = document.getElementById('list'); + let newli = document.createElement('li'); + newli.textContent = '项目1'; + list.insertBefore(newli,list.children[0]); +} + +//练习6 +function replace() { + let list = document.getElementById('list'); + let old = document.getElementById('old'); + let new1 = document.createElement('li'); + new1.textContent = '新项目'; + + list.replaceChild(new1, old); +} + +//练习9 +function shopCard() { + const products = [ + { name: '商品1', price: 99 }, + { name: "商品2", price: 199 } + ] + + let productsHtml = products.map(product => + `

${product.name}

+

${product.price}

` + ) + console.log(productsHtml); + + + let aa = productsHtml.join(''); + + console.log(aa); + + let container = document.getElementById('container'); + container.innerHTML = aa; +} +``` \ No newline at end of file