前端三大件

HTML:超文本标记语言

CSS：层叠样式表

JavaScript：轻量级弱类型脚本语言

JS三大核心

BOM：Browser Object Model (浏览器对象模型)，提供了一些列操作浏览器相关内容和属性的方法

DOM：Document Object Model（文档对象模型），提供了一些列操作文档流相关内容和属性的方法

ECMAScript：（简称ES），给定了JS语法书写规范

JS的核心：利用ES操作DOM和BOM

a标签：<a href = "JavaScript: js代码"></a>

1.行内式：（不推荐）

非a标签：<div onclick = "js代码"></div>

2.内嵌式：（直接在html页面进行书写）

<script>js代码</script>

3.外链式：（通过src引入外部脚本文件）

<script src = "js脚本路径"></script>

注：script标签一旦引入js脚本便不能再往标签内写js代码

JS的三种输出语法（常用来排查错误）

1.alert（“输出的内容”）：页面中会弹出一个包含一个确定按钮和内容为输出内容的提示框

2.console.log(“输出的内容”)：在控制台打印输出的内容

3.document.write(“输出的内容”)：在页面中显示输出的内容

注：引号包裹的表示单纯的字符内容（不分单双引号），变量或者纯数字不需要引号包裹

js一行代码的末尾可以不要标点符号

JS中的变量

定义变量：var 变量名 = 变量值（也可以var 变量1 =值1，变量2 =值2...）

JS中的基础数据类型

1.number（数值）：包括整数，浮点数，科学计数（e5：10的5次方），其它进制数，Infinity(无穷大)，NaN：非数字

2.String（字符串）：JS中所有被引号包裹的内容都是字符串

反引号（``）称为模板字符串，其特点是可以换行书写，字符中可以解析变量（${变量}）

3.Boolean（布尔型）：true，false，计算机存储时按0，1存储

4.undefined（空）：一个变量只声明但是未赋值就叫做undefined

5.null（空）：变量有值，但这个值是空值（null）

检测数据类型

typeof（要检测的数据）：只能检测基本数据类型，返回值是对应的数据类型

数据类型转换

数值类型转换

Number（要转换的数据）：返回值为转换好的数值类型数据

转换规则：把要转换的数据看作一个整体，如果可以转换为一个合法数字，即转化为这个数字，反之就是NaN，布尔值中true转化为1，false转化为0

常用的数值转化函数：

parseInt（要转换的数据）：不管转换的是什么，都逐位去判断，直到出现不为数字的的字符，返回前面判断出来的所有数字，如果第一位不是数字，直接返回NaN，常用于取整数（因为不识别小数点）

parseFloat（要转换的数据）：返回值是转换好的数值型数据/NaN，该函数可以识别小数点

非加法的数值运算：和Number一样，强制转换

字符串类型转换

String(要转换的数据)：返回值为转换好的字符串类型数据，所有类型的数据都能转化为字符串

要转换的数据.toString()：返回值为转换好的字符串

注：这两种方法都不能转换undefined 和 null

字符串拼接：使用（+）进行拼接两个字符串

“+”的两边都是数值类型或者布尔值时才会进行数学运算

布尔型转换

Boolean（要转换的数据）：返回值为转换好的布尔型数据

只有以下5个内容转换后是false：数值NaN，数值0，空字符串，nudefined，null

运算符

算数运算：加减乘除，取余，幂运算

赋值运算：=，+=，-=，*=，/=

比较运算：>，<，==，!=，===，!==

逻辑运算：于&&，或||，非!

自增：a++，或者++a

自减：a--，或者--a

几个关于数字的小方法

isNaN（数据）：判断括号内的数据是否为数字，返回值是布尔值，过程是先用Number（）转换成数值，判断转换后的内容是否为NaN

Number.isNaN（数据）：判断括号的数字是否为NaN，返回布尔值，执行过程是判断传递的数据是否为NaN

Object.is（数据1，数据2）:判断两个数据是否一致，包括数据类型和值，返回布尔值

条件分支语句

if语句：

if（条件）{条件为true时执行的代码块}

