华清远见-重庆中心-前端技术总结/知识点梳理/个人总结

lwg~

已于 2023-02-13 15:52:25 修改

阅读量224

点赞数

文章标签： css html5 javascript jquery Powered by 金山文档

于 2023-02-13 11:39:36 首次发布

本文链接：https://blog.csdn.net/qq_64008133/article/details/129006281

版权

HTML简介

HTML的全称为超文本标记，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

列表

有序列表

ol (order list)

列表项

通过ol的type属性可以修改序号样式

1 阿拉布数字

A/a 英文字母（大写/小写）

I/i 罗马数字（大写/小写）

ol 标签里只能放li标签

无序列表

ul(unorder list)

列表项

通过ul的type属性可以修改序号样式

disc 实心圆（默认）

square 实心方块

circle 空心圆

ul 标签里只能放li标签

自定义列表

dl(defintion list)

列表项

dt 术语/小标题

dd 对术语的说明

dl 标签里只能放dt和dd标签

超链接

a标签

属性：

href 设置超链接的资源地址

target 设置跳转的方式

_blank 在新窗口打开页面

_self 在原窗口打开页面

_top 将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。

_parent 在父窗口打开页面

指定在那个iframe页面打开

锚点：

设置方法

a标签的href="#描点的id属性值"

描点元素设置id属性

表格

table标签

必要标签

table 定义一个表格

tr （table row）表格的一行

td (table data cell)表格一行中的一个单元格

th (table head cell)表格标题

属性

boder 设置边框线数字, 如果boder为0，内外边框都会消失

cellpadding 设置单元格的内边距属性值: 像素px/百分比

cellspacing 设置单元格与单元格之间的距离属性值: 像素px/百分比

align 设置整个表格在页面中的位置 center left right

width 设置整个表格的宽度

合并单元格

属性

rowspan="2" 合并2行

colspan="2" 合并2列

步骤

确定目标单元格——在那个td上写属性

判断合并行还是列——写rowspan / colspan

计算合并的单元格数量——属性值

删除被占用的单元格

表单

表单域（form标签）

属性：

action 设置提交路径

用来指定接受处理表单数据的服务器url地址

name 设置表单域的名字，用于区分同一个页面的多个表单

method 设置提交方式

get ：表单的数据会显示在地址栏中，有需要保密的数据不能用get

post：表单的数据不会显示在地址栏中，而是封装在表单体里

表单元素

输入框 input

按钮 button

复选框 checkbox

CSS简介

CSS(Cascading Style Sheets)层叠样式表,一种用来设置网页元素的外观样式(比如颜色，背景，间距等)的计算机语言

CSS的使用

CSS在文档中有三种使用方式：行内样式、内部样式、外部样式

行内样式

位置：

在元素标签里定义一个style属性，css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

特点：

只能对当前的一个元素起作用，多个元素需要一个个设置，不方便修改

内部样式

位置：

在页面head标签中的style标签里定义

特点：

可以同时为多个标签定义相同的样式，方便修改

只对当前页面起作用，不能跨页使用

外部样式

位置：

定义一个独立的.css文件，通过link引入到需要设置样式的HTML

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

特点:

可以跨页面使用

样式优先级比较

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

选择器

标签选择器

作用：

1.用来匹配页面中符合条件的元素

2.为这些元素设置样式

特点：

1.找到body下所有同名的标签

2.当页面有多个同名标签时,没有办法某个标签单独设置样式

id选择器

使用方法：

1.为对应的标签设置id实现

2.在css中通过#id属性值匹配该标签

注意：一个页面中id属性的值不能重复

类选择器

使用方法

1.为对应的标签设置class属性,属性值称为类名

2.在css中通过.类名匹配这些标签

类选择器和id选择器的区别

类名可以在一个页面中重复使用,只要需要设置的样式相同,就可以使用

class属性可以有多个属性值,类名与类名之间用空格隔开即可

开发时通常用类选择器

后代选择器

语法:

祖先选择器a 后代选择器b{}

两个选择器之间有一个空格,这两个选择器可以是标签名,可以是类名,可以是id名的组合

特点:

选中a下面的所有的b,b可以是a的儿子,孙子,曾孙...

子代选择器

语法:

父选择器a > 儿子选择器b{}

特点:

b是a的儿子

并集选择器

语法:

选择器1 , 选择器2 {}

特点:

同时选中1和2

伪类选择器

用于处于特点状态的元素的类（伪的不是真的写在class里的类）

特定状态：比如某个元素的第一个子元素，鼠标移上

语法：标签名:伪类{}

常用伪类：

p:first-child

找到作为第一个子元素的p元素

这个元素必须是父元素的第一个元素样式才会生效

不区分子元素类型，在所有子元素中绝对第一

p:first-of-type

找到同类子元素中的第一个p

区分类型，在所有p中相对第一

属性选择器

[标签的属性名] 选中带有这个属性名的标签

[属性名='属性值'] 选中带有这个属性名且属性值也相等的标签

属性

字体属性

font-family

- 设置字体族，字体列表中靠前的优先应用，如果计算机中没有前面的字体，才会应用靠后的

- 计算机中的字体

win10 控制面板字体 win11 设置个性化字体

- 如果所有定义的字体族中，所有字体都没有，则显示默认字体

- 通用字体

关键字，不加引号

sans-serif 无衬线字体

monospace 等宽字体

fangsong 仿宋

font-size

- 设置字体的大小

- 单位

像素 px

em 字体大小的倍数

rem 相对与html字体大小的倍数

font-weight

- 定义字体的粗细

- 属性值

- 关键字

normal 默认粗细

bold 加粗

bolder 比父元素更粗一点

- 数字 1~900

400 相当于normal

font-style

- 设置字体样式

- 属性值

italic 倾斜

normal 默认竖直

font

- 复合设置字体样式

- 属性顺序

（font-style font-weight font-size font-family）

文本属性

line-height

- 设置行高

行高 = 上间距 + 文本高度(font-size) + 下间距

- 属性

像素 px

数字

text-indent

- 设置文本缩进

- 属性值

像素 px

数字

text-align

