VSS 前端开发

1.html

1.1什么是html？

Hyper Text Markup Language 超文本标记语言

超文本：有视频、音频、图片等，超越文本
标记语言：有一套标签

2.网页的基本结构

网页的web标准：

结构 (HTML)
样式 (CSS)
行为 (JavaScript)

<html>
<head>
</head>
<body>
这是网页的基本结构
</body>
</html>

详细：

<!-- 文档的声明 告诉浏览器用HTML5版本来显示网页位置在html标签前，它不是标签，而是一个声明-->
<!DOCTYPE html>

<!-- lang设置文档的语言 en 英文 -->
<!-- html 是根元素（根标签） 所有的标签都包含在里面-->
<html lang="en"><!-- head是html文档的头部 它的内容不会显示在网页，主要用来设置文档的信息，比如标题，编码格式等 -->
<head><!-- charset设置文档编码格式  UTF-8使用最广泛，它能更好的兼容中文，避免中文乱码--><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 文档的标题 显示在网页选项卡 --><title>Document</title>
</head>
<body><!-- !+Tab 键或enter键 自动生成网页基本的结构-->
</body>
</html>

3.标签

什么是标签？

标签是由<>包裹起来的对象，分为 <单标签> 和 <多标签开始标签></多标签结束标签>

标签的属性：

写在开始标签中，标签名之后，常以属性名="属性值"的形式出现
作用是为标签增加附加信息

注意：标签名和属性名之间要有空格，属性名和属性名之间也有空格

标签的关系：

包含关系 html和head的关系
并列关系 head和body

3.1.标题标签 <h1~6>

语义: 内容的标题
特点：文字加粗，独占一行
等级：h1~h6

3.2.段落标签 <p>

p标签

- 语义：文章的段落

- 特点：独占一行，段与段之间有间隔，一段里的文本会随着浏览器窗口变化，自动换行

3.换行标签

br 标签

语义：换行

特点：换行后，行与行之间没有间隔

4.转义字符

页面显示的特殊字符

空格
<	<
>	>
版权符号 ©	&copy

5.文本格式化标签

b (bold) strong	加粗	b标签只是样式上的加粗效果，strong也有加粗效果，在语义上有强调含义
i(italic) em(emphasized)	斜体	两者都有倾斜字体效果，并不能使li标签的数字也倾斜
s(strikethrough) del(delete)	删除	二者均为字段中间划横线的删除样
u(underline) ins(insert text)	下划线	二者均为下划线样式
sup	上标	可以理解为表示数学中的二次方
sub	下标	可以理解为数学中的x1 x2

6.标签的类型

块级元素

特点：

每一个块级元素都独占一行
块级元素里可以包含其它块级元素和行内元素

注意：p元素里不要嵌套块元素

常见的块级元素

div h1 p ... 常用于页面布局

行内元素

特点：

不会独占一行，一行里可以有多个行内元素
行内元素可以包含行内元素，一般不会包含块元素

常见的

b i u del span 常用于包裹文字，方便设置样式

7.图片标签 img

语义：图像

属性	作用
src	图片的路径
alt	定义无法正常显示图片时的文字，通常就是图片内容的简要说明，比如，这是logo，头像
title	定义鼠标悬停在图片时显示的文字
height	定义图片的高度
width	定义图片的宽度

路径src=“”

相当于电子路线，通过它可以找到计算机或网络中的资源

相对路径

以当前文件为基础，寻找其它文件的路线

访问方式

./ 表示当前文件所在目录
../ 表示当前文件所在目录的上一级目录
/目录名/图片名表示图片在当前目录的下一级目录中

绝对路径

- 资源在计算机中的完整地址，通常本地以盘符开头

8.列表标签 li

有序列表

<ol> </ol> order list

列表项 <li> </li>

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

1 阿拉伯数字（默认）
A/a 英文字母（大写/小写)
I/i 罗马数字（大写/小写)

ol 标签里只能放li标签

无序列表

<ul></ul> unorder list

通过ul 的type属性可以修改项目符号样式

disc 实心圆（默认）
square 实心方块
circle 空心圆

ul 标签里只能放li标签

自定义列表

<dl></dl> definition list

列表项

dt 术语/小标题
dd 对术语的说明

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

9.超链接

<a></a>标签

语义：超链接通过它可以跳转到其他页面或者是本页面的其他位置

属性： href 定义访问资源的路径

属性值：url(统一资源定位符)>>网址、html路径等

注意：href="JavaScript:;" 只是占位，页面不会变化

target 定义跳转的方式

blank	在新窗口打开
self	在本页面打开
parent	在父页面打开
指定name	在某个对应name的iframe中打开

锚点

设置方法

a标签的href="#锚点的id属性值"
锚点元素设置id属性

10.表格标签 table标签

table 定义一个表格

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

th (table head cell) 表格标题行中的一格，加粗效果

属性	作用
border	设置边框线数字，如果border为0，内外边框都会消失
cellpadding	设置单元格的内边距属性值：像素px，百分比
cellspacing	设置单元格与单元格的距离
align	设置整个表格在页面中的位置 center left right
width	设置整个表格的宽度

合并单元格

属性	作用
rowspan="n"	合并n行
colspan=" y"	合并y列

方法：

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

2.判断合并行，还是列——写rowspan or colspan

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

4.删除被占用的单元格

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>

<body><!-- <table border="1" cellpadding="20px" cellspacing="10px" align="center" width="600px"><tr><th>编号</th><td>姓名</td><td>性别</td></tr><tr><td>1</td><td>小明</td></tr><tr><td>2</td><td>小红</td></tr></table> --><table border="1" align="center" width="500px"><tr><td rowspan="2">1</td><td colspan="2">2</td><!-- <td>2</td> --></tr><tr><!-- <td>1</td> --><td>2</td><td>3</td></tr><tr><td>1</td><td colspan="2">3</td><!-- <td>3</td> --></tr></table>
</body>

</html>

11.表单域 form标签

属性	作用
action	设置提交路径用来指定接受处理表单数据的服务器url地址
name	设置表单域的名字，用于区分同一页面的多个表单
method	设置提交方式
get	表单的数据会显示在地址栏中，有需要保密的数据不能用get
post	表单的数据不会显示在地址栏中，而是封装在表单体里

表单元素

输入框 input
按钮 button

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>form {background-color: aquamarine;width: 600px;height: 200px;}</style>
</head>

<body><form action="" name="test1" method="get">用户名：<input type="text" name="" id="">密码：<input type="text" name="" id=""></form><form action="" name="test2">用户名：<input type="text" name="" id="">密码：<input type="text" name="" id=""></form>
</body>

</html>

12.input标签

type 属性可以修改input的类型

text	文本框
password	密码框
submit	提交按钮把表单的数据提交到服务器
radio	单选按钮
checkbox	复选框
reset	重置按钮
date	日期选择器
datetime-local	日期时间选择器
hidden	隐藏框

name属性

定义表单元素的名字，它的值匹配用户输入的值和value中设置的值

*一组单选按钮的name属性应该设置为一样的值

*一组复选框的name属性应该设置为一样的值

value属性

设置表单元素的值

其他属性

placeholder	设置输入框的提示信息
required	设置必填项
readonly	设置只读

label标签

-用于为input设置标注

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>

<body><form action="" method="get"><label for="test" style="color: red;">用户名：</label><input type="text" name="user" id="test" placeholder="请输入用户名"><br>
<label for="">密码：</label><input type="password" name="pwd" required> <br>
<input type="submit"> <br>
<input type="radio" value="man" name="sex">男<input type="radio" name="sex" value="woman">女 <br><input type="checkbox" name="box" value="ok">已阅读 <br><input type="reset"> <br><input type="date" name="date"><input type="datetime-local" name="datetime" id=""> <br><input type="file" name="file"> <br><input type="hidden" name="hidden" value="被隐藏了">
<input type="checkbox" name="hobby" value="game" id="">游戏<input type="checkbox" name="hobby" value="sport" id="">运动<input type="checkbox" name="hobby" value="reading" id="">阅读</form>
</body>

</html>

13.select 标签

定义下拉列表

option 标签设置选项

在option设置属性：selected="selected"，默认选择当前选项

name属性和value属性

14.textarea

多行文本框

15.iframe 标签

设置内联框架，在一个页面中嵌入另外的页面

src 默认显示的页面

frameborder 设置内联框架的边框

实现内联框架页面的切换

1.给iframe设置name属性

2.让a标签的target="iframe的name属性值"

注意：a标签的href写要显示的页面地址

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>

<body><h1>这是父页面</h1><a href="05标题标签.html" target="content">标题页面</a><br><a href="12列表.html" target="content">列表页面</a><br><iframe src="https://news.baidu.com/" frameborder="1" name="content" style="height: 600px;width:600px;"></iframe>
</body>

</html>

html练习：

1.制作工资表

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>