if（条件）{条件为true时执行的代码块}else{条件为假时执行的代码块}

if（条件1）{执行1}else if（条件2）{执行2}else{执行3}

switch（a）{

case a1: 执行1； break

case a2: 执行2； break

......

default: 默认情况执行；break

}

注：（break，default都可以写，break主要保证不会执行后续代码）

三元（目）表达式

条件？a：b

含义：条件为true时执行a，反之执行b

prompt（’提示信息‘）

弹出一个输入框，获取用户输入的数据，用户点击确定时提交用户输入的数据（获取的是String），点取消时返回null

循环

循环的三要素：初始条件，结束条件，步长

for（循环的初始条件；进入循环的条件；每次循环后执行的操作）{

每次循环执行的代码

}

while（进入循环的条件）{

每次循环执行的代码

}

//运行时先判断条件是否成立，再根据判断条件判断是否执行循环代码块

do{

每次循环执行的代码

}while（进入循环的条件）

//运行时先执行一次循环代码块，再判断循环条件

循环的关键字：

break：直接结束最近的一层循环

continue：直接结束当前这一轮循环，转而进行下一轮循环

函数

JavaScript内的一种复杂数据类型，function

函数的定义

声明式：function 函数名（形参1，形参2，...）{函数体}

赋值时：var func =function(形参1，形参2，...){函数体}

函数的调用

声明式函数，直接函数名（实参1，实参2，...）

赋值式函数，在函数声明之后再调用（顺序不能变）

函数的两个阶段

函数的定义阶段

在堆内存中开辟一段空间用于存储函数体，同时把存储函数体的地址赋值给函数名

调用阶段

根据函数名存储的函数体地址，前往堆内存中寻找对应的函数体，然后在函数调用栈开辟一个新的函数执行空间，在函数执行空间内，首先进行形参赋值，然后进行函数内的预解析（同js的解析一样），再执行函数体，执行完后再把函数执行空间进行销毁

函数的参数

形参：在定义函数时，括号内的参数

实参：函数调用时传递给函数的参数

多个参数之间用逗号隔开

参数的默认值，在定义形参的时候可以给形参一个默认值，当函数调用没有传实参时就会使用该参数的默认值

函数的关键字：retrun，用于中断函数的执行，同时也可以为函数提供一个返回值

浏览器的内存

图示：

栈内存：用于存储基本数据类型

堆内存：用于存储函数体，并把存储函数体的地址赋给函数名，这个地址是存放在栈内存中的

tip：复杂数据类型（也称为地址数据类型/引用数据类型）

对象

JS中的一种复杂的数据类型，Object，是一个类中的一个实例

对象数据类型：一个复杂的容器，里面可以容纳各种各样的数据（无序的键值对集合）

键值对------键名：键值

对象数据类型的创建

字面量创建：

var obj ={}//创建一个空对象

var obj = {键1:值1，键2:值2，...}//创建一个包含初始化键值对的对象

通过内置构造函数创建：

var obj =new Object（）

键名的命名

推荐于变量命名规范一致，可以接受纯数字，若是纯数字，根据数值大小，从小到大一次排列，可以接受所有特殊符号，但包含特殊符号时，键名必须用引号进行包裹

对象的增删改查

针对对象的键值对进行操作，而不是对象整个个体

var obj ={

name： '张三',

age：20

}

点语法

obj.键名 =键值//如果obj中没有该键则会直接创建该键值对，若有则修改对应的键值

delete obj.键名//删除对应的键值对

obj.键名//获取对应的键值

数组关联法

obj[键名] = 键值//如果obj中没有该键则会直接创建该键值对，若有则修改对应的键值

delete obj[键名]//删除对应的键值对

obj[键名]//获取对应的键值

注：当键名涉及变量或者特殊符号时，只能用数组关联法

对象的遍历

for(var key in obj){执行的操作}//key表示obj对应的键名，obj[key]则表示对应的键值

JS的预解析

在执行JS代码之前，先对代码进行通读并解释，解析过程只解析var声明的变量和声明式函数

var声明的变量解析：只声明这是一个变量，并不进行赋值

