diff --git "a/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" "b/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..8ba935af5386ddc262791a97ba21d3c736b27ed9 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251110-js\345\234\250html\344\270\255\347\232\204\345\272\224\347\224\250.md" @@ -0,0 +1,80 @@ +## JavaScript在HTML中的三种实现方式 + +### 1.内联时间处理器 +直接在HTML标签的事件属性中嵌入js代码，通过事件触发执行 + +```html + + + +``` + +### 2.内部脚本块 +在HTML文档中通过` + + + + + + + + +``` + +### 3.外部脚本文件 +将js代码单独写入.js文件，再通过` + +``` + +## 练习 + +### 练习1 +```html + + + +``` + + +### 练习2 +```js +function showalert(){ + alert("http://www.mingrisoft.com"); +} +``` +```html + + + + +``` diff --git "a/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" "b/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..6ef0d7b5836887d092795c7950b628263936c4e5 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251112-js\345\237\272\347\241\200.md" @@ -0,0 +1,175 @@ +## 数据类型 +### 数值型 +- 十进制 +- 十六进制 +- 八进制 +- 浮点型数据 +- 特殊值 Infinity + - 如果一个数值超出了js所能表示的最大值的范围，就会输出Infinity +- 特殊值NaN + - 在进行数学运算时产生了未知的结果或错误 + +### 字符串型 +用于表示文本数据 +- 本质：字符的有序集合 +- 用途：存储/传递文本信息 + +**常用操作与方法** +1.基础属性：`length` +返回字符串的字符个数（空格、中文、符号都算1个字符） + +2.字符串拼接 +- 方式1：+运算符 +- 方式2：concat()方法（支持多参数拼接） + +**类型转换** +1.字符串转文字 +`Number(str)`:严格转换 +2.其他类型转字符串 +- `String（value）`:通用转换 +- `value.toSring()`:原始值/对象转字符串 + +### 布尔型 +布尔数据类型只有两个值，true false + +## 常量和变量 + +### 常量 +指在程序运行过程中保持不变的数据 + +### 变量 +变量是指程序中已经命名的存储单元，主要作用是为数据操作提供存储信息的容器。 + +**1.变量的命名** +- 必须以字母或下划线开头 +- 变量名不能包含空格或加号、减号等符号 +- 变量名是严格区分大小写的 +- 不能使用js中的关键字作为变量名 + +**2.变量的声明** +在js中，使用变量前需要先声明变量 +```js +var username; +``` + +**3.变量的赋值** +在声明变量是可以使用（=）对变量进行一个初始化赋值 +```js +var lesson="JavaScript 从入门到入土" +``` + +## 运算符 + +### 算术运算符 + +- `+` +- `-` +- `*` +- `/` +- `%` +- `++`:在使用i之后，使i的值加1。和++i（在使用i之前，先使i的值加1） +- `--`：在使用i之后，使i的值减1。和--i（在使用i之前，先使i的值减1） + +### 比较运算符 + +- `<` +- `>` +- `<=` +- `>=` +- `==`:等于。只根据表面值进行推断，不涉及数据类型 +- `===`:绝对等于，涉及技术类型和表面值 +- `!=` +- `!==` + +## 练习 + +### 练习1 +```html + +``` + +### 练习2 +```html + +
-----------------------------
+ +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115205933394.png) + +### 练习 + +```html + +
-----------------------------
+ +
-----------------------------
+ +
-----------------------------
+ +
-----------------------------
+ +
-----------------------------
+ +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115210240103.png) \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" "b/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" new file mode 100644 index 0000000000000000000000000000000000000000..04cb65fb6fa1a39a1498d1ef7404afed2df8826c --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251113-js\345\237\272\347\241\2002.md" @@ -0,0 +1,90 @@ +## 练习 + +### 练习1 +```html + +``` + +### 练习2 +```html + 请选择你的出生年月： + + + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251116171034379.png) + +### 练习3 +```html + +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" "b/\345\224\220\345\256\207\346\230\212/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..31614b2854fa44b0e7bc89acf536cd2946983129 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251114-\346\265\201\347\250\213\346\216\247\345\210\266\350\257\255\345\217\245.md" @@ -0,0 +1,147 @@ +## 作业 + +### 练习1 +```html + +``` + +### 练习2 +```html + +``` + +### 练习3 +```html + +``` + +### 练习4 +```html + +``` + +### 练习5 +```html + +``` + +### 练习6 +```html + +``` + +### 练习7 +```html + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251115210812857.png) diff --git "a/\345\224\220\345\256\207\346\230\212/20251117-\345\207\275\346\225\2601.md" "b/\345\224\220\345\256\207\346\230\212/20251117-\345\207\275\346\225\2601.md" new file mode 100644 index 0000000000000000000000000000000000000000..8801ba5a01f6f0e404ccab37da312dbec47e94a5 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251117-\345\207\275\346\225\2601.md" @@ -0,0 +1,274 @@ +# JavaScript 函数笔记 + +## 1. 函数定义 + +### 1.1 函数声明 + +**说明：** 使用 function 关键字定义函数，存在函数提升（声明提前），可在定义前调用 + +```javascript +greet(); +function greet() { + console.log("Hello!"); +} +``` + +### 1.2 函数表达式 + +**说明：** 将匿名函数赋值给变量，不存在函数提升，必须先定义后调用 + +```javascript +const greet = function () { + console.log("Hello!"); +}; +greet(); +``` + +### 1.3 箭头函数 + +**说明：** ES6 新增语法，简洁的函数写法，无自己的 this、arguments，不能作为构造函数 + +```javascript +const greet = () => { + console.log("Hello!"); +}; + +const double = num => num * 2; + +const sum = (a, b) => a + b; +``` + +### 1.4 构造函数 + +**说明：** 使用 Function 构造函数动态创建函数，可读性差、性能低，不推荐使用 + +```javascript +const greet = new Function('name', 'console.log("Hello, " + name)'); +greet("张三"); +``` + +## 2. 函数调用 + +### 2.1 直接调用 + +**说明：** 最基础的调用方式，函数名 + 括号，可传递实参 + +```javascript +function sayHello(name) { + console.log(`Hello ${name}!`); +} +sayHello("李四"); +``` + +### 2.2 方法调用 + +**说明：** 函数作为对象的属性（方法），通过对象调用，this 指向该对象 + +```javascript +const person = { + name: "王五", + age: 28, + introduce: function () { + console.log(`我是${this.name}，今年${this.age}岁`); + }, +}; +person.introduce(); +``` + +### 2.3 构造函数调用 + +**说明：** 使用 new 关键字调用函数，创建实例对象，this 指向新创建的实例 + +```javascript +function Person(name, age) { + this.name = name; + this.age = age; + this.sayHi = function () { + console.log(`Hi, 我是${this.name}`); + }; +} +const person1 = new Person("赵六", 30); +person1.sayHi(); +``` + +### 2.4 间接调用 + +#### 2.4.1 call 方法 + +**说明：** 调用函数并指定 this 指向，参数逐个传递 + +```javascript +function introduce(greeting, end) { + console.log(`${greeting}，我是${this.name}${end}`); +} +const user = { name: "孙七" }; +introduce.call(user, "你好", "！"); +``` + +#### 2.4.2 apply 方法 + +**说明：** 调用函数并指定 this 指向，参数以数组形式传递 + +```javascript +introduce.apply(user, ["哈喽", "~"]); +``` + +#### 2.4.3 bind 方法 + +**说明：** 创建新函数，绑定 this 指向，参数可预设，需手动调用新函数 + +```javascript +const bindIntroduce = introduce.bind(user, "嗨"); +bindIntroduce("！"); +``` + +## 3. 函数参数 + +### 3.1 形参和实参 + +**说明：** 形参是函数定义时声明的参数（占位符），实参是调用时传入的具体值；实参数量可与形参不一致 + +```javascript +function add(a, b) { + return a + b; +} +console.log(add(2, 3)); +console.log(add(2)); +console.log(add(2, 3, 4)); +``` + +### 3.2 默认参数 + +**说明：** ES6 支持为形参设置默认值，实参未传递时使用默认值 + +```javascript +function greet(name = "游客", age = 18) { + console.log(`你好${name}，默认年龄${age}`); +} +greet(); +greet("周八"); +greet("吴九", 25); +``` + +### 3.3 剩余参数 + +**说明：** 使用 `...` 语法接收多个剩余实参，转为数组，替代 arguments，更灵活 + +```javascript +function sum(base, ...numbers) { + return base + numbers.reduce((total, num) => total + num, 0); +} +console.log(sum(10, 1, 2, 3)); +``` + +### 3.4 参数解构 + +**说明：** 直接解构对象/数组类型的参数，简化取值操作 + +```javascript +function printUser({ name, age, gender = "未知" }) { + console.log(`姓名：${name}，年龄：${age}，性别：${gender}`); +} +printUser({ name: "郑十", age: 22 }); + +function printScore([chinese, math, english]) { + console.log(`语文：${chinese}，数学：${math}，英语：${english}`); +} +printScore([90, 85, 95]); +``` + +### 3.5 arguments 对象 + +**说明：** 函数内置的类数组对象，包含所有实参，仅在普通函数中可用（箭头函数无） + +```javascript +function showArgs() { + console.log(arguments); + console.log(arguments.length); + const args = Array.from(arguments); + console.log(args); +} +showArgs(1, 2, 3); +``` + +### 3.6 参数传递方式 + +**说明：** 基本类型（字符串、数字、布尔等）按值传递，对象类型（对象、数组、函数）按引用传递 + +```javascript +function changeNum(x) { + x = 100; +} +let num = 10; +changeNum(num); +console.log(num); + +function changeObj(obj) { + obj.name = "修改后的名字"; +} +let obj = { name: "原始名字" }; +changeObj(obj); +console.log(obj.name); + +function reassignObj(obj) { + obj = { name: "新对象" }; +} +reassignObj(obj); +console.log(obj.name); +``` + +## 4. 返回值 + +### 4.1 return 语句 + +**说明：** 使用 return 返回函数执行结果，执行到 return 立即终止函数；无 return 则默认返回 undefined + +```javascript +function multiply(a, b) { + return a * b; + console.log("不会执行"); +} +console.log(multiply(5, 6)); + +function noReturn() { + console.log("仅执行打印"); +} +console.log(noReturn()); + +function checkAge(age) { + if (age < 18) { + return "未成年"; + } + return "成年"; +} +console.log(checkAge(16)); +``` + +## 练习 + +### 练习1 + +```html + + + +``` + +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123182521642.png) +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123182557810.png) diff --git "a/\345\224\220\345\256\207\346\230\212/20251119-\345\207\275\346\225\2602.md" "b/\345\224\220\345\256\207\346\230\212/20251119-\345\207\275\346\225\2602.md" new file mode 100644 index 0000000000000000000000000000000000000000..d6bf62da1bbaa75b747bebbca42d61d77f9c105e --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251119-\345\207\275\346\225\2602.md" @@ -0,0 +1,487 @@ +# JavaScript 高级函数笔记 + +## 1. 函数嵌套调用 + +### 1.1 基本嵌套调用 + +**说明：** 在一个函数内部调用另一个函数 + +```javascript +function add(a, b) { + return a + b; +} + +function multiply(a, b) { + return a * b; +} + +function calculate(a, b) { + const sum = add(a, b); + const product = multiply(a, b); + return { sum, product }; +} + +console.log(calculate(3, 4)); +``` + +### 1.2 链式嵌套 + +**说明：** 一个函数的返回值作为另一个函数的参数 + +```javascript +function double(x) { + return x * 2; +} + +function square(x) { + return x * x; +} + +const result = square(double(5)); +console.log(result); +``` + +### 1.3 多层嵌套 + +**说明：** 多个函数层层嵌套调用 + +```javascript +function formatText(text) { + return text.trim(); +} + +function toUpperCase(text) { + return text.toUpperCase(); +} + +function addExclamation(text) { + return text + "!"; +} + +function processText(text) { + return addExclamation(toUpperCase(formatText(text))); +} + +console.log(processText(" hello ")); +``` + +## 2. 递归函数 + +### 2.1 基本递归 + +**说明：** 函数调用自身，必须有终止条件 + +```javascript +function factorial(n) { + if (n === 1) { + return 1; + } + return n * factorial(n - 1); +} + +console.log(factorial(5)); +``` + +### 2.2 斐波那契数列 + +**说明：** 经典的递归案例，每个数是前两个数之和 + +```javascript +function fibonacci(n) { + if (n <= 1) return n; + return fibonacci(n - 1) + fibonacci(n - 2); +} + +console.log(fibonacci(6)); +``` + +### 2.3 递归遍历数组 + +**说明：** 使用递归处理数组元素 + +```javascript +function sumArray(arr, index = 0) { + if (index >= arr.length) return 0; + return arr[index] + sumArray(arr, index + 1); +} + +console.log(sumArray([1, 2, 3, 4, 5])); +``` + +### 2.4 递归注意事项 + +**说明：** 递归必须有基线条件，否则会栈溢出 + +```javascript +function infiniteRecursion() { + return infiniteRecursion(); +} + +function countdown(n) { + if (n <= 0) { + console.log("结束!"); + return; + } + console.log(n); + countdown(n - 1); +} + +countdown(3); +``` + +## 3. JavaScript 内置函数 + +### 3.1 数学函数 + +**说明：** Math 对象提供的数学计算函数 + +```javascript +console.log(Math.abs(-5)); +console.log(Math.max(1, 5, 3)); +console.log(Math.round(3.7)); +console.log(Math.random()); +``` + +### 3.2 字符串函数 + +**说明：** 字符串处理相关函数 + +```javascript +const str = "Hello World"; +console.log(str.length); +console.log(str.toUpperCase()); +console.log(str.indexOf("World")); +console.log(str.split(" ")); +``` + +### 3.3 数组函数 + +**说明：** 数组操作相关函数 + +```javascript +const arr = [1, 2, 3]; +console.log(arr.push(4)); +console.log(arr.pop()); +console.log(arr.map((x) => x * 2)); +console.log(arr.filter((x) => x > 1)); +``` + +### 3.4 类型转换函数 + +**说明：** 数据类型转换函数 + +```javascript +console.log(Number("123")); +console.log(String(123)); +console.log(Boolean(0)); +console.log(parseInt("100px")); +``` + +### 3.5 时间函数 + +**说明：** 日期和时间相关函数 + +```javascript +const now = new Date(); +console.log(now.getFullYear()); +console.log(now.getMonth() + 1); +console.log(now.getDate()); +console.log(Date.now()); +``` + +## 4. 匿名函数 + +### 4.1 函数表达式 + +**说明：** 没有函数名的函数，赋值给变量 + +```javascript +const greet = function (name) { + return "Hello, " + name; +}; +console.log(greet("Alice")); +``` + +### 4.2 立即执行函数 (IIFE) + +**说明：** 定义后立即执行的匿名函数 + +```javascript +(function () { + console.log("立即执行!"); +})(); + +const result = (function (a, b) { + return a + b; +})(5, 3); +console.log(result); +``` + +### 4.3 回调函数 + +**说明：** 作为参数传递给其他函数的匿名函数 + +```javascript +setTimeout(function () { + console.log("3秒后执行"); +}, 3000); + +const numbers = [1, 2, 3, 4]; +const doubled = numbers.map(function (num) { + return num * 2; +}); +console.log(doubled); +``` + +### 4.4 箭头函数作为匿名函数 + +**说明：** 使用箭头语法定义匿名函数 + +```javascript +const multiply = (a, b) => a * b; +console.log(multiply(4, 5)); + +const numbers = [1, 2, 3]; +const squares = numbers.map((x) => x * x); +console.log(squares); + +(() => { + console.log("箭头函数立即执行!"); +})(); +``` + + +## 练习 + +### 练习3-8 + +```html + + + + + + + + + + + + +
+ +``` + +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183112533.png) +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183125233.png) + + +## 综合练习 + +### 练习1 +```html + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183315876.png) + +### 练习2 + +```html + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183403062.png) + + +### 练习3 + +```html + +``` + +### 斐波那契 + +```html + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123183724092.png) \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251120-\345\206\205\347\275\256\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251120-\345\206\205\347\275\256\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..49b75d7fd1f2661852615c57591b295f1f93ce48 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251120-\345\206\205\347\275\256\345\257\271\350\261\241.md" @@ -0,0 +1,326 @@ +# JavaScript 内置对象用法总结 + +## 1. Math 对象 + +### 1.1 数学常数 + +```javascript +Math.PI; +Math.E; +Math.SQRT2; +``` + +### 1.2 取整方法 + +```javascript +Math.round(4.7); +Math.floor(4.7); +Math.ceil(4.3); +Math.trunc(4.7); +``` + +### 1.3 随机数生成 + +```javascript +Math.random(); +Math.floor(Math.random() * 100); +``` + +### 1.4 最大值最小值 + +```javascript +Math.max(1, 5, 3); +Math.min(1, 5, 3); +``` + +### 1.5 幂和平方根 + +```javascript +Math.pow(2, 3); +Math.sqrt(16); +Math.cbrt(8); +``` + +### 1.6 三角函数 + +```javascript +Math.sin(Math.PI / 2); +Math.cos(Math.PI); +Math.tan(Math.PI / 4); +``` + +## 2. Date 对象 + +### 2.1 创建日期对象 + +```javascript +new Date(); +new Date("2024-01-15"); +new Date(2024, 0, 15); +``` + +### 2.2 获取日期时间 + +```javascript +const now = new Date(); +now.getFullYear(); +now.getMonth(); +now.getDate(); +now.getDay(); +now.getHours(); +now.getMinutes(); +``` + +### 2.3 设置日期时间 + +```javascript +const date = new Date(); +date.setFullYear(2025); +date.setMonth(5); +date.setDate(20); +date.setHours(15, 30, 0); +``` + +### 2.4 日期格式化 + +```javascript +const now = new Date(); +now.toString(); +now.toDateString(); +now.toTimeString(); +now.toLocaleString(); +``` + +### 2.5 时间戳 + +```javascript +const now = new Date(); +now.getTime(); +Date.now(); +``` + +### 2.6 日期计算 + +```javascript +const date1 = new Date("2024-01-01"); +const date2 = new Date("2024-01-15"); +const diff = date2 - date1; +const days = diff / (1000 * 60 * 60 * 24); +``` + +## 3. Event 对象 + +### 3.1 事件监听 + +```javascript +element.addEventListener("click", function (event) { + console.log("元素被点击了"); +}); + +function handleClick(event) { + console.log("点击事件"); +} +element.removeEventListener("click", handleClick); +``` + +### 3.2 事件对象属性 + +```javascript +element.addEventListener("click", function (e) { + e.target; + e.currentTarget; + e.type; + e.clientX; + e.clientY; + e.key; +}); +``` + +### 3.3 阻止默认行为 + +```javascript +link.addEventListener("click", function (e) { + e.preventDefault(); + console.log("阻止了默认跳转行为"); +}); + +form.addEventListener("submit", function (e) { + e.preventDefault(); + console.log("阻止了表单提交"); +}); +``` + +### 3.4 阻止事件冒泡 + +```javascript +child.addEventListener("click", function (e) { + e.stopPropagation(); + console.log("子元素点击，阻止冒泡到父元素"); +}); + +parent.addEventListener("click", function () { + console.log("父元素点击"); +}); +``` + +### 3.5 鼠标事件 + +```javascript +element.addEventListener("click", function (e) { + console.log("单击事件"); +}); + +element.addEventListener("dblclick", function (e) { + console.log("双击事件"); +}); + +element.addEventListener("mouseover", function (e) { + console.log("鼠标移入"); +}); + +element.addEventListener("mouseout", function (e) { + console.log("鼠标移出"); +}); +``` + +### 3.6 键盘事件 + +```javascript +document.addEventListener("keydown", function (e) { + console.log(`按下按键: ${e.key}, 键码: ${e.keyCode}`); +}); + +document.addEventListener("keyup", function (e) { + console.log(`释放按键: ${e.key}`); +}); +``` + +### 3.7 表单事件 + +```javascript +input.addEventListener("focus", function (e) { + console.log("输入框获得焦点"); +}); + +input.addEventListener("blur", function (e) { + console.log("输入框失去焦点"); +}); + +input.addEventListener("input", function (e) { + console.log("输入内容:", e.target.value); +}); + +input.addEventListener("change", function (e) { + console.log("内容改变:", e.target.value); +}); +``` + +### 3.8 事件委托 + +```javascript +list.addEventListener("click", function (e) { + if (e.target.tagName === "LI") { + console.log("点击了列表项:", e.target.textContent); + } +}); +``` + +## 练习 + +### 1-3 + +```html + + +