<body><table border="1"><tr><td colspan="2" rowspan="2">人员</td><!-- <td>人员</td> --><td rowspan="2">考勤</td><td rowspan="2">基本工资</td><td colspan="2">项目提成</td><!-- <td>项目提成</td> --></tr><tr><!-- <td>人员</td> --><!-- <td>人员</td> --><!-- <td>考勤</td> --><!-- <td>基本工资</td> --><td>项目1</td><td>项目2</td></tr><tr><td rowspan="2">部门1</td><td>员工1</td><td></td><td></td><td></td><td></td></tr><tr><!-- <td>部门1</td> --><td>员工1</td><td></td><td></td><td></td><td></td></tr></table>
</body>

</html>

2.CSS 样式

什么是CSS

层叠样式表 Cascading Style Sheets

用来设置网页元素的外观样式，比如颜色，背景，间距等等

代码规范

<style>选择器 {//样式声明，一个或多个属性属性名: 属性值;属性名: 属性值;}
</style>

注：

选择器，属性可以是全小写或者全大写，但是推荐小写
选择器和括号直接有一个空格
冒号和属性值之间有一个空格

1.内部样式

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

特点

可以同时为多个标签定义相同的样式，修改方便
只对当前页面起作用，不能跨页面使用

2.外部样式

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

特点

可以跨页面使用

3.行内样式 (内嵌、内联样式)

在元素标签里定义一个style属性，它的属性值就是样式属性键值对

特点

只能对当前的一个元素起作用，多个元素需要一个个设置，不方便修改
行内样式优先级最高，基本不能通过其他两种方式修改

注：开发时尽量少用

2.相关属性

文字属性	作用	常用
font-family	设置字体族，字体列表中考前的优先应用，如果计算机中没有前面的字体，才会应用靠后的，如果定义的字体族中，所有字体都没有，则显示默认字体。	sans-serif 无衬线 monospace 等线 fangsong 仿宋
font-size	设置字体的大小	像素 px em 字体大小的倍数 rem 相对于html字体大小的倍数
font-weight	定义字体的粗	normal 默认粗细 bold 加粗 bolder比父元素更粗一点
font-style	设置字体样式	italic 倾斜 normal 默认竖直
font	复合设置字体样式	属性顺序（font-style font-weight) font-size font-family

文本属性	作用	常用
line-height	设置行高行高 = 上间距 + 文本高度（font-size） + 下间距	像素px 数字 em...
text-indent	设置文本缩进	像素px，em
text-align	设置文本在块级元素中的位置，也可以设置行内元素在块级元素中的位置	center left right
color	设置文本颜色	RGB 十进制表示 rgb(red,green,blue,n) 3个部分，取值范围：0~255 值越大，颜色越深，取0颜色消失，n为不透明度，可省略颜色单词 red blue green等十六进制 #rrggbb 比如：#8a2be2 取值范围：0~ff #fff 白色
text-transform	设置文本大小写转换	uppercase 全大写 lowercase 全小写 capitalize 首字母大写
text-decoration-line	overline 在文本上方 underline 在文本下方(默认) none 没有下划线 text-decoration-style	solid 实线(默认) dashed 虚线 wavy 波浪线
text-decoration-color	设置装饰线的颜色
text-decoration	text-decoration: dashed orange underline;	text-decoration: none; 取消下划线样式

应用：

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {line-height: 1.5;text-indent: 2em;text-align: center;
}
span {color: blueviolet;color: rgb(255, 0, 0);color: #a272ce;text-transform: capitalize;
}
h1 {color: blueviolet;}
h2 {color: rgba(137, 43, 226, 0.618);}
div {width: 200px;height: 200px;}
a {color: rgb(13, 121, 85);text-decoration-line: overline;text-decoration-style: solid;text-decoration-color: blue;text-decoration: dashed orange underline;}</style>
</head>

<body><h1>这是一个标题</h1><p>Baidu Translation relies on the trend of network data resources and natural language harmony and harmony, and iscommitted to helping users cross language and divides and obtain information and services conveniently andquickly.<br><span>helping users</span></p><div><h2>这是h2</h2></div><div><a href="https://news.baidu.com/">这是百度新闻页面！</a></div>
</body>

</html>

3.选择器

选择器的作用

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

2.为这些元素设置样式

3.1标签选择器

标签名 {} 标签名：h1，p，span...

特点

找到body下所有同名的标签
当页面有多个同名标签时，没有办法为某个标签单独设置样式

3.2 id选择器

用法：

1.为对应的标签设置id属性

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

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

3.3 类选择器

用法

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

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

和id选择器的区别

类名可以在一个页面中重复使用，只要需要设置的样式相同，就可以使用
class属性可以有多个属性值，类名与类名之间用空格隔开
开发时通常用类选择器

3.4 通配符选择器

* {}

特点

1.选中body中所有的元素

2.通常用于清楚默认样式

3.5 后代选择器

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

两个选择器直接有一个空格，这两个选择器可以是标签名，类名，id选择器

特点

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

注：元素与元素之间的关系

父元素和子元素
兄弟元素
祖先和后代元素

3.6 子代选择器

父亲选择器a > 子代选择器b {}

特点

b是a的子代

3.7 并集选择器

选择器1,选择器2 {}

特点

同时选中1和2

3.8 伪类

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

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

标签名:伪类 {}

:first-child 找到作为第一个子元素的p元素

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

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

:first-of-type 找到同类子元素中的第一个

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

:nth-child(3)

找到第二个子元素

3.9 超链接的伪类

a:link

设置超链接没有被点击时的样式

.类名:visited

设置带有.类名这个类名的超链接，被点击后的样式

:hover

设置鼠标悬停在超链接上时的样式

注意，:hover也可以用于设置其他元素，在鼠标悬停时的样式

:active

设置鼠标点击超链接不放时的样式

3.10属性选择器

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

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

4.CSS三大特性

1.继承

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

不是所有的样式都会继承

常见可以继承的样式

color font-, text-, line-

常见不可以继承的样式

背景相关 background-，布局相关 width

2.优先级（权重）

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

什么时候产生冲突？

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

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

选择器简单权重规范权重

!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,0)

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

算法案例：

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

div p {} 1+1 =2

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

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

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

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

3.规范权重的比较

(4,3,2,1) 从左往右分为4档

.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的优先级高

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

3.层叠

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

5.文档流

网页是一个层叠的结构

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

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

元素在文档流中的特点 (显示模式)

块元素

独占一行，自上而下垂直排列
默认高度是它内容的高度(子元素撑起的高度)，默认宽度是父元素的宽度(占满父元素)
设置width和height有效

行内元素

不独占一行，只占自身的大小，在页面中水平排列，超出一行，自动换行
默认高度和宽度都是内容本身的宽高
设置width和height无效

行内块元素

不独占一行，只占自身的大小，在页面中水平排列，超出一行，自动换行
默认高度和宽度都是内容本身的宽高
设置width和height有效

6.元素的显示模式转换

display	设置元素的显示模式
block	以块元素的特点显示
inline-block	行内块元素
inline	行内元素
none	让元素从文档流中消失

7.盒模型

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

组成部分

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

padding 内边距内容区域和边框之间的距离
border 元素的外边框
margin 元素与元素之间的距离

内容区域、padding、border共同组成元素的可见区域

···margin是透明的不可见

行内元素的盒模型

margin-top,margin-bottom 无效

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

box-sizing 可设置盒模型的计算方式

border-box

设置的width和height是指整个盒子的大小

会根据设置的margin，padding，border，自动调整内容区的宽高

content-box (默认)

设置的width和height是指内容区的宽度和高度

整个盒子的大小还要加上margin，padding，border设置的值

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: antiquewhite;padding: 20px;border: 3px solid red;}
div:nth-child(2) {width: 100px;height: 100px;background-color: antiquewhite;padding: 20px;border: 3px solid red;margin: 30px;}</style>
</head>

<body>
<div>这是一个div</div><div>这是一个div</div>
</body>

</html>

8.边距

8.1 内边距 padding

padding-top	设置上内边距，内容区域和上边框之间的距离
padding-left	左内边距
padding-right	右内边距
padding-bottom	下内边距

符合写法

padding: a; 同时设置上右下左的内边距为a

padding: a b c d; 上右下左

padding: a b c; 上左右下

padding: a b; 上下左右

取正值

设置的背景可以透过padding显示出来

8.2 边框 border

宽度样式颜色; 全边框

solid	实线
double	双实线
dashed	虚线
border-top	上边框
border-bottom	下边框
border-left	左边框
border-right	右边框

border-style 单独设置边框样式，宽度和颜色默认

border-color 设边框颜色，样式和宽度默认

border-width 设置边框宽度，样式和颜色默认

8.3 margin 外边距

margin-top 上外边距设置正值，会使元素本身向下移动 (增加了和上边元素的距离)

margin-left 左外边距设置正值，会使元素本身向右移动（增加了和左边元素的距离）

margin-bottom 下外边距设置正值，会使它下边的元素向下移动 (挤开了它下边的元素)

margin-right 右外边距块元素默认情况下，设置它无效！！！

行内元素和行内块元素，设置它为正值，会使它右边的元素向右移动 (挤开了它右边的元素)

margin 复合写法同padding 一样

8.4外边距的折叠

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

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

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

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

解决问题：添加间隔

为子元素或父元素添加border

border: 1px solid transparent;

父元素添加overflow

overflow: hidden;

9.块元素的布局