声明式函数：function func（）{}//对函数名进行声明，并且将函数名赋值为一个函数

注：赋值式函数（var func =function（）{}），解析是按照var变量声明进行解析的

注：打开浏览器只会解析全局代码，不会对函数的内部代码进行解析，函数的内部代码解析会在函数调用时进行预解析

数组（Array）

数组是JS中一种复杂的数据结构，是一个有序的集合，数组一般存储同一类型的数据

数组的创建

字面量创建

var 数组名 =[]

var 数组名 =[元素1，元素2，...]

通过内置构造函数创建

var 数组名 =new Array（）

创建指定长度的数组

var 数组名 =new Array（length）

创建指定长度和填充内容的数组

var 数组名 = new Array（length）.fill（填充内容）

注：数组默认以'empty'进行填充

数组的每一个元素都是按照顺序进行排列的，这个序号叫做数组的下标或者索引，是从0开始的

数组的常用方法

通用语法：数组名.方法名

1.数组名.push（数据1，数据2，...）//在数组的末尾插入数据，返回值时插入数据后新的数组的长度

注：如果直接在末尾插入一个数组，比如：数组名.push([数据1，数据2，...])，最后得到的数组只是一个长度加1的新数组，该方法是直接把这个数组插到最后一个位置

2.数组名.pop（）//删除数组的最后一个元素，返回被删除的元素的值

3.数组名.unshift（数据1，数据2，...）在数组的前面插入数据，返回新数组的长度

4.数组名.shift（）//删除数组的第一个元素，返回被删除的元素的值

5.数组.reverse（）//反转数组，返回反转后的数组

6.数组.sort（）//对数组进行排序（只看第一个字符，剩下的字符都不看，从小到大排序）

数组名.sort（function(a，b){return a-b}）/表示数组中的元素按升序排序

数组名.sort（function(a，b){return b-a}）/表示数组中的元素按降序排序

7.数组名.splice(index_of_satrt，cut_num，填充的数据)//截取从index_of_start开始cut_num长度的数组元素，并把填充数据插入到截取的位置（填充的数据是多少个就填充多少个，不给填充值时默认填充cut_num个'empty'）

注：以上7种方法都会改变原数组

#######################以下是不会改变原数组的方法###########################

8.数组.concat（数据1，数据2，...）//把括号内的数据拼接在原始数组的后面并返回

与push的区别：1.不会改变原数组，2遇到数组会把数组中的元素分别插到原数组后面，不像push只插入一个数组

9.数组.join（‘连接符’）//把数组元素通过连接符转换成字符串，不给连接符时用逗号进行连接，返回连接好的字符串

10.数组.slice（index_of_start，index_of_end）//截取从start到end的数组元素，索引值可以给负数，表示从后往前第几个，截取只能是从左往右的，也就是start<end，同时截取的区间为包括start但不包括end元素，返回值是截取下来的数组

数组.slice(k)//表示截取从第k个元素开始往后的所有元素

数组.slice(0,-1)//表示截取最后一个元素

与splice（）的区别：

1.splice（）直接改变了原始数组，但slice（）没有

2.参数不同

11.数组.indexOf（数据，index_of_start）//从index_of_start开始从前往后查找元素的值等于数据的第一个元素的下标，默认start为0，未找到时返回-1

12.数组.lastIndexOf（数据，index_of_start）//从index_of_start开始从后往前查找元素的值等于数据的第一个元素的下标，默认start为lenght-1，未找到时返回-1

13.数组.forEach(function(item，index，origin){函数体})

item：数组中每一个元素的值

index：每一个元素的下标/索引

origin：原始数组

作用：遍历整个数组

返回值：无（undefined）

14.数组.map（function（item，index，origin）{return 映射条件}）

作用把数组中的元素进行一个映射（就是对数组元素进行操作），并return回映射后的数组

返回值：与原数组等长的经过映射处理的数组

15.数组.filter（function（item，index，origin）{return 过滤条件}）

作用：把数组中满足过滤条件的数组元素全部找出，并return

返回值：过滤出来的满足条件的所有数组元素组成的一个数组