- 设置文本在块级元素中的位置

也可以设置行内元素在块级元素中的位置

- 属性值

center left right

color

- 设置文本颜色

- 属性值

- 关键字

red blue green

- RGB

十进制表示

rgb(red,green,blue)

3个部分，取值范围：0~255

值越大，颜色越深，取0颜色消失

rgba(red,green,blue,0~1)

最后一个值是不透明度，取值范围是0~1

十六进制表示

#rrggbb

3个部分：取值范围：0~ff

text-transform

- 文本转换

- 属性值

uppercase 全大写

lowercase 全小写

capitalize 单词首字母大写

text-decoration-line

- 设置装饰线的位置

overline 在文本上方

underline 在文本下方（默认）

line-through 贯穿文本

none 没有

text-decoration-style

- 设置装饰线的样式

solid 实线

dashed 虚线

wavy 波浪线

text-decoration-color

- 设置装饰线的颜色

text-decoration

-复合写法

text-decoration: dashed #666ddd underline;

-取消下划线样式

text-decoration: none;

文档流

网页是一个层叠的结构

最下面的一层就是文档流（相当于Word文档的空白页面）

我们创建的元素，默认是在文档流中排列

元素在文档流中的特点（显示模式）

块元素

独占一行，自上而下垂直排列

默认高度是它内容的高度（子元素撑起的高度），默认宽度是父元素默认的宽度

设置width和heigth有效

行内元素

不独占一行，只占自身的大小，在页面中水平排列，超出一行，自动换行

默认高度和宽度都是内容本身的宽高

设置width和height无效

行内块元素

不独占一行，只占自身的大小，在页面中水平排列，超出一行，自动换行

默认高度和宽度都是内容本身的宽高

设置width和height有效

元素显示模式转换

display设置元素的显示模式

block 以块元素的特点显示

inline-block 行内块元素

inline 行内元素

none 让元素从文档流中消失

CSS的三大特性

继承

在祖先元素中设置的样式，同样应用到了它的后代元素中

不是所有的样式都会被继承

常见可以继承的样式：

color,font-,text-,line-

常见不可以继承的样式：

背景相关 background , 布局相关 width

优先级（权重）

样式的冲突需要用优先级来解决

什么时候产生冲突：

用不同的选择器选中了同一些元素，并且为相同的属性设置不同的值

当发生冲突时，优先级高的选择器设置的样式被应用

选择器简单权重规范权重

!important 无限大无限大慎用！！！

行内样式style 1000 (1,0,0,0)

id选择器 100 (0,1,0,0)

类选择器（包括伪类） 10 (0,0,1,0)

标签选择器 1 (0,0,0,1)

继承 0 (0,0,0,1)

比较优先级时，把所有的选择器权重相加，在同量级下，相加的和越大的，优先级越高

算法案例:

1.选择器权重相加，值越大的优先级越高

div p {} 1+1 =2

.three p 0} 10+1 =11 被应用

2.权重相加的和，不会越级进位

11个div{} 1+1+1+..+1=11

.three{} 10 不能越级，所以仍然是类选择器被应用

3.规范权重的比较

(4,3,2,1)

.three (0,1,0) 类选择器，在第2档加1

#three (1,0,0) id选择器，在第3档加1

.three #test (1,1,0)

从左往右，第4档有1的比没有1的优先级高

如果第4档相同，那么比较第3档，第三档有1的比没有1的优先级高

注意：不管祖先元素优先级多高，子代继承的样式没有优先级

层叠

选择器优先级相同时，靠下面的选择器中设置的样式被优先应用

盒模式

元素都是一个个透明的盒子，可以用CSS来设置它的样式

组成部分

内容区域元素的内容部分，包括设置的宽高

padding 内边距内容区域和边框之间的距离

border 元素的外边框

margin 元素与元素之间的距离

注意：

行内元素的盒模型

margin-top,margin-bottom 无效

上下边框和上下内边距不会挤开其他元素

布局方面的问题

块元素的水平布局

块元素在父元素中，水平布局要满足下面的等式

子元素的 margin-left + margin-right +

border-left + border-right +

padding-left + padding-right +

width = 父元素的width

如果等式不成立（过度约束），浏览器自动调整这几个属性值，使等式成立

属性值：width margin-left margin-right

这几个值谁是auto就调整谁，都不是auto就自动调整margin-right

设置某元素在父元素中水平居中

1.设置一个宽度:width：XXpx;

2.设置margin: 任意值 auto;

块元素的垂直布局

- 默认情况元素的高度由子元素撑起

- 设置了（height，上下边框，上下内边距）高度就是这几个组成

- 如果子元素的高度大于了父元素，则子元素溢出

处理溢出的方法 overflow

属性值：

visible 直接显示子元素溢出的部分（默认值）

auto 根据溢出情况自动判断是否添加滚动条

scroll 为艺术添加水平和垂直滚动条

hidden 直接剪切掉子元素溢出的部分

外边距的折叠

1.没有间隔的祖先个后代元素之间

子元素和父元素的上外边距重合成了一个

设置其中一个的上外边距，会传递给另一个，导致布局发生问题

选择值较大的一个来作为上外边距

解决问题：添加间隔

- 为子元素或父元素添加border

border: 2px transparent solid;

- 父元素添加overflow

overflow: hidden;

float 浮动

作用：让元素在父元素中，向左或向右移动

属性值

none 元素不浮动（默认）

left 左浮动

right 右浮动

特点

1.设置了浮动的元素会脱离文档流，它后面没有设置浮动的元素会移上去占掉它的位置，表现为重叠

2.设置浮动的元素都在同一层级，任然按HTML中的顺序排列，后面的不会超过前面的，现在水平排列

3.如果浮动的前面的元素没有设置浮动，那么这个元素不会越过前面不浮动的元素，而是在原本位置左右移动

4.浮动元素不会盖住文字，而是文字会自动环绕浮动元素

脱离了文档流的元素的特点

1.默认的宽高是内容本身的宽高

2.元素会水平排列

3.设置width和height有效

相当于变成了行内块元素

浮动带来的问题