0 天

+ + + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123184105497.png) + +### 综合 + +```html + +``` +![](https://gitee.com/is-fish-soup-delicious/grade24-class1-note-javascript/raw/master/唐宇昊/图片imgs/20251123184542486.png) \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251121-\346\225\260\347\273\204.md" "b/\345\224\220\345\256\207\346\230\212/20251121-\346\225\260\347\273\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..5db27a0a260fdaf05038e12f8014c71ef22a3b10 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251121-\346\225\260\347\273\204.md" @@ -0,0 +1,164 @@ +# JavaScript 数组用法总结 + +## 1. 创建数组 + +### 1.1 字面量创建 +```javascript +const arr = [1, 2, 3, 4, 5] +``` + +### 1.2 构造函数创建 +```javascript +const arr = new Array(1, 2, 3) +``` + +### 1.3 创建空数组 +```javascript +const empty = [] +const withSize = new Array(5) +``` + +## 2. 访问和修改元素 + +### 2.1 访问元素 +```javascript +const arr = ['a', 'b', 'c'] +console.log(arr[0]) +``` + +### 2.2 修改元素 +```javascript +arr[1] = 'x' +``` + +### 2.3 数组长度 +```javascript +console.log(arr.length) +``` + +## 3. 添加和删除元素 + +### 3.1 末尾添加(push) +```javascript +arr.push('d') +``` + +### 3.2 末尾删除(pop) +```javascript +arr.pop() +``` + +### 3.3 开头添加(unshift) +```javascript +arr.unshift('z') +``` + +### 3.4 开头删除(shift) +```javascript +arr.shift() +``` + +## 4. 数组遍历 + +### 4.1 for循环 +```javascript +for (let i = 0; i < arr.length; i++) { + console.log(arr[i]) +} +``` + +### 4.2 forEach方法 +```javascript +arr.forEach(item => console.log(item)) +``` + +### 4.3 for...of循环 +```javascript +for (const item of arr) { + console.log(item) +} +``` + +## 5. 数组转换方法 + +### 5.1 map - 映射新数组 +```javascript +const doubled = [1, 2, 3].map(x => x * 2) +``` + +### 5.2 filter - 过滤元素 +```javascript +const evens = [1, 2, 3, 4].filter(x => x % 2 === 0) +``` + +### 5.3 reduce - 累计计算 +```javascript +const sum = [1, 2, 3].reduce((acc, cur) => acc + cur, 0) +``` + +## 6. 查找和判断 + +### 6.1 find - 查找元素 +```javascript +const found = [1, 2, 3].find(x => x > 1) +``` + +### 6.2 includes - 包含检查 +```javascript +const hasTwo = [1, 2, 3].includes(2) +``` + +### 6.3 indexOf - 查找索引 +```javascript +const index = [1, 2, 3].indexOf(2) +``` + +## 7. 数组操作 + +### 7.1 slice - 切片 +```javascript +const arr = [1, 2, 3, 4, 5] +const part = arr.slice(1, 3) +``` + +### 7.2 splice - 删除/添加 +```javascript +arr.splice(1, 2, 'a', 'b') +``` + +### 7.3 concat - 合并数组 +```javascript +const newArr = [1, 2].concat([3, 4]) +``` + +## 8. 排序和反转 + +### 8.1 sort - 排序 +```javascript +const sorted = [3, 1, 2].sort() +``` + +### 8.2 reverse - 反转 +```javascript +const reversed = [1, 2, 3].reverse() +``` + +## 9. 数组判断 + +### 9.1 Array.isArray +```javascript +Array.isArray([1, 2, 3]) +Array.isArray('hello') +``` + +### 9.2 every - 所有元素满足条件 +```javascript +const allPositive = [1, 2, 3].every(x => x > 0) +``` + +### 9.3 some - 至少一个元素满足条件 +```javascript +const hasNegative = [1, -2, 3].some(x => x < 0) +``` + + diff --git "a/\345\224\220\345\256\207\346\230\212/20251124-string\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251124-string\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..651b34af1d2933b5589446095df8deb306a424f6 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251124-string\345\257\271\350\261\241.md" @@ -0,0 +1,144 @@ +# String笔记 +## 1. 核心特性 +- 字符串**不可变**：所有操作方法均返回新字符串，不修改原字符串 +- 原始字符串（`"abc"`）自动装箱为 String 对象，可调用方法 +- 极少直接创建 String 对象（`new String("abc")`），优先用字面量 + +## 2. 核心属性 +| 属性 | 说明 | +|------|------| +| `length` | 返回字符串字符长度（UTF-16 编码，emoji 等扩展字符可能占 2 个长度） | + +## 3. 高频核心方法 +### 3.1 查找/判断 +| 方法 | 作用 | 示例 | +|------|------|------| +| `indexOf(str[, start])` | 找子串首次出现索引，无则返回 -1 | `"ababa".indexOf("ba") → 1` | +| `includes(str[, start])` | 判断是否包含子串 | `"hello".includes("ll") → true` | +| `startsWith(str)` | 判断是否以子串开头 | `"hello".startsWith("he") → true` | +| `endsWith(str)` | 判断是否以子串结尾 | `"hello".endsWith("lo") → true` | + +### 3.2 操作/修改 +| 方法 | 作用 | 示例 | +|------|------|------| +| `replace(/xxx/g, str)` | 替换匹配项（加g修饰符全替换） | `"ababa".replace(/a/g, "x") → "xbxbx"` | +| `split(sep[, limit])` | 按分隔符转数组 | `"a,b,c".split(",") → ["a","b","c"]` | +| `trim()` | 去除首尾空白 | `" hello ".trim() → "hello"` | +| `padStart(len, str)` | 开头补全至指定长度 | `"123".padStart(5, "0") → "00123"` | + +### 3.3 截取 +| 方法 | 作用 | 示例 | +|------|------|------| +| `slice(start[, end])` | 截取 [start, end) 区间，支持负数索引 | `"abcdef".slice(1,4) → "bcd"`；`"abc".slice(-2) → "bc"` | + +### 3.4 大小写转换 +| 方法 | 作用 | 示例 | +|------|------|------| +| `toLowerCase()` | 转小写 | `"HELLO".toLowerCase() → "hello"` | +| `toUpperCase()` | 转大写 | `"hello".toUpperCase() → "HELLO"` | + +## 4. 核心注意事项 +1. 字符串不可变，操作后需接收返回值（如 `str = str.toUpperCase()`） +2. `str[index]` 访问字符，越界返回 `undefined`（`charAt()` 越界返回空字符串） + +## 作业 + +### 练习1 + +```js + +``` + +### 训练9 + +```js +
文本1
+
文本2
+ +
+ +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251203-DOM\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251203-DOM\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..f111271fc69088d9b4bf8d989cfcdc3deeb253df --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251203-DOM\345\257\271\350\261\241.md" @@ -0,0 +1,209 @@ +# JS DOM 对象核心笔记 +（MD格式可直接复制使用） + +## 一、核心概念 +- DOM（Document Object Model）：文档对象模型，将HTML文档抽象为树形结构 +- 核心对象：`document`（整个文档）、`Element`（元素节点）、`Node`（所有节点基类） + +## 二、获取元素（高频） +```js +// 1. 通过ID（唯一） +document.getElementById('id') + +// 2. 通过选择器（推荐，返回第一个匹配元素） +document.querySelector('selector') // 例：'.class' '#id' 'div' + +// 3. 通过选择器（返回所有匹配元素，NodeList） +document.querySelectorAll('selector') + +// 4. 其他常用 +document.getElementsByTagName('tag') // 标签名，HTMLCollection +document.getElementsByClassName('class') // 类名，HTMLCollection +document.body // body元素 +document.head // head元素 +``` + +## 三、节点操作 +### 1. 创建节点 +```js +document.createElement('tag') // 创建元素节点 +document.createTextNode('文本') // 创建文本节点 +``` + +### 2. 插入节点 +```js +parent.appendChild(child) // 尾部插入 +parent.insertBefore(newNode, referenceNode) // 插入到参考节点前 +``` + +### 3. 删除/替换节点 +```js +parent.removeChild(child) // 删除子节点 +parent.replaceChild(newNode, oldNode) // 替换节点 +``` + +## 四、属性操作 +```js +// 1. 原生属性（直接操作） +elem.id = 'newId' +elem.src = 'path' + +// 2. 自定义属性（getAttribute/setAttribute） +elem.getAttribute('data-key') +elem.setAttribute('data-key', 'value') + +// 3. HTML5数据集（dataset） +elem.dataset.key = 'value' // 对应 data-key 属性 +``` + +## 五、样式操作 +```js +// 1. 行内样式（style） +elem.style.color = 'red' +elem.style.fontSize = '16px' + +// 2. 类名操作（classList） +elem.classList.add('class1') // 添加类 +elem.classList.remove('class2') // 移除类 +elem.classList.toggle('class3') // 切换类 +elem.classList.contains('class4') // 检查类是否存在 + +// 3. 计算样式（getComputedStyle） +window.getComputedStyle(elem).color +``` + +## 六、事件基础 +```js +// 绑定事件 +elem.addEventListener('eventType', handler) +// 例：click、mouseover、keydown + +// 事件对象常用属性 +function handler(e) { + e.target // 事件触发源 + e.preventDefault() // 阻止默认行为 + e.stopPropagation() // 阻止事件冒泡 +} +``` + +## 练习 + +### 练习1 + +```js +let btn = document.getElementById('btn'); + btn.onclick = function () { + let bg = document.body.style.backgroundColor; + let txt = document.body.style.color; + + document.body.style.backgroundColor = txt; + document.body.style.color = bg; + } +``` + +### 练习2 + +```js + document.write("
" + document.URL + "
"); + +``` + + +### 练习3 + +```js +let span = document.createElement('span'); + + let str = "这是一串要逐个出现的文字"; + + function btnAdd() { + span.innerText = ''; + let i = 0; + setInterval(() => { + if (i < str.length) { + span.innerText += str[i]; + } + i++; + }, 500); + } + document.body.appendChild(span); + +``` + +### 综合练习1 + +```js +let str1 = "李白李白李白李白李白李白李白李白李白李白李白"; + document.write("
" + str1); + let sele = { + green: { bg: 'green', text: 'white' }, + red: { bg: 'red', text: 'blue' } + }; + + function switchTheme(themekey) { + let theme = sele[themekey]; + + if (!themekey) { + document.body.style.backgroundColor = ''; + document.body.style.color = ''; + } + + document.body.style.backgroundColor = theme.bg; + document.body.style.color = theme.text; + + } +``` + + +### 综合练习2 + +```js +let box = document.getElementById('box'); + + function showImage() { + box.style.display = 'flex'; + + document.body.style.overflow = 'hidden'; + + } + + function closeBox() { + box.style.display = 'none'; + + document.body.style.overflow = 'auto'; + + } +``` + +### 综合练习3 + +```js +let startbtn = document.getElementById('startbtn'); + let imgContainer = document.getElementById('imgContainer'); + let imgList = ['./图片imgs/1.jpg', + './图片imgs/2.jpg', + './图片imgs/3.jpg' + ] + + let i = 0; + let j = 0; + function startbtnAdd() { + setInterval(() => { + if (j >= imgList.length) { + return; + } + j++; + let img = document.createElement('img'); + img.src = imgList[i]; + img.className = 'img-item'; + img.alt = `头像${i + 1}`; + + + imgContainer.appendChild(img); + // document.getElementById("imgContainer").appendChild(img); + console.log(img); + + i++; + }, 500); + } +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\224\220\345\256\207\346\230\212/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..107ea3fd6ba242aafd94415293f5404d67c55ba5 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251204-\346\226\207\346\241\243\345\257\271\350\261\241\346\250\241\345\236\213.md" @@ -0,0 +1,222 @@ +## 学习内容 + + - 获取DOM元素。--返回集合或单个元素 + - getElementById()-给Id用 + - getElementsByClassName() -给class用（通过类名） + - getElementsByTagName() -给标签用 + - querySelector() -给class选择器用（通过.类名） + - querySelectorAll() -给class选择器用 + + - 处理DOM节点的方法 + - 增：创建 + - appendChild()--插入节点末尾 + - createElement() --创建标签 + - createTextNode() --添加文本 + - insertBefore()- 插入标签 + - cloneNode()-复制标签 + - 删: + - removeChild() + - 替换节点replaceChild() + +## 练习 + +### 1 + +```js +function textAdd() { + let str = document.getElementById('str'); + let sele = document.getElementById('sele'); + let text = str.value.trim(); + let color = sele.value; + let span = document.createElement('span'); + + span.innerText = text; + span.style.color = color; + + document.getElementById('textArea').appendChild(span); + + } +``` + +### 2 + +```js +const titleInput = document.getElementById('titleInput'); + const addTitleBtn = document.getElementById('addTitleBtn'); + const songTitle = document.getElementById('songTitle'); + + const correctTitle = '再别康桥'; + + addTitleBtn.onclick = function () { + const inputTitle = titleInput.value.trim(); + + if (inputTitle === correctTitle) { + songTitle.textContent = inputTitle; + alert('歌名添加成功！'); + } else { + alert('歌名输入错误，请重新输入！'); + } + + titleInput.value = ''; + }; +``` + + +### 3 + +```js +const movieList = document.getElementById('movieList'); + const movieNum = document.getElementById('movieNum'); + const deleteBtn = document.getElementById('deleteBtn'); + + deleteBtn.onclick = function () { + + const num = parseInt(movieNum.value); + + const listItems = movieList.getElementsByTagName('li'); + + + if (isNaN(num) || num < 1 || num > listItems.length) { + alert('请输入有效的影片编号！'); + return; + } + + movieList.removeChild(listItems[num - 1]); + + movieNum.value = ''; + } + +``` + +### 4 + +```js +const itemNum = document.getElementById('itemNum'); + const sourceListSelect = document.getElementById('sourceListSelect'); + const targetListSelect = document.getElementById('targetListSelect'); + const moveBtn = document.getElementById('moveBtn'); + + moveBtn.onclick = function () { + const num = parseInt(itemNum.value); + + const sourceListId = sourceListSelect.value; + const targetListId = targetListSelect.value; + const sourceList = document.getElementById(sourceListId); + const targetList = document.getElementById(targetListId); + + const listItems = sourceList.getElementsByTagName('li'); + + const moveItem = listItems[num - 1]; + + targetList.appendChild(moveItem); + + + itemNum.value = ''; + }; +``` + +### 练习5 + +```js +const submitBtn = document.getElementById('submitBtn'); + const result = document.getElementById('result'); + const correctAnswer = '武当'; + + + submitBtn.onclick = function () { + + const radioButtons = document.getElementsByName('school'); + let selectedValue = null; + + for (let i = 0; i < radioButtons.length; i++) { + if (radioButtons[i].checked) { + selectedValue = radioButtons[i].value; + break; + } + } + + if (selectedValue === correctAnswer) { + result.textContent = '答案正确！'; + } else { + result.textContent = '答案错误，正确答案是：武当'; + } + }; +``` + +### 综合1 + +```js +const boldText = document.getElementById('boldText'); + const changeLink = document.getElementById('changeLink'); + + changeLink.onclick = function () { + const italicText = document.createElement('i'); + italicText.textContent = boldText.textContent; + boldText.parentNode.replaceChild(italicText, boldText); + }; +``` + +### 综合2 + +```js +const yearSelect = document.getElementById('yearSelect'); + const monthSelect = document.getElementById('monthSelect'); + const daySelect = document.getElementById('daySelect'); + + for (let year = 2020; year <= 2030; year++) { + const option = document.createElement('option'); + option.value = year; + option.textContent = year; + yearSelect.appendChild(option); + } + + for (let month = 1; month <= 12; month++) { + const option = document.createElement('option'); + option.value = month; + option.textContent = month; + monthSelect.appendChild(option); + } + + function getDaysInMonth(year, month) { + return new Date(year, month, 0).getDate(); + } + + function updateDays() { + const year = parseInt(yearSelect.value); + const month = parseInt(monthSelect.value); + const days = getDaysInMonth(year, month); + + daySelect.innerHTML = ''; + + for (let day = 1; day <= days; day++) { + const option = document.createElement('option'); + option.value = day; + option.textContent = day; + daySelect.appendChild(option); + } + } + + updateDays(); + yearSelect.onchange = updateDays; + monthSelect.onchange = updateDays; +``` + +### 综合3 + +```js +const emojiSelect = document.getElementById('emojiSelect'); + const emojiImg = document.getElementById('emojiImg'); + + const emojiMap = { + smile: '#', + happy: '#', + sad: '#' + }; + + emojiImg.src = emojiMap[emojiSelect.value]; + + emojiSelect.onchange = function() { + const selectedEmoji = this.value; + emojiImg.src = emojiMap[selectedEmoji]; + }; +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251205-Window\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251205-Window\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..00ab59e35d43ad63f6cbc5b65e7c98000135ba01 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251205-Window\345\257\271\350\261\241.md" @@ -0,0 +1,269 @@ +# JS Window对象核心笔记 +## 一、核心定位 +- Window 是浏览器的全局顶级对象，所有全局变量、函数、内置对象（如 `document`、`console`）均挂载在 Window 下； +- 无需显式写 `window.` 即可访问其属性/方法（如 `window.document` 可简写为 `document`）； +- 每个浏览器窗口/标签页对应一个独立的 Window 对象。 + +## 二、核心属性（常用） +```js +// DOM 相关 +window.document // 文档对象（核心，可简写为document） +// 窗口尺寸 +window.innerWidth // 视口宽度（不含滚动条） +window.innerHeight // 视口高度（不含滚动条） +// 导航/位置 +window.location // 地址栏对象（控制URL、跳转等） +window.history // 历史记录对象 +window.navigator // 浏览器/设备信息对象 +// 存储 +window.localStorage // 本地存储（持久化，无过期） +window.sessionStorage // 会话存储（关闭标签页失效） +// 其他 +window.screen // 屏幕信息对象 +window.console // 控制台对象 +``` + +## 三、核心方法（常用） +```js +// 弹窗类 +window.alert('提示内容') // 提示弹窗 +window.confirm('确认内容') // 确认弹窗（返回布尔值） +window.prompt('输入提示', '默认值') // 输入弹窗（返回输入内容/ null） +// 定时器 +window.setTimeout(() => {}, 1000) // 一次性定时器（毫秒） +window.setInterval(() => {}, 1000) // 周期性定时器 +window.clearTimeout(timerId) // 清除一次性定时器 +window.clearInterval(timerId) // 清除周期性定时器 +// 窗口操作 +window.open('URL', '新窗口名', 'width=300,height=200') // 打开新窗口 +window.close() // 关闭当前窗口（仅对window.open打开的窗口有效） +// 页面操作 +window.scrollTo(0, 0) // 滚动到指定位置 +window.reload() // 刷新页面 +``` + +## 四、全局作用域与Window的关系 +- 全局作用域中声明的变量/函数，会自动成为 Window 的属性/方法： +```js +var globalVar = 'hello' +console.log(window.globalVar) // 'hello' + +function globalFn() {} +console.log(window.globalFn === globalFn) // true +``` + +## 五、Window专属事件 +```js +// 监听页面所有资源加载完成 +window.addEventListener('load', () => { + // 执行操作（如获取图片真实尺寸） +}) + +// 监听窗口大小变化 +window.addEventListener('resize', () => { + console.log('窗口宽度：', window.innerWidth) +}) + +// 监听页面滚动 +window.addEventListener('scroll', () => { + console.log('垂直滚动距离：', window.scrollY) +}) +``` + +## 作业 + +```html + + 月亮之上 + + + + 退出登录 + + +
+
影片1：流浪地球
+
影片2：环太平洋
+
+ +
+ 影片详情图 + +
+ + + + + + + + +
00:00:00
+ + + + + + + + + + + + +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251208-\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241\346\250\241\345\236\213.md" "b/\345\224\220\345\256\207\346\230\212/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..9df6f3f8deb87ee50e4586cbc5b7a30f8b67ea0e --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/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,55 @@ +## 笔记 + +BOM（浏览器对象模型）用于操作浏览器窗口，无统一标准但核心 API 通用。核心对象包括：window（顶层对象，全局作用域）、document（文档对象，操作 DOM）、location（控制 URL，如 href 跳转、reload 刷新）、history（浏览器历史，back/forward/go 导航）、navigator（获取浏览器信息）、screen（屏幕相关数据）。 + +关键特性：跨文档通信、窗口大小 / 位置控制、定时器（setTimeout/setInterval）。注意：BOM 依赖浏览器环境，无 DOM 独立存在，需区分 BOM（操作浏览器）与 DOM（操作页面内容）的边界，兼容性需适配不同浏览器差异。 + +### 常用方法 +BOM（浏览器对象模型）用于操作浏览器窗口，无统一标准但核心 API 通用。以下按核心对象分类，以表格形式整理各对象的常用方法/属性，结构清晰且贴合实际开发场景： + +#### location（控制 URL） +`location` 用于操作当前页面的 URL，实现跳转、刷新等核心导航功能。 + +| 方法/属性 | 作用说明 | 示例代码 | +|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------| +| location.href | 获取/设置当前页面 URL（最常用的跳转方式） | `console.log(location.href); location.href = 'https://example.com';` | +| location.reload() | 重新加载页面，参数 `true` 强制从服务器加载（跳过缓存） | `location.reload(); // 普通刷新`
`location.reload(true); // 强制刷新` | +| location.host | 获取 URL 中的主机名 + 端口号（如 `example.com:8080`） | `console.log(location.host);` | +| location.pathname | 获取 URL 中的路径部分（如 `/index.html`） | `console.log(location.pathname);` | +| location.search | 获取 URL 中的查询参数（如 `?id=1&name=test`） | `console.log(location.search);` | +| location.hash | 获取/设置 URL 中的哈希值（如 `#top`） | `location.hash = '#footer'; // 跳转到页面锚点` | + +#### history（浏览器历史） +`history` 用于操作浏览器的历史记录，实现前进、后退、跳转等导航操作。 + +| 方法/属性 | 作用说明 | 示例代码 | +|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------| +| history.back() | 回退到历史记录上一页（等同于浏览器后退按钮） | `history.back();` | +| history.forward() | 前进到历史记录下一页（等同于浏览器前进按钮） | `history.forward();` | +| history.go(n) | 跳转到历史记录指定页：n=0 刷新，正数前进，负数后退 | `history.go(-2); // 后退 2 页`
`history.go(1); // 前进 1 页` | +| history.length | 获取历史记录的总条数（只读） | `console.log(history.length); // 查看当前会话的历史记录数` | + +#### navigator（获取浏览器信息） +`navigator` 用于获取浏览器及客户端设备的相关信息，常用于浏览器兼容判断。 + +| 方法/属性 | 作用说明 | 示例代码 | +|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------| +| navigator.userAgent | 获取浏览器用户代理字符串（判断浏览器类型/版本、设备等） | `console.log(navigator.userAgent); // 如 Chrome/120.0.0.0 Safari/537.36` | +| navigator.language | 获取浏览器的首选语言（如 `zh-CN`、`en-US`） | `console.log(navigator.language);` | +| navigator.platform | 获取浏览器运行的操作系统平台（如 `Win32`、`MacIntel`） | `console.log(navigator.platform);` | +| navigator.onLine | 判断浏览器是否联网（返回布尔值，仅供参考） | `if(navigator.onLine) { console.log('已联网'); }` | + +#### screen（屏幕相关数据） +`screen` 用于获取客户端屏幕的分辨率、可用区域等硬件相关信息。 + +| 方法/属性 | 作用说明 | 示例代码 | +|--------------------------|--------------------------------------------------------------------------|--------------------------------------------------------------------------| +| screen.width/height | 获取屏幕物理分辨率的宽/高（只读，不含任务栏等） | `const screenW = screen.width; const screenH = screen.height;` | +| screen.availWidth/availHeight | 获取屏幕可用宽/高（排除任务栏、系统边框等，只读）| `const availW = screen.availWidth; const availH = screen.availHeight;` | +| screen.colorDepth | 获取屏幕的颜色深度（通常为 24 或 32） | `console.log(screen.colorDepth); // 输出 24` | + +### 核心注意事项 +1. `window` 作为顶层对象，其属性/方法可省略 `window.` 直接调用（如 `alert()` 等同于 `window.alert()`）； +2. 窗口操作（`open()`/`close()`/`moveTo()`）受浏览器安全策略限制，无用户交互触发时易被拦截； +3. `location.href` 跳转与 `history.go()` 导航的区别：前者会新增历史记录，后者仅操作已有记录； +4. `navigator.userAgent` 可被篡改，仅作为浏览器判断的参考，不可作为唯一依据。 diff --git "a/\345\224\220\345\256\207\346\230\212/20251210-style\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251210-style\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..fc8db564301f85054c4af60bd76992e398f6a0cc --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251210-style\345\257\271\350\261\241.md" @@ -0,0 +1,125 @@ +## 笔记 + +### Style 对象常用属性 + +| 类别 | 属性名 | 说明 | 示例 | +| -------- | ----------------------- | ---------------------------------------------------------- | ------------------------------------------------------------ | +| 尺寸布局 | `width` | 设置 / 获取元素宽度（需带单位，如 px/em） | `elem.style.width = '200px'` | +| 尺寸布局 | `height` | 设置 / 获取元素高度（需带单位） | `const h = elem.style.height` | +| 尺寸布局 | `margin` | 外边距简写属性（可拆分 marginTop/marginLeft 等） | `elem.style.margin = '10px 20px'` | +| 尺寸布局 | `padding` | 内边距简写属性（可拆分 paddingTop/paddingRight 等） | `elem.style.padding = '8px'` | +| 尺寸布局 | `overflow` | 内容溢出处理方式（visible/hidden/scroll/auto） | `elem.style.overflow = 'hidden'` | +| 视觉样式 | `color` | 文本颜色（支持十六进制、RGB、颜色名） | `elem.style.color = '#ff0000'` | +| 视觉样式 | `backgroundColor` | 元素背景颜色 | `elem.style.backgroundColor = 'rgb(255,255,0)'` | +| 视觉样式 | `opacity` | 元素透明度（0-1 数值，1 为不透明） | `elem.style.opacity = '0.8'` | +| 视觉样式 | `border` | 边框简写属性（可拆分 borderWidth/borderColor/borderStyle） | `elem.style.border = '1px solid #ccc'` | +| 视觉样式 | `cursor` | 鼠标指针样式（pointer/default/help 等） | `elem.style.cursor = 'pointer'` | +| 文本样式 | `fontSize` | 字体大小（需带单位） | `elem.style.fontSize = '16px'` | +| 文本样式 | `textAlign` | 文本对齐方式（left/center/right/justify） | `elem.style.textAlign = 'center'` | +| 文本样式 | `lineHeight` | 行高（可带单位或纯数值） | `elem.style.lineHeight = '1.5'` | +| 定位相关 | `position` | 定位方式（static/relative/absolute/fixed/sticky） | `elem.style.position = 'absolute'` | +| 定位相关 | `top/left/right/bottom` | 定位元素偏移量（需带单位，非 static 定位生效） | `elem.style.left = '50%'` | +| 定位相关 | `zIndex` | 元素堆叠顺序（整数，定位元素生效） | `elem.style.zIndex = '999'` | +| 显示控制 | `display` | 元素显示方式（none/block/inline/flex 等） | `elem.style.display = 'flex'` | +| 批量操作 | `cssText` | 批量设置 / 获取所有内联样式（高效替代逐个设置） | `elem.style.cssText = 'width:100px; height:50px;'` | +| 遍历相关 | `length` | 返回内联样式的属性数量（用于遍历所有样式） | `for(let i=0; i +