16.数组.find（function（item，index，origin）{return 判断条件}）

作用：从左往右查找数组满足条件的第一个元素的值

返回值：找到的满足条件的第一个元素的值

17.数组.findIndex（function（item，index，origin）{return 判断条件}）

作用：从左往右查找数组满足条件的第一个元素的下标

返回值：找到的满足条件的第一个元素的下标

18.数组.every（function（item，index，origin）{return 判断条件}）

作用：判断数组中的所有元素是否都满足指定条件

返回值：一个布尔值

19.数组.some（function（item，index，origin）{return 判断条件}）

作用：判断数组中是否存在满足条件的元素

返回值：一个布尔值

20.数组.reduce（function（prev，item，index，origin）{函数体}，init）

prev：表示初始值或者上一次运算的结果

init：传入的初始值，没传入时为数组[0]的值

作用：进行叠加运算（不止单纯的线性叠加）

返回值。叠加运算的结果

数字常用方法

通用语法：Math.方法名()

1.Math.random()//用于产生一个[0，1)的随机数

2.Math.round(数字)//四舍五入取整

3.Math.ceil(数字)//向上取整

4.Math.floor(数字)//向下取整

5.Math.abs(数字)//绝对值

6.Math.pow(底数，指数)//幂运算

7.Math.sqrt(数字)//取算数平方根

8.Math.max(数字1，数字2，...)//取最大值

9.Math.min(数字1，数字2，...)//取最小值

10.Math.PI//取一个接近于圆周率的值

进制转换和保留小数位数

十进制转换为其它进制数：十进制数字.toString（要转换成的进制数）

其它进制数转换成十进制数：parseInt（其它进制数，传入的数的进制数）

保留小数：数字.toFixed(要保留的小数位数)//四舍五入进行保留，返回的是一个字符串

字符串常用方法

1.字符串.charAt（索引位置）//查找指定索引位置的字符，找到则返回找到的字符，未找到组返回空字符串

2.字符串.charCode（索引）//找出指定索引位置的字符的unicode编码（十进制数），如果没有则返回NaN

3.字符串.toUpperCase（）//将字符串中的所有字母转换成大写

4.字符串.toLowerCase（）//将字符串中的所有字母转换成小写

5.字符串.substr（开始索引，截取个数）//返回截取出来的字符串

6.字符串.substring（开始索引，结束索引）//截取范围（右开左闭区间），返回截取的字符串

7.字符串.slice（开始索引，结束索引）//截取范围（右开左闭区间），返回截取的字符串，索引可以给负数

8.字符串.split（‘分隔符’）//将字符串按照分割符分成几个部分，返回的由分割好的部分组成的一个字符串数组

9.数组.concat（字符串1，字符串2，...）//把括号内的字符串连同原字符串连接成一个大的字符串并返回

10.字符串.indexOf（要查找的字符，开始索引）//从指定为只开从前往后查找指定字符串首次出现的首字母的索引位置，如果没有则返回-1

11.字符串.lastIndexOf（要查找的字符，开始索引）//从指定为只开从前往后查找指定字符串最后一次出现的首字母的索引位置，如果没有则返回-1

12.字符串.includes（字符串片段）//查询字符串中是否存在指定字符串片段，返回一个布尔值

13.字符串.startsWith（字符串片段）//判断字符串是否以指定字符串片段开头，返回一个布尔值

14.字符串.endsWith（字符串片段）//判断字符串是否以指定字符串片段结尾，返回一个布尔值

15.字符串.trim（）//去除字符串首尾空白

16.字符串.trimSatrt（）/trimLeft（）//去除字符串左边的空白/开始位置前的空白

17.字符串.trimEnd（）/trimRight（）//去除字符串右边的空白/结束位置后的空白

18.字符串.replace（替换前的字符串，替换后的字符串）//一次只能替换一个字符串，返回值是替换后字符串

字符串格式

1.普通字符串：‘dahgifuofa1214@#$1'

2.数字字符串：’12345678‘

3.html字符串：'<p></p>'

4.查询字符串