9.1. 水平布局

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

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

padding-left + padding-right + width = 它父元素的宽度

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

哪个几个属性值：

width (默认值auto) margin-left margin-right

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

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

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

2.设置margin: 任意值 auto;

9.2块元素的垂直布局

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

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

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

处理溢出的方法 overflow

属性值：

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

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

scroll 为元素添加水平和垂直滚动条

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

10.float 浮动

10.1 浮动

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

- 属性值

none 元素不浮动 (默认)

left 左浮动

right 右浮动

- 特点

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

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

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

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

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

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

2.元素会水平排列

3.设置width和height有效

（转变为行内块元素）

浮动带来的问题

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

子元素设置浮动后，脱离了文档流，导致父元素的高度丢失，下面的元素会移上去，页面混乱

—— 高度塌陷问题

解决方法

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

2.父元素设置overflow

10.2clear 清除浮动

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

- right 清除右侧浮动元素的影响

注意同时设置clear left和right时，谁在下面谁应用，而不是同时清除左右浮动

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

原理：

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

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

10.3 解决高度坍塌问题：

clearfix

这段代码可以解决高度坍塌问题和外边距折叠问题

.clearfix::before,.clearfix::after {content: '';clear: both;display: table;}

11.伪元素

- 开头有::的关键字，早期也用:

before 在元素内前面添加

after 在元素内后面添加

- 相当于向HTML中添加一个新的元素，但是并没有真的改变HTML的结构

- 同样可以给伪元素添加样式

content 设置添加的内容

content: "文本";

content: url(图片的地址);

12.定位

定位 position

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

- 属性值

absolute 绝对定位

relative 相对定位

fixed 固定定位

12.1 相对定位

相对定位

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

- 特点

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

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

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

3.开启相对定位的元素是相对谁定位呢？

相对于当前元素原本在文档流中的位置来定位的

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

position: relative;

top: 0;

left: 0;

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

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

left 左边的距离，正值，元素右移动，负值，元素左移

right 右边的距离，正值，元素左移动，负值，元素右移

bottom 下边的距离，正值，元素上移动，负值，元素下移

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

left和right只选其一

12.2 绝对定位

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

- 特点

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

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

3.绝对定位是参照什么定位呢？

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

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

13.3固定定位

- 它是特殊的绝对定位，区别在于：

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

2.设置了固定定位的元素会固定在设置的位置上，页面滚动时，它也不移动

14.元素的层级

元素的层级 z-index

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

注意：

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

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

练习笔记1：导航栏

<!DOCTYPE html>
<html>

<head><meta charset="utf-8"><title>w3cshool在线教程</title><style>/* 清除默认样式 */* {margin: 0;padding: 0;}
.nav-box {/* display: flex;弹性布局设置了这个属性的元素变成有弹性的盒子它的宽高自动适应它里面子元素的宽高*/display: flex;}
.nav {/* 设置整个导航栏的宽度/高度/背景颜色 *//* width: 1210px;height: 48px; */background-color: rgb(232, 231, 227);/* 设置水平居中 */margin: 20px auto;
/* 解决高度塌陷问题 */overflow: hidden;/* 撑起背景高度 */padding: 15px 0;}
.nav li {/* 去除项目符号 */list-style: none;/* 设置浮动，使得菜单横向排列*/float: left;/* 设置文字垂直居中 *//* line-height: 48px; */}
a {/* 去除a链接的下划线 */text-decoration: none;color: rgb(125, 125, 125);font-size: 18px;
/* 设置内边距,上下 左右 */padding: 12px 40px;
}
/* 设置鼠标悬停到a链接上方时的样式 */a:hover {color: rgb(208, 208, 204);background-color: rgb(63, 63, 63);}</style>
</head>

<body><div class="nav-box"><ul class="nav"><li><a href="javascript:;">HTML/CSS</a></li><li><a href="javascript:;">Browser Side</a></li><li><a href="javascript:;">Server Side</a></li><li><a href="javascript:;">Programming</a></li><li><a href="javascript:;">XML</a></li><li><a href="javascript:;">Web Building</a></li><li><a href="javascript:;">Reference</a></li><li><a href="javascript:;">Reference</a></li></ul></div>

</body>

</html>