这是一行即将变大的文本

+ + + + 示例 + + +
+
HTML/CSS讨论区
+
JavaScript讨论区
+
C语言讨论区
+
Java讨论区
+
Android讨论区
+
Python讨论区
+
+ + +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251211-form\345\257\271\350\261\241.md" "b/\345\224\220\345\256\207\346\230\212/20251211-form\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..a43a6387fd2c16253c4a725b8ca789b16c437b6b --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251211-form\345\257\271\350\261\241.md" @@ -0,0 +1,202 @@ +## 笔记 + +### JSON 基础格式 + +#### 对象 + +- 结构：花括号 `{}` 包裹，内部是唯一字符串键 + 值的键值对，键值用 `:` 分隔，键值对间用 `,` 分隔 +- 示例： + +```json +{ + "name": "张三", + "age": 25, + "isMember": true, + "address": {"city": "北京", "area": "朝阳"} +} +``` + +#### 数组 + +- 结构：方括号 `[]` 包裹，值为任意合法 JSON 类型，值之间用 `,` 分隔 +- 示例： + +```json +[123, "测试", false, null, ["a", "b"], {"key": "value"}] +``` + +#### 简单数据类型 + +| 类型 | 规则 | 示例 | +| ------ | --------------------- | ------------- | +| 字符串 | 双引号包裹 | `"JSON 笔记"` | +| 数字 | 整数 / 浮点数，无引号 | `99`、`1.68` | +| 布尔值 | 仅 `true`/`false` | `false` | +| null | 表示空值，无引号 | `null` | + + + +## 作业 + +```html + + + + + + + + + + C语言
+ 机械制图
+ 单片机
+ 自动控制
+ 传感器
+ 高等数学
+ 计算机基础
+ Oracle数据库
+ 商务英语
+ PLC设计基础
+
+ + +

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