没有给父元素单独设置高度时，默认父元素的高度由它的子元素撑起来

子元素设置浮动后，脱离了文档流，导致父元素的高度丢失，

———— 高度塌陷问题

解决方法

1.给父元素设置高度——会限制子元素的空间

2.父元素设置overflow

clear 清除浮动

left 清除左侧浮动元素的影响（不会被浮动元素盖住）

rihgt 清除右侧浮动元素的影响（不会被浮动元素盖住）

注意同时设置clear left和right时，谁在下面谁应用，而不是同时应用

both 清除左右两侧所有浮动中，最大的一个的影响

原理：

设置清除浮动之后，会有透明盒子占据原来的位置，使得下边的元素不会移上来

实际上是浏览器自动给当前元素设置的一个合适的上边距

定位 position

作用：设置当前元素在页面中的位置

属性值：

absolute 绝对定位

relative 相对定位

fixed 固定定位

相对定位

position 设置为relative 就开启相对定位

特点

1.设置相对定位的元素，会提升一个层级，可能覆盖其他的元素

2.设置相对定位的元素，并没有脱离文档流，它下边的元素不会移上去占它的位置

这个元素发显示模式没有发生变化，没有变成行内块

3.开启相对定位的元素是相对与当前元素原本在文档流中的位置来定位的

查看相对定位原点的方法：

position: relative;

top: 0;

left: 0;

通过设置偏移量来控制当前元素的位置

top 设置元素和定位位置上边的距离设置正值，元素向下移动，设置负值，元素向上移动

left 设置元素和定位位置左边的距离设置正值，元素向右移动，设置负值，元素向左移动

right 设置元素和定位位置右边的距离设置正值，元素向左移动，设置负值，元素向右移动

bottom 设置元素和定位位置下边的距离设置正值，元素向上移动，设置负值，元素向下移动

一般使用时，top和bottom只选其一，left和right只选其一

绝对定位

为元素设置position的值为absolute，就开启了绝对定位

特点

1.设置了绝对定位的元素会脱离文档流，它的显示模式变成行内块元素

2.设置绝对定位会提升元素的层级，会覆盖文档流中的其他元素

3.绝对定位是相对于离它最近的开启了定位的祖先元素来定位

如果没有开启了定位的祖先元素，则相对于HTML定位

固定定位

它是特殊的绝对定位

区别：

1.固定定位是相当于浏览器视窗的定位

2.设置了固定定位的元素会固定在设置的位置上

元素的层级 z-index

属性值是一个整数，值越大，层级越高，能够覆盖其他元素

注意：

1.设置了定位的元素，层级比设置z-index最高的层级还要高

2.无论父元素设置层级多高，都不会覆盖子元素

JS的简介

JavaScript简称JS，是由网景（netScape）推出的脚本语言。是一门轻量级，弱类型，面向对象的解释型脚本语言。

弱类型：没有数据类型限制，声明变量时不需要指定数据类型

解释型：不需要预先编译，边解释边运行，浏览器就是一个解释器

JS的作用

JS用来控制HTML元素的行为

在页面中动态嵌入HTML元素（相当于追加节点）

可以操作浏览器

可以和用户数据交互

JS的组成

1.ECMAScript 语法

简称ES，是JS的语法规范

比如数据类型，流程控制语句等

2.DOM(Document Object Model)文档对象模型

这里的文档指HTML页面

可以通过DOM控制页面中的元素

3.BOM(Browser Object Model)浏览器对象模型

可以通过它控制浏览器的行为

JS的编写位置

1.写在标签的事件中

比如鼠标的点击事件onclick

2.写在标签中

这个script标签可以放在head标签里，也可以放在body标签前

3.写在独立的js文件中，然后通过script标签引入

src属性中设置js文件地址

JS的变量

变量

值可以发生改变的量，是一个存储数据的容器

里面存放的数据可以发生改变

变量的声明和赋值

声明： var 变量名; let 变量名;

赋值：变量名 = 值;

声明的同时赋值： var 变量名 = 值; let 变量名 = 值;

同时给多个变量声明并赋值： var 变量名1 = 值 , 变量名2 = 值;

修改变量的值：变量名 = 值;

注意：

只声明不赋值，默认输出undefined

var 可以重复声明同一个变量，let不可以

常量

不可以被改变的量

声明常量并赋值

const 变量名 = 值;

注意

常量只能赋值一次，重复赋值会报错

数据类型

数据类型是计算机中数据的一种属性，这个属性定义了数据的含义（允许对数据进行的操作），该类型数据的存储方式和大小JS中数据类型分为原始值（基本类型）和对象（复杂类型）

原始值：

Number 数值

整数、小数、非法数（NaN）

BigInt 大整数

表示大于 2^53 - 1 的整数，

String 字符串

JS中用""或者''表示字符串

如果要嵌套使用引号，外双内单或者外单内双

模板字符串（``)

用 `` 表示

特性

支持换行

支持嵌入变量

${变量名}

Boolean 布尔值

true false

Null 空值

空类型空值对象类型的空引用（）空指针

Undefined 未定义

未定义类型变量声明但未赋值，则这个变量的值就是undefined

Symbol 符合

一个 symbol 值能作为对象属性的标识符

对象：

Object

类型转换：

Number()：

可以将boolean或string转换为number类型

true 转换为1 false 转换为0

数字类型的字符串转换为整数

不是数字类型的字符串转换为NaN

String()：

可以将boolean或number转换为string类型

注：非字符串 + '' 可以隐式转换为字符串

Boolean()：

可以将string或number转换为boolean类型

0 转换为false 非0数值转换为true

空字符串'' -> false 其他为true

运算符

算术运算符

+（加），-（减），*（乘），/（除）,%（取余），++（自增）,--(自减)。

++（自增），--（自减）运算是在自身值的基础上，增加或者减少1.

++，--写在变量的前面，先加减再运算。

++，--写在变量的后面，先运算再加减。

关系运算符

>（大于），<（小于），==（等于），>=（大于等于）, <=（小余等于），!=（不等于）。

运算结果为boolean类型，整数类型和浮点类型能做关系运算，boolean类型不能。

