diff --git "a/\351\231\210\346\226\271\346\227\255/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..eb1198d395fda8f7549d6ea02c98c55285a78645 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251110-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,11 @@ +## 笔记部分 +### JS的三种引入方式 + +- 行内嵌入 + +- 内部嵌入 + +- 外部嵌入 + + + diff --git "a/\351\231\210\346\226\271\346\227\255/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..3724d48ecb89970b33b8dad8f04df2cc3245b479 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251112-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,36 @@ +## 笔记部分 +### 练习部分 + +1. + +```html +

个人信息

+ +``` + +2. + +```html + +``` + + + diff --git "a/\351\231\210\346\226\271\346\227\255/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..ca369d1e46de1236d6008f7a3a849e23f4a08d9d --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251113-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,110 @@ +## 笔记部分 +### 一、JS运算符 +#### 逻辑运算符 +- 逻辑与(&&): 【11=1】、【10=0】、【00=0】 +- 逻辑非(!)：【1==0=1】、【1==1=0】 +- 逻辑或(||)：【10=1】、【01=1】、【11=1】、【00=0】 +#### 其他运算符 +- 逗号运算符：逗号运算符用于将多个表达式排在一起，整个表达式的值是最后一个表达式的值 + +例： +```js +var a,b,c,d +a(b=1,c=2,d=3) +alert(a) + +输出结果：3 +``` +- typeof运算符：用于判断操作数的数据类型，结果返回一个字符串，此字符串代表了操作数的数据类型 + +例： +```js +var a,b,c,d +a=3 //数值 +b="字符串类型"//字符串 +c=false //布尔值 +d=null//空值 +alert(a) +输出结果：number +``` +- new运算符：创建一个新的实例对象 +### 二、表达式 +#### 表达式转换 +1、其他数据类型转数值 + - undefined:NAN + - null:0 + - 逻辑型：若值为true，结果为1；反之为0 + - 字符串：如果字符串是数字则直接转换为数字，否则为NaN + -其他对象：NaN + +2、其他数据类型转逻辑 + - undefined:false + - null:false + - 逻辑型：若值为0或NaN，结果为false；反之为true + - 字符串：若其长度为0，则结果为false，否则为true + -其他对象：true + +3、其他数据类型转字符串 + - undefined:直接转换 + - null:直接转换 + - 逻辑型：若其值为ture，则是"ture",反之亦然 + - 数值：NaN、0、与数值相对应的字符串 + - 其他对象：若存在，则其结果为toString()方法的值；否则其他结果为"undfined" + +### 练习部分 + +``` + +``` \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..ca369d1e46de1236d6008f7a3a849e23f4a08d9d --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251114-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,110 @@ +## 笔记部分 +### 一、JS运算符 +#### 逻辑运算符 +- 逻辑与(&&): 【11=1】、【10=0】、【00=0】 +- 逻辑非(!)：【1==0=1】、【1==1=0】 +- 逻辑或(||)：【10=1】、【01=1】、【11=1】、【00=0】 +#### 其他运算符 +- 逗号运算符：逗号运算符用于将多个表达式排在一起，整个表达式的值是最后一个表达式的值 + +例： +```js +var a,b,c,d +a(b=1,c=2,d=3) +alert(a) + +输出结果：3 +``` +- typeof运算符：用于判断操作数的数据类型，结果返回一个字符串，此字符串代表了操作数的数据类型 + +例： +```js +var a,b,c,d +a=3 //数值 +b="字符串类型"//字符串 +c=false //布尔值 +d=null//空值 +alert(a) +输出结果：number +``` +- new运算符：创建一个新的实例对象 +### 二、表达式 +#### 表达式转换 +1、其他数据类型转数值 + - undefined:NAN + - null:0 + - 逻辑型：若值为true，结果为1；反之为0 + - 字符串：如果字符串是数字则直接转换为数字，否则为NaN + -其他对象：NaN + +2、其他数据类型转逻辑 + - undefined:false + - null:false + - 逻辑型：若值为0或NaN，结果为false；反之为true + - 字符串：若其长度为0，则结果为false，否则为true + -其他对象：true + +3、其他数据类型转字符串 + - undefined:直接转换 + - null:直接转换 + - 逻辑型：若其值为ture，则是"ture",反之亦然 + - 数值：NaN、0、与数值相对应的字符串 + - 其他对象：若存在，则其结果为toString()方法的值；否则其他结果为"undfined" + +### 练习部分 + +``` + +``` \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f7ae3efa12458d48fbbdea50f73b2aa3d1af208 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251117-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,35 @@ +# 笔记 + +## JS函数 + +- 函数结构：function 函数名（参数）{} + +- 参数：形式参数，实际参数 + +- 函数定义：箭头函数、匿名函数、传统函数 + +## 作业 +```JS + +``` + + + +作业2 + +```js + +``` + diff --git "a/\351\231\210\346\226\271\346\227\255/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..4f488df8b8b6a58877c2e46e05479ff28c45e3f5 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251119-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,27 @@ +## 笔记部分 + + +### 练习部分 + +``` + +``` + diff --git "a/\351\231\210\346\226\271\346\227\255/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..640ddfbcc08314d92b154b1dff180485b59272ce --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251120-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,46 @@ +## 笔记部分 + + +### 练习部分 + +``` + + let time = { + startDate: new Date('2023-05-01'), + endDate: new Date('2023-06-01'), + getHours() { + let msDiff = Math.abs(time.endDate - time.startDate); + return msDiff / 3600000; + } + }; + let hours = time.getHours(); + document.write('开始日期与结束日期的间隔小时数：', hours); + } +``` + +```js + let date1 = new Date(2023,6,7); + let date2 = new Date(2025,11,20); + let date3 = date2.getTime()- date1.getTime(); + let day = Math.ceil(date3/(24*60*60*1000)); + document.write("距离2023年高考已经过了"+day+"天"); +``` + +```js +function gosite(e){ + if(e.button == 0){ + alert('您单击了鼠标左键'); + return false; + } + if(e.button == 1){ + alert('您单击了鼠标中键'); + return false; + } + if(e.button == 2){ + alert('您单击了鼠标右键'); + return false; + } + } + document.onmousedown=gosite; +``` + diff --git "a/\351\231\210\346\226\271\346\227\255/20251121-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251121-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..4b059c14449973a40c2e599c08b5e54d25f66e4e --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251121-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,24 @@ +## 笔记部分 +### 练习部分 + +``` +let arr = new Array(); +arr[0] = "1"; +arr[1] = "2"; +arr[2] = "3"; +``` + +``` +let arr = new Array(3); +arr[0] = 1; +arr[1] = 2; +arr[2] = 3; +``` + +``` +let arr = new Array("1","2","3"); +``` + +``` +let arr = ["1","2","3"]; +``` \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251122-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251122-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..709b28ceee0b7e85b68936f7a0b9d99e1b62e8cb --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251122-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,23 @@ +# 笔记 + +## 一、焦点事件（元素获取 / 失去焦点） + +| 事件名 | 说明 | 语法示例（2 种常用绑定） | +| ---------- | ---------------------- | ------------------------------------------------------- | +| `focus` | 元素获取焦点（无冒泡） | 1. 标签属性：`` | +| | | 2. JS 绑定：`input.addEventListener('focus', () => {})` | +| `blur` | 元素失去焦点（无冒泡） | 1. 标签属性：`` | +| | | 2. JS 绑定：`input.addEventListener('blur', () => {})` | +| `focusin` | 获取焦点（支持冒泡） | `parent.addEventListener('focusin', () => {})` | +| `focusout` | 失去焦点（支持冒泡） | `parent.addEventListener('focusout', () => {})` | + +## 二、表单事件（表单交互相关） + +| 事件名 | 说明 | 语法示例 | +| ------------------------------------------------ | ------------------------------- | -------- | +| `submit` | 表单提交（点击提交按钮 / 回车） | ```js | +| form.addEventListener('submit', (e) => { | | | +| e.preventDefault (); // 阻止默认提交行为（必写） | | | +| // 表单验证、数据提交逻辑 | | | +| }); | | | + diff --git "a/\351\231\210\346\226\271\346\227\255/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..20c07d822331dd5620ae546f8b64ab33e4dcca98 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251124-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,73 @@ +# 笔记 + +## 数组与集合 +# JS 数组对象方法速查表 +| 方法名 | 说明 | 简单代码实现 | +| ------ | ---- | ---- | +| `push()` | 向数组末尾添加一个/多个元素，返回新数组长度（改变原数组） | ```js const arr = [1,2]; const len = arr.push(3,4); // len=4, arr=[1,2,3,4] ``` | +| `pop()` | 删除数组最后一个元素，返回被删除的元素（改变原数组） | ```js const arr = [1,2,3]; const del = arr.pop(); // del=3, arr=[1,2] ``` | +| `unshift()` | 向数组开头添加一个/多个元素，返回新数组长度（改变原数组） | ```js const arr = [2,3]; const len = arr.unshift(0,1); // len=4, arr=[0,1,2,3] ``` | +| `shift()` | 删除数组第一个元素，返回被删除的元素（改变原数组） | ```js const arr = [0,1,2]; const del = arr.shift(); // del=0, arr=[1,2] ``` | +| `splice()` | 增删改数组元素，返回被删除元素组成的数组（改变原数组）
参数：起始索引、删除个数、新增元素 | ```js const arr = [1,2,3]; // 删除：从索引1删1个 const del = arr.splice(1,1); // del=[2], arr=[1,3] // 新增：索引1处加2、4 arr.splice(1,0,2,4); // arr=[1,2,4,3] ``` | +| `slice()` | 截取数组片段，返回新数组（不改变原数组）
参数：起始索引（含）、结束索引（不含，可选） | ```js const arr = [1,2,3,4]; const newArr = arr.slice(1,3); // newArr=[2,3], arr不变 ``` | +| `forEach()` | 遍历数组，对每个元素执行回调（无返回值） | ```js const arr = [1,2,3]; arr.forEach((item, idx) => { console.log(item, idx); // 输出1 0、2 1、3 2 }); ``` | +| `map()` | 遍历数组，返回由回调返回值组成的新数组（不改变原数组） | ```js const arr = [1,2,3]; const newArr = arr.map(item => item * 2); // newArr=[2,4,6], arr不变 ``` | +| `filter()` | 过滤数组，返回满足回调条件的元素组成的新数组（不改变原数组） | ```js const arr = [1,2,3,4]; const newArr = arr.filter(item => item % 2 === 0); // newArr=[2,4] ``` | +| `find()` | 遍历数组，返回第一个满足回调条件的元素（不改变原数组，无则返回`undefined`） | ```js const arr = [1,2,3,4]; const res = arr.find(item => item > 2); // res=3 ``` | +| `findIndex()` | 遍历数组，返回第一个满足回调条件的元素索引（不改变原数组，无则返回`-1`） | ```js const arr = [1,2,3,4]; const idx = arr.findIndex(item => item > 2); // idx=2 ``` | +| `some()` | 判断数组是否有至少一个元素满足回调条件，返回布尔值（不改变原数组） | ```js const arr = [1,2,3]; const has = arr.some(item => item > 2); // has=true ``` | +| `every()` | 判断数组是否所有元素都满足回调条件，返回布尔值（不改变原数组） | ```js const arr = [1,2,3]; const all = arr.every(item => item > 0); // all=true ``` | +| `join()` | 将数组元素按指定分隔符拼接为字符串，返回字符串（不改变原数组，默认分隔符为`,`） | ```js const arr = [1,2,3]; const str1 = arr.join(); // str1="1,2,3" const str2 = arr.join('-'); // str2="1-2-3" ``` | +| `concat()` | 合并两个/多个数组，返回新数组（不改变原数组） | ```js const arr1 = [1,2]; const arr2 = [3,4]; const newArr = arr1.concat(arr2); // newArr=[1,2,3,4] ``` | +| `flat()` | 扁平化数组，返回新数组（不改变原数组）
参数：扁平化深度（默认1，`Infinity`表示完全扁平化） | ```js const arr = [1,[2,[3]]]; const flat1 = arr.flat(); // flat1=[1,2,[3]] const flatAll = arr.flat(Infinity); // flatAll=[1,2,3] ``` | +| `flatMap()` | 先执行`map`再执行`flat(1)`，返回新数组（不改变原数组） | ```js const arr = [1,2]; const newArr = arr.flatMap(item => [item, item*2]); // newArr=[1,2,2,4] ``` | +| `sort()` | 对数组元素排序，返回排序后的原数组（改变原数组，默认按字符串Unicode排序） | ```js const arr = [3,1,2]; // 数字升序 arr.sort((a,b) => a - b); // arr=[1,2,3] // 数字降序 arr.sort((a,b) => b - a); // arr=[3,2,1] ``` | +| `reverse()` | 反转数组元素顺序，返回反转后的原数组（改变原数组） | ```js const arr = [1,2,3]; arr.reverse(); // arr=[3,2,1] ``` | +| `reduce()` | 从左到右遍历数组，累计回调返回值，返回最终累计结果（不改变原数组）
参数：回调函数、初始值（可选） | ```js const arr = [1,2,3]; // 求和（无初始值） const sum = arr.reduce((acc, cur) => acc + cur); // sum=6 // 求和（有初始值2） const sum2 = arr.reduce((acc, cur) => acc + cur, 2); // sum2=8 ``` | +| `indexOf()` | 查找元素在数组中首次出现的索引（不改变原数组，无则返回`-1`）
参数：目标元素、起始索引（可选） | ```js const arr = [1,2,3,2]; const idx1 = arr.indexOf(2); // idx1=1 const idx2 = arr.indexOf(2, 2); // idx2=3 ``` | +| `includes()` | 判断数组是否包含目标元素，返回布尔值（不改变原数组）
参数：目标元素、起始索引（可选） | ```js const arr = [1,2,3]; const has = arr.includes(2); // has=true const has2 = arr.includes(2, 2); // has2=false ``` | +| `fill()` | 用指定值填充数组，返回填充后的原数组（改变原数组）
参数：填充值、起始索引（可选）、结束索引（可选，不含） | ```js const arr = [1,2,3]; arr.fill(0); // arr=[0,0,0] arr.fill(9, 1, 2); // arr=[0,9,0] ``` | +| `Array.from()` | 将类数组/可迭代对象转为数组，返回新数组（静态方法） | ```js // 类数组 const likeArr = {0:1, 1:2, length:2}; const arr1 = Array.from(likeArr); // arr1=[1,2] // 字符串 const str = "abc"; const arr2 = Array.from(str); // arr2=['a','b','c'] ``` | +| `Array.of()` | 创建包含指定元素的数组，返回新数组（静态方法，解决`Array()`的歧义） | ```js const arr1 = Array.of(1,2,3); // arr1=[1,2,3] const arr2 = Array.of(5); // arr2=[5]（区别于Array(5)返回长度5的空数组） ``` | +| `Array.isArray()` | 判断参数是否为数组，返回布尔值（静态方法） | ```js const res1 = Array.isArray([1,2]); // res1=true const res2 = Array.isArray("abc"); // res2=false ``` | + +## Map集合 +| 方法名/属性 | 说明 | 简单代码实现 | +| ------ | ---- | ---- | +| `new Map()` | 创建空Map实例（或传入可迭代对象初始化，如数组、另一个Map） | ```js // 空Map const map1 = new Map(); // 初始化键值对（数组形式：[[key1, val1], [key2, val2]]） const map2 = new Map([['name', '张三'], [1, '数字']]); // 从另一个Map初始化 const map3 = new Map(map2); ``` | +| `size`（属性） | 返回Map中键值对的数量（只读属性，非方法） | ```js const map = new Map([['a', 1]]); console.log(map.size); // 输出1 ``` | +| `set(key, value)` | 新增/修改键值对（key存在则更新值，不存在则新增），返回当前Map实例（可链式调用） | ```js const map = new Map(); // 新增 map.set('age', 20); // 链式新增 map.set('gender', '男').set('city', '北京'); // 更新 map.set('age', 22); console.log(map); // Map(3) { 'age' => 22, 'gender' => '男', 'city' => '北京' } ``` | +| `get(key)` | 获取指定key对应的value，key不存在则返回`undefined` | ```js const map = new Map([['name', '李四']]); const name = map.get('name'); // name='李四' const addr = map.get('addr'); // addr=undefined ``` | +| `has(key)` | 判断Map是否包含指定key，返回布尔值 | ```js const map = new Map([['id', 1001]]); console.log(map.has('id')); // true console.log(map.has('phone')); // false ``` | +| `delete(key)` | 删除指定key对应的键值对，删除成功返回`true`，key不存在返回`false` | ```js const map = new Map([['name', '王五']]); const res1 = map.delete('name'); // res1=true, map变为空 const res2 = map.delete('name'); // res2=false ``` | +| `clear()` | 清空Map中所有键值对，无返回值（改变原Map） | ```js const map = new Map([['a', 1], ['b', 2]]); map.clear(); console.log(map.size); // 0 ``` | +| `forEach(callback)` | 遍历Map，对每个键值对执行回调（无返回值）
回调参数：value、key、当前Map | ```js const map = new Map([['name', '赵六'], ['age', 25]]); map.forEach((value, key, map) => { console.log(`${key}: ${value}`); // 输出name: 赵六、age: 25 }); ``` | +| `keys()` | 返回Map中所有key的迭代器对象，可通过`for...of`遍历 | ```js const map = new Map([['a', 1], ['b', 2]]); const keys = map.keys(); for (const key of keys) { console.log(key); // 输出a、b } ``` | +| `values()` | 返回Map中所有value的迭代器对象，可通过`for...of`遍历 | ```js const map = new Map([['a', 1], ['b', 2]]); const values = map.values(); for (const val of values) { console.log(val); // 输出1、2 } ``` | +| `entries()` | 返回Map中所有`[key, value]`的迭代器对象（默认遍历Map时使用此迭代器） | ```js const map = new Map([['a', 1], ['b', 2]]); const entries = map.entries(); for (const [key, val] of entries) { console.log(key, val); // 输出a 1、b 2 } // 简写（直接遍历Map） for (const [key, val] of map) { console.log(key, val); // 同上 } ``` | +| `Map.from(iterable)` | （ES2022+静态方法）将可迭代对象（如数组、Set、Map）转为Map，返回新Map | ```js // 数组转Map const arr = [['x', 10], ['y', 20]]; const map1 = Map.from(arr); // Map(2) { 'x' => 10, 'y' => 20 } // Set转Map（Set元素需为[key, value]数组） const set = new Set([['a', 1]]); const map2 = Map.from(set); // Map(1) { 'a' => 1 } ``` | +| `Map.of(...entries)` | （ES2022+静态方法）创建包含指定键值对的Map，返回新Map（直接传入key-value参数，无需嵌套数组） | ```js const map = Map.of('name', '孙七', 'age', 30); console.log(map); // Map(2) { 'name' => '孙七', 'age' => 30 } ``` | +| `Map.prototype[Symbol.iterator]` | 迭代器方法，返回`entries()`迭代器（支持`for...of`直接遍历Map的核心） | ```js const map = new Map([['a', 1]]); const iter = map[Symbol.iterator](); console.log(iter.next().value); // ['a', 1] ``` | + +## set集合速查表 +| 方法名/属性 | 说明 | 简单代码实现 | +| ------ | ---- | ---- | +| `new Set()` | 创建空Set实例（或传入可迭代对象初始化，自动去重重复元素） | ```js // 空Set const set1 = new Set(); // 传入数组初始化（自动去重） const set2 = new Set([1,2,2,3]); // set2 = Set(3) {1,2,3} // 传入字符串初始化（按字符去重） const set3 = new Set("aabcc"); // set3 = Set(3) {'a','b','c'} ``` | +| `size`（属性） | 返回Set中元素的个数（只读属性，非方法） | ```js const set = new Set([1,2,3]); console.log(set.size); // 输出3 ``` | +| `add(value)` | 向Set中添加元素（重复元素会被忽略），返回当前Set实例（可链式调用） | ```js const set = new Set(); // 单个添加 set.add(1); // 链式添加 set.add(2).add(3).add(2); // 重复添加2被忽略 console.log(set); // Set(3) {1,2,3} ``` | +| `delete(value)` | 从Set中删除指定元素，删除成功返回`true`，元素不存在返回`false` | ```js const set = new Set([1,2,3]); const res1 = set.delete(2); // res1=true, set变为{1,3} const res2 = set.delete(4); // res2=false ``` | +| `has(value)` | 判断Set是否包含指定元素，返回布尔值 | ```js const set = new Set([1,2,3]); console.log(set.has(2)); // true console.log(set.has(4)); // false ``` | +| `clear()` | 清空Set中所有元素，无返回值（改变原Set） | ```js const set = new Set([1,2,3]); set.clear(); console.log(set.size); // 0 ``` | +| `forEach(callback)` | 遍历Set，对每个元素执行回调（无返回值）
回调参数：value、key（与value相同）、当前Set | ```js const set = new Set([1,2,3]); set.forEach((value, key, set) => { console.log(`${key}: ${value}`); // 输出1:1、2:2、3:3（key=value） }); ``` | +| `keys()` | 返回Set中所有元素的迭代器对象（与`values()`效果一致，因Set无键值区分） | ```js const set = new Set([1,2,3]); const keys = set.keys(); for (const key of keys) { console.log(key); // 输出1、2、3 } ``` | +| `values()` | 返回Set中所有元素的迭代器对象（Set默认迭代器） | ```js const set = new Set([1,2,3]); const values = set.values(); for (const val of values) { console.log(val); // 输出1、2、3 } ``` | +| `entries()` | 返回Set中所有`[value, value]`的迭代器对象（因Set无键值区分，键和值相同） | ```js const set = new Set([1,2,3]); const entries = set.entries(); for (const [key, val] of entries) { console.log(key, val); // 输出1 1、2 2、3 3 } ``` | +| `for...of` 遍历 | 直接遍历Set元素（依托`Symbol.iterator`迭代器，等价于遍历`values()`） | ```js const set = new Set([1,2,3]); for (const val of set) { console.log(val); // 输出1、2、3 } ``` | +| `Set.from(iterable)` | （ES2022+静态方法）将可迭代对象（如数组、Set、字符串）转为Set，自动去重 | ```js // 数组转Set（去重） const arr = [1,2,2,3]; const set1 = Set.from(arr); // Set(3) {1,2,3} // 字符串转Set（按字符去重） const str = "aabbcc"; const set2 = Set.from(str); // Set(3) {'a','b','c'} ``` | +| `Set.of(...values)` | （ES2022+静态方法）创建包含指定元素的Set，自动去重重复参数 | ```js const set = Set.of(1,2,2,3,4); console.log(set); // Set(4) {1,2,3,4} ``` | +| `Set.prototype[Symbol.iterator]` | 迭代器方法，返回`values()`迭代器（支持`for...of`直接遍历Set的核心） | ```js const set = new Set([1,2]); const iter = set[Symbol.iterator](); console.log(iter.next().value); // 1 console.log(iter.next().value); // 2 ``` | +| 转数组技巧 | Set无原生转数组方法，可通过`Array.from()`或扩展运算符`[...set]`实现 | ```js const set = new Set([1,2,3]); // 方法1：Array.from() const arr1 = Array.from(set); // [1,2,3] // 方法2：扩展运算符 const arr2 = [...set]; // [1,2,3] ``` | + + +## 作业 + diff --git "a/\351\231\210\346\226\271\346\227\255/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..a8de1f1cb2de580591d79cf05d00a6e4cb23f641 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251126-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,49 @@ +# 笔记 + +### 正则表达式 + +- 正则表达式是一个用简单语法来描述的字符串模式，通常用于替换验证文本内容 + +## 正则表达式简单速查表 + +## 一、基础语法 + +| 类型 | 符号 | 说明 | 示例 | +| ---------- | -------------- | ------------------------------ | -------------------------- | +| 字面量 | 直接字符 | 匹配自身（字母 / 数字 / 符号） | `/abc/` 匹配 "abc" | +| 转义字符 | `\` | 匹配特殊字符（`.`/`*`等） | `/\./` 匹配 "." | +| 字符类 | `[abc]` | 匹配任意一个指定字符 | `/[abc]/` 匹配 "a"/"b"/"c" | +| 反向字符类 | `[^abc]` | 匹配非指定字符 | `/[^abc]/` 匹配 "d"/"1" | +| 范围匹配 | `[a-z0-9]` | 匹配区间内字符（简写） | `/[0-9]/` 匹配数字 | +| 预定义类 | `\d`/`\w`/`\s` | 数字 / 字母下划线 / 空白符 | `/\d/` 等价于 `[0-9]` | +| 边界匹配 | `^`/`$` | 行首 / 行尾 | `/^abc$/` 匹配整行 "abc" | +| 量词 | `*`/`+`/`?` | 0 + 次 / 1 + 次 / 0-1 次 | `/a*/` 匹配 ""/"a"/"aa" | +| 精确量词 | `{n}`/`{n,}` | 恰好 n 次 / 至少 n 次 | `/a{2}/` 匹配 "aa" | + +## 二、常用方法 + +| 方法 | 所属对象 | 功能 | 示例 | +| -------------- | -------- | ----------------------------------- | ------------------------------------------------- | +| `test()` | RegExp | 验证字符串是否匹配，返回布尔值 | `/\d+/.test("123")` → `true` | +| `match()` | String | 匹配结果存入数组（无匹配返回 null） | "abc123".match(/\d+/) → `["123"]` | +| `replace()` | String | 替换匹配内容 | "abc".replace(/a/, "x") → "xbc" | +| `replaceAll()` | String | 替换所有匹配（需加`g`修饰符） | "aaa".replaceAll(/a/g, "b") → "bbb" | +| `exec()` | RegExp | 逐次匹配（支持分组捕获） | `/(\d)([a-z])/.exec("1a2b")` → `["1a", "1", "a"]` | + +## 三、修饰符 + +| 修饰符 | 说明 | 示例 | +| ------ | ------------------------------- | ----------------------------------- | +| `i` | 忽略大小写 | `/abc/i` 匹配 "ABC"/"abc" | +| `g` | 全局匹配（不终止于第一个匹配） | "aaa".match(/a/g) → `["a","a","a"]` | +| `m` | 多行匹配（`^`/`$`匹配行首行尾） | `/^a/m` 匹配 "a\nabc" 中第一行 "a" | + +## 四、实用示例（直接复用） + +| 场景 | 正则表达式 | 说明 | +| ---------- | ------------------------------- | ----------------------------- | +| 手机号验证 | `/^1[3-9]\d{9}$/` | 中国大陆手机号（11 位） | +| 邮箱验证 | `/^\w+@[a-z0-9]+\.[a-z]{2,}$/i` | 简单邮箱格式（含域名后缀） | +| 提取数字 | `/\d+/g` | 匹配字符串中所有数字 | +| 去除空格 | `/\s+/g` | 替换所有空白符（空格 / 换行） | +| 匹配中文 | `/[\u4e00-\u9fa5]/g` | 匹配中文字符 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..2f6b29d73bcadffe0246d12ec9ef894a463a5eee --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251127-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,41 @@ +# 笔记 + +## 异常处理 + + + +## 核心语法：try-catch (-finally) + +### 1. 基础格式（捕获异常） + +```js +try { + // 可能发生错误的代码（如：运算、接口请求、DOM操作） +} catch (error) { + // 错误发生时执行：处理异常（如：提示用户、打印日志） +} +``` + +### 2. 带 finally 格式（无论是否出错都执行) + +```js +try { + // 可能出错的代码 +} catch (error) { + // 处理异常 +} finally { + // 必执行代码（如：关闭弹窗、释放资源） +} +``` + +### 3. 主动抛出异常（throw） + +```js +// 主动触发异常（可抛字符串、Error对象等，推荐Error） +throw new Error("自定义错误信息"); // 推荐：带堆栈信息，便于调试 +// 或简化（不推荐，无堆栈）：throw "错误信息"; +``` + + +## + diff --git "a/\351\231\210\346\226\271\346\227\255/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..709b28ceee0b7e85b68936f7a0b9d99e1b62e8cb --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251128-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,23 @@ +# 笔记 + +## 一、焦点事件（元素获取 / 失去焦点） + +| 事件名 | 说明 | 语法示例（2 种常用绑定） | +| ---------- | ---------------------- | ------------------------------------------------------- | +| `focus` | 元素获取焦点（无冒泡） | 1. 标签属性：`` | +| | | 2. JS 绑定：`input.addEventListener('focus', () => {})` | +| `blur` | 元素失去焦点（无冒泡） | 1. 标签属性：`` | +| | | 2. JS 绑定：`input.addEventListener('blur', () => {})` | +| `focusin` | 获取焦点（支持冒泡） | `parent.addEventListener('focusin', () => {})` | +| `focusout` | 失去焦点（支持冒泡） | `parent.addEventListener('focusout', () => {})` | + +## 二、表单事件（表单交互相关） + +| 事件名 | 说明 | 语法示例 | +| ------------------------------------------------ | ------------------------------- | -------- | +| `submit` | 表单提交（点击提交按钮 / 回车） | ```js | +| form.addEventListener('submit', (e) => { | | | +| e.preventDefault (); // 阻止默认提交行为（必写） | | | +| // 表单验证、数据提交逻辑 | | | +| }); | | | + diff --git "a/\351\231\210\346\226\271\346\227\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..bf0ca979b7cede28413d581e3050f48d856dfe12 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251201-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,16 @@ +## 拖拽方法 + +### 事件详解 + +#### 拖拽源事件 + +1. dragstart：当用户开始拖拽一个元素时触发。通常在此事件中设置拖拽数据（如拖拽元素的ID）和拖拽效果。 +2. drag：拖拽过程中连续触发（类似于mousemove事件）。 +3. dragend：拖拽结束（松开鼠标）时触发，无论拖拽成功与否都会触发。 + +#### 放置目标事件 + +1. dragenter：当拖拽元素进入放置区域时触发。通常用于给放置区域添加视觉反馈。 +2. dragover：当拖拽元素在放置区域上方移动时连续触发。必须在此事件中调用event.preventDefault()才能允许放置。 +3. dragleave：当拖拽元素离开放置区域时触发。通常用于移除视觉反馈。 +4. drop：当拖拽元素在放置区域释放时触发。必须在此事件中调用event.preventDefault()才能执行放置操作。通常在此事件中处理拖拽数据的接收和处理。 \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251203\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251203\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..dcd7349aa662fdea5f2f8425b991c2dae2c8b123 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251203\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,80 @@ +# 笔记 + +Document 是 DOM（文档对象模型）的核心对象，代表整个 HTML/XML 文档，是操作页面内容、结构和行为的入口。以下为高频使用的属性 / 方法速查，按功能分类，附简洁示例。 + +## 一、核心属性（快速获取文档关键信息） + +| 属性名 | 说明 | 示例 | +| ------------------------ | -------------------------------------------- | ------------------------------------------------------------ | +| document.documentElement | 获取文档根元素（``，操作根节点首选） | `const html = document.documentElement;` | +| document.body | 获取``元素 | `document.body.style.background = '#f5f5f5';` | +| document.head | 获取``元素 | `const meta = document.head.querySelector('meta[name="viewport"]');` | +| document.title | 获取 / 设置页面标题（``内容） | `document.title = '新标题';` | +| document.URL | 获取当前文档完整 URL（只读） | `console.log(document.URL);` | +| document.domain | 获取当前文档域名（只读，部分场景可设置） | `console.log(document.domain);` | +| document.readyState | 文档加载状态（loading/interactive/complete） | `if (document.readyState === 'complete') { /* 加载完成 */ }` | +| document.activeElement | 获取当前获焦元素 | `console.log(document.activeElement.tagName);` | + +## 二、选择器方法（获取 DOM 元素） + +| 方法名 | 说明 | 示例 | +| --------------------------------- | ------------------------------------------- | -------------------------------------------------------- | +| getElementById(id) | 通过 ID 获取单个元素（无则 null） | `const box = document.getElementById('box');` | +| querySelector(selector) | 通过 CSS 选择器获取第一个匹配元素 | `const btn = document.querySelector('.btn');` | +| querySelectorAll(selector) | 通过 CSS 选择器获取所有匹配元素（NodeList） | `const items = document.querySelectorAll('.list-item');` | +| getElementsByClassName(className) | 通过类名获取元素（HTMLCollection，动态） | `const boxes = document.getElementsByClassName('box');` | +| getElementsByTagName(tagName) | 通过标签名获取元素（HTMLCollection，动态） | `const divs = document.getElementsByTagName('div');` | +| getElementsByName(name) | 通过 name 属性获取元素（NodeList） | `const inputs = document.getElementsByName('username');` | + +## 三、节点创建 / 添加 / 删除（DOM 操作） + +| 方法名 | 说明 | 示例 | +| ------------------------------ | --------------------------------------- | ------------------------------------------------------------ | +| createElement(tagName) | 创建新元素节点 | `const p = document.createElement('p'); p.textContent = '新段落';` | +| createTextNode(text) | 创建文本节点 | `const textNode = document.createTextNode('Hello');` | +| createAttribute(name) | 创建属性节点 | `const attr = document.createAttribute('data-id'); attr.value = '123';` | +| appendChild(child) | 向父节点末尾添加子节点（parent 为元素） | `document.body.appendChild(p);` | +| insertBefore(newNode, refNode) | 在参考节点前插入新节点 | `document.body.insertBefore(p, document.body.firstChild);` | +| removeChild(child) | 删除父节点下的子节点 | `document.body.removeChild(p);` | +| replaceChild(newNode, oldNode) | 替换父节点下的子节点 | `document.body.replaceChild(p, document.body.firstChild);` | + +## 四、文档信息与设置 + +| 属性 / 方法名 | 说明 | 示例 | +| ------------- | --------------------------------------- | ------------------------------------- | +| characterSet | 获取文档字符编码（如 UTF-8） | `console.log(document.characterSet);` | +| dir | 获取 / 设置文本方向（ltr/rtl） | `document.dir = 'ltr';` | +| lastModified | 获取文档最后修改时间（字符串） | `console.log(document.lastModified);` | +| defaultView | 获取关联的 window 对象（等价于 window） | `const win = document.defaultView;` | + +## 五、事件处理 + +| 方法名 | 说明 | 示例 | +| ---------------------------------- | ----------------------------------------- | ------------------------------------------------------------ | +| addEventListener(type, handler) | 为文档添加事件监听 | `document.addEventListener('click', () => console.log('点击文档'));` | +| removeEventListener(type, handler) | 移除事件监听（需与添加时的 handler 一致） | `const handler = () => {}; document.removeEventListener('click', handler);` | +| dispatchEvent(event) | 触发自定义事件 | `const customEvt = new Event('custom'); document.dispatchEvent(customEvt);` | +| DOMContentLoaded 事件 | DOM 解析完成（无需等待资源） | `document.addEventListener('DOMContentLoaded', () => console.log('DOM 就绪'));` | +| load 事件 | 页面所有资源加载完成 | `document.addEventListener('load', () => console.log('页面加载完成'));` | + +## 六、Cookie 操作 + +| 属性 / 方法名 | 说明 | 示例 | +| --------------- | ---------------------------------- | ------------------------------------------------------------ | +| document.cookie | 获取 / 设置 Cookie（键值对字符串） | `// 设置：有效期1小时，全站生效``document.cookie = 'username=zhangsan; max-age=3600; path=/';``// 获取``console.log(document.cookie);` | + +## 七、其他常用功能 + +| 方法名 | 说明 | 示例 | +| ---------------------- | -------------------------------------------- | ------------------------------------------------------------ | +| write(text) | 向文档写入内容（加载后调用会覆盖文档） | `document.write('Hello');` | +| writeln(text) | 写入内容并换行（等价于 write (text + '\n')） | `document.writeln('第一行');` | +| cloneNode(deep) | 克隆文档节点（deep=true 深克隆） | `const clone = document.documentElement.cloneNode(true);` | +| importNode(node, deep) | 从其他文档导入节点到当前文档 | `const iframeDoc = iframe.contentDocument; const node = document.importNode(iframeDoc.body, true);` | + +## 重要备注 + +1. **HTMLCollection vs NodeList**：HTMLCollection 是动态集合（DOM 变化自动更新），NodeList 除 `querySelectorAll` 返回静态外，其余（如 `getElementsByName`）为动态； +2. 避免滥用 `document.write`：页面加载完成后调用会覆盖整个文档，且性能较差； +3. **DOMContentLoaded vs load**：前者仅等待 DOM 解析完成，后者需等待图片、样式等所有资源加载； +4. Cookie 安全：设置时建议添加 `secure`（仅 HTTPS）、`SameSite`（防止 CSRF）属性。 \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251204\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251204\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..cc468fe78f9561562a4d442676dd774117eee64b --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251204\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,39 @@ +# DOM 节点速查表 + +## 一、核心节点属性 + +| 属性名 | 说明 | +| --------------- | ---------------------------------------- | +| nodeName | 节点的名称 | +| nodeValue | 节点的值（通常仅用于文本节点） | +| nodeType | 节点的类型（修正原拼写错误：nodeTyep） | +| parentNode | 返回当前节点的父节点 | +| childNodes | 返回当前节点的所有子节点列表（NodeList） | +| firstChild | 返回当前节点的第一个子节点 | +| lastChild | 返回当前节点的最后一个子节点 | +| previousSibling | 返回当前节点的前一个兄弟节点 | +| nextSibling | 返回当前节点的后一个兄弟节点 | +| attributes | 返回元素节点的属性列表（NamedNodeMap） | + +## 二、节点操作方法 + +| 操作类型 | 语法 | 说明 | +| -------- | -------------------------- | ------------------------------------------------------------ | +| 追加节点 | obj.appendChild(newChild) | 向 obj 节点末尾追加新子节点 newChild | +| 插入节点 | obj.insertBefore(new, ref) | 在 obj 节点的 ref 子节点**之前**插入 new 节点 | +| 复制节点 | obj.cloneNode(deep) | 复制 obj 节点；deep=true：深拷贝（含所有子节点）；deep=false：浅拷贝（仅当前节点） | +| 删除节点 | obj.removeChild(oldChild) | 从 obj 节点中删除子节点 oldChild | +| 替换节点 | obj.replaceChild(new, old) | 用 new 节点替换 obj 节点下的 old 子节点 | + +## 三、文档元素获取 + +| 获取方式 | 语法 | 说明 | +| -------- | ----------------------------------------- | ------------------------------------------------------------ | +| 通过 ID | document.getElementById("userId") | 获取文档中匹配指定 ID 的**单个**元素（ID 唯一） | +| 通过类名 | document.getElementsByClassName("userId") | 获取文档中匹配指定类名的**元素集合**（HTMLCollection）（修正原拼写错误：缺少 s） | + +### 补充说明 + +1. `childNodes`/`getElementsByClassName` 返回的是**动态集合**，文档结构变化会自动更新； +2. `firstChild`/`lastChild` 可能获取到文本节点（如换行、空格），需结合 `nodeType` 过滤（元素节点 `nodeType=1`）； +3. `getElementById` 是 `document` 专属方法，无法通过普通元素节点调用。 \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..14945abcd068ce76726edb63d2ee8458f1330ae1 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251205-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,52 @@ +# 笔记 + +## 一、DHTML 内容替换属性 + +| 属性名 | 语法示例 | 核心说明 | +| --------- | ---------------------------------- | ---------------------------------------------------- | +| innerHTML | `element.innerHTML = "新内容"` | 替换元素内容（支持 HTML 标签，会解析标签并渲染） | +| innerText | `element.innerText = "纯文本内容"` | 仅操作元素的纯文本内容（忽略 HTML 标签，只显示文本） | +| outerHTML | `element.outerHTML = "新元素"` | 替换元素本身（含标签）+ 内容，原元素会被移除 | +| outerText | `element.outerText = "替换文本"` | 将元素本身替换为纯文本节点，原元素被移除 | + +## 二、Window 对象核心特性 + +### 2.1 常用属性 + +| 属性名 | 简化写法 | 语法 / 用途 | 说明 | +| ------------------ | --------- | ------------------------------------------ | ----------------------------------------- | +| window.document | document | `window.document` | 指向窗口载入的 DOM 文档，DOM 操作核心入口 | +| window.location | location | `window.location.href = "https://xxx.com"` | 获取 / 设置当前窗口的 URL（地址） | +| window.navigator | navigator | `window.navigator.userAgent` | 返回浏览器信息（版本、内核、设备等） | +| window.screen | screen | `window.screen.width` | 屏幕对象引用，含屏幕分辨率、色深等信息 | +| window.innerHeight | - | `let h = window.innerHeight` | 浏览器窗口内部高度（含滚动条，不含边框） | +| window.innerWidth | - | `let w = window.innerWidth` | 浏览器窗口内部宽度（含滚动条，不含边框） | + +### 2.2 常用方法 + +| 方法名 | 语法示例 | 说明 | +| ----------------- | ---------------------------------------------------- | -------------------------------------------------------- | +| window.open() | `window.open("url", "name", "width=300,height=200")` | 打开新窗口，可指定 URL、窗口名、尺寸参数 | +| window.close() | `window.close()` | 关闭当前窗口（仅对脚本打开的窗口有效，浏览器有安全限制） | +| window.resizeTo() | `window.resizeTo(800, 600)` | 将窗口调整为**绝对尺寸**（宽 800px，高 600px） | +| window.resizeBy() | `window.resizeBy(100, 50)` | 相对当前尺寸调整窗口（宽 + 100px，高 + 50px） | +| window.moveTo() | `window.moveTo(100, 200)` | 将窗口移动到屏幕**绝对坐标**（x=100px，y=200px） | +| window.moveBy() | `window.moveBy(50, 30)` | 相对当前位置移动窗口（x+50px，y+30px） | +| window.alert() | `window.alert("提示信息")` | 显示无交互提示框（仅 “确定” 按钮） | +| window.confirm() | `let res = window.confirm("确认操作？")` | 显示确认框（返回布尔值：确认 = true / 取消 = false） | +| window.prompt() | `let val = window.prompt("输入内容", "默认值")` | 显示输入框（返回输入值，取消则返回 null） | + +### 2.3 事件处理方法 + +| 方法名 | 语法示例 | 说明 | +| ---------------------------- | ---------------------------------------- | ------------------------------------------------- | +| window.addEventListener() | `window.addEventListener("load", fn)` | 为 window 注册指定事件的处理器（支持冒泡 / 捕获） | +| window.removeEventListener() | `window.removeEventListener("load", fn)` | 移除已注册的事件监听器（需与注册时函数引用一致） | + +### 2.4 其他核心特性 + +| 特性名 | 简化写法 | 语法 / 用途 | 说明 | +| --------------------- | -------------- | ---------------------------------------- | ----------------------------------------------- | +| window.history | history | `history.back()` / `history.go(-1)` | 操作浏览器历史记录（后退、前进、跳转） | +| window.localStorage | localStorage | `localStorage.setItem("key", "value")` | 本地存储（永久保存，除非手动清除，跨会话） | +| window.sessionStorage | sessionStorage | `sessionStorage.setItem("key", "value")` | 会话存储（仅当前窗口 / 标签页有效，关闭则清除） | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..7278c241f5ab45b028e8b6fb428bd5368d1c1e38 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251208-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,62 @@ +# 笔记 + +## 浏览器对象模型 + +### location对象 + +提供当前对象窗口中加载文档的信息，以及导航功能 + +| 属性 | 说明 | +| --------- | ---------------------------------------------- | +| href: | 设置或返回完整的URL。 | +| protocol: | 设置或返回URL的协议部分（例如http:或https:）。 | +| host: | 设置或返回URL的主机名和端口号。 | +| hostname: | 设置或返回URL的主机名。 | +| port: | 设置或返回URL的端口号。 | +| pathname: | 设置或返回URL的路径部分。 | +| search: | 设置或返回URL的查询部分（从问号?开始）。 | +| hash: | 设置或返回URL的锚部分（从井号#开始）。 | + +### location对象的方法 + +1. assign()方法 + - 用于跳转到新的页面 +2. reload() + - 用于重新载入当前页面 + +### navigator对象 + +| 属性 | 说明 | +| ------------- | ------------------------ | +| appCodeName | 获取浏览器代码名 | +| userAgent | 获取浏览器的整体信息 | +| appName | 获取浏览器名称 | +| appVersion | 获取浏览器的版本号 | +| platform | 获取当前计算机的操作系统 | +| cookieEnabled | 判断是否启用Cookies | + +### screen对象 + +| 属性 | 说明 | +| ------------ | ------------------------------------------ | +| availHeight: | 返回屏幕的高度（不包括 Windows 任务栏）。 | +| availWidth: | 返回屏幕的宽度（不包括 Windows 任务栏）。 | +| colorDepth: | 返回目标设备或缓冲器上的调色板的比特深度。 | +| height: | 返回屏幕的总高度。 | +| pixelDepth: | 返回屏幕的颜色分辨率（每像素的位数）。 | +| width: | 返回屏幕的总宽度。 | + +### history对象 + +| 属性 | 说明 | +| -------- | ------------------- | +| length | 历史列表中的URL数量 | +| current | 当前文档的URL | +| next | 历史列表的下一个URL | +| previous | 历史列表的前一个URL | + +| 方法 | 说明 | +| --------- | -------------- | +| back() | 退回前一页 | +| forward() | 重新进入下一页 | +| go() | 进入指定的网页 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..02998eae29a5f204b5d7d4eb9c4f2faac03bd7ad --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251210-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,28 @@ +# Style 对象核心属性速查表 + +## 一、Style 对象基础使用 + +| 核心语法 | 说明 | 示例 | +| ------------------------------------------ | ------------------------------------------------------------ | ---------------------------------------------------- | +| document.getElementById ("id").style. 属性 | 通过 DOM 元素获取 Style 对象，修改元素**行内 CSS 样式**（优先级高于外部 / 内部样式） | document.getElementById("box").style.color = "#333"; | + +## 二、颜色与背景属性 + +| 属性名 | 语法示例 | 核心说明 | +| -------------------- | ---------------------------------------------- | ------------------------------------------------------------ | +| backgroundColor | `elem.style.backgroundColor = "#f00"` | 设置元素背景颜色（支持十六进制、RGB/RGBA、颜色名、HSL 等格式） | +| color | `elem.style.color = "rgb(255,255,255)"` | 设置元素文本颜色（支持所有合法颜色值格式） | +| backgroundImage | `elem.style.backgroundImage = "url('bg.png')"` | 设置背景图片，需通过`url()`指定图片路径（支持相对 / 绝对路径、base64） | +| backgroundPosition | `elem.style.backgroundPosition = "center top"` | 设置背景图片位置（支持关键字：center/top/bottom/left/right；像素 / 百分比） | +| backgroundRepeat | `elem.style.backgroundRepeat = "no-repeat"` | 背景图片平铺方式：repeat（默认，全平铺）repeat-x（水平）repeat-y（垂直）no-repeat（不平铺） | +| backgroundAttachment | `elem.style.backgroundAttachment = "fixed"` | 背景图片滚动行为：fixed（固定，不随滚动条滚动）scroll（随内容滚动） | + +## 三、定位相关属性 + +| 属性名 | 语法示例 | 核心说明 | +| ---------- | ---------------------------------------------- | ------------------------------------------------------------ | +| clip | `elem.style.clip = "rect(0, 100px, 100px, 0)"` | 仅对`position: absolute`的元素生效，设置可视区域（超出部分透明）；语法：rect (上，右，下，左) | +| top | `elem.style.top = "20px"` | 定位元素上边界位置，需配合`position`（absolute/relative/fixed/sticky）生效 | +| left | `elem.style.left = "50%"` | 定位元素左边界位置，需配合`position`属性生效 | +| paddingTop | `elem.style.paddingTop = "15px"` | 设置元素**顶部内边距**（盒模型属性，非定位属性，与父 / 子元素位置相关） | +| position | `elem.style.position = "relative"` | 元素定位方式：static（默认，无定位）relative（相对自身原位置）absolute（相对最近定位父级）fixed（相对视口）sticky（粘性定位，滚动阈值后固定） | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..10ca1eed19083a416e285d174a2d26d1d9a409da --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251211-\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,21 @@ + + +## Form对象 + +### js访问表单 + +1. document.forms[] 按编号进行访问 +2. document.formname 按名称进行访问 +3. document.getElementById("") 定位访问表单 + +### Form对象的属性，方法与事件 + +| 属性 | 说明 | +| -------- | ---------------------------------------------------- | +| name | 返回或设置表单的名称 | +| action | 返回或设置表单提交的URL | +| method | 返回或设置表单提交的方式，可取值为get或post | +| encoding | 返回或设置表单信息提交的编码方式 | +| id | 返回或设置表单的id | +| target | 返回或设置提交表单时目标窗口的打开方式 | +| elements | 返回表单对象中的元素构成的数组，数组中的元素也是对象 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251212\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251212\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..10ca1eed19083a416e285d174a2d26d1d9a409da --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251212\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,21 @@ + + +## Form对象 + +### js访问表单 + +1. document.forms[] 按编号进行访问 +2. document.formname 按名称进行访问 +3. document.getElementById("") 定位访问表单 + +### Form对象的属性，方法与事件 + +| 属性 | 说明 | +| -------- | ---------------------------------------------------- | +| name | 返回或设置表单的名称 | +| action | 返回或设置表单提交的URL | +| method | 返回或设置表单提交的方式，可取值为get或post | +| encoding | 返回或设置表单信息提交的编码方式 | +| id | 返回或设置表单的id | +| target | 返回或设置提交表单时目标窗口的打开方式 | +| elements | 返回表单对象中的元素构成的数组，数组中的元素也是对象 | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251215\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251215\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..2a8935b8a72ace1504b6ec828420e134a6bf31c2 --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251215\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,25 @@ + + +# jQuery 基础速查表 + +| 分类 | 语法 / 方法 | 说明 | 示例 | +| ------------- | ------------------------------ | ------------------------------------ | ---------------------------------------------- | +| 📌 jQuery 基础 | `` | 引入 jQuery 库（建议放 body 结束前） | 放在``前引入 | +| | `$` | jQuery 的入口（是方法 / 对象） | 用`$`调用 jQuery 能力 | +| | `$('选择器')` | 获取 jQuery 对象（≠原生 DOM 对象） | `let $div = $('div')` | +| | `$jq对象[0]` | jQuery 对象转原生 DOM 对象 | `$div[0]`（得到原生 div 节点） | +| | `$(原生DOM对象)` | 原生 DOM 对象转回 jQuery 对象 | `$($div[0])` | +| 🔍 基础选择器 | `$('标签名')` | 标签选择器 | `$('p')`（选所有 p 标签） | +| | `$('.类名')` | 类选择器 | `$('.box')`（选所有 class 为 box 的元素） | +| | `$('#id名')` | ID 选择器（页面唯一） | `$('#btn')`（选 id 为 btn 的元素） | +| 🔗 关系选择器 | `$('父 子')` | 子代选择器（父元素下所有子元素） | `$('ul li')`（选 ul 下所有 li） | +| | `$('父>子')` | 直接子代选择器（父元素的直接子元素） | `$('ul>li')`（选 ul 的直接子 li） | +| | `$('元素~兄弟')` | 兄弟选择器（元素后的所有兄弟） | `$('li~li')`（选 li 后的兄弟 li） | +| | `$('元素+相邻兄弟')` | 相邻兄弟选择器（元素后的第一个兄弟） | `$('li+li')`（选 li 的下一个兄弟 li） | +| 🛠️ 高级选择器 | `$('[属性]')` | 属性选择器 | `$('[data-id]')`（选带 data-id 属性的元素） | +| | `$(':伪类')` | 伪类选择器 | `$('li:even')`（选偶数位置的 li） | +| | `$('::伪元素')` | 伪元素选择器 | `$('p::before')`（选 p 的 before 伪元素） | +| 🎯 事件处理 | `$jq.on('click',function(){})` | 绑定事件 | `$btn.on('click', ()=>{alert('点击了')})` | +| | `$jq.click(function(){})` | 快捷绑定点击事件 | `$btn.click(()=>{alert('点击了')})` | +| | `$jq.trigger('click')` | 手动触发事件 | `$btn.trigger('click')`（主动触发 btn 的点击） | +| | `$(function(){})` | jQuery 入口函数（DOM 加载后执行） | `$(function(){ $btn.click() })` | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251217\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251217\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..15f062e42264796a563a24e1eb2b640d15e9850a --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251217\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,29 @@ + + +# jQuery DOM 操作速查表 + +| 分类 | 方法 / 语法 | 说明 | 极简示例 | +| ----------------- | ------------------------------ | -------------------------------------------- | ----------------------------------------- | +| 🔄 对象转换 | `$(原生DOM)` | 原生 DOM 转 jQuery 对象 | `$(document.getElementById('box'))` | +| | `$jq[0]` / `$jq.get(0)` | jQuery 对象转原生 DOM | `$('div')[0]` | +| 🔍 DOM 查找 | `$('#id')` | ID 选择器（唯一） | `$('#container')` | +| | `$('.class')` | 类选择器（批量） | `$('.content')` | +| | `$('tag')` | 标签选择器 | `$('li')` | +| | `$el.find('selector')` | 查找后代元素（性能优） | `$('#list').find('.item')` | +| | `$el.parent()` | 查找直接父节点 | `$('.content').parent()` | +| | `$el.siblings('selector')` | 查找同级兄弟节点 | `$('.content').siblings('span')` | +| 📝 DOM 创建 / 插入 | `$('')` | 创建 jQuery 元素 | `$('新项')` | +| | `$parent.append($el)` | 尾部插入子元素（最常用） | `$('#list').append($newLi)` | +| | `$parent.prepend($el)` | 头部插入子元素 | `$('#container').prepend($newBtn)` | +| | `$el.after('html/$el')` | 后方插入兄弟元素 | `$('.content').after('后')` | +| ✏️ DOM 修改 | `$el.text('内容')` | 设置 / 获取纯文本（防 XSS） | `$('.content').text('新文本')` | +| | `$el.html('内容')` | 设置 / 获取 HTML 内容（注意 XSS） | `$('.content').html('加粗')` | +| | `$el.attr('key','val')` | 设置 / 获取属性 | `$el.attr('data-id', 123)` | +| | `$el.addClass('className')` | 添加类名 | `$el.addClass('active')` | +| | `$el.removeClass('className')` | 移除类名 | `$el.removeClass('content')` | +| | `$el.css({k:v})` | 设置行内样式（支持多属性） | `$el.css({color:'red', fontSize:'16px'})` | +| 🗑️ DOM 删除 | `$el.remove()` | 删除自身及子节点（常用） | `$('.item').remove()` | +| | `$el.empty()` | 清空子节点（保留自身） | `$('#list').empty()` | +| 🎯 事件绑定 | `$el.click(fn)` | 绑定点击事件（快捷方式） | `$('#btn').click(()=>{/* 操作 */})` | +| | `$el.on('event', fn)` | 通用事件绑定（支持自定义事件） | `$el.on('change', handleChange)` | +| 🚪 入口函数 | `$(function(){})` | DOM 加载完成后执行代码（替代 window.onload） | `$(function(){ $('#btn').click() })` | \ No newline at end of file diff --git "a/\351\231\210\346\226\271\346\227\255/20251218\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251218\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..2d0c0780a87773d1b1b51a8e211f93578875a41c --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251218\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,13 @@ + + +## 异常处理及其动画效果 + +| jQuery 异常处理 | 1 | jQuery 对象.on ('click',function (){})) | +| --------------- | ---- | -------------------------------------------- | +| jQuery 异常处理 | 2 | jQuery 对象.click (function (){})) | +| jQuery 异常处理 | 3 | jQuery 对象.trigger ('click',function (){})) | +| jQuery 异常处理 | 4 | `$(function(){}))` | +| jQuery 动画 | 1 | 基础效果：隐藏、显示、show ()、hide () | +| jQuery 动画 | 2 | 进阶效果：淡出、淡入、fadeIn ()、fadeOut () | +| jQuery 动画 | 3 | 高级效果：animate () | + diff --git "a/\351\231\210\346\226\271\346\227\255/20251219\347\254\224\350\256\260+\347\273\203\344\271\240.md" "b/\351\231\210\346\226\271\346\227\255/20251219\347\254\224\350\256\260+\347\273\203\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..10ca1eed19083a416e285d174a2d26d1d9a409da --- /dev/null +++ "b/\351\231\210\346\226\271\346\227\255/20251219\347\254\224\350\256\260+\347\273\203\344\271\240.md" @@ -0,0 +1,21 @@ + + +## Form对象 + +### js访问表单 + +1. document.forms[] 按编号进行访问 +2. document.formname 按名称进行访问 +3. document.getElementById("") 定位访问表单 + +### Form对象的属性，方法与事件 + +| 属性 | 说明 | +| -------- | ---------------------------------------------------- | +| name | 返回或设置表单的名称 | +| action | 返回或设置表单提交的URL | +| method | 返回或设置表单提交的方式，可取值为get或post | +| encoding | 返回或设置表单信息提交的编码方式 | +| id | 返回或设置表单的id | +| target | 返回或设置提交表单时目标窗口的打开方式 | +| elements | 返回表单对象中的元素构成的数组，数组中的元素也是对象 | \ No newline at end of file diff --git a/readme.md "b/\351\231\210\346\226\271\346\227\255/readme.md" similarity index 100% rename from readme.md rename to "\351\231\210\346\226\271\346\227\255/readme.md"