+ 布拉德·皮特
+ 亚当·桑德勒
+ 金凯瑞
+ 杰夫·丹尼尔斯
+ +
+ + + 看电影
+ 听音乐
+ 演奏乐器
+ 打篮球
+ 看书
+ 上网
+ + + + + + 选择城市： + + + + +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251212-JSON.md" "b/\345\224\220\345\256\207\346\230\212/20251212-JSON.md" new file mode 100644 index 0000000000000000000000000000000000000000..75e6300599cdae98896828e6d1816dadd8086d57 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251212-JSON.md" @@ -0,0 +1,69 @@ +## 笔记 + +### JSON 基础格式 + +#### 对象 + +- 结构：花括号 `{}` 包裹，内部是唯一字符串键 + 值的键值对，键值用 `:` 分隔，键值对间用 `,` 分隔 +- 示例： + +```json +{ + "name": "张三", + "age": 25, + "isMember": true,SS + "address": {"city": "北京", "area": "朝阳"} +} +``` + +#### 数组 + +- 结构：方括号 `[]` 包裹，值为任意合法 JSON 类型，值之间用 `,` 分隔 +- 示例： + +```json +[123, "测试", false, null, ["a", "b"], {"key": "value"}] +``` + +#### 简单数据类型 + +| 类型 | 规则 | 示例 | +| ------ | --------------------- | ------------- | +| 字符串 | 双引号包裹 | `"JSON 笔记"` | +| 数字 | 整数 / 浮点数，无引号 | `99`、`1.68` | +| 布尔值 | 仅 `true`/`false` | `false` | +| null | 表示空值，无引号 | `null` | + +### JSON的转换 + +#### 序列化（JS 对象 → JSON 字符串） + +- 方法：`JSON.stringify(value[, replacer[, space]])` +- 作用：将 JS 对象 / 数组 / 基本类型转为标准 JSON 字符串 +- 示例： + +```javascript +const jsObj = { name: "李四", age: 30, hobbies: ["跑步", "听歌"] }; +// 基础转换 +const jsonStr = JSON.stringify(jsObj); +// 格式化输出（2个空格缩进） +const prettyStr = JSON.stringify(jsObj, null, 2); +``` + +- 注意：函数、undefined 会被忽略，循环引用对象会报错 + +#### 反序列化（JSON 字符串 → JS 对象） + +- 方法：`JSON.parse(text[, reviver])` +- 作用：将合法 JSON 字符串转为 JS 对象 / 数组 +- 示例： + +```javascript +const jsonStr = '{"name":"李四","age":30}'; +// 基础解析 +const jsObj = JSON.parse(jsonStr); +// 解析时处理数据（如年龄+1） +const handledObj = JSON.parse(jsonStr, (key, val) => key === "age" ? val + 1 : val); +``` + +- 注意：JSON 字符串必须合法（如键为双引号），否则报错 \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251215.md" "b/\345\224\220\345\256\207\346\230\212/20251215.md" new file mode 100644 index 0000000000000000000000000000000000000000..d31cec4b67a8f84d39fc1360188696b4733579bf --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251215.md" @@ -0,0 +1,38 @@ +## 练习 +```js + /* 变量 常量和数据类型 */ + // 练习1 + let name = 'tyh'; + const school = 'xx职业学院'; + console.log(`"${name}""${school}"`); + + // 练习2 + function getTypeof() { + let value = "123"; + return typeof value; + } + let typeName = getTypeof(); + console.log(typeName); + + // 练习3 + let age = 18; + age = 20; + console.log(age); + + // 练习4 + let stuName = '李四'; + let stuAge = 19; + let grade = true; + + console.log(`姓名:"${stuName}",类型:"${typeof stuName}"`); + console.log(`年龄:"${stuAge}",类型:"${typeof stuAge}"`); + console.log(`及格:"${grade}",类型:"${typeof grade}"`); + + // 练习5 + let tyNull = null; + let tyUnderfined = undefined; + + console.log(`underfined 变量:${tyUnderfined} 类型:${typeof tyUnderfined}`); + console.log(`null 变量:${tyNull} 类型:${typeof tyNull}`); + +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251216.md" "b/\345\224\220\345\256\207\346\230\212/20251216.md" new file mode 100644 index 0000000000000000000000000000000000000000..d4d6c4f55e3c9f9006a02028fcb4bc2b0d8113ff --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251216.md" @@ -0,0 +1,75 @@ +## 练习 +```js + /* 运算符与类型转换 */ + // 练习1 + let aa = 10; + let bb = 3; + const jia = aa + bb; + const jian = aa - bb; + const cheng = aa * bb; + const chu = aa / bb; + const yu = aa % bb; + + console.log(`加:${jia},减:${jian},乘:${cheng},除:${chu},余:${yu}`); + + // 练习2 + const cgstr = "123"; + const cgnum = 456; + + console.log(+cgstr); + console.log(`${cgnum}`); + + // 练习3 + function compare(a, b) { + const 大于 = a > b; + const 等于 = a === b; + const 不等于 = a != b; + return { 大于, 等于, 不等于 }; + } + + const compareNum = compare(5, 3); + console.log(compareNum); + + // 练习4 + let x = "5"; + let y = 5; + let z = "5"; + + const comparexy = x == y; + const comparexy1 = x === y; + const comparexz = x == z; + const comparexz1 = x === z; + + console.log(`x == y:${comparexy},x === y:${comparexy1},x == z:${comparexz},x === z:${comparexz1}`); + + // 练习5 + let agecar = 25; + let hasLiscence = true; + let canDrive = (agecar > 18 && agecar < 60) && hasLiscence == true; + + let answer = canDrive ? '可以开车' : '不可以开车'; + + console.log(canDrive + answer); + + // 练习6 + let stringFive = "5"; + let bool = true; + let stringTen = "10"; + let stringTwo = "2"; + + asr1 = stringFive + 3; + asr2 = Number(stringFive) - 3; + asr3 = bool + 1; + asr4 = Number(stringTen) * Number(stringTwo); + console.log(asr1, asr2, asr3, asr4); + + //练习7 + let string123 = "123"; + let string45 = "45"; + let hello = "hello"; + console.log(+string123, -string45, !!hello); + + //练习8 + let asr5 = 7 & 1; + console.log(~~5.8, asr5); +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251217.md" "b/\345\224\220\345\256\207\346\230\212/20251217.md" new file mode 100644 index 0000000000000000000000000000000000000000..c20ba3409a19446b9119dd3b7e864ecaaa5f6b8f --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251217.md" @@ -0,0 +1,27 @@ +## 练习 +```js +/* 流程控制 */ + //练习1 + let score = 85; + + if (score < 60) { + console.log('不及格'); + } + else if (score >= 60 && score < 80) { + console.log('及格'); + } + else if (score >= 80 && score < 90) { + console.log('良好'); + } + else if (score >= 90) { + console.log('优秀'); + } + + //练习2 + let num = 100; + let sum = 0; + for (let i = 1; i <= num; i++) { + sum += i; + } + console.log(sum); +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/20251219.md" "b/\345\224\220\345\256\207\346\230\212/20251219.md" new file mode 100644 index 0000000000000000000000000000000000000000..ad02c84c3e0d0bdbcdd076550812216b8a1b2d10 --- /dev/null +++ "b/\345\224\220\345\256\207\346\230\212/20251219.md" @@ -0,0 +1,81 @@ +## 练习 + +```js + //jQuery基础 + //练习1 + $(document).ready(function () { + console.log('jQuery已就绪'); + + }) + + // //练习2 + // let dom = $('#demo'); + // console.log(dom); + + // let jq = $(dom)[0]; + // console.log(jq); + + // let container = $('#box').css('color', 'blue').addClass('active').fadeIn('slow'); + // console.log(container); + + // let jqcon = $(container)[0]; + // console.log(jqcon); + + //jQuery选择器与选择 + + //练习1 + let item = $('.item').css('color', 'red'); + console.log(item); + + //练习2 + $(document).ready(function () { + $('ul li:first').css('background-color', 'blue'); + $('ul li:last').css('background-color', 'green'); + $('ul li:first,ul li:last').css('color', 'white'); + }) + + //练习3 + let span = $('#container').find('span'); + span.css('color', 'blue'); + console.log(span); + + //练习4 + let table = $('table tr:nth-child(2n)'); + table.css('background-color', 'green'); + + //练习5 + let item1 = $('.item1').each(function (index, element) { + $(this).text(`第${index + 1}个项目`); + }); + item1.css('display', 'inline') + + /* 事件处理 */ + //练习1 + $(document).ready(function () { + let originalTitle = $('#title').text(); + let newTitle = '新标题'; + + $('#changeBtn').click(function () { + $('#title').text( + $('#title').text() === originalTitle ? newTitle : originalTitle + ); + }) + }) + + //练习2 + $(function () { + $('#box').hover( + function () { + $(this).css({ + 'background': 'red' + }) + }, + function () { + $(this).css({ + 'background': 'gray' + }) + } + ) + + }) +``` \ No newline at end of file diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" new file mode 100644 index 0000000000000000000000000000000000000000..a506a9dc1724dfc135d80245639a9c59ed96c839 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115205933394.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" new file mode 100644 index 0000000000000000000000000000000000000000..123d457a9719eaf5927ada4c049b29f87014aca2 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210240103.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" new file mode 100644 index 0000000000000000000000000000000000000000..0802576f3565ed2e909ed92385046892a9c63405 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251115210812857.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" new file mode 100644 index 0000000000000000000000000000000000000000..e7e35c066cf060ba0929c35f75a1d26b57d4762e Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171034379.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" new file mode 100644 index 0000000000000000000000000000000000000000..f7ff4bd18a0d7dac64bb3cb14da26b25459bb86b Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251116171135128.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182521642.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182521642.png" new file mode 100644 index 0000000000000000000000000000000000000000..d5c531bb8b94e9c3bae761956ec689aaad039626 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182521642.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182557810.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182557810.png" new file mode 100644 index 0000000000000000000000000000000000000000..3323d26900ab925e11d9eeb62c63dc1191d82bf4 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123182557810.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183112533.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183112533.png" new file mode 100644 index 0000000000000000000000000000000000000000..c968b7e16f361bb836165824af0a33806a13d88b Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183112533.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183125233.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183125233.png" new file mode 100644 index 0000000000000000000000000000000000000000..f614eb45faebfd5b98604c9dd7a6bcdfb5576c39 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183125233.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183315876.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183315876.png" new file mode 100644 index 0000000000000000000000000000000000000000..2c490cff0df64d7a68da04bb405e86e0f1d23f6b Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183315876.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183403062.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183403062.png" new file mode 100644 index 0000000000000000000000000000000000000000..6b5c084276199d5f0390b2de1f7c7a70dfbe1298 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183403062.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183724092.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183724092.png" new file mode 100644 index 0000000000000000000000000000000000000000..8dd1f0168177098341ad8be7e27292d9955abfd3 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183724092.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183840506.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183840506.png" new file mode 100644 index 0000000000000000000000000000000000000000..f8d306c40c0680b2d31163159f75dc3958570d84 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123183840506.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184105497.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184105497.png" new file mode 100644 index 0000000000000000000000000000000000000000..5a2bff36048e7581880005342f940dd4c6d6897e Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184105497.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184542486.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184542486.png" new file mode 100644 index 0000000000000000000000000000000000000000..c449a2cc4c440054cc8a1f4128273648c0299dbf Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251123184542486.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130165740098.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130165740098.png" new file mode 100644 index 0000000000000000000000000000000000000000..258ec5fe9c3be951c19965cdebf8ed7cd893a3d6 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130165740098.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170716090.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170716090.png" new file mode 100644 index 0000000000000000000000000000000000000000..b4bcb798637a704325dad6339f57eac2db1ae48a Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170716090.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170743073.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170743073.png" new file mode 100644 index 0000000000000000000000000000000000000000..78136dce0dd1048f3ab88d3379332f8c86f25577 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130170743073.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172735227.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172735227.png" new file mode 100644 index 0000000000000000000000000000000000000000..31b0bc1bb0dfbef06f34c9f06e5652cbcc622849 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172735227.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172754452.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172754452.png" new file mode 100644 index 0000000000000000000000000000000000000000..858c5a882fe19b9da28c6bdc52c14a3ae8db01f8 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130172754452.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173108364.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173108364.png" new file mode 100644 index 0000000000000000000000000000000000000000..8a2ec47170a9d980b3d0dc285a944abc5e047fb2 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173108364.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173154836.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173154836.png" new file mode 100644 index 0000000000000000000000000000000000000000..df60beef48e41c7e8b0d401367dca774c777f400 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173154836.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173215408.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173215408.png" new file mode 100644 index 0000000000000000000000000000000000000000..d84e28e7353b0941b34e782deed69aa5f4b9fc13 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130173215408.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130174903644.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130174903644.png" new file mode 100644 index 0000000000000000000000000000000000000000..5a6b2cb8557f2e92bc50610383582863fd9d1eec Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130174903644.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175446014.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175446014.png" new file mode 100644 index 0000000000000000000000000000000000000000..077a36a3f3353d5409d480dceb4941f668c61dc0 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175446014.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175503429.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175503429.png" new file mode 100644 index 0000000000000000000000000000000000000000..3ff92f7982b144a0440178f8ea1d56be3f0c1e49 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175503429.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175540398.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175540398.png" new file mode 100644 index 0000000000000000000000000000000000000000..f5822a66abff7b2c2b9078682d980a61a6223411 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175540398.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175832692.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175832692.png" new file mode 100644 index 0000000000000000000000000000000000000000..029b38f8d99bb9c9108ec6f7f80de11cd5171176 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175832692.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175854088.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175854088.png" new file mode 100644 index 0000000000000000000000000000000000000000..7d5b3db84e6680020ccc759f1da0c4233748da20 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130175854088.png" differ diff --git "a/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130180042468.png" "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130180042468.png" new file mode 100644 index 0000000000000000000000000000000000000000..de95f877218385eb48ba83b30194bccb757e5b24 Binary files /dev/null and "b/\345\224\220\345\256\207\346\230\212/\345\233\276\347\211\207imgs/20251130180042468.png" differ