逻辑运算符

&& - 与， || - 或 , ! - 非

运算规则：

与运算（全真为真，有假为假）

或运算（有真为真，全假为假）

非运算（真变假，假变真）

运算结果为boolean类型，只有boolean类型能做逻辑运算。

注意事项：

短路逻辑： && ，|| 当我们能够判断出结果时，后续的表达式不再执行 (常用)

不短路逻辑： & ， | 每个参与运算的表达式都需要执行 (不常用)

赋值运算符

"="，将等式右边的值赋给左边，优先级很低。

扩展赋值运算符

在赋值运算符的前面，加上算数运算符。

三目运算

运算格式： boolean表达式？表达式1：表达式2

如果boolean为true就执行表达式1，boolean为false就执行表达式2

运算符优先顺序

优先级顺序

1.()

2.单目运算符 ! ++ --

3.算术运算符 * / % + -

4.关系运算符 > < >= <= == !== === !==

5.逻辑运算符 && ||

6.条件运算符

7.赋值运算符

条件语句

if语句

if(条件表达式){

//代码块

}

当条件表达式为true时，执行里面的代码块

若代码块只有一条语句，{}可省

if-else语句

if(条件表达式){

//代码块1

}else{

//代码块2

}

当条件表达式为true时，执行里面的代码块1，否则执行代码块2

if-else语句是二选一，一定有一个代码块被执行

if-else if

if(条件表达式){

//代码块1

}else if{

//代码块2

}else if{

//代码块3

}

···

else{

//代码块n

}

执行流程：

自上向下依次对if后的条件表达式进行求值判断

如果某一个的结果为true，就执行它里面的代码块语句，执行完毕就结束

switch 语句

switch (key) {

case value:

break;

default:

break;

}

执行流程：

会依次将key和case后的value进行全等(===)比较

如果比较结果为true就从当前case开始执行代码

如果为false，则继续比较后面的其他case，直到找到true

如果都为false，才执行default后的代码

循环语句

通过循环语句可以使指定的代码有规律地重复执行

循环的三要数

1.循环变量的初始化表达式（定义循环变量并初始化）

2.循环条件表达式（设置循环条件,当条件不满足时循环结束）

3.变量更新表达式（修改循环变量，变量递增或递减使得循环结束）

for循环

for( ①初始化表达式;②循环条件表达式;③变量更新表达式){

④循环体

}

执行流程：

1.执行初始化表达式①，初始化循环变量

2.执行循环条件表达式②，判断循环是否执行（true执行，false不执行）

3.如果为true执行循环体④

4.执行变量更新表达式③，对循环变量进行更新

5.重复执行循环条件表达式②，直到判断为false为止

注意：

①初始化表达式在中国循环周期中只执行一次

for循环中这三个表达式都可以省略

在for循环中用let声明的变量，只能在for循环内部访问，在foe循环外部访问会报错

在for循环中用var声明的变量，在for循环内部和外部都能访问。

while循环

while语句

初始化表达式

while(条件表达式){

		 //循环体

其他语句

变量更新表达式

}

当条件表达式为true时执行循环体，直到条件表达式为false时，循环结束

do while循环

初始化表达式

do {

//循环体

其他操作

更新表达式

} while (condition);

执行流程：

先执行一次循环体, 然后判断条件表达式是否为true

如果条件表达式为true时执行循环体，直到条件表达式为false时，循环结束

do while 和 while 的区别

do while 能保证循环体至少进行一次

数组

是一种复合数据类型，在数组中可以存储多个不哦那个类型的数据

创建数组的方式

1.通过new关键字

var 数组名 = new Array（数组大小）

这里的数字大小作用不大，因为赋值时超出索引会自动扩容

赋值：

数组名[索引] = 值; 索引从0开始

注意：

数组中未赋值的元素是空的，但是默认输出undefined

2.通过[]创建

var 数组名 = [];//创建空数组

注意：

赋值的时候，最好连续赋值，否则浪费空间,并且不方便

3.声明的同时赋值

var 数组名 = new Array（元素1，,元素2,....）

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

获取数组的长度

数组名.lenth

注意：

这个属性是可以更改值的，如果我们给它赋值，数组长度会发生改变

判断是否是数组

Array.isArray(a) 是返回true，不是返回false

数组的遍历

for（let i=0;i<数组名.lenth;i++){

console.log(数组名[i]);

}

for-in语句

for(i in 数组名){

数组名[i]

}

对象

js用属性和行为来描述某个物体而产生的一种数据类型

它相当于一个容器，在对象中可以存储各种不同类型的数据

数组、函数也是一种特殊的对象

创建方式

1.使用{}直接创建

