建设部网站城乡规划资质标准,自建电商平台的优缺点,jsp网站建设项目实战源代码,杭州品牌网站建设前言#xff1a;
求关注#x1f62d; 本篇文章主要记录以下几部分#xff1a; 基础#xff1a; 输入输出语法#xff1b;数据类型#xff1b;运算符#xff1b;流程控制 - 分支语句#xff1b;流程控制 - 循环语句#xff1b;数组 - 基础#xff1b;函数 - 基础
求关注 本篇文章主要记录以下几部分 基础 输入输出语法数据类型运算符流程控制 - 分支语句流程控制 - 循环语句数组 - 基础函数 - 基础对象 - 基础 Web API DOMDOM事件基础事件监听、常用事件、事件对象DOM事件进阶事件流、事件委托日期对象节点操作M端事件JS插件window对象本地存储正则表达式 以下部分请移步JavaScript - 进阶高级笔记 进阶 作用域函数进阶函数提升、函数参数、箭头函数解构赋值对象进阶构造函数、实例成员、静态成员内置构造函数Object、Array、String、Number编程思想构造函数原型 高级 深浅拷贝异常处理this指向性能优化防抖、节流
壹、❗❗ JavaScript基础
HTML 表示网页的 结构CSS 表示网页的 样式JavaScript 表示网页的 行为浏览器内核 渲染引擎 JS引擎JavaScript的组成 ECMAScript — JS的基础语法Web APIs DOM — 操作文档流的属性和方法文档对象模型 是HTML文档的编程接口。它提供了对文档的结构化的表述并定义了一种方式可以在程序中对该结构进行访问从而改变文档的结构、样式和内容。DOM将文档解析为一个由节点和对象包含属性和方法组成的结构集合。简言之它会将 web页面和 程序 连接起来。进而操作网页的内容实现各种功能和部分特效 BOM — 操作浏览器的属性和方法浏览器对象模型 JS的本质 通过 JS 的语法让 浏览器 发生变换让 文档 发生变化。
一、JavaScript书写位置
行内 JavaScript内部 JavaScript外部 JavaScript
二、输入输出语法
小括号里面只要 不是纯数字 和 变量 必须要用 引号包裹单、双、反alert() --- 警示框
prompt() --- 浏览器弹出输出框用户可以输入信息
console.log() --- 控制台输出
document.write() --- 在文档页面输出识别标签代码展示alert(你好 js);
prompt(JavaScript 基础);
console.log(它~会魔法吧~);
document.write(javascript我来);三、字面量、变量、常量
3.1 字面量
用来在计算机中描述 事 / 物[ ] 数组字面量{ } 对象字面量数字字面量数字字符字面量字符串布尔字面量布尔值
3.2 变量
变量用来 存储数据 的 容器变量的本质内存里的一块空间用来 存储数据变量 必须 先声明 后使用变量的初始化 声明变量 并 赋值变量命名规则变量名只能是 数字、大小写字母、美元符($)、下划线组成⚠ 不能以数字开头⚠ 不能使用 name 作为变量名 name会将 数字型 转为 字符型声明 变量使用 let代码展示// 声明变量// 声明变量不赋值
let a // 变量的初始化 --- 声明变量并赋值
let age 18 // 声明多个变量用逗号隔开--- 不推荐
let a 18, b pink // 更新变量
let age 18age 19
console.log(age) // 19// 用变量赋值
let myFood 香蕉
let youFood myFood
console.log(youFood) // 香蕉3.2.1 var 和 let 的区别
var 可以 先使用 再声明var声明过的变量可以重复声明存在变量提升、没有块作用域等等。 let / const 必须 先声明 后使用不能 声明 重复变量不存在变量提升使用了 let / const 声明的变量存在块作用域const声明变量的时候必须初始化
3.3 常量
声明常量使用 const⚠ 常量不允许重新赋值声明的时候必须赋值 (必须初始化) 注意const num 10;
num 10;
console.log(num); // 报错 - 常量不允许重新赋值四、❗❗ 数据类型
1️⃣ 值类型 基本数据类型6 number — 数字型string — 字符串型boolean — 布尔型undefined — 未定义型null — 空类型symbol 了解bigint 2️⃣ 引用数据类型 复杂数据类型3 object — 对象function – 函数array — 数组
4.1 数字型 - number
数字型 number NaNNumber 一切十进制表示的数字
Number.MAX_VALUE // 数字中的最大值
Number.MIN_VALUE // 数字中的最小值
Infinity // 无穷大
-Infinity // 无穷小
NaN // 非数值isNaN(数据) 这个方法用来判定非数字并且返回一个值如果是数字返回 false如果不是数字返回 trueNaN 代表一个计算错误它是一个不正确的或者一个未定义的数学操作所得到的结果 ⚠ **NaN 是 粘性 的。任何对 NaN 的操作都会返回 NaN**
console.log(2 - NaN) // NaN
console.log(粘性 NaN) // NaN
console.log(NaN NaN) // NaN4.2 字符串型 - string
用引号单引号 / 双引号 / 反引号包裹的都是字符串
4.2.1 字符串的长度
lengtn 属性
let strMsg (扶我起来我还能干)
console.log(strMsg.length) // 显示 104.2.2 字符串的拼接
多个字符串之间可以使用 进行拼接其拼接方式为 字符串 任何类型 新的字符串拼接前会把与字符串相加的任何类型转成字符串再拼接成一个新的字符串“” 数字相加字符相连
4.2.3 ❗❗ 模板字符串
使用 反引号 包裹模板字符串可以 嵌套变量 代码展示let myName 邵秋华
let age 22
let str 扶我起来我还能干
document.write(我叫${myName}今年${age}岁了我的座右铭是${str})4.2.4 ❌ 转义字符 4.3 布尔型 - boolean
布尔类型 有 两个值true 和 false其中 true 表示 真而 false 表示 假布尔型 和 数字型 相加 的时候true 1false 0❗ 除了 0 、 、 undefined 、 null 、 NaN、false 转换为布尔值后为 假其余都为真
4.4 未定义类型 - undefined
只声明变量不赋值 的情况下变量的默认值为 undefined undefined 这里本该有一个值但是没有就是 undefined ⚠ 数字 undefined NaN⚠ 注意 ⚠ 对 undefined 的任何操作都是NaN除了拼接字符串 出现情况 声明变量未赋值数组 里面 没有 某个 元素对象 里面 没有 某个 属性 或 方法函数 形参多于实参没有赋值的形参默认值是 undefined函数未指定返回值没有 return 关键字
console.log(undefind 1) // NaN
condsole.log(undefined purple) // undefinedpurple
console.log(typeof(undefined)) //undefined4.5 空类型 - Null
Null 这里有一个值有一个空值✅参与 数学运算 的时候null 0
console.log(null 1) // 1
console.log(null purple) // nullpurple
console.log(typeof(null)) // object4.6 null 和 undefined 区别
undefined 表示 声明了一个变量但是没有赋值 let num
console.log(undefined 1) // NaNnull 表示 声明了一个变量 并且 赋值了但是内容为空 let num null
console.log(null 1) // 1✅注意 ⚠ null 和 undefined 值相等数据类型不相等 console.log(null undefined) // true4.7 检测数据类型
1️⃣ 作为运算符typeof 数据以 字符串 的形式 给你变量的数据类型⚠ 使用 typeof 检测 错误类型 为 undefined 的代码不会报错检测结果是 undefined2️⃣ 函数形式typeof(数据)推荐使用 以字符串的形式给你变量的数据类型先运算小括号里面结果然后去检测结果的数据类型代码展示let num 10;
console.log(typeof num); // number
let str purple;
console.log(typeof str); //string
let flag true;
console.log(typeof flag); //boolean
let i undefined;
console.log(typeof i); //undefined
let timer null;
console.log(typeof timer); //object
// 注意
console.log(typeof (a)); // undefined3️⃣ instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。返回值布尔值true / false 4️⃣ 究极方法 Object.prototype.toString() 可以通过 toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 的检测需要以 Function.prototype.call() 或 Function.prototype.apply() 的形式来调用传递要检查的对象作为第一个参数。返回值[ object type ]代码展示// 引用数据类型
const obj {uname: 迪迦, age: 22};
console.log(Object.prototype.toString.call(obj)); // [object Object]
const arr [1, 2, 3];
console.log(Object.prototype.toString.call(arr)); // [object Array]
const fn function () { console.log(1) };
console.log(Object.prototype.toString.call(fn)); // [object Function]// 基本数据类型
console.log(Object.prototype.toString.call(123)); // [object Number]
console.log(Object.prototype.toString.call(123)); // [object String]
console.log(Object.prototype.toString.call(false) ); // [object Boolean]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(null)); // [object Null]4.8 数据类型转换
4.8.1 转数字
1️⃣ parseInt(string) 可以把 字符串型 转换为 整数型不识别小数点 从 第一个字符开始 取第一个整数如果取不到就是NaN⚠ 转换的字符开头如果不是数字就是NaN代码展示console.log(parseInt(3.14)) //3取整数位
console.log(parseInt(3.99)) //3取整数位
console.log(parseInt(120px)) //120 (自动去除单位前面必须是数字)
console.log((parseIntrem120px)) //NaN
console.log(parseInt(true)) //NaN
console.log(parseInt(null)); // NaN2️⃣ parseFloat(string) 可以把 字符串型 转换为 浮点型识别小数点 从第一个字符开始取第一个小数如果取不到就是NaN⚠ 转换的字符开头如果不是数字就是NaN代码展示console.log(parseFloat(3.14)); //3.14
console.log(parseFloat(3.99)); //3.99
console.log(parseFloat(120px)); //120 (自动去除单位前面必须是数字)
console.log(parseFloat(rem120px)); //NaN
console.log(parseFloat(true)) //NaN
console.log(parseFloat(null)); // NaN⚠ 注意parseInt 和 parseFloat 单词的大小写3️⃣ Number(string) 强制转换 转换的数据中不能包含非数字如果有就是NaN识别小数点代码展示let num 123;
console.log(Number(num)); //123
console.log(Number(12)); //12
console.log(NUmber(123.123); // 123.123
console.log(Number(123abc); //NaN
console.log(Number(null)); // 0
console.log(Number(true)); // 1
console.log(Number(false)); // 04️⃣ 利用了算术运算 **(正号) - * / % ** 隐式转换 代码展示console.log(12 - 0); //12 先将 12 转换成数字型在进行减
console.log(123 - 120); //3
console.lof(123 * 1); //123
console.log(123) //123号作为正号解析可以转换成数字型单用let year prompt(请输入您的出生年份);
//let age 2022 - year;
alert(您今年 (2022 - year) 岁了);注意 隐式转换是我们在进行算数运算的时候JS 自动转换了数据类型代码展示let num1 prompt(请输入第一个数据); //得到的num1是字符型的
let num2 prompt(请输入第二个数据); //得到的num2是字符型的
let result parseInt(num1) parseInt(num2);
alert(parseInt(num1) parseInt(num2) result);/*
let num1 prompt(请输入第一个数据);
let num2 prompt(请输入第二个数据);
let result num1 parseInt(num2);
*/✅ 注意 有字符串的加法 ‘’ 1结果是 ‘1’减法 只能用于数字它会使 空字符串 ‘’ 转换为 0null 经过 数字转换 之后会变为 0 parseInt(null); // NaN
parseFloat(null); // NaN
Number(null); // 0undefined 经过 数字转换 之后会变成 NaNundefined 做任何操作都是 NaN 除了拼接字符串 null undefined // true 值都是空
null undefined // false 数据类型不一样4.8.2 转字符串
1️⃣ String(数据) 返回值转换好的数据代码展示console.log(String(123)) // 1232️⃣ 数据.toString() 返回值转换好的数据⚠ **注意**需要 配合 变量 使用、代码展示let num 123
console.log(num.toString()) // 1233️⃣ 加号 字符串的拼接代码展示console.log(123 ) // 123toString() 和 String() 使用方式不一样。
三种转换方式我们更喜欢用第三种加号拼接字符串转换方式 这一种方式也称之为隐式转换。4.8.3 转布尔
Boolean(数据) 返回值转换好的数据⚠ 注意代表 空、**否定的值 **会被 转换成 false ‘’、 0、 NaN、 null、 undefined、 false 代码展示console.log(Boolean()) // false
console.log(Boolean(0)) // false
console.log(Boolean(NaN)) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(false)) // false注意
// 两个等号值比较 值
// null 和 undefined 都是空
console.log(null undefined) // true五、运算符
5.1 算术运算符 ⚠ **注意** 取余前面的数比后面的小余数就是前面的数
5.2 递增递减运算符
5.2.1 前置
先自加后返回值先自加后运算在前 先加
let num 10;
alert(num 10); // 215.2.2 后置
先原值运算后自加在后 后加先表达式返回原值后面变量再自加1
let num 10;
alert(10 num); // 20**注意**前置 和 后置 单独书写没有差别
5.2.3 前置–
先自减后运算先已后人
let num 10;
alert(--num 10); // 195.2.4 后置–
先原值运算后自减先人后己
let num 10;
alert(10 num--); // 20let a 10;
a; // a 11 a 11
let b a 2; // a 12 a 12
console.log(b); // 14let c 10;
c; // c 11 c 11
let d c 2; // c 11 c 12
console.log(d); // 13let e 10;
let f e e;
// e 10 e 11
// e 12 e 12
console.log(f); // 225.3 比较运算符 注意 比较运算符有隐式转换 console.log(2 2) // true⚠ 特殊说明 如果是数字和“其他值”的比较则其他值会自动转换成数字去比较涉及到“NaN”都是false如果是”字符串“和“字符串”比较则会比较每一个字符的ASCII码如果是布尔值参与比较布尔值会自动转换成数字0和1数字只有0是假其余为真字符串只有’空字符串是假其余都为真
5.4 ❗ 逻辑运算符 1️⃣ 与 有 一个 是 false 得到的 结果 就是 false 只有 两侧 都是 true 的时候才可以到的 true2️⃣ || 或 有一个 是 true 得到的结果就是 true 只有 两侧 都是 false 的时候才得到 false3️⃣ ! 非 取反双取反可以转布尔⚠ 注意 逻辑运算符 优先级 ! ||
5.4.1 短路运算逻辑中断
短路运算的原理当有多个表达式值时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;1️⃣ 逻辑与-语法一假则假 表达式1 表达式2如果 表达式1的值 为 真则返回 表达式2如果 表达式1的值 为 假则返回 表达式1 后面的表达式不再执行两侧都为真返回第二个2️⃣ 逻辑或-语法 一真则真 表达式1 || 表达式2如果 表达式1的值 为 真则返回 表达式1 后面的表达式不再执行如果 表达式1的值 为 假则返回 表达式2 两侧都为真返回第一个5.5 赋值运算符 5.6 ❗ 运算符优先级
一元运算符 里 逻辑非 优先级最高逻辑与 比 逻辑或 优先级 高 console.log( 4 6 || 人 ! 阿凡达 !(12 * 2 144) true) // true
let num 10
console.log( 5 num / 2 (2 2 * num).toString() ‘22’) // true
let a 3 5 2 7 3 4
console.log(a) // false
let b 3 4 || 3 1 || 3 ! 2
console.log(b) // true
let c 2 2
console.log(c) // false
let d !c || b a
console.log(d) // true六、流程控制 - 分支语句
表达式和语句的区别 表达式表达式可被求值可以写在赋值语句的右侧运算符和数据组成的式子语句不一定有值可以被执行的代码
6.1 if 语句 条件为 true 的时候大括号里面的代码才会执行 小括号里的结果若不是布尔类型时会发生隐式转换转为布尔类型 ⚠ if分支语句如果前面的条件被满足后面的代码就不执行了 if (条件) {满足条件要执行的代码
}if (条件) {满足条件要执行的代码
} else {条件不满足时要执行的代码
}eg:
// 能被4整除但不能被100整除或者被400整除的年份是闰年否则都是平年
let year prompt(请输入年份)
if (year % 4 0 year % 100 ! 0 || year % 400 0) {alert({year}是闰年)
} else {alert({year}是平年)
}if (条件表达式1) {满足条件1要执行的代码
} else if (条件表达式2) {满足条件2要执行的代码
} else if (条件表达式n) { 满足条件n要执行的代码
} else {所有条件都不满足时要执行的代码
}6.2 三元运算符
语法结构条件表达式 ? 表达式1 : 表达式2执行思路 如果 条件表达式 结果 为真则 返回 表达式1 的值如果 条件表达式 结果 为假则 返回 表达式2 的值 代码展示let time prompt(请您输入一个 0 ~ 59 之间的一个数字)
// 三元表达式 表达式 表达式1 表达式2
let result time 10 ? 0 time : time // 把返回值赋值给一个变量
alert(result)/* 如果输入的数字小于10就在该数字前面加一个0否则原样输出该数字 */
let num prompt(请输入数字)
let result num 10 ? 0 num : num
alert(result)6.3 switch 语句
表达式有一个返回值**返回值 **会和 value 做匹配必须是 全等 的关系如果匹配上了就执行对应的语句 如果都匹配不上就执行default里的语句语法switch ( 表达式 ) {case value1:满足value1执行的代码breakcase value2:满足value2执行的代码breakdefault:所有条件都不满足时要执行的代码
}⚠ 注意 每一个 case 和 表达式 必须是 值 和 数据类型 都相等 才叫满足switch 语句只能判断一些准确的值不能判断范围实际开发过程中 表达式 我们经常 写成 变量代码展示let num1 prompt(请输入第一个数字)
let sp prompt(请输入 - / * 其中一个)
let num2 prompt(请输入第二个数字)switch (sp) {case :let add num1 num2alert(${num1} ${num2} ${add})breakcase -:let dif num1 - num2alert(${num1} - ${num2} ${dif})breakcase *:let bus num1 * num2alert(${num1} x ${num2} ${bus})breakcase /:let pro num1 / num2alert(${num1} ÷ ${num2} ${pro})breakdefault:alert(请输入正确的运算符)break
}七、流程控制 - 循环语句
7.1 循环成立的条件
初始值 作为循环的开始条件判断 决定要不要继续循环要重复执行的代码改变初始值 为了让循环有结束
7.2 ❗ for 循环
语法结构for (初始化变量; 条件表达式; 操作表达式) {循环体
}初始化变量通常被用于初始化一个计数器这个变量帮我们来记录次数。条件表达式用于确定每一次循环是否能被执行。如果结果是 true 就继续循环否则退出循环。终止条件操作表达式每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然递减变量也是可以的。递增或者递减代码展示!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbody/bodyscript// 求1-100之间所有数字的和let sum 0;let average 0;for (let i 1; i 100; i) {sum i}average sum / 100;console.log(1-100之间所有数字的和为 average); // 求1-100之间所有偶数的和和奇数的和let even 0;let odd 0;for (i 1; i 100; i) {// 第一种if (i % 2 0) {even even i;} else {odd i;}//第二种if (i % 2 0) {even even i;}odd sum - even;}console.log(1-100之间所有偶数的和为 even \n 1-100之间所有奇数的和为 odd);// 求1-100之间所有能被3整除的数字的和let odd_num 0;for (let i 1; i 100; i) {if (i % 3 0) {odd_num odd_num i;}}console.log(1-100之间所有能被3整除的数字的和为 odd_num);//弹出输入框输入一共有n个学生然后弹出n个输入框输入每个学生的成绩最后输出总成绩和平均成绩let frequency prompt(请输入有多少个学生);let score 0;for (let i 1; i frequency; i) {let a prompt(请输入第 i 个同学的成绩);// 从 prompt 获取到的数据是 String 类型的不能直接和数字进行相加score score parseFloat(a);}alert(该班总成绩是 score);alert(该班平均成绩是 (score / frequency));//一行打印五个星星let str ;for (let i 1; i 5; i) {str str ⭐;}console.log(str);
/script
/html7.3 ❗ 双重for循环 //打印n行m列的星星
let rows prompt(请输入需要打印几行的星星);
let cols prompt(请输入需要打印几列的星星);
let str ;
for (let i 1; i rows; i) {for (let j 1; j cols; j) {str ⭐;}str \n;
}
console.log(str);冒泡排序// 外层for循环控制已经排序好的元素的个数
// 内层for循环控制每排序好一个元素需要比较几次
const arr [1, 7, 3, 9, 5, 2, 6, 4, 8];
for (let i 0; i arr.length - 1; i) {for (let j 0; j arr.length - i - 1; j) {if (arr[j] arr[j 1]) {let temp arr[j 1];arr[j 1] arr[j];arr[j] temp;}}
}
console.log(arr);7.4 while循环
循环三要素 变量初始值终止条件变量变化量 语法let n 1while ( 循环条件 ) {重复执行的代码n}7.5 ❗ continue 和 break
continue退出本次循环继续下一次循环一般用于排除或者跳过某一个选项的时候continue 在循环节构中用来跳过本次循环中剩余的代码并且在条件求值为真的时开始下一次循环。不能省略 continue 后面的分号导致胡乱continue 后面 的 代码 不会 再 执行break退出整个循环结束循环一般用于结果已经得到后续的循环不需要的时候在一些计算机语言中 break 是保留字其作用大多数情况下是终止上一层循环。
7.6 JS标记语法 JS标记语法
here:
for (let i 1; i 5; i) {for (let j 1; j 3; j) {if (i 3 j 2) {console.log(看到半条虫子)break here}console.log(吃的第 i 个包子得第 j 口)}console.log()
}八、❗❗ 数组 - 基础
一种 有序 的数据集合
8.1 创建数组
8.1.1 字面量创建
let 数组名 [数据1, 数据2, …, 数据n]
let arr [name, Jack, age, 20, gender, 男] 8.1.2 内置构造函数创建
//没有参数表示空数组
let arr new Array() //一个参数表示数组的长度
let arr new Array(100) //多个参数表示都是数组里面的数据没有表示长度的参数
let arr new Array(10, 20, 30)
arr.length 2 //删除最后一个
arr.length 5 //后面的两个用空补齐
console.log(arr[2]) //读取里面的额第三个数据8.2 ❗❗ 遍历数组
能够获取数组里面的每个元素
8.2.1 for
格式for (let i 0; i 数组名.length; i) {// 执行的操作// console.log(数组名[i])
}8.2.2 forEach
取代 for 循环语法数组.forEach(function (item, index, arr) { } )- item 数组里面的每一项- index 数组里面每一项的索引- arr 原始数组⚠ 没有 返回值forEach中的 return 等同于 for循环的 continue终止forEach循环try - catchtry {[1, 2, 0, 3].forEach(item {console.log(item)if (item 1) {console.log(item)throw Error()}})
} catch (error) {console.log(终止循环)
}// 打印结果
// 1
// 1
// z8.2.3 for of
遍历 可迭代 的数据数组伪数组字符串遍历的是数组、伪数组、字符串的值语法for (let item of arr) {console.log(item) // item - 数据里面的每一项
}8.3 数组的增删查改
8.3.1 增
1️⃣✔数组.push() 方法将 一个或多个元素 追加 **到 数组 的 末尾 并 返回 追加元素后数组 的 长度 语法数组.push(数据1, 数据2 … 数据n)返回值 追加元素后数组的长度⚠改变原始数组 2️⃣ 数组.unshift() 方法将 一个或多个元素 插入 到 数组 的 开头并 返回 插入元素后数组 的 长度 语法数组.unshift(数据1, 数据2, …, 数据n)返回值 插入元素后数组的长度⚠改变原始数组 见代码展示
8.3.2 删
1️⃣ 数组.pop() 方法从数组中 删除 最后一个 元素 语法数组.pop()返回值 被删除的元素⚠改变原始数组 2️⃣ 数组.shift() 方法从数组中 删除 第一个元素 语法数组.shift()返回值 被删除的元素⚠改变原始数组 3️⃣ ✔数组.splice(start, deleteCount) 方法删除 数组 里 指定的元素 语法数组.splice(开始索引删除几个) ⚠ 注意包含开始索引 对应 的 元素deleteCount表示要移除的数组元素的个数如果 省略 则 默认 从 指定的起始位置 删除到最后 返回值 新数组将删除的元素放到这个新数组里面⚠改变原始数组 见代码展示
8.3.3 查
见代码展示
8.3.4 改
见代码展示
代码展示
scriptlet arr [pink, red];// 增加// 方案一数组.push()方法语法arr.push(元素1, 元素2, …, 元素n);追加数组 的同时 有一个 返回值 是 追加以后 的 数组长度console.log(arr.push(green, hotpink, deeppink)); // 5console.log(arr); // [pink, red, green, hotpink, deeppink]// 方案二数组.unshift()方法语法arr.unshift(元素1, 元素2, …, 元素n);console.log(arr.push(green, hotpink, deeppink)); // 5console.log(arr);// [green, hotpink, deeppink, pink, red]// 删除// 方案一数组.pop()console.log(arr.pop()); // green// 方案二数组.shift()console.log(arr.shift()); // red// 方案三数组.splice(起始位置的索引, 删除几个元素)// 从索引号0的位置开始删除两个元素console.log(arr.splice(0, 2)); // [hotpink, deeppink]// 查询 --- 利用数组的索引进行查找console.log(arr[0]); // pink// 修改 --- 利用 对数组进行遍历然后和字符串拼接重新赋值给数组里的元素// 方案一arr[0] blue;arr[1] purple;//方案二for (let i 0; i arr.length; i) {arr[i] 老师;}console.log(arr)
/script九、❗❗ 函数
函数执行特定任务的代码块
9.1 函数的声明和使用
9.1.1 函数的声明
函数命名规范 和变量命名基本一致小驼峰式命名法⚠ 前缀应该为动词 can --- 判断是否可执行某个动作
has --- 判断是否含义有某个值
is --- 判断是否为某个值
get --- 获取某个值
set --- 设置某个值
load --- 加载某些数据1️⃣ 具名函数 语法function 函数名() {函数体
}⚠ 注意可以 后声明先调用 也可以 先声明后调用 2️⃣ 匿名函数 使用方式 ① 函数表达式 语法let 函数名 function () {// 函数体
}② 立即执行函数 语法!(function (实参) { 函数体 })(实参);
!(function (实参) { 函数体 } (实参));⚠ 注意 立即执行函数 末尾 必须加 分号 ⚠ 注意 函数名() — 表示调用这个函数函数名 — 表示一个变量代表这个函数 代码展示function getSum() {let sum 0for (let i 1; i 100; i) {sum sum}document.write(sum)
}9.1.2 函数的使用
函数的调用 函数名()⚠ 注意 声明的函数 必须 调用 才会真正执行使用 调用函数函数 一次声明 可以 多次调用 每一次函数调用函数体里面的代码会重新执行一次 代码展示function getSum() {let sum 0for (let i 1; i 100; i) {sum sum}document.write(sum)
}
getSum() // sum 50509.1.3 函数传参
声明语法 function 函数名(参数列表) {函数体
}传入数据列表声明这个函数需要传入几个数据多个参数之间用 逗号 隔开代码展示function getSum(start, end) {// 形参 - 形式上的参数let sum 0for (let i start; i end; i) {sum sum}document.write(sum)
}调用语法 函数名(传递的参数列表)代码展示getSum(10, 20) // sum 33
// 实参 - 实际的参数形参 形式上的参数 — 写在 函数声明阶段 的 小括号 里本质就是在函数内部声明的变量局部变量作用接受实参传递的参数如果既没有实参传递也没有设置默认值就是 undefined 实参 实际上的参数 — 写在 **函数调用阶段 **的 **小括号 **里实参 可以是 变量作用给形参赋值 参数默认值 在调用的过程中如果有参数传递过来就用传递过来的如果没有参数传递过来就用默认的⚠ **注意**若没设置默认值默认就是 undefined代码展示function getSum(x 0, y 0) {// 小括号里写了就不用写// 推荐用逻辑中断// x x || 0// y y || 0document.write(x y)
}getSum() // 0
getSum(1, 2) // 39.1.4 函数的返回值
语法返回给调用者当调用某个函数这个函数会返回一个结果出来return 要返回的数据⚠ 注意 在 函数体 中使用 return 关键字能 将内部的执行结果 交给 函数外部 使用所以 return 后面的数据不要换行写 ⚠ return 和 要返回的数据不能换行写模板字符串、函数除外 一个函数只能有一个return因为第一个return后面的代码就不执行了如果 函数 没有指定 return这种情况函数 默认返回值 为 undefined函数如果有 多个返回值 用 中括号包裹中间 用 逗号隔开 返回的是一个新数组 代码展示 function fn() {return 20 // 把 结果(20) 返回给 fn
}
fn() // 相当于执行了 fn() 20 fn()是函数的调用者
console.log(fn()) // 20// 求两个数的最大值
function getMax(x 0, y 0) {return x y ? x : y
}getMax(65, 99) // 99
let max getMax(65, 99)
console.log(max) 求数组里面的最大值和最小值代码展示// 声明一个 getArrValue函数
function getArrValue(arr []) {let max arr[0]let min arr[0]//遍历数组for (let i 0; i arr.length; i) {// 最大值if (max arr[i]) {max arr[i]}// 最小值if (min arr[i]) {min arr[i]}}// return 返回多个值写法return [max, min]
}let newArrr getArrValue([23, 56, 32, 198, 0, 5, -98])console.log(数组中的最大值是{newArr[0]}) // 198
console.log(数组中的最小值是{newArr[1]}) // -98时间转换 补0代码展示function getTime(t 0) {let second parseInt(t % 60)let minute parseInt(t / 60 % 60)let hour parseInt(t / 60 / 60 % 24)// if条件分支语句/* if (second 10) {second 0 second}if (minute 10) {minute 0 minute}if (hour 10) {hour 0 hour} */// 三元表达式second 10 ? second 0 second : secondminute 10 ? minute 0 minute : minutehour 10 ? hour 0 hour : hourreturn ${t}秒 ${hour}小时${minute}分钟${second}秒
}let str getTime(prompt(请输入秒数)) // 1000
document.write(str) // 1000秒 00小时16分钟40秒⚠ 函数注意点 两个函数名相同的函数后面的会覆盖前面的两个函数体相同的匿名函数不是同一个函数传递参数 形参过多会自动填上 undefined实参多于形参剩余的实参不参与运算实参少于形参多于的形参使用默认值 undefined 函数一旦碰到 return 就不会往下执行函数的结束用 return break 和 return 的区别 break结束 的是 循环 和 switchreturn结束 的是 函数 和 for循环
9.2 作用域基础
作用域 变量的 可用性范围 就是 作用域 提高程序逻辑的局部性
9.2.1 全局作用域
全局有效作用与所有代码执行的环境整个script标签内部或者一个独立的js文件
9.2.2 局部作用域
局部有效作用与函数内的 代码环境就是局部作用域。因为跟函数有关所以也称为函数作用域
9.2.3 特殊
如果函数内部变量没有声明直接赋值。也当全局变量看。不推荐 代码展示function fn() {num 10 // 全局变量来看
}fn()
console.log(num) // 10函数内部的 形参 可以看作是 局部变量 代码展示function fun(x, y) {// 形参可以看做是函数的局部变量console.log(x) // 1
}
fun(1, 2)
console.log(x) // x is not defined 报错9.3 变量的访问原则
只要是代码就至少有一个作用域写在函数内部的局部作用域如果函数中还有函数那么在这个作用域中就又可以诞生一个作用域⚠ 访问原则就近原则在能够访问到到的情况下 先局部局部没有 再找全局 由内向外 代码展示 functin f1 () {let num 123function f2 () {console.log(num) // 123}f2()
}
let num 456
f1() function f1() {let num 123function f2() {let num 0console.log(num) // 0}f2()
}
let num 456
f1() let a 1
function fn1() {let a 2let b 22function fn2() {let a 3fn3()function f3() {let a 4console.log(a) // a的值 4console.log(b) // b的值 22}}
}
fn1()9.4 匿名函数
没有名字的函数无法直接使用使用方式 函数表达式 / 立即执行函数 1️⃣ 函数表达式 函数表达式将匿名函数赋值给一个变量并且通过变量名称进行调用语法let 变量名 function () {// 函数体
}⚠ 调用变量名()代码展示let fn function () {console.log(我是函数表达式)
}
fn() // 我是函数表达式⚠ 注意 函数表达式 必须 先 声明 、后 调用 因为变量必须先声明后使用 2️⃣ **立即执行函数**避免全局变量的污染防止变量污染冲突 函数声明后立即执行并且执行完一次后被释放语法// 写法一
(函数)(); // 写法二
(函数 ()); ⚠ 立即执行函数 必须 加 分号立即执行函数可以传递参数先写两个小括号前面的小括号写函数可以给匿名函数添加函数名⚠ 最后面的小括号相当于调用函数 代码展示(function () {console.log(立即执行函数)
})();
// 保存之后会在控制台立即打印 立即执行函数// 第一种写法
(function () {console.log(立即执行函数第一种写法);
})();(function (x, y) { // (x, y) --- 形参console.log(x, y); // x 5; y 9
})(5, 9); // (5, 9) --- 实参// 第二种写法
(function () {console.log(立即执行函数第二种写法);
} ());(function (x, y) { // (x, y) --- 形参console.log(x, y); // x 5, y 9
} (5, 9)); // (5, 9) --- 实参9.5 具名函数 和 匿名函数 的区别
具名函数 可以 先调用 后声明也可以 先声明 后调用具名函数 的 调用 可以 写在 任意位置 匿名函数 函数表达式必须 先声明函数表达式 后调用匿名函数 的 调用 必须写在 声明函数 的 后面
9.6 函数中的逻辑中断
函数的默认值 方案一赋值function fn(x 0, y 0) {x xy yconsole.log(x, y)
}
fn(1, 2) // x 1, y 2
fn() // x 0, y 0方案二逻辑中断(推荐)function fn(x, y) {x x || 0y y || 0console.log(x, y)
}
fn(1, 2) // x 1, y 2
fn() // x 0, y 0十、❗❗ 对象 - 基础
对象 属性 方法
10.1 对象 - object
对象是一种复杂数据类型一种 无序 的数据集合不可迭代
10.2 使用对象
10.2.1 声明对象
语法 let 对象名 {}let 对象名 new Object() let obj {} // 声明了一个obj的对象
let obj new Object();组成属性 方法let 对象名 {属性名: 属性值,方法名: 函数
}eg:let obj {uname: pink老师,age : 18,gender: 男}console.log(obj)// {uname: pink老师, age: 18, gender: 男}属性都是 成对 出现的包括 属性名 和 属性值 它们之间使用英文 : 分隔对象属性没有顺序多个属性之间使用英文 , 分隔属性就是依附在对象上的变量外面 是 变量对象内 是 属性⚠ 属性名可以使用 或 ’ ’ 一般情况下省略除非名称遇到特殊符号如 空格 、 中划线 等 ⚠ 属性名 不能 使用 反引号
10.2.2 增删查改
1️⃣查 语法 对象名.属性名对象名[‘属性名’] 属性名 必须 加 引号 ⚠ 如果属性名存放在一个 变量 里面只能使用 数组关联语法 代码展示console.log(obj.uname) // pink老师
console.log(obj[uname]) // pink老师2️⃣改 语法对象名.属性名 新值代码展示obj.gender 女
console.log(obj.gender) // 女3️⃣增 语法对象名.新属性名 新值obj.address 武汉黑马
console.log(obj) // {uname: pink老师, age: 18, gender: 女, address: 武汉黑马}
console.log(obj.address) // 武汉黑马4️⃣删了解 语法delete 对象名.属性名delete obj.address
console.log(obj) // {uname: pink老师, age: 18, gender: 女}10.2.3 对象的方法
方法 方法名 函数它们之间用 : 分隔多个属性 之间 使用英文 , 分隔方法是依附在对象中的函数外面 是 函数对象内 是 方法方法名可以使用 “” 或 ‘’ 一般情况下省略除非遇到特殊符号如 空格、中划线 等声明对象并添加了若干方法后可以使用调用 对象 中的 方法函数我们称之为方法调用 语法对象名.方法名()千万别忘了给方法名后面加 小括号 代码展示let obj {uname: 刘德华,// 方法song: function () {console.log(冰雨)},getSum: function (x, y ) {x x || 0y y || 0console.log(x y)}
}// 方法调用 对象名.方法名()
obj.song() // 冰雨
obj.getSum(2, 5) // 710.3 ❗ 遍历对象
1️⃣ for in 语法 遍历的是 对象的属性 / 数组的索引 / 伪数组的索引 / 字符串的索引 得到的索引都是字符串型 for (let k in obj) {console.log(obj[k])
}结论 k 是获得 对象 的属性名 对象名[k] 是获得 对象 的 属性值 2️⃣ 判断一个成员在不在对象里面 语法属性/方法 in 对象名返回值 布尔值 true / false代码展示let obj {uname: jack,age: 18,gender: 男,score: 100
};
console.log(name in obj); // true代码展示//声明一个 obj 对象
let obj {uname: pink老师,age: 18,gender: 男
}// 用 fou in 循环遍历对象
for (let k in obj) { // k 可以是任何变量选择 k/key 是因为许多程序员都在使用// console.log(k) // k 是字符串型的带有引号// k uname age gender// obj 对象里面没有 uname、 age、 gender 的属性名 ------ 有引号// obj 对象里面的属性名是 uname、 age、 gender ------ 没有引号// 查询对象里面的属性有两种方法1对象名.属性名// 2对象名[属性名]// 原因obj[k] obj[uname] obj.uname// obj[k] obj[age] obj.age// obj[k] obj[gender] obj.gender// 所以利用for in循环遍历对象采用第二种查询方法// 结论k 是获得对象的属性名 对象名[k] 是获得 属性值console.log(obj[k]) // pink老师(string) 18(number) 男(string)
}渲染学生信息 代码展示!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyletable {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}/style
/headbodyh2学生信息/h2p将数据渲染到页面中.../ptablecaption学生列表/captiontrth序号/thth姓名/thth年龄/thth性别/thth家乡/th/trscript// 1.数据准备let students [{ name: 小明, age: 18, gender: 男, hometown: 河北省 },{ name: 小红, age: 19, gender: 女, hometown: 河南省 },{ name: 小刚, age: 17, gender: 男, hometown: 山西省 },{ name: 小丽, age: 18, gender: 女, hometown: 山东省 }]// 2.开始渲染页面for (let i 0; i students.length; i) {document.write(trtd${i 1}/tdtd${students[i].name}/tdtd${students[i].age}/tdtd${students[i].gender}/tdtd${students[i].hometown}/td/tr)}/script/table/body/html10.4 内置对象
10.4.1 Math对象包含的方法
1️⃣Math.random()生成0-1之间的随机小数包含0不包括1 如何生成0-10的随机小数 let num Math.floor(Math.random() * (10 1))如何生成5-10的随机数 let num Math.floor((Math.random() * (5 1)) 5如何生成N~M的随机数 let num Math.floor(Math.random() * (M - N 1)) N
function getRandom (N, M) {// return Math.floor(Math.random() * (M - N 1)) N;return parseInt(Math.random() * (M - N 1)) N;
}数组随机数Math.floor(Math.random() * arr.length)2️⃣Math.ceil(数据)向上取整 代码展示console.log(Math.ceil(1.1)) // 2
console.log(Math.ceil(1.01)) // 23️⃣Math.floor(数据)向下取整 代码展示console.log(Math.floor(1.9)) // 1
console.log(Math.floor(1.99)) // 14️⃣Math.max(数据)找最大数 代码展示console.log(Math.max(0.1, 1, 65, 23, 88)) // 885️⃣Math.min(数据)找最小数 代码展示console.log(Math.min(99, 65, 3, 0.1, -99)) // -996️⃣pow幂运算了解7️⃣Math.abs(数据)绝对值 代码展示console.log(Math.abs(-100)) // 1008️⃣Math.round(数据)四舍五入取整数 代码展示console.log(Math.round(2.45)) // 2
console.log(Math.round(2.5)) // 3
console.log(Math.round(-20.5)) // -20
console.log(Math.round(-20.51)) // -21贰、❗❗ Web APIS
Web API是一套操作网页内容DOM与浏览器窗口BOM的对象 API就是一些预定义好的方法这些方法可以实现特定的功能开发人员可以直接使用Web API浏览器提供了一套操作网页和浏览器的方法通过这些方法可以轻松的操作元素和浏览器 复杂数据类型 用 const 声明复杂数据类型 放在 堆 里面栈里面存放的地址指向堆里面存放的数据变的只是堆里面存放的数据存放数据的地址没有发生变化变量名 - 栈地址- 堆数据 const实际上指的并不是变量的值不得改动
其实说的是变量指向的那个内存空间中保存的数据不得改变
简单数据类型是将值保存在栈中所以用const声明简单数据类型时值不得改变相当于常量
而复杂数据类型是将引用地址保存在栈中具体的值保存在堆中
那么用const声明复杂数据类型时比如对象数组时只能保证的是这个地址是固定不变的
堆中保存的数据是不是可变的就无法保证了一、❗❗ DOM文档对象模型
Document Object Model — 文档对象模型定义是HTML文档的编程接口。它提供了对文档的结构化的表述并定义了一种方式可以在从程序中对该结构进行访问从而改变文档的结构样式和内容。DOM 将文档解析为一个由节点和对象包含属性和方法的对象组成的结构集合。简言之它会将 web 页面和程序语言连接起来。进而操作网页的内容实现各种功能和部分特效。
1.1 DOM树 和 DOM对象
1.1.1 DOM树
DOM树一种树状结构把页面标签按照树状结构排列好结构更加清晰 每个DOM对象中都有表示层级关系的属性利用这些属性把所有的DOM对象联系在一起就形成一个树状结构称为DOM树 作用文档树直观的 体现了 标签与标签 之间 的 关系
1.1.2 DOM对象
**DOM对象**浏览器根据htm标签自动生成的JS对象 浏览器把网页内容翻译成一个个的对象把 网页内容 的 特征 翻译成 对象 的属性 document对象是DOM里提供的一个对象DOM里面最大的对象 它提供的属性和方法都是 用来访问 和 操作 网页内容的
1.2 获取DOM对象
打印对象打印元素的时候以对象的形式展现console.dir(对象);1.2.1 ❗❗ 根据CSS选择器来获取DOM元素
1️⃣ 选择匹配的 第一个 元素 语法document.querySelector(css选择器)代码展示const li document.querySelector(ul li)参数小括号里面 包含 一个 或 多个 有效的css选择器 字符串引号返回值 css选择器 匹配的 第一个元素一个 HTMLElement 对象⚠ 如果 没有匹配 到元素就是 null⚠ 注意必须加引号 2️⃣ 选择匹配的 多个 元素 语法document.querySelectorAll(css选择器)代码展示const lis document.querySelectorAll(li) //NodeList[li, li, li]参数小括号里面 包含 一个 或 多个 有效的CSS选择器 字符串返回值 CSS选择器匹配的 NodeList 对象集合如果页面 不存在 这个 元素得到的就是一个 空的伪数组把 所有 匹配的 元素 放到 NodeList伪数组 里面 返回有长度有索引没有push()pop()等数组方法想要得到里面的每一个对象则需要遍历获得
1.2.2 获取HTML、body、head、title
document.documentElement --- html
document.body --- body
document.head --- head
document.title --- title1.2.3 ❌其他获取元素的方式
1️⃣根据 id 获取元素 document.getElementById(id名称)注意 id名称不加 # 2️⃣根据 标签 获取 一类 元素 document.getElementsByTagName(标签名称)注意 getElementsByTagName返回值伪数组 3️⃣根据 类名 获取元素 document.getElementsByClassName(类名)注意 类名不加 .getElementsByClassName返回值伪数组
1.3 操作元素内容
1.3.1 对象.innerText 属性
将 元素 文本内容 添加/更新 到 任意标签 位置显示 纯文本不解析标签见代码展示
1.3.2 对象.innerHTML 属性
将 元素内容 添加/更新 到任意标签位置 包括标签、文本、注释 会解析标签多标签建议使用模板字符串⚠ 既要保留原来内容又要添加新内容采用 字符串拼接 的方式 innerHTML 要添加的文本见代码展示 代码展示
div classbox 天地不仁以万物为刍狗 /div
strongconst box document.querySelector(.box) // 对象.innerText 属性box.innerText 扶我起来我还能干box.innerText strong扶我起来我还能干/strong// 对象.innerHTML 属性box.innerHTML 扶我起来我还能干box.innerHTML strong扶我起来我还能干/strong
/strong⚠innerText 和 innerHTML 的区别 innerText 只能 获取 元素文本无法 获取 标签⚠ 在获取文本的时候包含 子元素 的 文本 innerHTML 可以 获取对象里面的所有 文本标签 代码展示bodydiv123p456span789/span/p/divscriptconsole.log(document.querySelector(div).innerText);console.log(document.querySelector(div).innerHTML);/script
/body1.3.3 获取表单元素文本
语法 元素.value获取 输入的字符长度 元素.value.length⚠ 获取 button 的文本依然使用 innerHTMLbutton双标签拓展 ⚠ 元素.value.trim() - 去除字符串 左右两侧 的空格
1.4 操作元素属性
1.4.1 操作 元素 属性
语法元素.属性 ‘值’ 代码展示img src./images/1.webp alt
//随机数函数
function getRandom(N, M) {return Math.floor(Math.random() * (M- N 1)) N
}
//获取图片对象
//img在html中是标签在js中是对象
const pic document.querySelector(img)
// 修改对象的属性值
pic.src ./images/${getRandom(1, 6) }.webp1.4.2 控制 样式 属性
1️⃣ 通过 style属性 操作css 语法元素.style.样式属性 ‘值’ 对于复杂的样式属性建议使用 小驼峰 命名法生成的是 行内样式表权重很高只有 !important 能做掉它⚠ 只写 属性 代码展示// 获取对象元素
const box document.querySelector(div)
// 修改样式属性 对象.style.样式属性 值
box.style.width 400px
box.style.height 100px
box.style.backgroundColor red
box.style[background-color] green2️⃣ 通过 类名className 操作css 语法元素.className ‘类名’ ⚠ 注意会覆盖前面的类名 新值换旧值想要原来的类名 - 元素.className ‘旧类名 新类名’ 代码展示stylediv {width: 200px;height: 200px;background-color: pink;}.active {width: 300px;height: 300px;background-color: hotpink;margin-left: 100px;}
/stylebodydiv classone/divscript// 1.获取元素// let box document.querySelector(css选择器)let box document.querySelector(div)// 2 给div添加类名 class 是个关键字选用className替代它// 新值换旧值会覆盖原来的类名box.className active// 用旧类名新类名的形式覆盖原来的类名box.className one active/script
/body❗3️⃣ 通过 classList 操作类 控制css 语法 追加 类元素.classList.add(‘类名’)删除 类元素.classList.remove(‘类名’)切换 类元素.classList.toggle(‘类名’) 如果有这个类名就是删掉没有就追加 替换 类元素.classList.replace(‘旧类名’, ‘新类名’) 两个参数第一个是原来的类名第二个参数是替换的类名 是否包含指定的 类元素.classList.contains(‘类名’) 判断是否包含指定的类名返回值是布尔值 true / false ⚠ 注意 类名 不加 点并且 是 字符串是 方法注意加小括号 代码展示// 获取对象
const box document.querySelector(.one)// 追加类名
box.classList.add(two)
box.classList.add(three)// 删除类名
box.classList.remove(three)// 切换类名
// 如果有这个类名就是删除没有就是追加
box.classList.toggle(ab)
box.classList.toggle(one)// 替换类名
// 将 旧类名box 替换成 新类名box1
box.classList.replace(box, box1)// 判断是否包含指定的类名
console.log(box.classList.contains(box)) // trueclassList 和 className区别 classList 是 追加类名将新类名追加到旧类名后面不影响以前的类名className 是 覆盖类名新类名 覆盖 旧类名影响以前的类名
1.4.3❗❗ 操作 表单元素 属性
语法 获取元素.属性名设置元素.属性名 新值 代码展示获取表单里面的值const input document.querySelector(.computer)
console.log(input.value)
input.value 扶我起来我还能干⚠ 注意对象.innerHTML 只能获取 普通元素 的 文本获取 表单元素 的 文本 需要使用 对象.value ⚠ 注意 对象.value 获得的文本是 包含 首尾 的 空白符 想要获得 有效的文本 需要使用 trim() 方法[对象.value.trim()]删除首尾的空白符 ⚠注意获取 button 的文本还是用 innerHTML 表单属性中添加就有效果移除就没有效果一律使用 布尔值 表示如果为 true 代表 添加 了该 属性 如果是 false 代表 移除 该 属性 disabled禁用、checked选中除了 ’ false 0 null undefinedNaN 其余的都是true但是不建议写建议写布尔值代码展示input typecheckbox value name
const input document.querySelector(.computer)
input.checked true // 让复选框选中
input.checked false // 让复选框不选中
input.disable true // 禁用吗 - 禁用true
input.disable false // 禁用吗 - 不禁用false默认值1.4.4 ❗❗ 自定义属性
属性 标准属性标签天生自带的属性可以直接使用 点语法 操作自定义属性 在h5中推出了专门的 data- 自定义属性在标签上一律以 data- 开头必须以 data- 开头在DOM对象上一律以 dataset 对象方式获取dataset 是一个 自定义属性集合包含 该标签内 的 所有 自定义属性代码展示div data-id1 data-spm不知道1/div
div data-id22/div
div data-id33/div
div data-id44/div
div data-id55/div
script// 获取元素const one document.querySelector(div)// one是一个HtmlElement对象console.log(one)// dataset是一个对象集合console.log(one.dataset)// 获取dataset对象里面的id属性console.log(one.dataset.id)// 获取dataset对象里面的spm属性console.log(one.dataset.spm)
/script❌⛔ 拓展 获取自己 瞎定义的属性浏览器不会识别 瞎定义属性并且它不会体现在DOM对象上语法DOM对象.getAttribute(瞎定义属性名)1.5 ❗❗ 定时器 - 间歇函数
定时器 setInterval() setTimeout()setInterval(函数, 间隔时间)间歇函数按照指定的周期以毫秒计来调用函数或计算表达式。方法会不停地调用函数直到clearInterval()被调用或窗口关闭 间歇函数可以根据时间自动重复执行某些代码 setTimeout(函数, 延迟时间)延时函数在指定的毫秒数后调用函数或计算表达式 (Timeout - 超出)定时器 里面的 第一个参数 是 回调函数 将一个函数作为参数传递给另外一个函数这个函数就是回调函数
1.5.1 开启定时器
语法匿名函数setInterval(函数, 间隔时间) // Interval - 间隔间隙
具名函数setInterval(函数名, 间隔时间)作用每隔一段时间 回头调用函数先隔段时间 再调用函数 间隔时间 单位 是 毫秒(ms)不用写不是立即调用函数时间间隔 过后再去 调用函数 间歇函数返回值 表示 当前定时器 是 页面中 的 第几个 定时器是一个 id数字数字型唯一的一个 间歇函数 只有 一个 返回值并且是唯一 代码展示// 匿名函数
setInterval(() {console.log(扶我起来我还能干)
}, 1000)// 具名函数
function fn() {console.log(扶我起来我还能干)
}
setInterval(fn, 1000)
// fn() --- 执行这个函数只执行一次 fn()调用这个函数
// fn --- 每隔一段时间回头去找fn这个函数自动调用再执行fn是一个变量代表这个函数// 定时器的返回值是数字型是id
// 声明一个变量接收定时器的返回值
let n setInterval(() {console.log(1)
}, 1000)
console.log(n) // 1function fn() {console.log(扶我起来我还能干)
}
let m setInterval(fn, 1000)
console.log(m) // 21.5.2 关闭定时器
语法// 匿名函数
let 变量名 setInterval(函数, 时间间隔)
// 具名函数
let 变量名 setInterval(函数名, 时间间隔)
clearInterval(变量)代码展示// 匿名函数
let n setInterval(() {console.log(11)
}, 1000)// 具名函数
function fn() {console.log(扶我起来我还能干)
}
let m setInterval(fn, 1000)// 关闭定时器
clearInterval(n)
clearInterval(m)二、❗❗ DOM事件基础
2.1 事件监听绑定
让程序检测是否有事件产生一旦事件触发就立即调用一个函数做出响应也称为 绑定事件 / 注册事件事件监听三要素 事件源事件类型事件调用的函数事件处理函数 语法元素对象.addEventListener(事件类型, 要执行的函数)⚠ 注意事件类型 要加 引号 L2 注册的 事件 不会 出现 覆盖L0 注册的事件会发生覆盖后面的覆盖前面的同对象、同事件类型 代码展示// 获取元素
const btn document.querySelector(button)
// 事件监听-点击事件
btn.addEventListener(click, () {alert(扶我起来我还能干)
})2.2 事件类型
2.2.1 鼠标事件
1️⃣ click - 鼠标点击2️⃣ mouseenter - 鼠标经过3️⃣ mouseleave - 鼠标离开4️⃣ mousemove - 鼠标移动5️⃣ dblclick - 鼠标左键双击
2.2.2 焦点事件
1️⃣ focus - 获得焦点2️⃣ blur - 失去焦点
2.2.3 键盘事件
1️⃣ keydown - 键盘按下触发2️⃣ keyup - 键盘抬起触发注意 用鼠标粘贴内容不会触发
2.2.4 文本事件
1️⃣ input - 用户输入事件 获取用户 输入文本 对象.value获取用户 输入文本 的 长度 对象.value.length ⚠ 注意 得到的 是 数字型⚠ 包括 左右两侧 的 空格 想要获得 有效 的 文本和长度 不包括首尾的空白符 有效文本 对象.value.trim()有效长度 对象.value.trim().lengthtrim() 方法删除 字符串 首尾 空白符空格、制表符、换行符等其他空白符不会 改变 原始字符串不适用于nullundefinedNumber类型
2.2.5 表单事件
1️⃣ submit - 提交事件2️⃣ change - 失去焦点并且表单内容发生改变触发事件3️⃣ 重置表单 form.reset()
2.2.6 光标的坐标
1️⃣ clientX 和 clientY 光标距相对于 浏览器 可视化窗口 左上角 的位置鼠标在窗口中的位置 2️⃣ pageX 和 pageY 光标距离 文档流 左上角 的位置鼠标在页面中的坐标计算鼠标在某个盒子中的坐标 鼠标到盒子顶部的距离 鼠标到页面顶部的距离 - 盒子顶部到页面顶部的距离鼠标到盒子左侧的距离 鼠标到页面左侧的距离 - 盒子左侧到页面左侧的距离 3️⃣ offsetX 和 offsetY 光标距离 DOM元素 左上角 的位置鼠标在标签中的位置 ⚠ 拓展利用 js 调用 事件 语法元素.事件类型()
2.3 事件对象 - event
也是个对象里面有事件触发时相关的信息
2.3.1 获取事件对象
⚠ 使用场景 可以判断用户按下哪个键可以判断鼠标点击了哪个元素从而做相应的操作 语法 在 事件绑定 的 回调函数 的 第一个参数 就是 事件对象一般命名为 event、ev、e element.addEventListener(事件类型, function (e) {})在触发 DOM 上的某个事件时会产生一个事件对象event对象 包含与创建它的特定相关的和方法
2.3.2 事件对象常用属性
type获取 当前的 事件类型clientX / clientY获取 光标 相对于 浏览器可视化窗口 左上角 的位置offsetX / offsetY获取 光标 相对于 当前DOM元素 左上角 的位置pageX / pageY : 光标距离 文档流 左上角 的位置key 用户 按下 键盘键的值现在不提倡使用keyCode 代码展示元素.addEventListener(click, function (e) {console.log(e.key)console.log(e.type)
})2.4 环境对象
函数内部特殊的变量 this代表当前函数运行时所处的环境每个函0数 里面 都有 this非严格模式 this指向函数的调用者普通函数里面 this - window事件侦听里面指向事件源箭头函数没有this箭头函数不会自己创建this它只会沿用自己所在这条作用域链的上层作用域的this定时器里面this指向window
2.5 回调函数
官方如果将函数A作为参数传递给函数B时我们称函数A为 回调函数把一个 函数 当作 参数 来 传递给 另外一个函数 的时候这个函数就是 回调函数
三、❗❗ DOM事件进阶
3.1 事件流
3.1.1 事件流与两个阶段说明
事件流 事件捕获 事件目标 事件冒泡 事件流指的是事件 完整执行过程 中的 流动路径过程事件捕获 事件目标阶段 事件冒泡 整个完整的过程就是事件流 两个阶段 捕获阶段从父到子从大到小冒泡阶段从子到父从小到大实际工作中都是使用 事件冒泡 为主
3.1.2 ❌ 事件捕获了解
概念从DOM的 根元素 开始去执行对应的事件从外到里事件捕获需要写对应代码才能看见效果 代码DOM.addEventListener(事件类型, 事件处理函数[, 是否使用捕获机制 false])addEventListener第三个参数传入 true 代表是捕获阶段触发很少使用若传入false代表冒泡阶段触发默认就是false若是用 L0on事件类型 事件监听则只有冒泡阶段没有捕获
3.1.3 事件冒泡
从子到父从小到大概念当一个元素触发事件后会 依次 向上 调用 所有父级元素 的 同名事件同种事件类型事件冒泡是默认存在的事件冒泡的必要性 如果没有冒泡给大盒子注册点击事件点击的是里面的小盒子会导致大盒子的点击无法执行事件委托委托给祖先元素 L2事件监听第三个参数是false或者默认都是冒泡代码展示const fa document.querySelector(.father)
const son document.querySelector(.son)
document.addEventListener(click, function () {alert(我是爷爷)
})
fa.addEventListener(click, function () {alert(我是爸爸)
})
son.addEventListener(click, function () {alert(我是儿子)
})
// 事件冒泡从子到父
// 弹出框的顺序依次是儿子 - 我是爸爸 - 我是爷爷3.1.4 阻止冒泡
语法事件对象.stopPropagation() // 方法 停止传播 sp快捷
e.stopPropagation()
// 事件对象 - 回调函数的第一个参数此方法可以阻断事件流动传播 不光在冒泡阶段有效捕获阶段也有效 代码展示const fa document.querySelector(.father)
const son document.querySelector(.son)
document.addEventListener(click, function () {alert(我是爷爷)
})
fa.addEventListener(click, function () {alert(我是爸爸)
})
son.addEventListener(click, function (e) {alert(我是儿子)// 阻止流动传播阻止事件冒泡// 在这一块卡住不允许向上传播e.stopPropagation()
})
// 弹出框我是儿子阻止元素默认行为 语法e.preventDefault() // 方法 阻止默认 pd快捷
// 阻止 链接跳转
// 阻止 表单提交缺点提交数据页面h代码展示bodyform actionhttp://www.itcast.cninput typesubmit value免费注册/forma hrefhttp://www.baidu.com百度一下/ascript// 获取元素const a document.querySelector(a)const form document.querySelector(form)// 事件侦听-a-点击事件a.addEventListener(click, function (e) {// 阻止a的默认行为-页面跳转e.preventDefault()})// 事件侦听-form-提交事件form.addEventListener(submit, function (e) {// 阻止form的默认行为-表单的提交e.preventDefault()})/script
/body3.1.5 两种鼠标事件的区别
⚠ 注意 mouseover 和 mouseout 会 有 冒泡效果mouseenter 和 mouseleave 没有 冒泡效果推荐
3.1.6 解绑事件
1️⃣ L0事件解绑on方式 直接使用 null 覆盖就可以实现事件的解绑代码展示btn.onclick function () {alert(点击了)
}
// L0事件移除解绑
btn.onclick null2️⃣ L2 事件解绑 语法 removeEventListener(事件类型, 函数名[, 获取捕获或冒泡阶段])⚠ 中括号包裹的参数可以省略⚠ 匿名函数 无法进行 事件解绑 操作⚠ 解绑的时候必须是 同一个函数两个函数体一样 的 匿名函数 不是 同一个函数 代码展示 script// 获取元素const btn document.querySelector(button)// 声明函数let fn function (e) {alert(事件解绑语法元素.removeEventListener(事件类型, 函数名)匿名函数 无法进行 事件解绑 操作${e.target.tagName})}// 事件侦听-点击事件btn.addEventListener(click, fn)// 事件解绑btn.removeEventListener(click, fn)
/script3.1.7 两种注册事件的区别
1️⃣ 传统on 注册L0 同一个对象后面注册的事件会 覆盖 前面注册的事件同一个事件直接使用 null 覆盖就可以实现事件的解绑都是 冒泡阶段 执行的只有冒泡没有捕获 2️⃣ 事件监听 注册L2 语法addEventListener(事件类型, 事件处理函数[ , 是否使用捕获 false]) 既能捕获也能冒泡捕获 将第三个参数 改成 true冒泡不用写默认就是冒泡false 后面注册的事件 不会覆盖 前面注册的事件同一个事件可以通过 第三个参数 去确定是在 冒泡阶段 或者 捕获阶段 执行的必须使用 removeEventListener(事件类型, 事件处理函数[ , 获取捕获或者冒泡阶段])⚠ 匿名函数无法解绑
3.2 事件委托
优点 减少注册次数提高程序性能⚠ 为未来元素预备事件添加节点 原理 事件委托其实是利用 事件冒泡 的特点 给 父元素 注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件 ⚠ 注意 事件触发元素嵌套关系很复杂就不可以使用事件委托实现 获得 真正 触发事件 的 元素对象事件对象.target获得 真正 触发事件元素 的 标签名称事件对象.target.tagName 代码展示bodyulli第1个孩子/lili第2个孩子/lili第3个孩子/lili第4个孩子/lili第5个孩子/lip我不需要变色/p/ulscript// 1.点击每个小li当前li文字变色// 按照事件委托的方式委托给父级事件写到父级身上// 获取元素const ul document.querySelector(ul)// 事件绑定ul.addEventListener(click, function (e) {// e事件对象// 得到一个事件对象// console.log(e)// 得到被点击的元素// console.log(e.target)// 得到被点击元素的标签名称// 得到的标签名称是 大写的 字符串// console.log(e.target.tagName) // LI// 判断点击的是不是li如果是li文字就变颜色if (e.target.tagName LI) {e.target.style.color red}})/script
/body3.3 其他事件
3.3.1 页面加载事件
⚠ JavaScript 写在body上面必须 使用 load事件 或者 DOMContentLoaded事件1️⃣ load 事件 等待页面 所有外部资源外联CSS、外联JavaScript图片…… 加载完毕 时就回去执行回调函数事件名 load等待监听 整个页面 所有外部资源 加载完毕 ⚠ 给 window 添加 load 事件语法window.addEventListener(load, function () {// 执行操作
})代码展示script标签在body标签上方script// 给 window 添加 页面加载事件loadwindow.addEventListener(load, function () {// 获取元素const btn document.querySelector(button)// 事件侦听-点击事件btn.addEventListener(click, function () {alert(页面加载事件给 window 添加 load 事件window.addEventListener(load, function() {}))})
})
/script
bodybutton点击/button
/body⚠ 注意不光可以监听整个页面资源加载完毕也可以针对某个资源绑定 load事件 2️⃣ DOMContentLoaded 事件 当 初始的HTML文档DOM节点 被完全加载和解析完成之后DOMContentLoaded事件被触发而无需等待外部资源加载事件名 DOMContentLoaded监听页面 DOM节点 加载完毕 ⚠ 给 document 添加 DOMContentLoaded 事件语法document.addEventListener(DOMContentLoaded, function () {// 执行的操作
})代码展示document.addEventListener(DOMContentLoaded, function () {// 获取元素const btn document.querySelector(button)// 事件侦听-点击事件btn.addEventListener(click, function () {alert(页面加载事件给 document 添加 DOMContentLoaded 事件document.addEventListener(DOMContentLoaded, function() {}))})
})3.3.2 元素滚动事件 - scroll
滚动条 滚动的时候 触发⚠ 页面 必须有 滚动条 才能 触发 让 页面 具有 滑动效果 (不是瞬间到指定位置而是缓慢滑动到指定位置) /* 页面滑动 */
html {/* 让滚动条丝滑的滑动 *//* 滚动-行为平滑 */scroll-behavior: smooth;
}让 html标签页面最大的标签 滚动 document.documentElement.scrollTop // html被卷去的高度
window.pageYoffset // 页面滚出去的高度页面在竖轴的偏移量
document.documentElement.scrollTop window.pageYoffset应用场景固定导航栏、返回顶部事件名 scroll监听 整个页面 滚动 语法window.addEventListener(scroll, function () {// 执行的操作
})⚠ 注意 给 window常用 或 document 添加 scroll 事件监听 某个元素的内部 滚动 直接给 某个元素 加即可 代码展示 获取位置 scrollTop被卷去的头部 和 scrollLeft被卷去的左侧 属性 ⚠ 读写属性可以 读取 亦可以 赋值⚠ 获取到的是 数字赋值的时候 不带单位检测页面滚动的头部距离 document.documentElement.scrollTop 数字window.pageYoffset - 只读属性获取 被卷去 的大小获取 元素内容 往左、往上滚出去 看不到 的 距离⚠ 得到的是数字型 不带单位尽量写在 scroll事件 里面代码展示 style* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 3000px;}div {display: none;margin: 100px auto;width: 470px;height: 150px;border: 1px solid #000;text-align: center;font-size: 20px;font-family: 隶书;}.active {display: block;position: fixed;top: 0;left: 50%;transform: translateX(-50%);margin-top: 0;}
/stylebodydiv世间的悲喜皆不如我所愿但苦于乐皆是恩赐世间的悲喜皆不如我所愿但苦于乐皆是恩赐世间的悲喜皆不如我所愿但苦于乐皆是恩赐世间的悲喜皆不如我所愿但苦于乐皆是恩赐世间的悲喜皆不如我所愿但苦于乐皆是恩赐世间的悲喜皆不如我所愿但苦于乐皆是恩赐/divscript// 事件侦听-页面滚动事件-windowwindow.addEventListener(scroll, function () {// 获取html元素const html document.documentElement// 获取div元素const div document.querySelector(div)// console.log(html.scrollTop); // 得到的是数字型// scrollTop 300显示div并固定在可视区域顶部小于300隐藏if (html.scrollTop 300) {div.classList.add(active)} else {div.classList.remove(active)}})/script
/body让页面 滚动到指定位置 1️⃣ 属性赋值document.documentElement.scrollTop 指定位置距离顶部的距离2️⃣ 方法window.scrollTo(x, y)3.3.3 ❌ 页面尺寸事件 - resize了解
窗口尺寸改变 的时候 触发事件 事件类型 resize语法window.addEventListener(resize, function () {// 执行的代码
})检测屏幕宽度 语法window.addEventListener(resize, function () {let w document.documentElement.clientWidthconsole.log(w)
})获取元素宽高 属性 获取元素的 可见部分 宽高不包含border、margin、滚动条clientWidth 和 clientHeight得到的是 数字型
3.4 ❗❗ 元素的尺寸和位置
1️⃣ 获取 宽高属性 获取元素 自身的宽高 内容 padding border offsetWidth 和 offsetHeight获取到的是 数值⚠ 获取的是 可视宽高如果盒子是隐藏的获取的结果是0 2️⃣ 获取 位置 ① 获取元素 距离自己 最近一级 定位 祖先元素 的 左、上 距离 带有 定位属性 的 祖先元素如果都没有就以文档左上角为准 offsetLeft 和 offsetTop 相对于 页面 来说⚠ 只读属性 获取的是可视宽高若盒子隐藏则获得的是0② ❌ 元素.getBoundingClientRect() 了解 返回元素的 大小 及其 相对于视口的位置相对于 视口代码展示const div document.querySelector(div)
div.getBoundingClientRect()✅ 总结
属性作用说明scrollLeft 和 scrollTop被 卷去 的 头部 和 左侧配合 页面滚动(scroll 事件) 来用可读写clientWidth 和 clientHeight获得 元素 的 宽度 和 高度不包含border、margin、滚动条用于js 获取元素大小 只读属性offsetWidth 和 offsetHeight获得 元素 的 宽度 和 高度包含border、padding、滚动条等只读属性offsetLeft 和 offsetTop获取元素距离 自己定位父元素 的左、上距离获取 元素位置 的时候使用只读属性
scroll系列 、 client系列 、 offset系列 scroll系列 标签内部 内容 的大小位置 scrollTop / scrollLeft表示标签真实内容相对于标签的位置❌scrollWidth / scrollHeight表示标签真实内容的大小和标签本身的大小无关是内容的宽高 client系列 标签 容纳范围border里面 的大小、位置 clientWidth / clientHeight表示标签内容区域的大小❌clientTop / clientLeft表示标签内容区域的位置几乎不用仅仅表示上边框的高度左边框的宽度 ✔ offset系列 标签本身 的大小、位置 offsetWidth / offsetHeight包含content padding borderoffsetTop / offsetLeft最近一级 的 带有定位属性 的 祖先元素 的 相对位置如果没有定位那么就是相对于body 拓展 添加css让页面滚动平滑 html {scroll-behavior: smooth;
}if单分支语句拓展 if (old) old.classList.remove(active)old old.classList.remove(active) - 逻辑与old?.classList.remove(active) - 可选链属性选择器 document.querySelector([data-namenew])
自定义属性 的 属性值 可以 省略 双引号不推荐四、❗❗ 日期对象
用来 表示时间 的 对象作用 得到 当前系统 的 时间日期对象Date构造函数的实例记录了一个时间信息
4.1 实例化
实例化有 new 关键字的都是实例化见 JS 高级
4.1.1 得到当前时间
创建一个 时间对象 并 获取时间 语法const 常量名 new Date()代码展示const date new Date()
console.log(date)
// Wed Aug 03 2022 20:37:52 GMT0800 (中国标准时间)
// 周三 八月 3号 年份 时间 4.1.2 指定时间
倒计时 的时候 使用语法const 常量名 new Date(指定的时间)⚠ 参数: 数字 : 月份是从 0 开始的字符串 : 月份是正常的 代码展示const date new Date(2022-8-3 20:50:00)
let h date.getHours()
console.log(h) // number
console.log(date)
console.log(typeof date) // object
// Wed Aug 03 2022 20:50:00 GMT0800 (中国标准时间)4.2 日期对象方法 语法作用说明对象.getFullYear()获得 年份获取 四位 年份对象.getMonth()获得 月份取值为 0 ~ 11对象.getDate()获取 月份中的 某一天不同月份取值不同对象.getDay()获取 星期取值为 0 ~ 6对象.getHours()获取 小时取值为 0 ~ 23对象.getMinutes()获取 分钟取值为 0 ~ 56对象.getSeconds()获取 秒取值为 0 ~ 59对象.getMilliseconds()获取 毫秒取值为 0~1000⚠ 注意 周日是一周的开始 - 周日 0当前月份 获取的月份 1⚠ 得到的都是 数字型
4.3 时间的另一种写法
时间对象.toLocaleString() 年月日时分秒时间对象.toLocaleDateString() :年月日时间对象.toLocaleTimeString() :时分秒代码展示// 获得当前系统时间
const systemTime new Date()
// 从 获取的当前系统时间systemTime里找
// 获取年份
const year systemTime.getFullYear()
// 获得月份
const month systemTime.getMonth() 1
// 获取月份中的某一天
const date systemTime.getDate()
// 获取星期
const day systemTime.getDay()
// 获取小时
const hours systemTime.getHours()
// 获取分钟
const minutes systemTime.getMinutes()
// 获取秒
const seconds systemTime.getSeconds()
console.log(systemTime);
console.log(${year} 年 ${month} 月 ${date} 日 周${day} ${hours} 时 ${minutes} 分 ${seconds} 秒)
// Wed Aug 03 2022 21:14:56 GMT0800 (中国标准时间)
// 2022 年 8 月 3 日 周3 21 时 14 分 56 秒格式化时间!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
style* {margin: 0;padding: 0;box-sizing: border-box;}div {margin: 100px auto;width: 600px;height: 100px;border: 5px solid #969696;background-color: #d7d7d7;color: hsl(338, 100%, 50%);font-size: 44px;font-weight: 700;font-family: 华文隶书;text-align: center;line-height: 100px;}
/style
/headbodydiv/divscript// 写法一 const div document.querySelector(div)function getTime() {const date new Date()let hours date.getHours() 10 ? 0 date.getHours() : date.getHours()let minutes date.getMinutes() 10 ? 0 date.getMinutes() : date.getMinutes()let seconds date.getSeconds() 10 ? 0 date.getSeconds() : date.getSeconds()return 当前时间${date.getFullYear()}-${date.getMonth() 1}-${date.getDate()} ${hours}:${minutes}:${seconds}}div.innerHTML getTime()setInterval(function () {div.innerHTML getTime()}, 1000)// 当前时间2022-8-3 22:45:50// 写法二自动补0/*// 定时器外面再写一次的原因定时器隔1s再去执行用外面的填补页面空白div.innerHTML date.toLocaleString()// div.innerHTML date.toLocaleDateString()// div.innerHTML date.toLocaleTimeString()setInterval(function () {const date new Date()div.innerHTML date.toLocaleString() // 2022/8/3 23:00:00// div.innerHTML date.toLocaleDateString() // 2022/8/3// div.innerHTML date.toLocaleTimeString() // 22:48:20}, 1000)*//script
/body
/html4.3 时间戳
使用场景倒计时时间戳 是指1970年01月01日00时00分00秒起 至现在 的 毫秒数注意 时间戳 是 唯一的⚠ 中国 在 东8区const date new Date(1970-01-01 00:00:00) / 1000 / 60 / 60
console.log(date) // -8⚠ 算法 将来的时间戳 - 当前的时间戳 剩余时间毫秒数剩余时间毫秒数 转换为 剩余时间的 日时分秒 就是 倒计时展示将来时间戳 2000ms - 现在时间戳 1000ms 1000ms
1000ms 转换时分秒就是 0小时0分1秒三种获取时间戳的方法 1️⃣ 使用 getTime() 方法 语法const date new Date()
console.log(date.getTime()) // 1659539589145 毫秒数
// new Date().get.Time()
拓展:
时间对象.getTime() 和 时间对象.valueOf() 的到的结果一样
console.log(date.getTime() date.valueOf()) // true⚠ 注意 必须 先 实例化⚠ 可以返回 指定时间的时间戳 2️⃣ ✔简写 new Date() 语法console.log(new Date()) // 1659539732765 毫秒数⚠ 注意 - 正号 隐式转换⚠ 可以返回 指定时间的时间戳 代码展示conlose.log(new Date(2022-10-1 07:30:00))
// 1664580600000 -- 指定时间的时间戳3️⃣ 使用 Date.now() 语法console.log(Date.now()) // 1659540040487 毫秒数⚠ 注意 没有 实例化⚠ 只能得到 当前的 时间戳 时间转换公式 通过 时间戳 得到是 毫秒需要转换为秒在计算转换公式 days d parseInt(总秒数 / 60 / 60 / 24)hours h parseInt(总秒数 / 60 / 60 % 24)minutes m parseInt(总秒数 / 60 % 60)seconds s parseInt(总秒数 % 60) ✔ 倒计时函数const element document.qurySelector(css选择器)
function getCountTime(time) {// 得到当前的时间戳毫秒const now new Date()// 得到未来时间时间戳毫秒const last new Date(time)// 得到剩余的时间戳毫秒 并转换为 秒const count (last - now) / 1000// 将 剩余秒数 - 天、时、分、秒let day parseInt(count / 60 / 60 / 24)let hours parseInt(count / 60 /60 % 24)// 补0hours hours 10 ? 0 hours : hourslet minutes parseInt(count / 60 % 60)// 补0minutes minutes 10 ? 0 minutes : minuteslet seconds parseInt(count % 60)// 补0seconds seconds 10 ? 0 seconds : secondsreturn ${day} 天 - ${hours}:${minutes}:${seconds}
}function getRemainingTime(element, time) {// 先执行一次定时器过1s再去执行会有1s的显示空白时间让它限制性填补空白再让后面的覆盖element.innerHTML getCountTime(time)setInterval(function () {element.innerHTML getCountTime(time)}, 1000)
}getRemainingTime(div, 2022-10-1 00:00:00)五、❗❗ 节点操作
浏览器 使用 对象 来 记录 网页内容 浏览器把网页内容翻译成一个个的对象把 网页内容 的 特征 翻译成 对象 的 属性这个对象就称为 DOM对象网页内容的特征 标签属性标签内容标签上下级… 网页内容 、对象 网页内容 标签、文本、注释DOM对象标签元素节点、文本节点、注释节点网页内容 和 DOM对象 一 一 对应 DOM树 每个DOM对象中都有表示层级关系的属性这些属性把所有DOM对象联系在一起形成一个树状结构称为DOM树DOM树 网页
5.1 DOM节点
DOM节点 DOM树 里面 每一个内容 都称之为 节点节点类型 1️⃣ ❗✔元素节点 所有的 标签html 是 根节点 2️⃣ 属性节点 所有的属性 3️⃣ 文本节点 所有的文本
5.2 查找节点 - 属性
有效返回值 是一个 对象无效返回值 - null
5.2.1 父节点
1️⃣ parentNode属性 语法子元素.parentNode返回值 ⚠ DOM对象最近一级 的父节点亲爸爸找不到 返回 null 代码展示div classyeyediv classdaddiv classbabyx/div/div
/divscriptconst baby document.querySelector(.baby)console.dir(bady) // div.bady - DOM对象console.dir(baby.parentNode) // div.dad - DOM对象console.dir(baby.parentNode.parentNode) // div.yeye - DOM对象
/script关闭广告!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}/style
/headbodydiv classbox我是广告div classbox1X/div/divdiv classbox我是广告div classbox1X/div/divdiv classbox我是广告div classbox1X/div/divscript// const smallBox document.querySelectorAll(.box1)/* for (let i 0; i smallBox.length; i) {smallBox[i].addEventListener(click, function () {this.parentNode.style.display none})} */// 事件委托document.body.addEventListener(click, function (e) {if (e.target.className box1) {e.target.parentNode.style.display none}})/script
/body/html5.2.2 子节点
1️⃣ ❌childNodes 属性 语法父元素.childNodes返回值 获得 所有子节点、包括文本节点空格、行换、注释节点等 2️⃣ ⚠ children 属性 语法父元素.children⚠ 返回值 伪数组 要想得到里面的每一个节点还是要遍历⚠ 注意 仅获得 所有 元素节点标签只选亲儿子只不过是把亲儿子里面包含的所有节点元素、文本、注释…拿过来 代码展示ulli1p6/pspan7/span/lili2/lili3/lili4/lili5/li
/ulscript// 获取子节点// 语法父元素.children// 返回值伪数组// 仅 获得 所有 元素节点标签console.log(document.querySelector(ul).children);// 得到的是一个伪数组
/script5.2.3 兄弟节点
1️⃣ 下一个 兄弟节点 nextElementSibling 属性语法兄弟元素.nextElementSibling⚠ 返回值 有下一个兄弟节点得到的就是下一个元素没有 就是 null 2️⃣ 上一个 兄弟节点 previousElementSibling 属性语法兄弟元素.previousElementSibling⚠ 返回值 有上一个兄弟节点得到就是上一个元素没有 就是 null 代码展示ulli1p6/pspan7/span/lili2/lili3/lili4/lili5/li
/ulscript// 上一个兄弟节点// 语法兄弟元素.previousElementSibling// 下一个兄弟节点// 语法兄弟元素.nextElementSiblingconsole.log(document.querySelector(ul li:nth-child(2)).nextElementSibling)
/script5.3 增加节点
先 创建 再 追加
5.3.1 创建节点
语法document.createElement(标签名) // 文档.创建元素创建的节点是一个正常的DOM对象⚠ 注意document.createElement() -- 创建的是空标签5.3.2 追加节点
1️⃣ 插入到 父元素 的 最后一个 子元素 语法父元素.appendChild(要插入的元素) // 追加孩子⚠ 注意 做为 父元素 里面 的 最后一个 子元素代码展示⬇ 2️⃣ 插入到 父元素 中 某个子元素 的 前面 语法父元素.insertBefore(要插入的元素, 在哪个元素前面) // 插入在…之前⚠ 注意 插入到 父元素 里面 的 指定位置代码展示⬇ ⚠ 注意 appendChild 和 insertBefore 如果插入的是页面上 已经存在 的标签会有 剪切 效果将已经存在的元素 从 原位置 剪切到 新位置代码展示stylediv,li {font-size: 20px;text-align: center;line-height: 50px;}li:first-child {width: 150px;height: 50px;background-color: #b8f0e8;}li:last-child {width: 150px;height: 50px;background-color: #a6a6db;}div {width: 150px;height: 50px;background-color: #c0bfbf;}
/stylebodyulli我是老大/li/ulscript// 增加节点节点 - 元素节点// 1.创建节点// 语法document.createElement(标签名称)// 2.插入节点// 1.作为父元素里面的最后一个子元素// 语法父元素.appendChild(要插入的元素)// 2.插入到父元素里面指定位置插入到父元素里面某个子元素的前面// 语法父元素.insertBefore(要插入的元素, 在那个子元素前面)// 1.创建节点const li document.createElement(li)li.innerHTML 我是老二// 2.插入节点// 2.1获取父元素const ul document.querySelector(ul)// 2.2作为父元素里面的最后一个子元素ul.appendChild(li)// 1.创建节点const div document.createElement(div)div.innerHTML 我是老大的大哥// 2.插入节点// 2.1获取父元素const body document.body// 2.2插入到父元素指定位置插入到父元素里面指定元素前面body.insertBefore(div, ul)// 将创建的节点始终插入到父元素的最前面/*body.children // 包含body下所有的亲子节点伪数组body.insertBefore(div, body.children[0])*//script
/body5.3.3 克隆节点
特殊情况 的 新增节点应用场景轮播图步骤 1️⃣ 复制 一个 原有 的 节点2️⃣ 把 复制的节点 放入到 指定 的 元素内部 语法元素.cloneNode(布尔值)clondNode会克隆出一个跟原标签一样的标签原标签上面有什么克隆后的标签上面就有什么是两个元素克隆成功后前后两个元素没有任何关系参数 true - 深克隆 克隆时 包含 后代节点 一起克隆 节点 - 文本节点、注释节点等所有的节点false - 浅克隆 克隆时 不包含 后代节点、默认值 为 false 代码展示ulli1/lili2/lili3/li
/ulscriptconst ul document.querySelector(ul)// const newLi ul.children[0].cloneNode(true)// newLi.innerHTML newLi// ul.appendChild(newLi)ul.insertBefore(ul.children[0].cloneNode(true), ul.children[11])
/script5.4 删除节点
在 JavaScript 原生DOM操作中要 删除元素 ⚠ 必须 通过 父元素 删除语法父元素.removeChild(要删除的元素)⚠ 注意 如果 不存在 父子关系 则 删除 不成功删除节点 和 隐藏节点display: none;有区别 删除节点从DOM中删除节点隐藏节点只是在页面上不显示DOM节点依然存在 ✔ 补充: 语法 自杀式z删除的元素.remove()拓展 替换节点语法parentNode.replaceChild(newChild, oldChild);方法用指定的节点替换当前节点的一个子节点并返回被替换掉的节点 重绘 和 回流 重绘 由于节点元素样式的改变并不会影响它在文档流中的位置和文档布局时则是重绘回流 元素的尺寸、结构、布局等发生变化时浏览器就会重新渲染部分或全部文档的过程称为回流重绘不一定一起回流但回流一定会引起重绘简单理解影响到了布局就会有回流
六、❌ M端事件
常见的触屏事件touch 触屏 touch 事件说明touchstart手指 触摸 到一个DOM元素时触发touchmove手指在一个DOM元素上 滑动 时触发touchend手指从一个DOM元素上 移开 时触发
七、❗ JS插件
熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html查看基本使用流程 https://www.swiper.com.cn/usage/index.html查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html注意: 多个swiper同时使用的时候, 类名需要注意区分使用步骤 引入资源 css文件js文件 导入代码 复制html结构复制css样式复制js行为
八、❗❗ window对象
windowJS中的顶级对象 BOM浏览器对象模型 DOM页面文档对象模型
8.1 BOM浏览器对象模型
BOMBrowser Object Model- 浏览器对象模型 由一些列相关的对象构成并且每个对象都提供了很多方法和属性浏览器的内容被翻译成了对象 window 对象是一个 全局对象也可以说是 JavaScript 中的 顶级对象像document、alert()、console.log()这些都是window的属性基本BOM的属性和方法都是window的⚠ 所有通过 var 定义在 全局作用域 中的 变量、函数 都会变成 window对象 的 属性 和 方法⚠ window对象下的属性和方法调用的时候可以 省略windowDOM 和 BOM 区别
8.2 定时器 - 延时函数
定时器 间歇函数setInterval() 延时函数setTimeout()让代码 延迟 执行的函数 - setTimeout()语法setTimeout(回调函数, 等待的毫秒数)清除延时函数let timerId serTimeout(回调函数, 等待的毫秒数)
clearTimeout(timerId)⚠ 注意 setTimeout 仅仅 只执行 一次 平时省略 window延时函数需要等待所以后面的代码先执行每一次调用延时器都会 产生一个 新的 延时器 间歇函数 和 延时函数 的区别 间歇函数每隔一段时间就执行一次除非手动清除延时函数执行一次
8.3 JS执行机制
JS代码 从上到下 执行单线程 同一时间只能做一件事 所有的任务需要排队前一个任务结束才会执行后一个任务
8.3.1 同步 与 异步
1️⃣ 同步 前一个任务结束后再执行后一个任务程序的执行顺序 和 任务的排列顺序 是 一致的同步任务 都在 主线程 执行栈 上执行 2️⃣ 异步 如果执行一个任务需要花费一定的时间在执行这个任务的同时可以去执行别的任务耗时 的都是 异步JS的 异步 是通过 回调函数 实现的异步任务的三种类型 普通事件click、mouseenter、mouseleave、……资源加载定时器 间歇函数setInterval 延时函数setTimeout 异步任务 添加到 任务队列 消息队列中 同步 和 异步 的 本质 区别 一条流水线上的 各个流程 执行顺序不同 3️⃣ 执行机制 ① 先执行 任务栈 中的 同步任务② 异步任务 添加到 任务队列 里面 对 异步任务 进行 排序根据每个异步任务所消耗的时间 ③ 一旦 执行栈 里面的 所有 同步任务 执行完毕系统 就会 按次序 读取 任务队列 中的 异步任务于是 被读取 的 异步任务 结束 等待状态进入 执行栈开始执行。
8.3.2 事件循环 - event loop 由于 主线程 不断的 重复 获得任务、执行任务、再获取任务、再执行所以这种机制被称为 事件循环enevt loop事件循环 js执行代码时会把同步任务添加到主线程执行栈中执行把满足条件的异步任务推到任务队列排队等候执行事件循环是一种轮询机制当执行栈中的所有同步任务执行完毕之后系统就会依次读取任务队列中的异步任务异步任务结束等待状态按照次序添加到执行栈中执行。
8.4 location 对象
location 的 数据类型 是 对象它 拆分 并 保存 了 URL地址 的 各个 组成 部分常用 属性 和 方法 1️⃣ ✔ href 属性 获取 完整的URL地址对其 赋值时 用于 地址的跳转 const btn document.querySelector(button);
btn.addEventListener(click, function () {location.href https://www.baidu.com;
});可以后退 2️⃣ search 属性 获取地址中 携带的参数符号 ? 后面部分 console.log(location.search); // 字符串3️⃣ hash 属性 获取地址中的 哈希值符号 # 后面部分 console.log(location.hash); // 字符串4️⃣ reload(是否使用缓存) 方法 用来 刷新 当前 新页面传入参数 true 时表示 强制刷新默认false使用缓存刷新 const btn document.querySelector(.reload);
btn.addEventListener(click, function () {// F5 - 刷新//location.reload();// F5Ctrl - 强制刷新 location.reload(true);
});5️⃣ replace(): 方法 页面跳转覆盖旧地址 const btn document.querySelector(button);
btn.addEventListener(click, function () {location.replace(https://www.baidu.com);
});⚠ href属性 和 replace()方法 实现页面跳转的区别 href属性 保留 原地址具有回退功能replace()方法 覆盖 原地址没有回退功能
8.5 navigator 对象
navigator 的 数据类型 是 对象该对象记录了 浏览器 自身的 相关信息常用 属性 和 方法 浏览器相关信息navigator.userAgent通过 userAgent 检测 浏览器 的 版本 及 平台// 检测userAgent浏览器信息
!(function () {const userAgent navigator.userAgent;// 验证是否为Android或iPhoneconst android userAgent.match(/(Android);?[\s\/]([\d.])?/);const iphone userAgent.match(/(iPhone\sOS)\s([\d_])/);// 如果是Android或iPhone则跳转至移动站点if (android || iphone) {location.href http://m.itcast.cn;}
})();8.6 history 对象
histroy 的 数据类型 是 对象主要管理历史记录该对象与浏览器地址栏的操作相对应。常用属性和方法 back() 可以 后退 功能forward() 前进 功能go(参数) 前进 后退 功能 参数 1 前进 一个页面 back()0 刷新页面使用缓存刷新 (reload())-1 后退 一个页面 (forward()) 代码展示button后退/button
button前进/button
script// 获取元素const back document.querySelector(button);const forward back.nextElementSibling;// 事件侦听-点击事件back.addEventListener(click, function () {// 前进一步history.go(1);});forward.addEventListener(click, function () {// 后退一步history.go(-1);});
/script九、❗❗ 本地存储
数据存储 在 用户 浏览器 中硬盘设置、读取方便、甚至 页面刷新 不会丢失 数据容量较大、sessionStprange 和 localStorage 约5M为什么要将数据存储到本地存储里 数据持久化数据不丢失
9.1 本地存储分类
9.1.1 localStorage
作用 可以 将 数据 永久存储 在 本地用户电脑除非手动清除否则关闭页面 也会 存在生命周期 什么时候失效什么时候死掉特性 可以多窗口页面共享同一浏览器可以共享不能跨域同一个域名使用以 键值对 的形式 存储使用 ⚠ 语法 1️⃣ 存储/修改 数据localStorage.setItem(key, value)
// 设置每个小项key和value要加引号key和value可以是变量有 这个键就是 修改没有 就是 添加代码展示// 本地存储 - localStorage
// 存储数据 - localStorage.setItem(key, value);
// 要加引号
localStorage.setItem(uname, 邵秋华);2️⃣ 获取 数据localStorage.getItem(key) // 获取里面的项key必须加引号返回值 有这个key就返回对应的值没有这个key返回 null 代码展示// 获取数据 - localStorage.getItem(key)
// 要加引号
console.log(localStorage.getItem(uname)); // 邵秋华3️⃣ 删除 某项数据localStorage.removeItem(key) // 移除里面的项 key必须加引号代码展示// 删除本地存储
localStorage.removeItem(uname);4️⃣ 清空 数据localStorage.clear()慎用清空全部数据 ⚠⚠ 注意 ⚠ 所有的 键 必须加 引号有这个键就是修改没有就是添加⚠ 本地存储 只能存储 字符串 类型的数据得到的值也是字符串型如果value写的是数值型存的时候会转换成字符型代码展示const arr [1, 2, 3, 4];
arr.forEach((item, index) {localStorage.setItem(id:${index}, item);console.log(localStorage.getItem(id:${index})); // 1 2 3 4字符串console.log(typeof (localStorage.getItem(id:${index})));// string
});9.1.2 sessionStprange
特性 生命周期 为 关闭浏览器窗口在同一个窗口页面下 数据可以共享以 键值对 的形式 使用用法跟localStorage基本相同 ⚠ localStorage 与 sessionStorage 的区别 他们的 作用 相同但是 存储方式 不同因此应用场景也不同localStorage 的数据可以 长期存储关闭浏览器 数据 也 不会消失除非 手动清除sessionStorage 的数据时是 临时存储页面被关闭存储在sessionStorage里的 数据 会被 清除
9.2 存储复杂数据类型
本地存储 只能存储 字符串不能存储 复杂数据类型JSON 属性和值都有引号而且是双引号一种字符串格式的名称把 数组/对象 转换为结构为 ”数组/对象“ 的字符串只能存数字、字符串、对项不能存null、undefined、函数⚠ JSON.parse(转换数据)要转换的数据不是JSON格式的字符串 存储复杂数据类型步骤 1️⃣ 将 复杂数据类型 ➡ JSON字符串 语法JSON.stringify(复杂数据类型)代码展示// 本地存储只能存储字符串,不能存储复杂数据类型
// 如果要存储复杂数据类型,需要将复杂数据类型转换成 JSON 字符串
// 语法JSON.stringify(复杂数据类型);
let obj {uname: 邵秋华,age: 22,gender: 男,
};localStorage.setItem(obj, JSON.stringify(obj));2️⃣ 将 JSON字符串 ➡ 复杂数据类型 语法JSON.parse(JSON字符串)代码展示console.log(JSON.parse(localStorage.getItem(obj)));存 复杂数据类型 - JSON.stringify() - JSON字符串 - 存到本地存储中 取 从本地存储中取 - JSON字符串 - JSON.parse() - 复杂数据类型
十、❗ 正则表达式
正则表达式Reular Expression用于 匹配 字符串 中 字符组合 的 模式。 在 JavaScript 中正则表达式 也是 对象object ⚠ 注意 只能对 字符串 进行匹配 正则表达式的作用 1️⃣ 表单验证匹配2️⃣ 过滤敏感词汇替换3️⃣ 字符串中提取我们想要的部分提取 --爬虫
10.1 正则表达式的使用
1️⃣ 定义规则 语法const regObj /表达式/ // 正则表达式不改变使用const regObj new RegExp(表达式) // 正则表达式变化使用⚠ 注意 // 正则表达式 的 字面量⚠ // 中间写什么就查找什么⚠ // 中间 不要乱加 空格只要涉及到正则表达式不要乱加空格最好用vs格式化 2️⃣ ✔检测查找是否匹配 语法 test() 用来 查看 正则表达式 与 指定的字符串 是否匹配 regObj.test(被检测的字符串)⚠ 返回值 匹配 ➡ true不匹配 ➡ false规则在前面被检测的就是用户输入的内容 注意 代码展示// 正则表达式
// 正则表达式使用
// 1定义规则
// 语法const 变量名regObj /表达式/;
// 注意正则表达式的字面量中间 不要乱加空格
// 字面量中间些什么就匹配什么不要乱加空格
// 2是否匹配
// 语法regObj字面量.test(被检测的字符串);const reg /前端/;const str 我在学习前端希望学完高薪就业;console.log(reg.test(str)); // true// 注意const reg / 前端 /;const str 我在学习前端希望学完高薪就业;console.log(reg.test(str)); // false// 注意console.log(/哈/.test(哈)); // trueconsole.log(/哈/.test(哈哈)); // trueconsole.log(/哈/.test(二哈)); // true3️⃣ ⭕检索符合规则的字符串 语法 exec()在一个 指定字符串 中执行一个 搜索匹配 regObj.exec(被检测字符串)返回值 匹配 ➡ 数组不匹配 ➡ null 代码展示const reg /前端/;
const str 我在学习前端希望学完高薪就业;
console.log(reg.exec(str)); 正则表达式检测查找 test()方法 和 exec()方法 有什么区别 text() 用于判断是否有符合规则的字符串返回的是一个布尔值找到 返回 true 没找到 返回 falseexec() 用于检索查找符合规格的字符串找到 返回 数组没找到 为 null
10.2 ❗ 元字符
字符 普通字符 大多数的字符仅能够描述它们本身字母数字普通字符 只能够 匹配 字符串中 与 它们 相同的字符 元字符 是一些 具有 特殊含义 的 字符优点 极大提高了 灵活性 和 强大的匹配功能 ⚠ 边界符、量词、字符类 组合使用1️⃣ 边界符 表示位置开头和结尾必须用什么开头用什么结尾用来提示字符所处的位置 边界符说明^表示匹配 行首 的文本以谁开始$表示匹配 行尾 的文本以谁结束注意 ⚠ ^ $ 在一起表示 必须是 精确匹配 代码展示console.log(/哈/.test(哈)); // true // 字符串的内容 和 规则相等
console.log(/哈/.test(哈哈)); // true
console.log(/哈/.test(二哈)); // trueconsole.log(/^哈/.test(哈)); // true
console.log(/^哈/.test(哈哈)); // true
console.log(/^哈/.test(二哈)); // flaseconsole.log(/^哈$/.test(哈)); // true
console.log(/^哈$/.test(哈哈)); // false -- 精确匹配字符串的内容、长度必须和规则相等
console.log(/^哈$/.test(二哈)); // flase2️⃣ 量词 表示重复次数设定 某个模式 的 出现 次数 量词说明*****重复 零次 或 多次 0重复 一次 或 多次 1?重复 零次 或 一次{n}重复 n次{n,}重复 n次 或 更多次 n{n,m}重复 n 到 m 次 n 次数 m ⚠注意 n,m 之间 没有空格离量词 最近的量词的左边 重复别的不重复 3️⃣ 字符类 ① [] - 匹配字符集合 被检测的数据 只要能和 规则 匹配到 任意一个字符 就是 true否则就是false代码展示后面的字符串只要包含abc中任意一个字符都返回true
console.log(/[abc]/.test(andy)); // true
console.log(/[abc]/.test(baby)); // true
console.log(/[abc]/.test(cry)); // true
console.log(/[abc]/.test(die)); // false精确匹配 被检测的数据 只能 和 规则 匹配 一个 字符n选1要想多个匹配须和量词配合使用console.log(/^[abc]$/.test(a)); // true
console.log(/^[abc]$/.test(b)); // true
console.log(/^[abc]$/.test(c)); // true
console.log(/^[abc]$/.test(ab)); // false
console.log(/^[abc]{1,}$/.test(abc)); // true② - 连字符 使用连字符 - 表示一个 范围[a-z] 表示 a~z 26个英文字母都可以[a-zA-Z] 表示大小写都可以[0-9] 表示 0~9 都可以 [\u4e00-\u9fa5] 匹配汉字代码展示/^[1-9][0-9]{4,}$/ // 第一个数字1~9从第二位开始0~9可以重复4③ ^ - 取反符号 [] 里加上 ^ 取反符号[^a-z] 匹配除了小写字母以外的字符⚠ 注意 写到 [] 里面 ④ . 匹配 除了换行符之外的任何单位⑤ 预定义类某些常见模式的简写方法 预定义说明\d匹配 0-9之间 的 任一数字相当于[0-9]\D匹配所有 0-9以外 的 字符相当于[ ^0-9]\w匹配任意的 字母、数字和下划线相当于[A-Za-z0-9_]\W除所有字母、数字和下划线以外的字符相当于[ ^A-Za-z0-9_]\s匹配空格包括换行符、制表符、空格符等相等于[\t\r\n\v\f]\S匹配非空格的字符相当于[ ^\t\r\n\v\f] 日期^\d{4}-\d{1,2}-\d{1,2}$⑥ 使用小括号将字符包成一个整体⑦ | 或 特殊符号写到 [] 里的最后面
10.3 修饰符
修饰符 约束 正则表达式的某细节 行为 如是否区分大小写、是否支持多行匹配语法/表达式/修饰符i ignore正则匹配时 不区分 大小写g global匹配 所有 满足正则表达式 的 结果 全局匹配m 执行多行匹配代码展示⬇ replace - 替换 语法字符串.replace(/正则表达式/, 替换文本)返回值 替换好的字符串代码展示⬇替换多个字符串.replace(/正则表达式/g, 替换文本)代码展示⬇ ✔ 替换多个 并且 不区分大小写字符串.replace(/正则表达式/ig, 替换文本)
字符串.replace(/正则表达式/gi, 替换文本)⚠ g i 不区分 前后代码展示⬇ 替换多个 并且 不区分大小写用正则表达式里面的 或 字符串.replace(/正则表达式|正则表达式/, 替换文本)⚠ 或(|) 两侧 不要加 空格如果没有小括号就是将正则表达式分成多份代码展示⬇ 代码展示// 修饰符约束正则表达式的细节行为
// 语法 /正则表达式/修饰符
// i不区分大小写 g匹配所有满足正则表达式的结果
// i
console.log(/^java$/.test(JAVA)); // false
console.log(/^java$/i.test(JAVA)); // true
console.log(/^java$/i.test(JavA)); // true// 替换 - replace
// 语法字符串.replace(/正则表达式/, 替换文本)
const str java是一门编程语言学完JAVA工资很高;// 替换一个
const re1 str.replace(/java/, 前端);
console.log(re1); // 前端是一门编程语言学完JAVA工资很高// 替换多个 - g
const re2 str.replace(/java/ig, 前端);
console.log(re2); // 前端是一门编程语言学完前端工资很高// 替换多个 - 或(|) 正则表达式里的或|两侧不要加空格
const re3 str.replace(/java|JAVA/g, 前端);
console.log(re3); // 前端是一门编程语言学完前端工资很高拓展 change - 事件 当鼠标离开表单并且表单值发生变化触发