实例：http://www.senora.fun/wp-admin/post.php?post=600&action=edit#block-099e3aeb-709d-4e64-8f68-2cce1dc70538

从？号开始到#号结束中间这一部分，主要特点是key1=value1&key2=value2...

即类似于键值对的组合，多条数据之间用&符进行连接

tip：#号后面的内容称为锚点，用于网页定位

5.json字符串

示例：

’{“username”：“admin”，“password”：“123456”}‘

或者’[

{“username”：“admin”，“password”：“123456”}，

{“username”：“user1”，“password”：“111111”}，

{“username”：“user2”，“password”：“222222”}

]‘

格式要求：

对象内的key和value都必须用双引号包裹，纯数字或者布尔数据可以不用引号包裹，该数据格式内不允许存储函数类型

JSON格式数据转换为js格式数据

JSON.parse(json格式字符串)，返回转换后的js格式数据

js格式数据转换为json格式数据

JSON.stringify(js格式数据)，返回转换厚的json格式字符串

时间对象

获取时间对象的方法

通过内置构造函数：var time =new Date()//获取的是本地时间

time的值为: Wed Feb 12 2025 16:09:39 GMT +0800（中国标准时间）

时间对象的常用方法

1.time.getFullYear()//获取年份

2.time.getMonth()//获取月份

3.time.getDate()//获取日期

4.time.getHours()//获取小时数

5.time.getMinutes()//获取分钟数

6.time.getSeconds()//获取秒数

7.time.getMilliseconds()//获取毫秒数

8.time.getDay()//获取星期数

9.time.getTime()//获取时间戳（从格林威治时间（1970年）到time时刻经过的秒数）

设置时间对象的方法

1.time.setFullYear()//设置年份

2.time.setMonth()//设置月份

3.time.setDate()//设置日期

4.time.setHours()//设置小时数

5.time.setMinutes()//设置分钟数

6.time.setSeconds()//设置秒数

7.time.setMilliseconds()//设置毫秒数

8.time.setTime()//设置时间戳（从格林威治时间（1970年）到time时刻经过的秒数），返回值是一个经过指定时间戳之后的时间

定时器

setTimeout（function（）{}，time）//延时定时器，指经过time毫秒后执行function函数，只执行一次，返回值是一个数字，表示这是第几个定时器

setInterval（function（）{}，time）//间隔定时器，指每隔time毫秒执行一次function函数，返回值是一个数字，表示这是第几个定时器

清除定时器：

clearTimeout（timer_n）//清除第n个定时器

clearInterval（timer_n）//清除第n个定时器

注：两种清除定时器的方式没有区别

BOM

Browser Object Model //浏览器对象模型

定义了一整套操作浏览器相关的属性和方法，统一语法：window.方法名//window可以省略

特点：在各个浏览器的表现形式不一样，且不能用css调整样式

浏览器的可视窗口

包括滚动条在内的窗口大小，不包括打开后的控制台部分

window.innerWidth//可视窗口的宽度，单位像素

window.innerHeight//可视窗口的高度，单位像素

浏览器的弹出层

alert（'提示信息'）//弹出一个包含确定按钮的提示信息，无返回值

confirm（‘提示信息’）//弹出一个包含确认和取消按钮的提示信息，点击确认返回true，点击取消返回fasle

prompt（'提示信息'）//弹出一个包含输入框，提示信息和一个确定按钮的窗口，点击确定，返回值是输入的内容，点击取消返回null

浏览器的常见事件

window.onload = function（）{} //当浏览器的组件都加载完之后执行，一般写在head标签内的时候会采用

window.resize =function（）{} //当浏览器可视窗口大小发生改变时执行

window.onscroll=function（）{} //当浏览器的滚动条滚动时执行

浏览器的地址栏

window下面的href属性存储的就是有关地址的内容

window.location.href //获取浏览器地址栏中的内容

window.location.href = 'http://www.senora.fun/' //打卡一个新页面，地址为url

window.location.reload() //直接刷新当前页面

浏览器的标签栏

window.open(url) //新开一个页面

window.close（）//关闭当前页面

浏览器的卷曲尺寸