let 对象名 = {

属性名：属性值;

方法名(){

//代码块

}

属性和方法的调用

对象名.属性名

对象名.方法名

在方法中可以通过this关键字访问当前对象的属性

this指向的是调用当前方法的对象

2.使用new Object创建

创建对象

let 对象名 = new Object();

添加属性

对象名.属性名 = 属性值

属性的其他写法：

1.带有特殊字符或空格的属性名，要用["属性名"]设置和读取

2.属性可以是任何类型的数据，比如数组、对象

函数

函数是对一段程序的封装

作用：

用于包装可以重复使用的代码（代码复用）

创建方式

1.函数声明方法

function 函数名(参数列表){

//代码块

}

调用函数：函数名（实参列表）

返回值：

函数返回的结果成为返回值，函数默认返回undefined

可以通过return自己定义函数的返回值

可以返回任何类型的数据：字符串、数字、函数、对象

retrun还会终止函数内后续代码块的执行

2.函数的表达式

let 变量名 = function（形参列表）{

调用函数:变量名（实参列表）

}

Math函数

Math是js的一个内置对象，它拥有一些数学中的常数属性和数学函数方法，比如pi 三角函数等

这些属性和方法可以直接通过Math这个对象调用

适用于Number类型

常用函数

Math.abs(number) 求绝对值

Math.pow(x, y) 求x的y次幂

Math.max(x, y) 求两个数的最大值

Math.ceil(number) 向上取整

Math.floor(number) 向下取整

Math.round(3.1) 四舍五入

Math.sqrt(number) 求平方根

Math.cbrt(number) 求立方根

Math.random() 生成[0,1)范围内的随机数

参数的值传递和引用传递

形式参数（形参）

定义在函数（方法）的小括号中的变量

实际参数（实参）

调用函数（方法）时写在小括号中的变量/常量/值

形参和实参的关系

在调用函数时，会将实参传递给形参，即将实参赋值给形参使用

值类型传参

将x变量中的值直接赋值给函数内的形参

所以函数调用结束后，x本身的值不变

number、boolean、string是值传递

类比：把文档复制一份上传到网上，你本地的文档无法被网上修改

引用类型传参

将y中的引用地址赋值给函数内的形参

所以通过函数内形参对y中的对象所作的操作，对于y来说也有影响

Object、function是引用传递

类比：把网上的文档公开链接（引用），有链接的人可以网上修改，修改之后网上的文档被改变

变量作用域

作用域：作用范围，范围内可以访问变量，超出了范围就无法访问

作用域分类：

全局作用域 Global

块作用域 block

函数作用域 function

全局作用域

在网页运行时创建，关闭网页时销毁

直接在script标签中编写的代码都位于全局作用域中

全局作用域中的变量就是全局变量，可以在任意位置访问

全局变量分为两种

1.(普通)全局变量

直接在函数外声明的变量

2.自动全局变量

不使用let/var关键字声明，直接给变量名赋值，这样的变量就会变成自动全局变量

它存到了window对象，成为了window事件

块作用域

代码块：{}里的内容

块作用域就是在一个代码块中有效的作用域

块作用域是在代码块执行时创建，执行完毕时销毁

在块内部用let定义变量，就具有了一个块作用域

var声明的变量不具有块作用域

具有块作用域的变量，只能在代码块内部访问变量，不能在块外面访问

函数作用域

在函数中，无论是用let/var 声明变量都有函数作用域，

在函数内部可以访问，在函数外部无法访问

函数作用域在函数创建时

作用域链

在使用一个变量时，js解释器会先在当前作用域寻找变量

如果没有找到就往上一层作用域寻找

如果一直到全局都没有找到，就会报错：xxx没有被定义

简单来说；

就近原则，从里往外找变量

JSON字符串

对象序列化将对象转换为一个字符串

这个字符串就称为JSON字符串

注意：json字符串的属性名必须有双引号引起来

JSON.stringify(obj) 将obj转换为json字符串

JSON.parse(json) 将json字符串转换为对象

DOM和BOM

DOM简介

DOM Document Object Model 文档对象模型

- Document 文档，这里指整个网页html

- Object DOM将整个网页都抽象转换为了对象

div有div对象，input有input对象，属性、文本都有对应的对象

对他们进行操作的时候，都是通过他们的对象来完成的

- Model 模型是指文档中各对象之间的关系比如父子、兄弟关系

DOM树

获取节点对象的方法

nth-of-type(n) (所有同类型标签的第n个)

找到父元素下同标签类型元素的第n个元素

同类型标签p标签、div标签、ul标签、em标签他们之间分别是不同类型

所有的p标签是一个类型、div标签是一个类型、ul标签是一个类型、em标签是一个类型

排序：在同类型标签中排序，它占第一位

先将父元素的标签分类，再将每个类型的标签都排序，然后在分别获取同类型标签中的第一个

nth-child(1)

找到父元素下，所有的子元素中的第一位，不区分类型

排序：将所有子元素都进行排序

.box:nth-of-type(1)

.box 和 :nth-of-type(1) 的交集

同时满足下列条件，才会选中元素

1.标签带有box类名

2.这个标签必须是其父元素下，同类型标签的第一个元素

body div 后代选择器两个选择器之间有空格（并集）

会选中 body 所有div，包括儿子，孙子...

一般用于缩小范围

body :nth-child(1)

会选中 body的第一个子元素

.box.test 中间没有空格（交集选择器）

必须同时满足两个或多个选择器的条件

常用document对象调用各种方法来获取页面中的节点对象

querySelector("选择器名称")

document.querySelector（"选择器"）

根据选择器去整个页面获取第一个复合条件的元素节点东西

注意：返回第一个元素对象

querySelectorAll("选择器名称")

根据选择器获取整个页面中符合条件的所有元素

注意：返回一个符合条件的元素数组

可以通过索引访问每一个数组元素，对里面的节点对象进行修改

数组名[索引]

获取和修改元素中的文本

获取:元素对象.innerHTML

修改：元素对象.innerHTML = '新的文本内容'

innerHTML允许直接插入HTML标签，可用于添加新的标签

（有xss注入的风险，被篡改插入非法的html代码）

textContent也可以获取和修改文本，但是对于有标签的，会把标签原样输出

事件绑定

事件：

用户和页面的交互行为

比如：当用户点击鼠标是修改背景颜色

当用户点击Enter时，进入网站

当某个事件被触发时，就执行一段代码（这段代码通常封装成一个事件处理函数）

为元素绑定事件方法

1.用元素的addEventListener('事件名称',事件处理函数名)方法绑定

特别注意：

这里的事件名称不能有on前缀，并且这个事件名称是规定好的，不能直接修改

但是，可以自定义事件，然后使用自己定义的事件名称

步骤：

①获取元素对象

②声明一个事件处理函数

③给元素对象添加事件监听器，也就是addEventListener()方法

解绑事件

元素对象.removeEventListener('要解绑的事件','这个事件对应的要解绑的处理函数')

注意：addEventListener可以为一个元素绑定多个事件，并且可以为一个事件绑定多个处理函数

2.为元素的特定属性设置事件处理函数

特点属性:带有on开头的属性

元素对象.事件属性名 = function(){//代码}

注意：这个方法可以为一个元素绑定多个事件

一个事件只能绑定一个处理函数

解绑：btnObj.onmouseout = null

3.直接在标签中设置事件属性

<button 事件属性名="函数名()">点击

注意: 函数名后有括号，因为是事件触发的时候调用函数

这个方法可以为一个元素绑定多个事件

一个事件绑定多个处理函数用分号隔开

通过DOM树的关系获取节点

节点：文本、元素、属性、换行、空格

获取父元素的所有节点

元素对象.childNode

返回数组

获取父元素的所有子元素

元素对象.children

返回集合

想要获取某一个子元素，用索引服访问

子元素获取父元素

子元素对象.parentElement

子元素获取父节点

子元素对象.inputObj.parentNode

获取兄弟元素

获取下一个兄弟元素 nextElementSibling

获取下一个兄弟节点 nextSibling

获取上一个兄弟元素 previousElementSibling

获取下上一个兄弟节点 previousSibling

增删改节点

创建元素，并添加属性

document.createElement('标签名')

新添加的元素对象.属性名 = '属性值'

appendChild 向父元素尾部添加子元素

1.获取父元素对象

body 直接用document.body

2.父元素对象.appendChild(子元素对象)

prepend 向父元素头部添加节点素

remove() 删除当前元素

1.获取要删除的元素对象

2.元素对象.remove()

replaceWith 用一个节点替换另一个节点

要被替换的节点对象.replaceWith(newNode)

常用鼠标事件

事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	单击任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseup	松开任意一个鼠标按钮时发生
mouseup	鼠标在某个元素上时持续发生

操作标签的属性和样式

属性

1.获取：元素对象.属性名

修改：元素对象.属性名 = 新的属性值

2.setAttribute("属性名","属性值")

getAttribute('属性名') 获取元素的属性值

removeAttribute('属性名') 删除元素的属性

样式

1.通过元素的style属性，修改标签的样式

元素对象.style.样式名 = 样式值

这种方式是修改的内联样式

注意：如果样式名中有 - 应该去掉 - 并把后面的第一个字母大写(小驼峰)

2.通过添加类名修改样式

元素对象.classname += ' 类名'

注意：类名前有空格

3.通过classList属性操作类名

添加：元素对象.classList.add('类名1','类名2')

删除：元素对象.classList.repmove('类名1','类名2')类名前有空格

定时器

在JS中定时器就是一种函数，这种函数可以设置在指定事件后触发一段代码

1.延时定时器

setTimeout(要执行的函数，延迟的时长（单位：ms）)

返回值：计时器对应的编号id

停止定时器

clearTimeout(定时器编号)

2.循环计时器

setInterval(要执行的函数，每次循环间隔的时间)

停止计时器

clearTimeout(计时器编号)

文档的加载

js默认情况下是顺序执行，所以将script编写在body前面时，控制文档的加载

可以使js在DOM渲染完成后，再加载回调函数

window.onload = function () {

    let btn = document.getElementsByTagName('button')[0]

    console.log(btn);
}

BOM

BOM 浏刘览器对象模型

BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作

常见的BOM对象

window代表浏览器窗口，是全局对象

navigator代表浏览器对象，可用于识别浏览器

Location浏览器的地址栏信息

History 浏览器的历史纪录(控制浏览器的前进和后退)

screen屏幕的信息

BOM对象对象都是作为window对象的属性保存的，可以直接在js中访问

window的相关属性和方法，调用时可以省略

JQuery

JQuery的引用和使用

引用

引用JQuery库，就是向这个网页添加了一个函数Jquery/$

$是Jquery的核心函数，Jquery的所有功能都是通过这个函数来进行的

通过$获取jQuery对象

$('选择器名称')

jQuery对象实际上是一个数组（类似数组），可以用索引访问里面的数组元素

这个数组元素就是DOM对象

访问方式：

1.索引 jQuery对象[索引]

2.get方法 jQuery对象.get(索引)

3.eq() jQuery对象.eq(索引)

DOM对象转换为jQuery对象

将DOM对象对象作为参数传入$函数中 $(DOM对象)

使用

在使用JQuery前，必须先引入JQuery的js文件

压缩版 min.js 通常在开发中使用

未压缩版 .js

注意：引用发js文件必须在自定义的脚本文件之前

操作类

    <style>
        .box {
            width: 200px;
            height: 200px;
        }

        .active {
            background-color: #e9c4c4;
        }

        .box2 {
            border: 3px solid rgb(250, 205, 149);
        }
    </style>
</head>

<body>
    <div class="box active"></div>
    <div class="box active box2 box3"></div>
    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        /*
            当我们修改jQuery对象时，它会自动修改jQuery对象中的所有元素
            这个现象称为jQuery的隐式迭代
        */

        let $boxs = $(".box")
        //添加类
        $boxs.addClass("box2")
        //删除类
        $boxs.removeClass("box2")
        //开关类    有就删除，无则添加
        $boxs.toggleClass("box2")
        //判断是否存在某个类
        console.log($boxs.hasClass("box3"));
    </script>
</body>

设置样式和属性

读取样式

$对象.css("需要读取的属性")

注意：读取jQuery对象中的第一个dom元素的属性值

设置样式

$对象.css("属性"，"属性值")

注意：这里的属性值以可用函数代替

例如：

$boxs.css("background-color", function (index, value) {
            //index 当前数组成员的索引
            console.log(index);
            //value 当前数组成员对应的background-color这个属性的属性值
            console.log(value);
            //返回值    新的属性值
            return index % 2 == 0 ? "green" : 'red'
        })

读取属性

$对象.attr("需要读取的属性")，一般用console.log打印是否读取成功

注意：这里读取的属性可以是自定义的

设置属性

$对象.attr("属性"，"属性值")

删除属性

$对象.removeAttr"属性")

获取文本

html() 获取标签中的文本

html(字符串)设置文本内容，还可以用于插入标签

text() 获取标签中的文本

只能设置文本，不能插入标签

val()获取和设置value值

获取：$对象.val()

设置: $对象.val("设置值")

事件绑定和解绑

jQuery对象绑定事件，直接调用事件名称对应的函数,参数就是事件处理函数

注意：jquery对象是一个dom元素集合，为jQuery对象绑定事件时，会自动给里面所有dom对象绑定事件,不需要用for循环再遍历它单独为每个dom添加事件，除非你只想给某一个添加事件

函数绑定事件

        /*
            使用on函数绑定事件
                on("事件名称",'事件处理函数')
        */
        //1.声明事件处理函数
        function click1(event) {
            //event事件对象，它是在触发事件时，浏览器生成的事件对象
            console.log(event);
            console.log("click1");
        }
        //2.给jQuery对象绑定事件
        $box.on("click", click1)

        /*
        /*
            使用off函数解绑事件
                off("事件名称",'事件处理函数')
        */
        $box.off('click', click1)
        // $box.off("click")

        /*
            使用one函数可以让绑定的事件只触发一次
        */
        $box.one("clickl", function (event) {
            //event事件对象，它是在触发事件时，浏览器生成的事件对象
            console.log(event);
            console.log("click one");
        })

常用表单事件

<input type="text" name="" id="" placeholder="请输入">
    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        //获取焦点（输入框有光标）
        $("input").focus(function () {
            console.log("获取到焦点");
        })
        //失去焦点(输入框光标消失)
        $("input").blur(function () {
            console.log("失去焦点");
        })
        //监听输入内容的改变
        $("input").change(() => {
            let pwd = $('input').val()
            console.log(pwd.length);
            console.log("内容被改变");
        })
    </script>

通过DOM树查找和增删节点

查找

	<table class="t" h>
        <tr>
            <th>姓名</th>
            <th class="a">地址</th>
            <th>电话</th>
        </tr>
        <tr>
            <td class="b">lucy</td>
            <td>澳大利亚</td>
            <td class="c">123</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script src="./js/jquery-3.6.3.js"></script>
	<script>
        //parent()找到父节点
        $(".a").parent().css("background-color", "#659246")
        console.log($(".a").parent());
        //parents()找到所有的祖先节点
        console.log($(".a").parents());
        //parents('选择器名称') 找到指定的祖先节点
        $(".a").parents('tr').css("background-color", '')
        //find('选择器名称')    父元素查找指定的后代元素
        console.log($('.t').find(''));
        console.log($('tr').children()[2]);
    </script>

增删

	<div class="box"></div>
    <div class="box">1</div>
    <div class="box"></div>
    <script src="./js/jquery-3.6.3.js"></script>
    <script>
        //创建元素jQuery对象
        let $box = $(`<div class='box box1'></div>`)
        let $box1 = $(`<div class='box box2'></div>`)
        console.log($box);
        //获取body的jQuery对象
        let $body = $(document.body)
        console.log($body);
        //向元素内追加一个元素
        // $body.append($box)//尾部添加
        // $body.prepend($box)//头部添加
        //将子元素追加到父元素末尾
        $box.appendTo($body)//添加到末尾
        //将子元素追加到父元素开头
        $box1.prependTo($body)//添加到开头

        let $box2 = $('.box:nth-child(2)')
        //在一个元素的后面添加另一个元素
        $box2.after($box1)
        //在一个元素的前面添加另一个元素
        $box2.before($box1)
        //删除当前元素  谁调用谁被删除
        $box2.remove()
    </script>

过滤选择器

子元素过滤器

seletor:nth-child（n）

1.找到当前元素的父元素下，第n个孩子

2.判断这个孩子是否匹配selector选择器

如果匹配就选择它，应用样式，

如果不匹配就不选择它，这个伪类选择器失效（什么也没有选中）

当前元素：所有匹配selector选择器的元素

按照子元素在文档中出现的位置排序，从1开始

注意：

selector：标签名、类名、id名、*

:nth-child（n）等同于 *:nth-child（n）

索引过滤器

selector:eq(index)

在匹配的集合中选择索引值为index的元素，索引从0开始

匹配的集合:$('selector')获取到的dom元素集合

这个是jQuery扩展出来的选择器，性能没有原生的css选择器好

表单过滤器

:checked

匹配所有勾选的元素

只适用于单选按钮和复选框下拉菜单selected

数组的常用方法

	<script>
        let arr = ["1", 2, true, "hhhh", 2, null]

        /* push 向数组的末尾添加一个或多个成员
            参数：被添加的新数组成员
            返回值：新的数组长度
            操作会改变原数组
        */
        let r = arr.push('hello world', 'JS');
        console.log('push的返回值：', r);//8
        console.log('push后的arr：', arr);//JS被添加到arr末尾


        /* pop 删除并返回数组的最后一个成员
            返回值是被删除的这个成员
            操作会改变原数组
        */
        r = arr.pop()
        console.log("pop的返回值：", r);//JS
        console.log("pop后的arr：", arr);//arr中JS被删除


        /* unshift 向数组的开头添加一个或多个成员
             参数：被添加的新数组成员
             返回值：新的数组长度
             操作会改变原数组
        */
        r = arr.unshift('my best day', 'JS')
        console.log('unshift后的返回值：', r);//9
        console.log('unshift后的arr', arr);//两个值被依次添加到arr头部


        /* shift 删除并返回数组的第一个成员
             返回值是被删除的这个成员
             操作会改变原数组
        */
        r = arr.shift()
        console.log('shift的返回值：', r);// my best day
        console.log('shift后的arr：', arr);//arr中 my best day被删除


        /* splice 删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面
             第一个参数：删除成员的起始位置
             第二个参数：删除成员的个数
             第三个参数：用于替换被删除成员的新数据，该参数可以省略
             返回值： 被删除的成员数组
             会改变原数组
        */
        // 删除一个成员：
        r = arr.splice(5, 2)
        console.log('splice的返回值：', r);//[2, null]
        console.log('splice后的arr：', arr);//索引为5和6的成员被删除

        // 在指定成员前追加新数据
        // 若第二个参数为0，则可以实现在指定位置的前面添加成员的功能
        r = arr.splice(3, 0, "newvalue")
        console.log('splice的返回值：', r);//[]
        console.log('splice后的arr：', arr);//newvalue索引为3


        /* concat 连接数组
             参数：多个被追加进数组的成员，若成员是数组，该数组中每个成员都被加入原数组
             返回值：一个新数组
             不改变原数组
        */
        r = arr.concat(7, 8, 9)
        console.log('concat的返回值', r);//[...,'hello world', 7, 8, 9]
        r = arr.concat([7, 8, 9], [10, 11])
        console.log('concat的返回值', r);//[..., 'hello world', 7, 8, 9, 10, 11]
        console.log('concat后的arr：', arr);//arr未发生变化

        // concat 的应用场景多用于克隆数组
        let arr2 = [].concat(arr)
        console.log('concat克隆的arr2:', arr2);
        console.log(arr === arr2);//false


        /* join 使数组成员用一个字符连接起来，返回字符串
             参数：连接数组成员时使用的字符
             返回值：数组成员被连接起来的字符串
        */
        arr2 = ['abc', 'xyz', '123']
        r = arr2.join('-*-')
        console.log('join的返回值：', r);// abc-*-xyz-*-123


        /* includes 判断是否包含某成员
            参数：需要判断的值
            返回值：布尔值
        */
        r = arr.includes('z')
        console.log('includes的返回值：', r);//false


        /* indexOf 得到某个元素第一次出现的位置，没有返回-1
        */
        r = arr.indexOf('JS')
        console.log('indexOf JS 的返回值：', r);//0

        // 可以使用indexOf判断是否包含某个数组成员 若不包含 返回 -1
        r = arr.indexOf('g')
        console.log('indexOf g 的返回值：', r); // -1
        if (arr.indexOf('g') === -1) {
            console.log('该数组成员不存在');
        }

        /* lastIndexOf 得到某个元素最后一次出现的位置，没有返回-1
        */
        console.log('lastIndexOf的返回值：', arr.lastIndexOf(2));//2


        /* slice 数组切片 获取子数组
             第一个参数：起始位置(包含这个成员)
             第二个参数：结束位置(不含这个成员)
                第二个参数可省略，代表从第一个参数开始截取到最后
             返回值：截取的子数组
             不改变原数组   
        */
        r = arr.slice(3, 5)
        console.log('slice的返回值: ', r);//['newvalue', true]
        console.log('slice后的arr: ', arr);//arr不变
        // 参数只有一个，代表从该位置开始 一直截取到最后
        r = arr.slice(4)
        console.log('slice的返回值: ', r);//[true, 'hhhh', 'hello world']

        /* sort 数组排序
             将元素视为string，默认按第一个字符的ascii码升序排序
             参数：可以传递一个回调函数作为参数，通过回调函数来指定排序规则
                (a, b) => a - b 升序排列
                (a, b) => b - a 降序排列
            会改变原数组
        */

        arr.sort();
        // console.log('sort的返回值：', r);//排序后的数组
        console.log('sort后的arr: ', arr);//arr变成升序
        // 根据指定函数排序，这里a-b表示升序 b-a 降序  
        arr.sort((a, b) => b - a);
        console.log('sort(f)后的arr: ', arr);//arr变成降序

        /* reverse 将数组中的元素倒序
            返回值：倒叙后的数组
            会改变原数组
        */
        r = arr.reverse();
        console.log('reverse的返回值', r);
        console.log('reverse后的arr: ', arr);//arr倒序



        // every 验证数组中的元素是否都满足指定函数
        r = arr.every(function (a) {
            return a > 5;
        });
        console.log(r);
        // some 检测数组中是否有满足指定函数的元素
        r = arr.some(function (a) {
            return a > 10000;
        });
        console.log(r);
    </script>

字符串的常用方法

<script>
    let str = 'hello world !!!'

    // 字符串可以被视为字符数组
    // 查看字符串长度
    console.log(str.length);


    // 通过索引访问字符串中的字符
    console.log(str[4]);


    // charAt 函数可以获取指定索引处的字符
    // 等价于 str[4]
    console.log(str.charAt(4));


    // split: 分割字符串
    // 参数：用于分割字符串的字符
    // 返回值：字符串数组
    let r = str.split(' ')
    console.log(r);


    // split + join 替换字符

    // 例如：替换字符 *|& 为 _
    str = 'hello*|&world*|&!!!'
    r = str.split('*|&')
    r = r.join('_')
    console.log(r);



    // trim: 去掉字符串首尾空格
    str = '          hello world !!!          '
    console.log(str);
    r = str.trim()
    console.log(r);


    // substring: 截取子字符串
    // 第一个参数：截取字符串的起始索引位置
    // 第二个参数：截取字符串的结束索引位置
    // 口诀：前截后不截
    // 返回值：截取出来的子字符串
    str = 'hello world !!!'
    r = str.substring(4, 9)
    console.log(r);

    // 第二个参数可以省略，如果只写一个参数，substring将从该参数位置一直截取到字符串末尾
    r = str.substring(6)
    console.log(r)


    // indexOf: 查询字符串中指定字符在字符串中的索引位置
    // 参数：要查询的字符串
    // 返回值：被查询字符串的索引
    console.log(str.indexOf('o'));


    // lastIndexOf
    console.log(str.lastIndexOf('o'))

    // 举例: 截取字符串从 o ~ r
    console.log(str.substring(str.indexOf('o'), str.lastIndexOf('r') + 1));


    // startsWith: 用于判断字符串是否以指定字符串开头
    // 参数：指定开头的字符串
    // 返回值：bool值，true代表是以指定字符串开头的，false代表不是
    console.log(str.startsWith('hello'));

    // endsWith: 用于判断字符串是否以指定字符串结尾
    console.log(str.endsWith('!!!!'));



    // toUpperCase toLowerCase 将字符串中的英文转成全为大写或小写
    str = str.toUpperCase()
    console.log(str);
    str = str.toLowerCase()
    console.log(str);

    // 例如: 统计一个字符串中出现了多少个a字符，忽略大小写
    str = 'alhdAkdjfalKHgladhfdjAhg'
    str = str.toLowerCase()
    let count = 0
    for (let i = 0; i < str.length; i++) {
        const char = str[i];
        if (char === 'a') count++
    }
    console.log(count);


    // 补充：
    // 数字操作：
    // toFixed 保留小数点后多少位的函数
    // 参数：指定小数点后保留几位
    // 返回值：是一个保留了指定小数点位数的字符串
    let num = 3.1415926
    r = num.toFixed(3)
    console.log(r);
</script>