练习笔记2：图文

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.out-box {width: 80%;margin: 40px auto;
}
.text-box {width: 55%;font-size: 18px;font-family: sans-serif;font-weight: 400;/* 设置左浮动，脱离文档流 */float: left;}
.img-box {/* 设置右浮动，与.text-box并排 */float: right;width: 40%;/* 开启相对定位 */position: relative;}
.img-box>img {width: 100%;/* 相对于.img-box 绝对定位 */position: absolute;}
.text-box2 {/* 相对于.img-box 绝对定位 */position: absolute;top: 30px;left: 40px;text-align: center;line-height: 1.5em;}
.text-box2>span {color: rgba(255, 255, 255, 0.9);}
.text-box2>span:first-of-type {font-size: 18px;}
h2,h3 {font-weight: 400;margin-top: 0;}
h2 {font-size: 2.5em;line-height: 1.2em;color: #666;}
h3 {font-size: 1.25em;line-height: 0.5em;color: #777;}
p {color: #888;line-height: 1.7;}
strong {font-style: italic;}
a {color: #0096c0;text-decoration: none;
}</style>
</head>

<body><div class="out-box"><div class="text-box"><h2>Magical Bali</h2><h3>Bali is unique, Bali is unmatched</h3><p><b>There is no other place like Bali in this world.</b>A magical blend of culture, people, nature, activities,weather,culinary delights, nightlife, and beautiful accommodation. Bali is rated as one of the<b>best travel destinations in the world</b> by countless websites, review portals, and travel magazineseach year – for very good reasons.Whatever yourage,background, budget or interest, there is something great for everyone to explore and discover. Andthat’s apromise.</p><p><strong>First time in Bali? <a href="">21 reasons why Bali is a paradise</a></strong></p>
</div><div class="img-box"><img src="./img/logo.png" alt=""><img src="./img/view.jpg" alt=""><div class="text-box2"><span>An Extra Special Getaway</span><br><span>Experience the magic of Bali during your next trip</span></div>
</div></div>

</body>

</html>

3.JS

JS基础

什么是js?

JavaScript简称为JS，是由网景(netScape)推出的脚本语言,是一门轻量级，弱类型，面向对象的解释型脚本语言.

弱类型没有数据类型限制，声明变量时不需要指定数据类型
解释型不需要预先编译，边解释边运行，浏览器就是一个解释器
脚本（Script）一系列的指令

JS的作用

HTML用于定义页面中的内容
CSS用于设置内容的样式
JS用来控制HTML元素的行为
在页面中动态嵌入HTML元素
可操作浏览器
可以和用户数据交互

JS的组成

ECMAScript 语法简称ES，是JS的语法规范,比如数据类型，流程控制语句等
DOM (Document Object Model) 文档对象模型,这里的文档指HTML页面,可以通过DOM控制页面中的元素
BOM (Browser Object Model) 浏览器对象模型,可以通过它控制浏览器的行为

1.<script></script>位置

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 3.写在独立的js文件中，然后通过script标签引入src属性中设置js文件的地址--><script src="./test.js"></script><!-- 2.写在<script></script>标签中这个script标签可以放在head标签里，也可以放在body标签前--><script>alert("我是head中script标签中的js代码！")</script>
</head>

<body><!-- 1.写在标签的事件中比如鼠标点击事件onclick--><button onclick="alert('Hello JS!')">点击按钮</button>
<script>alert("我是body前script标签中的js代码！")</script>
</body>

</html>

2.输入输出语句

弹出警告框 alert("Hello JS")

在控制台打印输出 console.log("Hello JS")

在HTML页面中显示输出 document.write("Hello JS")

弹出输入框 prompt("请输入你的名字：")

3.代码规范

/* 多行注释，不可以嵌套 */

// 单行注释 ctrl+/

JS中严格区分大小写

Document.write("111")

JS每条语句应该有分号结尾

有时候，一行一条语句时，分号可以省略

4.js变量和常量

变量

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

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

变量的声明和赋值

声明

var 变量名;

let 变量名;

赋值

变量名 = 值;

声明的同时赋值

var 变量名 = 值;

同时给多个变量声明并赋值

var 变量名1 = 值, 变量名2 = 值;

修改变量的值

变量名 = 值;

注意：

只声明不赋值，默认输入变undefined

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

常量

- 不可以被改变的量

- 声明常量并赋值

const 变量名 = 值;

注意:

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

5.标识符

在JS中可以由我们自主命名的内容

比如变量名函数名类名 ...

命名规则

1.标识符只能包含字母、数字、下划线、$, 并且不能以数字开头

2.不能是JS中的关键字和保留字比如 var let

3.不建议使用内置函数或类名作为变量名，原有的函数会被我们自己定义的覆盖，导致失效

4.命名的规范

通常使用驼峰命名

-首字母小写，之后的每个单词开头大写

minlength -》minLength

类名使用大驼峰

每个首字母都大写

minlength -》MinLength

常量名全大写

MIN_LENGTH

6.数据类型

是计算机中数据的一种属性，这个属性定义了数据的含义，允许对数据执行的操作，该类型数据的存储方式和大小

JS中数据类型分为原始值(基本类型)和对象(复杂类型)

原始值

1.Number 数值

2.BigInt 大整数

3.String 字符串

4.Boolean 布尔值

5.Null 空值

6.Undefined 未定义

7.Symbol 符号

对象 Object

6.1Number 数值

整数、小数

特殊值

NaN (Not a Number) 非法数

Infinity 无限大的数字无穷

判断变量的数据类型

typeof 变量名

6.2String 字符串

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

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

转义字符 \

\" 转义双引号

\\ 转义单斜杠

\n 换行符

模板字符串

用``表示

特性

支持换行
支持嵌入变量
${变量名}

6.3Boolean 布尔值

- true false

6.4NUll 空类型空值

含义：对象类型的空引用（空指针）

Undefined 未定义类型

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

7.类型转换

boolean 转换为其他类型

- 转换为数值

Number() true 转换为1 false 转换为 0

- 转换为字符串

String()

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

Number转换为其他类型

- 转换为布尔

Boolean(变量)

0 -》false 非0数值 -》 true

- 转换为字符串

String()

String 转换为其他类型

- 转换为布尔

Boolean()

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

- 转换为数值

Number()

"111" -> 111

不是数值类型的 -》 NaN

在数字类型的字符串前面添加正号(+)，可以隐式地将这个字符串转换为数字

+"数字" -》数字

8.运算符

8.1算术运算符 (双目)

+ - * / %

1.加法运算

2.字符串拼接

当+两侧，至少一个为字符串时，做字符串拼接

- 减法运算

/ 除法运算

正常显示结果，可以显示小数

* 乘法运算

% 取余运算

求余数

注意：

字符串参与算术运算时，如果是数字类型的，会当作数值参与计算

先将字符串隐式转换为数值再参与运算

8.2关系运算符

> 大于

< 小于

>= 大于等于

<= 小于等于

== 相等

只是判断值是否相等，不会检查类型

=== 全等

判断值以及它的数据类型是否完全相等

!= 不等

只是判断值是否不相等，不会检查类型

!== 全不等

判断值以及它的数据类型是否完全不相等

8.3逻辑运算符

1.&& 与

- 表达式1 && 表达式2

- 两个表达式都为true，与的结果为true

只要有1个为false，结果为false

- 短路与

只要前面这个表达式1为false，后面的表达式2将不会执行，直接判定结果为false

2.|| 或

- 表达式1 || 表达式2

- 两个表达式都为false，或的结果为false

只要有1个为true，结果为true

- 短路或

只要前面这个表达式1为true，后面的表达式2将不会执行，直接判断结果为true

3.！非

- !表达式

- 取反

8.4赋值运算符

将等号右侧的值赋给左侧的变量

运算顺序：从右向左

8.5自增自减运算符

a++

a = a + 1

先使用后加1: 先让a的值作为a++这个表达式的返回值，然后让a这个变量加1

a++这个表达式的返回值=a原本还没有加1的旧值

++a

a = a + 1

先加1后使用: 先让a加1，然后让这个新的a的值作为++a的返回值

++a这个表达式的返回值=a已经加1后的新值

a--

先使用后减1

--a

先减1后使用

8.6条件运算符

- 表达式1 ? 表达式2 : 表达式3

- 如果表达式1为true，返回表达式2的值

如果表达式1为false 返回表示式3的值

8.7.运算符优先级

1.()

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

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

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

5.逻辑运算符 && ||

6.条件运算符

7.赋值运算符

9.语句

9.1条件语句

if语句

if(条件表达式){

//代码块

}

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

如果代码块只有一句语句，可以省略{}

if-else 语句

if(条件表达式){

//代码块

}else {

//代码块

}

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

if-else if 语句

if(条件表达式1){

//代码块

}else if(条件表达式2){

//代码块

}else if(条件表达式3){

//代码块

}else {

}

执行流程

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

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

如果结果为false，就继续向下判断，知道找到true为止

如果都为false，才执行else

switch 语句

switch (key) {

case value:

break;//结束switch语句

default:

break;

}

执行流程

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

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

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

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

9.2循环语句

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

循环的三要素

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

2.循环条件表达式 (设置循环条件，当条件不满足时循环结束)

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

while

do-while

for

9.2.1while语句

初始化表达式

while(循环条件表达式){

//循环体

其他语句

变量更新表达式

}

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

9.2.2 do while语句

初始化表达式

do {

//循环体

其他操作

更新表示式

} while (condition);

执行流程

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

如果为true执行循环体，直到条件表达式为false停止循环

do while和while的区别

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

9.2.3for循环

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

④循环体

}

执行流程：

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

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

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

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

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

注意：

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

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

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

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

9.2.4循环的嵌套

外层循环执行一次,内层循环执行一周

外层循环控制图形的高，内层循环控制宽

例：打印99乘法表

10.数组

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

创建数组的方式

1.通过new关键字

var 数组名 = new Array(数组大小)

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

赋值：

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

注意：

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

2.通过[]创建

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

注意：

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

3.声明的同时赋值

var 数组名 = new Array(元素1, 元素2,...);

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

获取数组的长度

数组名.length

注意：

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

判断是否是数组

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

数组的遍历

for循环

for (let i = 0; i < 数组名.length; i++) {

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

}

for-in语句

for(index in list){

//list[index]

}

数组的常用方法：

push 向数组的末尾添加一个或多个成员

参数：被添加的新数组成员

返回值：新的数组长度

操作会改变原数组
pop 删除并返回数组的最后一个成员

返回值是被删除的这个成员

操作会改变原数组
unshift 向数组的开头添加一个或多个成员

参数：被添加的新数组成员

返回值：新的数组长度

操作会改变原数组
shift 删除并返回数组的第一个成员

返回值是被删除的这个成员

操作会改变原数组
splice 删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面

第一个参数：删除成员的起始位置

第二个参数：删除成员的个数

第三个参数：用于替换被删除成员的新数据，该参数可以省略

返回值：被删除的成员数组

会改变原数组
concat 连接数组

参数：多个被追加进数组的成员，若成员是数组，该数组中每个成员都被加入原数组

返回值：一个新数组

不改变原数组
join 使数组成员用一个字符连接起来，返回字符串

参数：连接数组成员时使用的字符

返回值：数组成员被连接起来的字符串
includes 判断是否包含某成员

参数：需要判断的值

返回值：布尔值
slice 数组切片获取子数组

第一个参数：起始位置(包含这个成员)

第二个参数：结束位置(不含这个成员)

第二个参数可省略，代表从第一个参数开始截取到最后

返回值：截取的子数组

不改变原数组
sort 数组排序

将元素视为string，默认按第一个字符的ascii码升序排序

参数：可以传递一个回调函数作为参数，通过回调函数来指定排序规则

(a, b) => a - b 升序排列

(a, b) => b - a 降序排列

会改变原数组
reverse 将数组中的元素倒序

返回值：倒叙后的数组

会改变原数组
every 验证数组中的元素是否都满足指定函数
some 检测数组中是否有满足指定函数的元素

测试代码：

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>let arr = ["1", 2, true, "hhhh", 2, null]// arr[arr.length-1]=1111
/* push 向数组的末尾添加一个或多个成员参数：被添加的新数组成员返回值：新的数组长度操作会改变原数组*/let r = arr.push('hello world', 'JS');console.log('push的返回值：', r);//8console.log('push后的arr：', arr);//JS被添加到arr末尾

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

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

/* shift 删除并返回数组的第一个成员返回值是被删除的这个成员操作会改变原数组*/r = arr.shift()console.log('shift的返回值：', r);// my best dayconsole.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判断是否包含某个数组成员 若不包含 返回 -1r = arr.indexOf('g')console.log('indexOf g 的返回值：', r); // -1if (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>
</head>

<body>

</body>

</html>

注：可以使用indexOf判断是否包含某个数组成员若不包含返回 -1

11.Math函数

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

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

适用于Number类型

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*Math是JS的一个内置对象，它拥有一些数学中的常数属性和数学函数方法，比如 pai 三角函数这些属性和方法可以直接通过Math这个对象调用适用于Number类型

*/console.log(Math.PI);//3.141592653589793console.log(Math.E);//2.718281828459045//求绝对值console.log(Math.abs(-5));//5//求x的y次幂console.log(Math.pow(2, 3));//2的三次方，8//求两个数之间的最大值console.log(Math.max(3, 5));//向上取整console.log(Math.ceil(3.1));//4//向下取整console.log(Math.floor(3.1));//3//四舍五入console.log(Math.round(3.6));//4//求平方根console.log(Math.sqrt(4));//4的平方根//求立方根console.log(Math.cbrt(64));//4//生成[0,1)范围内的随机数console.log(Math.random());//生成[0,100)范围内的随机数console.log(Math.random() * 100);//生成[3,10)范围内的随机数console.log(Math.random() * 7 + 3);//生成[a,b)范围内的随机数// Math.random() *Math.abs(b-a) + Math.min(a,b)</script>
</head>

<body>

</body>

</html>

12.对象

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

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

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

12.1 创建方式

1.使用{}直接创建

let 对象名 = {

属性名：属性值;

方法名() {

//代码块

}

属性和方法的调用

对象名.属性名

对象名.方法名()

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

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

2.使用new Object创建

添加属性

对象名.属性名 = 属性值

属性的其他写法

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

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

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

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

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

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

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

12.2正则表达式

正则表达式：用于匹配字符串的表达式

例如：可以写一个正则表达式，用于鉴定一个字符串是否是邮箱格式的字符串

语法

可以在mdn上查询:

正则表达式 - JavaScript | MDN

1.在正则表达式中大部分字符都可以直接写

2.| 在正则表达式中表示或

3.[] 表示或（字符集）

[a-z] 任意的小写字母

[A-Z] 任意的大写字母

[a-zA-Z] 任意的字母

[0-9]任意数字

4.[^] 表示除了

x 除了x

\5. . 表示除了换行外的任意字符

\6. 在正则表达式中使用\作为转义字符

\7. 其他的字符集

\w 任意的单词字符 [A-Za-z0-9_]

\W 除了单词字符 A-Za-z0-9_

\d 任意数字 [0-9]

\D 除了数字 0-9

\s 空格

\S 除了空格

\b 单词边界

\B 除了单词边界

\8. 开头和结尾

^ 表示字符串的开头

$ 表示字符串的结尾

/^a$/ 表示完全匹配

量词

匹配前面一个字符，若有多个字符用()

{m} 有连续m个

{m,} 至少m个

{m,n} 有连续m-n个

+ 一个以上，相当于{1,}

* 任意数量的a

? 0-1次 {0,1}

例子：

 let nobody = {name: "小妖怪",age: 24,["***@ ***"]: "加密属性",family: {a: "妈妈",b: "妹妹",c: "弟弟"},brush() {console.log(`${this.name}在刷锅`);},shout() {console.log("不要过来这里有危险！");},dream() {console.log("走出浪浪山");}}console.log(nobody["***@ ***"]);console.log(nobody.name);nobody.dream()nobody.brush()console.log(nobody);
let master = new Object();master.name = "小妖怪"master.age = 18console.log(master);

正则：

// 声明一个正则表达式// 方法一:let regex = new RegExp('^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.(com|cn)$')
// 方法二:// 使用两根 / 斜线代表正则表达式的边界regex = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.(com|cn)$/


// 调用正则表达式的test方法 用于检测字符串是否符合正则表达式的描述// test 返回 true 代表 受测字符串符合正则表达式描述的特征console.log(regex.test('xyz@gmail.com'));

13.函数

函数是对一段程序的封装

作用

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

创建方式

13.1.1.函数声明方法

function 函数名(参数列表){

//代码块

}

调用函数：函数名(实参列表)

返回值：

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

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

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

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

13.1.2.函数的表达式

let 变量名 = function(形参列表){}

调用函数：变量名(实参列表)

*定义函数时，可以给形式参数设置默认值

如果调用函数时，没有提供实参，形式参数就会使用默认值

13.1.3.箭头函数

(形参列表) => {

//代码块

}

只有一个形参的时候可以省略小括号

13.1.4其他：自调用函数

定义之后立即执行的函数

定义步骤

1.先打赏两个小括号

2.在第一个小括号里声明函数(匿名函数)

3.第二小括号代表调用函数，应该在里面填入实参

13.2参数的值传递和引用传递

形式参数(形参)

就是定义在函数(方法)的小括号中的变量

实际参数(实参)

调用函数(方法)时，写在小括号中的变量/常量/值

形参和实参的关系

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

值类型传参

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

所以函数执行完成后，x本身的值不变

类比：把你的文档(值实参)复制一份交给老师(形参)，你的还是你的，老师每办法修改你电脑上的

number、boolean、string是值传递

引用类型传参

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

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

类比：把你的公开的腾讯文档的链接(引用)发给老师(形参)，老师对这个文档的修改，你那里会受到影响

Object、function是引用传递

13.3变量的作用域

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

作用域

全局作用域 Global

块作用域 block

函数作用域 Function

13.3.1全局作用域

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

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

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

全局变量分为两种

1.(普通)全局变量

直接在函数外声明的变量

2.自动全局变量

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

它存到了window对象，成为了window的属性

13.3.2块作用域

- 代码块：{}里的内容

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

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

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

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

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

13.3.3函数作用域

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

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

13.3.4作用域链

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

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

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

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

另外：let 和var 的区别

let 有块作用域

var 没有

经典案例：冒泡排序

        function bubble(arr){console.log("刚输入的arr1："+arr);for(i=0;i<arr.length-1;i++){
//for(j=0;j<arr.length-1;j++){for ( let j = 0; j < arr.length - 1 - i; j++){ // -i:每一轮结束后都拍好了i个数，不需要再参与比较

if(arr[j]>arr[j+1]){let temp=arr[j];arr[j]=arr[j+1];arr[j+1]=temp;//console.log(arr)}}  }return arr;}

4.DOM和BOM

什么是dom？

DOM Document Object Model 文档对象模型

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

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

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

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

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

DOM树

什么是bom？

BOM 浏览器对象模型

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

- 常见的BOM对象

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

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

Location 浏览器的地址栏信息

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

screen 屏幕的信息

location代表浏览器地址，当给window.location.href赋值时，就跳转到赋值的地址

history代表浏览器的地址，通过它可以控制浏览器前进和后退

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

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

4.1获取节点对象的方法

:nth-of-type(1)

找到父元素下,所有同类型标签中的第一个

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

所有的p标签是一个类型,所有的div标签是同一个类型....

排序: 在同类型标签中排序, 它占第一位

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

: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下第一个子元素

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

必须同时满足几个选择器的条件

没有空格 =》交集同时满足下面3个条件

1.标签有.box这个类

2.标签有.test这个类

3.对应标签在它的同类标签中是第一个

运用：

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*:nth-of-type(1)找到父元素下,所有同类型标签中的第一个同类型标签 p标签\div标签\em标签\ul标签 他们之间分别是不同类型所有的p标签是一个类型,所有的div标签是同一个类型....排序: 在同类型标签中排序, 它占第一位先将父元素中的标签分类, 再将每个类型的标签都排序,然后分别获取同类型标签中的第一个
: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下 第一个子元素
div.box.test 中间没有空格 交集选择器必须同时满足几个选择器的条件*/
/* body 下所有类型标签的第一个元素都被添加上了边框 */body :nth-of-type(1) {border: 3px solid rebeccapurple;}


/* 找到父元素下,第一个子元素 */body :nth-child(1) {background-color: red;}
.box:nth-of-type(1) {width: 200px;height: 200px;background-color: antiquewhite;}
.box:nth-of-type(2) {width: 200px;height: 200px;background-color: rgb(216, 250, 215);}
.box.test {width: 200px;height: 200px;background-color: rgb(218, 215, 250);}
/* 没有空格 =》交集 同时满足下面3个条件1.标签有.box这个类2.标签有.test这个类3.对应标签在它的同类标签中是第一个
*/.box.test:nth-of-type(2) {width: 200px;height: 200px;background-color: rgb(14, 192, 112);}</style>
</head>

<body>hhhhh
</body>

<body><p class="p1">我是body中的第一个子元素</p><p class="p1 test">我是body中的第一个子元素</p>
<div class="box">我是新加的div</div><!-- 下面这个带有box test 类的div是body下第2个第v--><div class="box test">我是body中的第二个div</div><div class="box test">我是body中的第三个div</div><div id="box1">hhhh</div><p class="box test">新加的p</p>

<!-- 注意:文档默认顺序加载, 所以获取文档节点的js应该放在这些标签的下面 --><script>/*常用document对象调用各种方法来获取页面中的节点对象
querySelector("选择器名称")document.querySelector("选择器") 根据选择器去整个页面获取 第一个符合条件的 元素节点对象注意：返回第一个元素*/var pObj = document.querySelector(".p1")//通过类名获取console.log("pObj", pObj);var divObj = document.querySelector("div")//通过标签名获取//注意:querySelector获取是第一个divconsole.log(divObj);var Obj = document.querySelector("#box1")//通过id选择器获取console.log("Obj", Obj);

/*获取和修改元素中的文本获取: 元素对象.innerHTML修改: 元素对象.innerHTML = '新的文本内容'innerHTML允许直接插入HTML标签, 可用于添加新的标签(有xss注入风险,被篡改插入非法的html代码)textContent也可以获取和修改文本,但是对于有标签的,会把标原样输出*/console.log(divObj.innerHTML);// divObj.innerHTML = "hei,我被innerHTML修改了"//后加入innerHTML会覆盖前面的内容// divObj.innerHTML = "<p>哈哈哈哈,我是加入的p标签</p>"divObj.textContent = "<p>哈哈哈哈,我是加入的p标签</p>"
/*querySelectorAll('选择器名')根据选择器去获取整个页面中符合条件的 所有 元素返回一个符合条件的元素数组
可以通过索引访问每一个数组元素，对里面的节点对象进行修改数组名[索引]*/
var boxArr = document.querySelectorAll('.box')console.log(boxArr);//NodeList(4)boxArr[0].innerHTML = "我被改变了"boxArr[3].innerHTML = "我也被改变了"
/*通过标签名获取元素，返回数组*/let a = document.getElementsByTagName('div')console.log(a);
/*注意：getElementById通过id名来获取元素，不需要加#*/console.log(document.getElementById('box1'));
/*getElementsByClassName是通过class属性中的类名获取元素，返回数组只填类的名字，不要加.*/console.log(document.getElementsByClassName('test'));
</script>
</body>

</html>

4.2通过DOM树的关系获取节点

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

获取父元素的所有节点

元素对象.childNodes

获取父元素的所有子元素

元素对象.children

返回都数组

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

.firstElementChild 获取第一个子元素

.firstChild 获取第一个子节点

.lastElementChild 最后一个子元素

.lastChild 最后一个节点

子元素获取父元素

子元素对象.parentElement

获取父节点 parentNode

获取兄弟元素

nextElementSibling 获取下一个兄弟元素

nextSibling 下一个兄弟节点

previousElementSibling 上一个兄弟元素

previousSibling 上一个兄弟节点

4.3节点的增删改

创建元素并添加属性

document.createElement('标签名')

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

4.3.1 增加

1.获取父元素对象

body 直接用document.body

父元素对象.appendChild(子元素对象) 向父元素尾部添加子元素

父元素对象.prepend(子元素对象) 向父元素头部添加子节点

父元素对象.insertBefore(子元素对象) 向父元素下的指定节点前添加元素

2.删除

要删除的元素对象.remove()

3.改/替换

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

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

5.事件

什么是事件？

用户和页面之间发生的交互行为

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

当用户点击enter，就进入网站

总之：

当某种情况发生时，就执行了一段代码，完成了一些操作，这里的某种情况就是事件

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

5.1如何为一个元素绑定事件

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

特别注意：

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

所有的事件名称参考：

GlobalEventHandlers.onmouseover - Web API 接口参考 | MDN

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

创建和触发 events - 事件参考 | MDN

步骤：

1.获取元素对象

2.声明一个事件处理函数

3.给元素对象添加事件监听器，也就是调用addEventListener方法

5.2解绑事件

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

注意：addEventListener可以为一个元素绑定多个事件，

可以为一个事件绑定多个处理函数

5.2.1.为元素的特定属性设置事件处理函数特定属性：带有on开头的属性元素对象.事件属性名 = function(){//代码}

注意：这个方法可以为一个元素绑定多个事件但是一个事件只能绑定一个处理函数

解绑： btnObj.onmouseout = null

5.2.2 直接在标签中设置事件属性 <button 事件属性名="函数名()">点我</button> 注意函数名后有括号，因为是事件触发的时候调用函数

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

例：

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>

</head>

<body><button class="btn1">打印触发的事件对象</button><button class="btn2">解绑事件</button><button onclick="onClick();fn2()">点我</button>
<script>//获取元素对象var btnObj = document.getElementsByClassName('btn1')[0]console.log(btnObj);//getElementsByClassName返回元素集合，所以要用索引来获取其中的某一个元素//声明一个事件处理函数function btn1Checked(event) {// event 是触发的事件对象console.log(event);// this 关键字代表被添加该事件处理函数的dom对象console.log(this);alert("btn1被点击啦")
}function btn1Checked2(event) {console.log(event);alert("btn1再次被点击啦")}//给btn1添加事件监听器btnObj.addEventListener('click', btn1Checked)//为click事件绑定第二个函数btnObj.addEventListener('click', btn1Checked2)
//解绑事件//点击btn2这个按钮，就执行为btn1解绑这个功能//1.btn2 绑定一个点击事件 //2.这个点击事件对应的事件处理函数的功能：为btn1解绑var btn2Obj = document.getElementsByClassName('btn2')[0]function btn2Checked() {alert("btn2被点击了")//为btn1解绑btnObj.removeEventListener('click', btn1Checked)}btn2Obj.addEventListener('mouseover', btn2Checked);

btnObj.onmouseout = function () {alert("鼠标移开btn1了")}
function onClick() {alert("你点我了")}function fn2() {alert("你点我了222")}
</script>
</body>

</html>

5.3 常用鼠标监听事件

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>

<body><div>这是div</div><input type="text" value="1"><script>var inputObj = document.getElementsByTagName('input')[0]console.log(inputObj.value);console.log(inputObj.type);

var divObj = document.getElementsByTagName('div')[0]console.log(divObj);//返回元素集合/*鼠标移入  mouseoveronmouseover*/function fn1() {//this添加这个监听的dom对象this.style.width = '200px';this.style.height = '200px';this.style.backgroundColor = 'red';}divObj.addEventListener('mouseover', fn1)
/*鼠标移出 mouseleaveonmouseleave*/function fn2() {//this添加这个监听的dom对象this.style.width = 100 + 'px';this.style.height = '100px';this.style.backgroundColor = 'blue';}divObj.addEventListener('mouseleave', fn2)
</script>
</body>

</html>

6.jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTM文档操作、事件处理、动画设计和Ajax交互。

6.1首先

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

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

未压缩版 .js

引入的js文件必须在自定义的脚本文件之前

6.2引入jQuery库，就是向这个网页添加了一个函数jQuery/$

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

通过$获取jQuery对象

$('选择器名称')

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

这个数组元素就是DOM对象

访问方式

1.索引

2.get方法

dom对象转换为jQuery对象

将dom对象作为参数传入$函数中

$(domObj)

//js中获取dom对象let boxObj = document.getElementsByClassName('box')[0]//通过$获取jQuery对象let $boxs = $('.box')console.log($boxs);//jQuery对象   》 数组（类似数组，可以用索引访问里面的数组元素）//获取jQuery对象中的DOM对象console.log($boxs[0]);console.log($boxs[1]);//通过get获取DOM对象console.log($boxs.get(0));
//dom对象转换为jQuery对象let $box = $(boxObj)console.log($box)
//eq(index)函数  返回index索引对应dom元素的jquery对象console.log($boxs.eq(0));

6.3设置样式

//参考文档：.css() : 获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性。 - jQuery API 中文文档 | jQuery 中文网

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body><div class="box" style="height: 150px;background-color: aqua;"></div><div class="box" style="width: 150px;"></div>
<script src="./js/jquery-3.6.3.js"></script><script>
let $boxs = $('div')
//css函数读取样式    读取jquery对象中的第一个dom元素的属性值console.log($boxs.css('width'));console.log($boxs.css('height'));console.log($boxs.css('border'));//可以传入一个样式名数组console.log($boxs.css(['height','width']));
//css函数设置样式   为jquery对象中的所有dom元素都设置上样式// $boxs.css('background-color','red')$boxs.css('background-color',function(index,value){//index 当前数组成员的索引console.log('index',index);//value 当前数组成员对应的background-color的属性值console.log('value',value);//返回值   新的属性值return index % 2 ===0 ? 'green':'red';})
//参考文档：https://www.jquery123.com/css/</script>
</body>
</html>

6.4操作类

.addClass('类名') 添加类

.removeClass('类名') 删除类

.toggleClass('类名') 开关类有就删除，没有就添加

.hasClass('类名') 判断是否存在某个类

当我们修改jQuery对象时，它会自动修改jQuery对象中的所有元素

这个称为jQuery的隐式迭代

6.5设置属性

读取属性或读取自定义属性

.attr(属性名) 读取jquery中的第一个元素的属性值
设置属性 .attr('属性名','值')

删除属性 .removeAttr('属性名')

对比：

//js设置属性// $input[0].disabled = true //设置为true 禁用// $input[0].disabled = false //设置false 可用
// $input[0].setAttribute('disabled',false)//这种写法无论第二个参数写什么都是禁用// $input[0].removeAttribute('disabled')//可以删除disabled属性，使得input可以使用
//jquery设置$input.attr('disabled',false)//设置为可使用

6.5.1常用set和get的方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box1">123</div><div class="box2">123</div><div class="box3" style="background-color: antiquewhite;">123</div><input type="text" value="123">
<script src="./js/jquery-3.6.3.min.js"></script><script>/*html() 获取标签中的文本html(str) 设置文本内容，还可以用于插入标签*/console.log($('.box1').html());$('.box1').html('5555')$('.box1').html('<p>我是p标签</P>')/* text(str) 只能设置文本，不能插入标签*/$('.box2').text('<p>我是p标签</P>')
console.log($('.box').width());$('.box3').width('200')//设置宽$('.box3').height('200')//设置高/* val() 获取和设置value值*/console.log($('input').val());$('input').val('333')</script>
</body>
</html>

6.6事件的绑定和解绑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: brown;}</style>
</head>
<body><div class="box">123</div><div class="box"></div><script src="./js/jquery-3.6.3.js"></script><script>let $box = $('.box')/*jQuery对象绑定事件，直接调用事件名称对应的函数参数就是事件处理函数
注意1.jquery对象是一个dom元素集合，为jquery对象绑定事件时，会自动给里面的所有dom对象绑定上事件不需要用for循环再遍历它单独为每个dom添加事件，除非你只想给某一个添加事件*/$box.click(function(event){//event事件对象，它是在触发事件时，浏览器生成的事件对象console.log(event);console.log('click');})
$box.mouseenter((event)=>{console.log(event);console.log('mouseenter');})
$box.mouseleave((event)=>{console.log(event);console.log('mouseleave');})
//手动触发事件  调用事件函数$box.click()
/*使用on函数绑定事件on('事件名称','事件处理函数')*///1.声明事件处理函数function click1(event){//event事件对象，它是在触发事件时，浏览器生成的事件对象console.log(event);console.log('click1');}//2.给jquery对象绑定事件$box.on('click',click1)
/*使用off函数解绑事件*/$box.off('click',click1)//不写第二个参数，会解绑事件对应的所有函数$box.off('click')
/*使用one函数可以让绑定的事件只触发一次*/$box.one('click',function(){console.log('one click');})
</script>
</body>
</html>

6.7常见的表单事件：

//获取焦点  (输入框有光标）$('input').focus(()=>{// console.log('获取到焦点了');})//失去焦点$('input').blur(()=>{// console.log('失去焦点了');})//监听输入内容的改变$('input').change(()=>{// let pwd = $('input').val()// console.log(pwd);console.log('内容改变了');})

6.8 each 遍历

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
<script src="./js/jquery-3.6.3.js"></script><script>const $lis = $('ul>li')$lis.each(function(index,element){//第一个参数 index 索引console.log(index);//第二个参数 element dom对象console.log(element);
//$(element)将dom对象转换为jquery// $(element).css('color','red')//索引为偶数的li颜色为红色，奇数的为绿色$(element).css('color',index % 2 === 0 ? 'red':'green')})</script>
</body>
</html>

6.9 jQuery通过DOM树查找节点

<body><table class="b"><tr><th>姓名</th><th class="a">地址</th><th>电话</th></tr><tr><td class="d">lusy</td><td>冰岛</td><td class="c">123</td></tr></table>
<script src="./js/jquery-3.6.3.js"></script><script>//parent()找到父节点$('.a').parent().css('background-color','red')//parents()找到所有祖先节点console.log($('.a').parents());//parents('选择器名称') 找到指定的祖先节点$('.a').parents('tr').css('background-color','')
//find('选择器名称') 父元素查找指定的后代元素console.log($('.b').find('th'));console.log($('.b').children());</script>
</body>

6.10 增删节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: aquamarine;margin-bottom: 10px;}.box1 {background-color: antiquewhite;}</style>
</head>
<body><div class="box"></div><div class="box"></div><div class="box"></div>
<script src="./js/jquery-3.6.3.js"></script><script>//创建元素jquery对象let $box = $(`<div class='box box1'></div>`)console.log($box);
//获取body的jquery对象  let $body = $(document.body)
//向父元素内追加一个子元素  谁要添加谁// $body.append($box)//末尾添加// $body.prepend($box)//头部添加
let $box1 = $(`<div class='box box1'></div>`)//将子元素追加到父元素末尾// $box.appendTo($body)//添加到末尾// $box1.prependTo($body)//添加到开头
//body>.box:nth-child(2) 获取body下的第二个div 并且这个div有box类let $box2 = $('body>.box:nth-child(2)')//在一个元素的后面添加另一个元素// $box2.after($box1)//在一个元素前面添加// $box2.before($box1)
//删除当前元素   谁调用了remove()，谁就被删除了$box2.remove()
</script>
</body>
</html>

6.11 页面加载事件

<script>//ready() 准备就绪//当整个网页文件加载完成时，ready()这个函数才执行$(document).ready(function(){//这里写我们自己的脚本console.log("load end");})
//可以简化为$(function(){//这里写我们自己的脚本console.log("load end");})</script>

6.12 过滤选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 150px;background-color: aquamarine;margin: 10px;}p{background-color: bisque;}.test {border: 1px solid brown;}</style>
</head>
<body><ul>1<li class="a">11</li><li>22</li><li class="a">33</li></ul><div>2<div class="a">11</div><div>22</div><h1 class="a">33</h1><div class="a">44<p>111</p><p>222</p><p>333</p></div><h1>55</h1><h1>66</h1></div>
<!-- <form action=""> --><input type="checkbox" value="111" checked>西瓜<input type="checkbox" value="222" >苹果
<input type="radio" name="fruit" value="333" checked>西瓜<input type="radio" name="fruit" value="444" >苹果

<!-- </form> --><script src="./js/jquery-3.6.3.js"></script><script>//----子元素过滤器---///*seletor:nth-child(n)1.找到当前元素的父元素下，第n个孩子2.判断这个孩子是否匹配seletor选择器如果匹配就选择它，应用样式，如果不匹配就不选择它，这个伪类选择器失效（什么也没选中）
当前元素：所有匹配seletor选择器的元素
按照子元素在文档中出现的位置排序，从1开始
seletor：标签名、类名、id名、*:nth-child(n) 等同于 *:nth-child(n)
*///选择所有h1所在父元素下，第5个孩子//    $('h1:nth-child(5)').css('color','red')
//    $('.a:nth-child(3)').addClass('test')//    $('div:nth-child(2)').addClass('test')
//body中  所有的父元素下的第一个孩子//    $('body *:nth-child(1)').css('color','red')
/*seletor:nth-of-type(n)1.找到当前元素的第n个 跟它同标签名 的兄弟2.判断这个孩子是否匹配seletor选择器
按照同名标签在文档中出现的位置排序，序号从1开始*/// $('.a:nth-of-type(3)').css('color','blue')
//----索引过滤器---///*selector:eq(index)在匹配的集合中选择索引值为index的元素，索引从0开始匹配的集合：$('seletor')获取到的dom元素集合
这个jquery扩展出来的选择器，性能没有原生的css选择器好推荐：eq()方法
同类的:even  偶数索引     :odd    奇数索引:gt(index)  大于index的索引     :lt(index)   小于index的索引*///$('.a:eq(2)')获取到是 $('.a')这个jquery对象中的第3个元素$('.a:eq(3)').addClass('test')//----表单过滤器---//
/*:checked 匹配所有勾选的元素只适用于复选框和单选按钮   下拉菜单:selected*/function count(){//打印有几个input被选中了console.log($('input:checked').length);}$('input[type="checkbox"]').on('click',count)
function count1(){//打印有几个input被选中了let $radio = $('input:checked')$radio.each(function(index,ele){console.log(index,ele);console.log($(ele).val());})
// for(let i = 0;i<$radio.length;i++){//     console.log($radio.eq(i).val());// }}$('input[type="radio"]').on('click',count1)</script>
</body>
</html>

7.操作标签的属性和样式

属性

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

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

2.setAttribute('属性名','属性值') 为元素设置属性

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

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

样式

1.通过style属性来修改标签的样式

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

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

注意：样式名如font-size，修改为小驼峰 fontSize

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

元素对象.className += ' 类名' //注意类名前要加空格

3.通过classList属性操作类名

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

删除：元素对象.classList.remove('类名1','类名2')

8.定时器

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

1.setTimeout(要执行的函数,延迟的时长(单位：ms));

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

停止定时器

clearTimeout(timerId)

2.循环计时器

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

停止计时器

clearInterval(计时器编号)

9.文档的加载

js默认情况下是顺序执行，所以将script编写在body前面时，获取节点对象是未定义

控制文档的加载

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*js默认情况下是顺序执行，所以将script编写在body前面时，获取节点对象是未定义控制文档的加载*///可以使js在DOM渲染完成后，再加载回调函数window.onload = function () {let btn = document.getElementsByTagName('button')[0]console.log(btn);}
window.addEventListener('load', function () {let btn = document.getElementsByTagName('button')[0]console.log(btn);})</script>
</head>

<body><button>点我</button>
</body>

</html>

选择器练习：

层级选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="test"><p class='active'></p><p id="p1"></p><p class="p2"></p><p class="p2"></p><div class='active'><p></p><p class="p2"></p></div><div class='active'></div></div>
<script src="../js/jquery-3.6.3.js"></script><script>//以下下练习都要求返回jquery对象
//得到id为test的标签下，所有后代元素console.log($('#test *'));//得到id为test的标签下，含有p2的后代元素console.log($('#test .p2'));//得到id为test的标签下，所有p标签直接子元素(单指第一层)console.log($('#test>p'));//得到id为p1标签的下一个相邻兄弟(不管类型)console.log($('#p1+*'));//得到id为p1标签的所有类型为div的同级兄弟console.log($('#p1~div'));</script>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active{border: 1px solid red;}</style>
</head>
<body><ul><li class="item1">选项1<a href="#">123</a></li><li class="item2" index="1">选项2</li><li class="item3 test" index="20">选项3<a href="#">123</a></li><li class="item4">选项4</li><li class="item5  i7">选项5</li><li class="item6 test">选项6</li><li class="item7" index="12">选项7</li></ul>
<script src="../js/jquery-3.6.3.js"></script><script>//选取所有href属性等于#的标签,设置背景为红色$('[href="#"]').css('background-color','red')
//选取含有index属性的标签，设置背景为粉色$('[index]').css('background-color','pink')
//选取index属性中以2开头的标签，设置添加一个my-box类$('[index^="2"]').addClass('my-box')
//选取class属性中包含test的标签，获取它的文本let $lis = $('[class*=test]')//html()读取匹配集合(jQuey对象)中的第一个元素的文本(包括标签)// console.log($lis.html());$lis.each(function(index,ele){// console.log(ele);//dom元素对象//怎么获取每个ele的jquery对象 //1.$(dom对象)console.log($(ele).html());   })
//2. eq(index)函数  返回index索引对应dom元素的jquery对象$ele = $lis.eq(0)console.log($ele);//text()读取匹配集合(jQuey对象)中所有元素的文本console.log($lis.text());//选取class属性中以7结尾的标签，设置点击添加边框$('[class$="7"]').click(()=>{// $('[class$="7"]').addClass('active')console.log($('[class$="7"]'));$('[class$="7"]').eq(1).addClass('active')})
//选取ul下，class属性中不包含item5的标签，设置添加一个my-attr属性，属性值为111console.log($('ul [class!="item5"]'));$($('ul [class!="item5"]')).attr('my-attr')
</script>
</body>
</html>

有关删除：点击删除一行

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.out {width: 400px;margin: 100px auto;text-align: center;}
table {width: 400px;border: 1px solid rgb(232, 232, 194);border-spacing: 0;}
th,td {padding: 10px 20px;border: 1px solid rgb(232, 232, 194);text-align: center;}
form div {margin: 10px 0;}
.del {margin-left: 5px;}</style>
</head>

<body><div class="out"><table><tr><th>电影名字</th><th>上映年份</th><th></th></tr><tr><td>人生大事</td><td>2022年</td><td><button class="del">删除</button><button class="replace">替换</button></td></tr><tr><td>绿皮书</td><td>2019年</td><td><button class="del">删除</button><button class="replace">替换</button></td></tr><tr><td>深海</td><td>2013年</td><td><button class="del">删除</button><button class="replace">替换</button></td></tr></table><form action="#"><div><label>电影名字</label><input type="text" name="film" /></div><div><label>上映年份</label><input type="text" name="year" /></div><button id="addBtn" type="button">添加</button></form></div>

</body>
<script src="../js/jquery-3.6.1.min.js"></script>
<script>
//当网页结构加载完成，执行该函数$(function () {function fn1() {//事件处理函数中的this是指//触发了当前事件的那一个dom元素console.log(this);// 删除选中tr//$(this)是将this这个dom元素转换为jquery对象//为了能调用query的parent()方法，否则就只能用原生js的方法实现$(this).parent().parent().remove()
//清除tr中的内容 tr被保留// $(this).parents('tr').empty()// $(this).parents('tr').html('')}//注意1.jquery对象是一个dom元素集合，为jquery对象绑定事件时，会自动给里面的所有dom对象绑定上事件//不需要用for循环再遍历它单独为每个dom添加事件，除非你只想给某一个添加事件$('.del').click(fn1)
// 设置提交按钮的点击事件$('#addBtn').click(function () {// $('<a></a>') 创建一个元素 innerHTML//创建一个新的tr元素，并转换为jQuery对象// let name = $('input').eq(0).val()let name = $('input[name="film"]').val()let year =$('input').eq(1).val()console.log(name,year);let $tr = $(`<tr><td>${name}</td><td>${year}</td><td class="del"><button class="del">删除</button><button class="replace">替换</button></td></tr>`)//在表格添加元素$('table').append($tr)
$('.del').on('click', fn1)})
})

</script>

</html>

5.总结

VSS前端在大学学习中也浅略学习过，html的编写没有变化，重点在于CSS样式的编写，为了方便对照和笔记，将本次的CSS样式均为内部样式，实际开发中为了方便管理，常使用外部样式，在style标签中使用<link rel="stylesheet" href="(css文件路径)">，此外也有@import url（”css文件路径“）的方法导入。

学完CSS之后，我把class类理解为书，id理解为书签，使用选择器就能将一本、多本书放到若干书架的指定位置，任何时候都能把这些书搬到不同的书架上去。便能很快掌握选择器和css样式用法。但在布局上还是过于生疏，经常用错关键词。

在js的学习上遇到了不少困难，尤其是在对象的寻找上，关键词记混，记少的情况常发生，学到jQuery的时候将二者混淆了。学习事件的时候一开始无所适从，牢记了找对象-> 对象要做什么（事件函数）->什么时候做（事件监听），再来写事件绑定时就非常顺利了。

实参和形参，一开始是摸不着头脑的，后来做了笔记，实参参与运算（坐椅子），而形参是作为实参的代替（椅子），形参可以被任何对应的实参”取代“，这样函数就灵活起来了。

jQuery是第一次接触，官网上的应用举例非常多，自己实际操作还不是很熟练，还需要继续学习。

此外也需要多练习选取对象的方式。目前还是混淆居多，需要花时间对比记忆。

华清远见-重庆中心-VSS前端阶段知识点梳理相关推荐

华清远见—重庆中心——JAVA高级阶段知识点梳理
华清远见-重庆中心--JAVA高级阶段知识点梳理 String字符串 String是一个类,属于数据类型中的引用类型.Java中所有使用""引起来的内容都是属于这个类的实例,称为字 ...
华清远见-重庆中心-javaweb后端阶段知识点梳理
JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模式用户只需要一个浏览器即可访问服务器 C/S:Cl ...
清远见-重庆中心-JavaWeb后端阶段知识点梳理
Tomcat 由Apache.Sun和其他公司及个人共同开发的web服务器. 免费.开源.轻量级,在中小型系统中普遍被使用. 是开发和调试Web项目的首选. 下载官网https://tomcat.a ...
华清远见-重庆中心-JAVA基础阶段技术总结
系列文章目录第一章华清远见--重庆中心-JAVA基础阶段技术总结第二章文章目录系列文章目录文章目录前言一.关于java 1.发展历程 2.编程开发 3.java架构 4.java的特点 ...
华清远见-重庆中心-JavaWeb后端阶段技术总结
华清远见-重庆中心-JavaWeb后端阶段技术总结 JavaWeb 使用Java开发Web服务的技术,统称为JavaWeb. B/S与C/S模式 B/S:Browser/Server 浏览器/服务器模 ...
华清远见-重庆中心-JAVA面向对象阶段技术总结
华清远见-重庆中心-JAVA面向对象阶段技术总结面向对象和面向过程的编程思想面向对象(OOP) 通过创建(new)对象,赋予对象对应的行为和特征,让这些对象相互配合来解决问题面向过程(POP) ...
华清远见-重庆中心-JAVA前端JQuery阶段技术总结
jQuery jQuery是一个轻量级的javascript函数库,封装了很多javascript中的内容.jQuery的本质依然是javacript(一个.js文件). 作用 jQuery的宗旨:& ...
华清远见-重庆中心-JAVA前端JavaScript阶段技术总结
JavaScript JavaScript通常简称为JS,由网景(NetScape)公司推出. 是一门面向对象.轻量级.弱类型的解释型脚本语言. 弱类型:没有数据类型的限制,变量甚至可以不同定义就能使 ...
华清远见重庆中心—后端基础阶段技术总结/个人总结
后端基础阶段技术总结 JAVA概述 1.java的历史 Oak(橡树)语言,由Green开发团队开发,主要用于微型嵌入式设备编程,第一次提出了开源协议 . Java之父詹姆斯.高斯林经历过Sun公 ...

华清远见-重庆中心-VSS前端阶段知识点梳理

VSS 前端开发

1.html

1.1什么是html？

2.网页的基本结构

3.标签

3.1.标题标签 <h1~6>

3.2.段落标签 <p>

3.换行标签

4.转义字符

5.文本格式化标签

6.标签的类型

块级元素

7.图片标签 img

8.列表标签 li

9.超链接

10.表格标签 table标签

11.表单域 form标签

12.input标签

13.select 标签

14.textarea

15.iframe 标签

html练习：

2.CSS 样式

什么是CSS

1.内部样式

2.外部样式

3.行内样式 (内嵌、内联样式)

2.相关属性

3.选择器

3.1标签选择器

3.2 id选择器

3.3 类选择器

3.4 通配符选择器

3.5 后代选择器

3.6 子代选择器

3.8 伪类

3.9 超链接的伪类

3.10属性选择器

4.CSS三大特性

1.继承

2.优先级（权重）

3.层叠

5.文档流

块元素

6.元素的显示模式转换

7.盒模型

8.边距

9.块元素的布局

9.1. 水平布局

9.2块元素的垂直布局

10.float 浮动

11.伪元素

12.定位

14.元素的层级

3.JS

JS基础

1.<script></script>位置

2.输入输出语句

4.js变量和常量

5.标识符

命名规则

6.数据类型

6.1Number 数值

6.2String 字符串

6.3Boolean 布尔值

6.4NUll 空类型 空值

7.类型转换

8.运算符

8.1算术运算符 (双目)

8.2关系运算符

8.3逻辑运算符

8.4赋值运算符

8.5自增自减运算符

8.6条件运算符

8.7.运算符优先级

9.语句

9.1条件语句

9.2循环语句

10.数组

6.4NUll 空类型空值