当页面内容超出可视窗口大小时，由于滚动条的原因，导致上方和左方的内容被卷起来，这卷起来的内容长度就是卷曲尺寸

1.卷曲的高度

document.documentElement.scrollTop //这是页面含有DOCUTYPE标签时才生效

document.body.scrollTop //页面不包含DOCTYPE标签时使用

兼容写法：var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

2.卷曲的宽度

document.documentElement.scrollLeft //这是页面含有DOCUTYPE标签时才生效

document.body.scrollLeft //页面不包含DOCTYPE标签时使用

兼容写法：var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

浏览器的历史记录

window.back() //回到上一级页面

window.forword() // 前进一级页面

window.go(page_n) //跳转到第n个页面，正数表示前进，负数表示后退，0表示刷新

滚动条定位

专门用于进行浏览器滚动条的定位，定位到卷曲的尺寸

window.scrollTo(x，y) //x表示横向定位，y表示纵向定位

注：此时两个方向的位置都要写

window.scrollTo({left: xxx, top: xxx, behavior: 'smooth'}) //此时可以只写一个方向，behavior表示滚动的方式

浏览器的存储

浏览器的本地存储

浏览器的内存和计算机硬盘的结合

常见的本地存储：localStorage，sessionStorage，cookie

localStorage:

本地永久存储，只有当用户主动删除才会消失，可以跨页面存储，只要数据存储在localStorage中，在不同的浏览器打开此页面存储的数据也会一直在，只能存储基本数据类型

sessionStorage：

会话存储，当页面关闭或者退出浏览器时，存储就会消失，可以跨页面存储（只有从当前页面打开的页面才可以），只能存储字符串数据

cookie：

只能存储字符串，有固定的格式：key1 = 值1，key2 = 值2...

有存储大小限制（4KB）左右，具有时效性（可以手动设置过期时间，不设置过期时间和会话存储一样），对cookie的操作依赖于服务器，只有通过服务器（http等协议）打开的页面才能操作cookie，主动跟随前后端请求自动携带（只有cookie中有内容，就会跟随页面内容与后端交互时自动携带），前端通过JS操作，后端任何语言都可以操作，存储依赖域名，cookie只有在同一个域名下才生效（那个域名存储的，cookie就在那个域名下生效）

对localStorage和sessionStorage的增删改查

localStorage:

增：window.localStorage.setItem(key，value)

删：window.localStorage.remove(key)

清除：window.localStorage.clearItem() //删除所有的localStorage

查：window.localStorage.getItem(key) //如果有就是key对应的值，没有就是null

sessionStorage:

增：window.sessionStorage.setItem(key，value)

删：window.sessionStorage.remove(key)

清除：window.sessionStorage.clearItem() //删除所有的sessionStorage

查：window.sessionStorage.getItem(key) //如果有就是key对应的值，没有就是null

对cookie的操作

设置一条cookie：document.cookie = 'key = value'

设置一条带有过期时间的cookie：document.cookie = 'key = value；expires=时间对象' //其中时间对象是针对世界时间来计算的（和北京时间相差8小时）

本地存储的区别

cookie和storage的区别

出现时间：cookie在JS出现时就已经出现了，storage是在H5（2008）才开始出现的

存储大小：cookie约4KB，storage约5MB

前后端交互：cookie会根据当前页面的请求自动跟随携带，storage不会跟随请求携带

前后端操作：cookie前后端都可以操作，storage只有JS可以操作

过期时间：cookie默认是会话存储，可以手动设置，storage不能手动设置

localStorage和sessionStorage的区别

过期时间：localStorage永久存储，sessionStorage临时存储

跨页面通讯：localStorage直接跨页面通讯，seessionStorage只有在当前页面打开的页面才能进行通讯

共同点：都只能存储字符串

DOM

document object model //文档对象模型

定义了一整套操作文档流的属性和方法，既可以操作页面标签（元素的）的方法，包括修改文本，修改超文本，元素的增删改查，操作标签样式，操作标签类名，操作标签属性，操作标签位置等

DOM的操作流程

1.获取需要操作的DOM元素

2.执行操作：

updating