一、web三大核心技术
- HTML：结构
- CSS：样式
- JavaScript：行为
二、HTML
1、基本结构与属性
- HTML：超文本的标记语言
- 超文本：文本内容+非文本内容（图片、视频、音频等）
- 标记：即标签，形式为
< 单词 >；包含单标签<br>，双标签<header></header>;标签可以上下排序，也可以组合嵌套 - 语言：编程语言
- 标签的属性：用来修饰标签的，设置当前标签的一些功能
2、初始代码
<!DOCTYPE html> //文本声明：告诉浏览器这是一个html文件
<html lang="en"> //html文件最外层标签，包含着所有html标签代码 lang="en"表示是一个英文网站，lang="zh-CH"表示是一个中文网站
<head>
<meta charset="UTF-8"> //元信息，是编写网页中的一些赋值信息，charset="UTF-8"是国际编码，防止出现乱码
<title>我的标题</title> //设置网页标题
</head>
<body>
显示网页内容区域
</body>
</html>
3、注释
形式： <！-- 注释内容 -->
快捷键：ctrl + / 或 alt + shift + a
4、标题和段落
- 标题：双标签，从一级标题到六级标题
- 段落：双标签，< p > 段落内容 < /p >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落</p>
</body>
</html>
5、文本修饰标签
<strong></strong> //加粗
<em></em> //斜体
<sub></sub> //下标
<sup></sup> //上标
<del></del> //删除线
<ins></ins> //下滑线
<i></i> //表示斜体文本
<span></span>用于定义单独样式（使用css定义）
6、图片标签
img -> 单标签
src：引入图片地址
alt：当图片出现问题时，可以显示提示文字
title：鼠标放置在内容上面可以显示提示信息
width、height：图片大小
7、引入文件地址路径
- 相对路径（相对于当前路径进行使用）
.在路径中表示当前路径..在路径中表示上一级路径
- 绝对路径（网站链接等）
8、超链接
a 标签->双标签
href属性：链接地址
target属性：可以改变链接的打开方式
base 标签->单标签
作用是改变链接的默认行为，一般编写在<head></head>中
9、锚点跳转
- 方式一：
使用 #号 + id 属性
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JS</a>
<h1 id="html">HTML</h1>
<h1 id="css">CSS</h1>
<h1 id="js">JS</h1>
- 方式二：
使用 #号 + name 属性（name属性是加在a标签中）
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JS</a>
<a name="html"></a>
<h1>HTML</h1>
<a name="css"></a>
<h1>CSS</h1>
<a name="js"></a>
<h1>JS</h1>
10、特殊字符
空格符：
小于号：<
大于号：>
版权：©
注册商标：®
根号：&
人名币：¥
摄氏度：°
11、列表标签
- 无序列表
ul li
ul 表示列表的最外层容器
li 表示列表的列表项
（注意：ul 和 li 之间不能嵌套别的东西）
type 属性：改变前面的标记样式（一般用CSS控制） - 有序列表
ol li
ol 表示列表的最外层容器
li 表示列表的列表项
（注意：ol 和 li 之间不能嵌套别的东西）
type 属性：改变前面的标记样式（一般用CSS控制） - 定义列表
dl dt dd（列表需要添加标题和对标题进行描述的列表） - 列表之间可以相互嵌套，形成多层级的列表
12、表格标签
<table>表格的最外层容器<tr>定义表格行<th>定义表头<td>定义表格单元<caption>定义表格标题- 语义化标签：
<tHead><tBody><tFoot>
（注：一个table中可以出现多次tBody，但<tHead><tFoot>只能出现一次）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<caption>学生信息</caption>
<tHead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</tHead>
<tBody>
<tr>
<td>张三</td>
<td>15</td>
<td>男</td>
</tr>
<tr>
<td>王老</td>
<td>18</td>
<td>女</td>
</tr>
</tBody>
<tFoot>
</tFoot>
</table>
</body>
</html>
- 表格属性：
border表格边框
cellpadding单元格内的空间大小
cellspacing多个单元格之间的空间大小
rowspan合并行
colspan合并列
align:left、center、right左、中、右对齐
calign:top、middle、bootom上、中、下对齐
13、表单标签
form表单的最外层容器input（单标签）用于收集用户信息，根据不同的type属性值显示不同的效果- type属性：
text普通的文本输入框password密码输入框checkbox多选框radio单选框file上传文件submit提交按钮reset重置按钮
- type属性：
textarea多行文本框selectoption下拉菜单lable辅助表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<p>输入框：</p>
<input type="text" placeholder="请输入用户名">
<p>密码框：</p>
<input type="password" placeholder="请输入密码">
<p>多选框：</p>
<input type="checkbox" checked>香蕉
<input type="checkbox">苹果
<input type="checkbox">梨
<input type="checkbox" disabled>葡萄
<p>单选框：</p>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<p>上传文件</p>
<input type="file">
<p>提交和重置按钮</p>
<input type="submit">
<input type="reset">
<p>多文本框</p>
<textarea cols="30" rows="10"></textarea>
<p>下拉菜单</p>
<select>
<option selected disabled>请选择</option> //selected 默认选中，disabled 不可选中
<option>上海</option>
<option>北京</option>
<option>南京</option>
</select>
<p>
<input type="radio" name="sex" id="man"><label for="man">男</label> //label 扩大鼠标点击选中的范围
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
</p>
<p>上传文件</p>
<input type="file" multiple> //multiple 可进行多选
</form>
</body>
</html>
14、div和span
div做一个区域划分的块span对块其中文字进行修饰的内联
15、link标签
- 作用：引用外部资源，主要用于引入CSS、网页图标等
- 属性：rel、href
<!--引入css
stylesheet定义引入的格式为样式表
href代表引入的链接、地址
-->
<link rel="stylesheet" href="css/index.css" />
<!--引入小图标
icon定义引入的格式为网页小图标
href代表引入的链接、地址
-->
<link rel="icon" href="..." />
16、meta
作用：定义页面文本编辑类型，定义窗口大小对应的显示模式
<!--定义编码类型为utf-8-->
<meta charset="utf-8" />
<!--scheme 属性用于指定要用来翻译属性值的方案
http-equiv 属性为名称/值 (content里的值)提供了名称
name="viewport"表示的是定义窗口视图情况
content="width=device-width, initial-scale=1.0"
width=device-width:表示根据设备的视图宽度调整网页宽度
initial-scale=1.0：设置浏览器首次加载页面时的初始缩放级别
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17、其他
- video：标签定义视频，比如电影片段或其他视频流
- audio：标签定义声音，比如音乐或其他音频流
- canvas：用来处理图片、绘制图像等功能，是使用JavaScript操作图像的技术
三、CSS
1、CSS语法格式
选择器 { 属性1 : 值1 ; 属性2 : 值2 ; ... }
常见属性：
width ：宽
height ：高
background-color ：背景颜色
长度单位：
px ：像素
% ：百分比
2、CSS样式的引入方式
- 内联样式
style属性
<div style="background-color: red; width: 50%;height: 100px;">这是一个块</div>
- 内部样式（常用）
style标签
<style>
div{background-color: aqua;width: 300px;height: 100px;}
</style>
- 外部样式
引入一个单独的CSS文件name.css
通过 link 标签引入外部资源，其中 rel 属性指定资源跟页面的关系（一般值为stylesheet），href 属性指定资源的地址
<link rel="stylesheet" href="./03_1外部样式.css">
还可以通过 @import 方式引入外部样式（不推荐使用）
3、颜色表示法
- 单词表示法
- 十六进制表示法：
#000000 - rgb三原色表示法：
rgb(0,0,0) - 透明颜色：
transparent
4、背景样式
- 背景颜色
background-color - 背景图
background-imageurl(背景地址)- 默认会水平垂直平铺满背景图
- 平铺方式
baackground-repeatrepeat-xx轴平铺repeat-yy轴平铺repeat默认x、y都平铺no-repeat都不轴平铺
- 背景图位置
background-positionx,y数字xleft 、center、rightytop、center、bottom
- 背景图随滚动条移动
background-attachmentscroll默认值（背景图位置是按照当前位置进行偏移）fixed（背景图位置是按照浏览器进行偏移）
5、边框样式
border-style边框类型solid实线dashed虚线dotted点线
border-width边框大小border-color边框颜色- （边框也可以针对某一条边进行单独设置，如
border-left-style，其中left还可换为rightbottomtop）
6、文字样式
font-family字体类型- 中文（宋体…）、英文（Arial…）
- 衬线体、非衬线体
- 注意：
- 设置多个字体的作用：适应更多计算机设备
- 单引号的作用：样式类型的英文名称存在空格需要使用单引号包起来
font-size字体大小- 默认：16px
- 写法：数字（px）或 单词（small large 不推荐使用）
- （一般设置为偶数）
font-weight字体粗细- 写法：单词（正常
normal、加粗bold）或 数字（100、200、… 、900）
- 写法：单词（正常
font-style字体样式- 正常
normal - 斜体
italic（注：oblique也可以表示斜体，但没有倾斜性的字体也能倾斜，使用较少）
- 正常
7、段落样式
text-decoration文本修饰underline下划线line-through删除线overline上划线none不添加任何修饰- 可以添加多个修饰，用空格隔开
text-transform文本大小写（针对英文段落）lowercase小写uppercase大写capitalized首字母大写
text-indent文本缩进- 首行缩进
- em单位，1em永远等于字体大小
text-align文本对齐left、right、center、justify(左右两边对齐)
line-height行高- 包括 上边距、字体大小、下边距
- 默认值(不固定，与字体大小有关)
- 值：数字（px） 或 比例值（与字体大小成比例）
letter-spacing字间距word-spacing词间距（针对英文段落）- 自动折行
word-break:break-all(非常强烈的折行)word-wrap:break-word(不是很强烈的折行，会产生些空白)
8、复合样式
- 写法：通过空格的方式实现；background、border的复合样式不用考虑顺序，但 font 需要注意顺序
background:red url() repeat 0 0;border:1px red solid;font- 必需要有两个值
size family，并且这两个值需要按照这个顺序且放到末尾处 - 例如
font: weight style size family font: weight style size/line-height family添加行高的写法
- 必需要有两个值
- 注：如果使用混合写法，必须先写复合样式后再写单独的样式，防止样式被覆盖
9、CSS选择器
- id 选择器
#elem{}
id = elem”
注：- id是唯一值，在一个界面中一个id只能出现一次
- 命名由 字母、下划线、中划线、数字 组成（第一位不能是数字）
- 写法一般为 驼峰写法、短线写法、下划线写法
- class 选择器
.elem{ }
class = "elem"
注：- class选择器可以复用
- 可以添加多个的class样式，用空格隔开
- 多个样式时，样式优先级是根据CSS中的顺序决定的，后写的优先级高
- 标签 + 类 的写法，例如
div.elem{ }
- 标签选择器（TAG选择器）
div{ }<div></div>
使用场景：- 去掉某些标签的默认样式
- 群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用 - 通配选择器
*{ }（一般不推荐使用） - 层次选择器
后代M N{ }
父子M > N{ }
兄弟M ~ N{ }（当前M下面的所有兄弟）
相邻M + N{ }（当前M下面相邻的N标签） - 属性选择器
M [] {}
=：完全匹配
*=：部分匹配
^=：起始匹配
$：结束匹配
M[][][]：组合匹配 - 伪类选择器
M:伪类{}
:link访问前样式（只能添加a标签）
:visited访问后样式（只能添加a标签）
:hover鼠标移入时样式（可以添加任何样式）
:active鼠标按下时样式（可以添加任何样式）
:before、:after通过content在文本前或后面添加一段文本，可以单独对添加的文本进行修饰
:checked、:disabled对选框和不可选中框进行修饰
:focus对文本框进行修饰
结构性伪类选择器：
nth-of-type()nth-child()
括号从1开始，1表示当前标签的第一项，2表示当前标签的第二项，n表示从0到最大
first-of-type首项
last-of-type尾项
only-of-type唯一一项
10、CSS继承
- 文字相关的样式可以被继承
- 布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性-----inherit值）
11、CSS优先级
- 相同样式优先级
当设置相同样式时，后面的优先级较高 - 内部样式和外部样式
内部样式和外部样式优先级相同，如果设置了相同样式，则后写的优先级高 - 单一样式优先级
style行间 > id > class > tag(标签) > * > 继承
注：
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1 - ! important
提升样式优先级，非规范方式，不推荐使用（不能针对继承的属性进行优先级提升） - 标签+类 与 单类
标签+类 优先级 > 单类 优先级
例如div.box{}优先级大于.box{} - 群组优先级
群组选择器与单一选择器的优先级相同，后写的优先级高 - 层次优先级
- 通过权重比较（多个选择器权重相加，不过权重级别小的无论怎么相加都无法高于权重级别高的）
- 通过约分比较（相同的权重级别相约去）
12、盒子模型
- 组成：
从内到外：content(物品) -> padding(填充物) -> border(包装盒) -> margin(盒子与空气之间) content内容区域，由widthheight组成padding内边距
只写一个值：30px(上下左右)
写两个值：30px、40px(上下、左右)
写四个值：30px、40px、50px、60px(上、右、下、左)- 单一样式只写一个值
padding-left
padding-right
padding-top
padding-bottom
- 单一样式只写一个值
margin外边距
只写一个值：30px(上下左右)
写两个值：30px、40px(上下、左右)
写四个值：30px、40px、50px、60px(上、右、下、左)- 单一样式只写一个值
margin-left
margin-right
margin-top
margin-bottom
- 单一样式只写一个值
- 注：
- 背景颜色填充到margin以内的区域(不包括margin区域)
- 文字在content区域内添加
- padding不能是负数，而margin可以是负数
box-sizing可以改变盒子模型的展示形态- 默认值：
content-box==>使得 width、height 只作用于 content
border-box==>使得 width、height 作用于 content、padding、border
- 默认值：
- 盒子模型的一些问题：
- margin 叠加问题，出现在上下 margin 同时存在的时候，会取其中值较大的进行叠加
- margin 传递问题，出现在嵌套的结构中，只是针对 margin-top 的问题，当一个盒子内部嵌套另一个盒子，给内部盒子添加margin-top时，外部盒子也会出现margin-top
- 扩展：
- margin 左右自适应
auto，但是上下无法自适应 - width、height 不设置时，会自动计算容器大小，节省代码
- margin 左右自适应
13、标签分类
- 按类型：
- block(块)：
div、p、ul、li、h1 ...- 独占一行
- 支持所有样式
- 不写宽时与父元素宽大小相同
- 所占区域是一个矩形
- inline(内联)：
span、a、em、strong、img ...- 左右并排
- 有些样式不支持，例如：
width、heightmargin、padding的部分方向 - 宽度由内容决定
- 所占区域不一定是矩形
- inline-block：
input、select ...- 左右并排，但支持宽高
- 注：布局一般用块标签，修饰文本一般用内联标签
- block(块)：
- 按内容：
- Flow：流内容（文档和应用程序正文中使用的大多数元素都归类为流内容）
- Metadata：元数据（元数据内容是设置其余内容的表示形式或行为的内容，或者设置文档与其他文档的关系，或传达其他“带外”信息的内容）
- Sectioning：分段（分段内容是定义范围和元素的内容）
- Heading：标题（标题内容定义节的标题）
- Phrasing：措辞（措辞内容是文档的文本，以及在段落内级别标记该文本的元素）
- Embedded：嵌入的（嵌入内容是将另一个资源导入文档的内容，或从插入到文档中的其他词汇中的内容）
- Interactive：互动的（交互式内容是专门用于用户交互的内容）
- 按显示：
- 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，如`img、input
- …`
- 非替换元素：将内容直接告诉浏览器，将其直接显示出来，如
div、h1、p ...
14、 显示框类型
displayblockinlineinline-blocknonedisplay:none与visibility:hidden的区别display:none不占空间的隐藏visibility:hidden占空间的隐藏，隐藏的对象空间保留着
15、标签嵌套规范
- 块标签可以嵌套内联标签
- 块标签不一定能嵌套块标签(如：p标签里不能嵌套div标签)
- 内联标签大部分情况下不能嵌套块标签
- 特例：
<a> <div></div> </a>
- 特例：
16、溢出隐藏
overflow、overflow-x、overflow-yvisible默认hidden隐藏scroll滚动条auto自动出滚动条
17、透明度
opacity：0(透明) ~ 1(不透明)- 占空间，所有子内容也会透明
- rgba():0 ~ 1
- 可以让指定样式透明，不影响其他样式
-如background-color: rgba(245, 68, 68, 0.5); //背景颜色半透明
- 可以让指定样式透明，不影响其他样式
18、鼠标手势
cursordefault默认箭头- 若要自定义手势：
- 准备图片：后缀为 .cur、.ico
- 如
cursor: url(../image/1.ico),auto;
19、最大、最小宽高
min-width、max-width
min-height、max-height- 一个容器怎么自适应屏幕高度
- 用%单位换算
- 容器加
height:100%;、body:100%;、html:100%;
- 容器加
- 用%单位换算
20、默认样式
- 没有默认样式：
div、span - 有默认样式：
- body - > margin : 8px
- h1 - > margin : 上下 21.44px ; font-weight : bold
- p - > margin : 上下 16px
- ul - > margin :上下 16px ; padding :左40px ; 默认点：list-style : disc
- a - > text-decoration : underline;
21、简单的css样式重置
*{ margin : 0 ; padding : 0 ;}
优点：不用考虑哪些标签有默认margin、padding
缺点：稍微影响性能ul{ list-style : none }去掉前面的点的样式a{ text-decoration : none ; color : #999}去掉下划线- 引入图片时图片跟容器底部有一些空隙，是因为内联元素的对齐方式是按照文字基线对齐的，不是按照文字底线对齐的，解决方法：
img{ display : bloick}将其转换位块元素
或
将vertical-align : baseline;(默认值，基线对齐)变为vertical-align : bottom;(底部对齐)
- 写具体页面或一个布局效果时：
- 1.写结构
- 2.css重置样式
- 3.写具体样式
22、浮动
float脱离文档流，沿父容器靠左或靠右进行排序left、right、none
- 注意点：
- 只会影响后面的元素
- 内容默认提升半层(字体不会被覆盖)
- 没设置宽值时，默认宽根据内容决定
- 当排列超出父容器时，会换行排列(会出现被不同高度的浮动物改变位置等状况)
- 主要给块元素添加，也可以给内联元素添加
- 清除浮动
- 上下排序：
clear:left、right、both - 嵌套排序：
- 固定宽高：不推荐，不适合做自适应
- 父元素浮动：不推荐，会影响到后面的元素
overflow:hidden如果子元素想溢出会受到影响display:inline-block不推荐，会影响到后面的元素- 设置空标签：不推荐，会多添加一个标签
- after伪类：推荐，是空标签的加强版（clear属性只会操作块标签，对内联标签不受影响）
- 上下排序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width: 200px;
border: 1px black solid;
}
#d2{
width: 100px;
height: 300px;
background-color: red;
float: left;
}
#d1::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
23、定位
positionstatic默认relative相对定位- 若没有定义偏移量，对元素本身没有任何影响
- 不使元素脱离文档流
- 不影响其他元素布局
left、top、right、bottom是相对当前元素自身进行偏移的
absolute绝对定位- 使得元素完全脱离文档流
- 使内联元素支持宽高(让内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联特性)
- 若存在有定位(相对、绝对、固定)的祖先元素，则按照该祖先元素进行偏移，否则按照文档进行偏移(当前页面的位置，会受滚动跳影响)
fixed固定定位- 使得元素完全脱离文档流
- 使内联元素支持宽高(让内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联特性)
- 相对于整个浏览器窗口进行偏移，不受浏览器滚动条影响
sticky黏性定位- 在指定的位置，进行黏性操作
z-index定义层级- 默认层级为0
- 覆盖时，层级高则覆盖在上面(层级比较先比较同辈的，若同辈无定义，则比较其后辈的)
24、添加省略号
- 需要有宽
width - 不让内容折行
white-space:nowrap - 隐藏溢出内容
overflow:hidden - 添加省略号
text-overflow:ellipsis
25、CSS Sprite
- 是一种网页图片应用处理方式，即将一个页面涉及到的所有零星图片都包含到一张大图中，然后通过调用不同位置的零星图片进行使用
26、圆角
border-radius给标签添加圆角
div{ width: 200px;height: 100px;background: red;border-radius: 100px;} //圆
div{ width: 200px;height: 200px;background: red;border-radius: 50%;} //圆
div{ width: 200px;height: 200px;background: red;border-radius: 10px 100px;} //左上及对角为10px 右上及对角为100px
div{ width: 200px;height: 200px;background: red;border-radius: 10px 50px 100px 150px;} //左上 右上 右下 右上
div{ width: 200px;height: 200px;background: red;border-radius: 20px/40px;} // 以椭圆边进行变化
div{ width: 200px;height: 100px;background: red;border-radius: 100px 100px 0 0;} //半圆
27、页面中长度单位的定义
- vw、vh：根据屏幕百分比来计算显示使用的像素值
- 100vw表示占屏幕宽度100%
- 100vh表示占屏幕高度100%
- 主要用于移动端开发，适配不
同大小的屏幕
- font-size、em
- font-size：用于定义单位长度的像素值
- em：1em等于1个font-size的长度
- 作用：统一了长度的大小，可以通过改变font-size值，去改变所有的元素的大小
28、flex弹性盒模型
- 在嵌套模型中，父元素为弹性盒模型
display:flex时，其子元素可以用margin:auto进行上下左右距中 flex-direction用来控制子项整体为行还是列row默认值，显示为行，方向默认从左到右row-reverse显示为行，方向于row相反column显示为列，方向默认从上到下column-reverse显示为列，方向于column相反
flex-wrap用来控制子项整体单行显示还是换行显示nowrap默认值，不换行，若大小溢出会自动减小大小防止溢出，但会受其中内容无法压缩了则会溢出wrap宽度不足时换行，会平均分配上下的大小wrap-reverse宽度不足时换行，但是是从下往上开始的
flew-flow是flex-direction和flex-wrap的缩写，表示flew布局的流动特性，第一个值表示方向，第二个值表示换行，中间用空格隔开justify-content决定主轴方向(以行方向为轴还是以列方向为轴)上子项的对齐方式和分布方式-
flex-star默认值，与起始位置对齐 -
flex-end与结束位置对齐 -
center居中对齐 -
space-between表现为与起始两端对齐，每个子项之间分配空格
-
space-around每个子项两边都有等宽的空白间隔
-
space-evenly空白间隔相同
-
align-items子项相对于flex容器在侧轴方向(于主轴方向相反的方向)上的对齐方式stretch默认值，子项拉伸，默认高度于flex容器相同flex-start与容器顶部对齐flex-end与容器底部对齐center垂直居中对齐
align-content针对flex中具有两行及以上的子项在侧轴方向上的对齐方式，只有一行的不起作用stretch默认值，子项拉伸，默认高度于flex容器相同flex-start与容器顶部对齐flex-end与容器底部对齐center垂直居中对齐space-between表现为上下两端对齐，每行之间分配空格space-around每一行都有等宽的空白间隔space-around每一行都有等宽的空白间隔
29、作用在flex子项上的CSS属性
order默认值为0，通过设置值改变某一个flex子项的排序位置flex-grow扩展子项所占的宽度，并消耗掉空白区域相应的比例值- 默认值为0
- 当大于等于1时则说明没有空白区域，值越大该子项占的宽度就越大
flex-shrink收缩，处理flex空间不足时子项的收缩比例- 默认为1
- 值为0时表示不收缩，值大于1时收缩更多
flex-basis定义在分配剩余空间之前元素的默认大小，与width作用相似，优先级高于widthflew是flex-grow、flex-shrink、flex-basis的复合写法，三个值之间用空格隔开align-self作用与align-item相同，只不过这可以单独控制某个子项
30、grid网格布局
- 网格剩余空间比例单位：fr单位
grid-template-row和grid-template-columns- 对网格的行和列进行布局划分，单位可以是像素、百分比、自适应、fr单位
- 当划分区域有很多且大小相同，则可用
repeat()来设置，如grid-template-row:repeat(10,1fr) //10行，每行大小为1fr
grid-template-areas和grid-templategrid-template-areas- 是给网格划分区域（注：只能是矩形形状，不能是特殊图形）
- 子项用
grid-area属性指定其隶属的区域
grid-templategrid-template-row、grid-template-columns和grid-template-areas的复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{
width: 300px;height: 300px;border: 1px black solid;display: grid;
/*单独写法 */
grid-template-rows:repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3" ;
/* 复合写法 */
grid-template:
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;
}
#box1 div{background-color: red;border: 1px solid black;}
#box1 div:nth-child(1){grid-area: a1;}
#box1 div:nth-child(2){grid-area: a2;}
#box1 div:nth-child(3){grid-area: a3;}
</style>
</head>
<body>
<div id="box1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
grid-row-gap和grid-column-gap- 用来定义网格中的网格间隙尺寸
- 复合写法：
grid-gap，值为先横后纵，空格隔开
justify-items和align-itemsjustify-items指定网格元素水平呈现方式；align-items指定网格元素垂直呈现方式（针对网格内的每个元素）stretch默认值，拉伸状态start与左侧或顶部对齐end与右侧或底部对齐center水平居中或垂直居中
- 复合写法：
place-items，值为先纵后横，空格隔开
justify-content和align-contentjustify-content指定网格元素的水平分布方；align-content指定网格元素的垂直分布方式（针对整个网格）stretch默认值，拉伸start容器左侧或顶部对齐end容器有侧或底部对齐center水平或垂直居中对齐space-betweenspace-aroundspace-around
- 复合写法：
place-content，值为先纵后横，空格隔开
31、作用在grid子项上的CSS属性
grid-column-start和grid-column-end- 子项水平方向的起始位置和结束位置(网格线位置值是从左到右从1开始)
grid-column-end结束位置值可以是span属性值，即结束所占的格数，如grid-column-end:span 2; //结束时占两位置
grid-row-start和grid-row-end- 子项垂直方向的起始位置和结束位置(网格线位置值是从上到下从1开始)
grid-row-end结束位置值可以是span属性值，即结束所占的格数，如grid-row-end:span 2; //结束时占两位置
- 复合写法：
grid-column、grid-row- 值为 起始 和 结束，中间用 “ / ” 隔开
grid-area- 当前网格所占的区域、名字的表示方法
- 位置的表示方法，如
grid-area: 3 / 4 / 2 / 2 ; // 第一个值为横向的起始位置，第二个值为纵向的起始位置，第三个值为横向的结束位置，第四个值为纵向的结束位置
justify-self和align-self- 单个网格元素的水平或垂直对齐方式
- 复合写法：
place-self，值为先纵后行，空格隔开
三、JavaScript
1、引入JavaScript
- 内部引入：
- 直接使用script标签，即
<script type="text/javascript"></script>； type默认值是text/javascript，一般不用显示定义type，即<script></script> - 一般写在head中的末尾 或 body中的末尾
- 直接使用script标签，即
- 外部引入：
<script src="./demo.js" ></script>- 注：外部引入script标签必须成对出现
2、基础语法入门
- 定义变量：
变量类型(var) 变量名 = 变量值; alert("...");//弹出内容console.log("...")；//在控制台中打印出内容，相当于java中的System.out.println()- 代码调试：在浏览器的控制台中进行调试
- 数据类型
数值、文本、图形、音频、视频 等-
number
js不区分小数、整数等
123 //整数123
1.123e3 //科学计数法
-99 // 复数
NAN // 不是一个数
Infinity // 无限的的数 -
字符串
‘abc’、”abc“ -
布尔值
true、false -
逻辑运算
$$ 与
|| 或
! 非 -
比较运算符
=
==等于（类型不一样，值一样，也会判断为true）
===绝对等于（类型一样，值一样，结果为true）
注：NaN与所有值结果不相等，包括自己；如NaN===NaN，结果为false；只能通过 isNaN(NaN) 来判断 -
浮点数问题
(1/3) === (1-2/3) //结果为false； 尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3)<0.000000001)通过相差小于某个极小值可以来判断是否相等 -
null 和 undefined
null空
undefined未定义 -
对象
对象使用大括号，数组使用中括号（里面可以包含各种类型的值），每个属性之间使用逗号隔开，最后一个不需要添加逗号
-
var person={
name:"wao",
age:18,
num:[1,2,3,4]
}
4、严格检查模式
'use strict'严格检查模式，预防JavaScript的随意性导致的一些问题；前提：需要设置ES6语法
'use strict'//严格检查模式，预防JavaScript的随意性导致的一些问题;前提：IDEA需要设置ES6语法
i=1;//全局变量，设置完严格检查模式后这里会报错
var z = 1;//局部变量
let a=1;//局部变量建议都使用let去定义
5、数据类型
1.字符串
- 正常字符串使用 ’ ’ 或 " " 包裹
- 转义字符
\' 或 \"在字符串里面加入单引号或双引号\n换行\tTAB键\uxxxx由 4 位十六进制数值xxxx指定的 Unicode 字符\x41Ascll字符
- 多行字符串编写
- 使用
``（TAB键上面的点）包裹
- 使用
var msg = `
hello
world
wao
`
- 模板字符串
let name = "wao";
let msg = "你好呀，${name}";//输出 你好呀，wao
- 字符串长度
str.length - 字符串的不可变性
let student = "student";
console.log(student[0]);//输出s
stunent[0]=1;
console.log(student[0]);//输出s,不可变
- 大小写转换
student.toUpperCase()student.toLowerCase()
- indexOf 获得下标索引
student.indexOf(t) //输出1
substringstudent.substring(1) //输出tudent从头到尾student.substring(1,3) //输出tu含头不含尾
2.数组
存储数据（如何存，如何取）
- 数组里面可以包含任意的数据类型
var arr =[1,2,3,4,5,6]
- 长度
arr.length
- 数组的可变性
- 可以改变数组里面的元素
- 可以改变数组的长度，给
arr.length赋值时，数组大小会发生变化；如果赋值过小元素会丢失
- indexOf() 通过元素获得下标索引
arr.indexOf(2) // 输出1
注：字符串的 “1” 和 1 是不同的 - slice() 截取数组的一部分，返回新的数组，类似于String中的
substring - push() 、pop()
- push ：将元素插入尾部
- pop ：弹去尾部的一个元素
arr.push("a","b"); // [1,2,3,4,5,6,"a","b"]
arr.pop(); // [1,2,3,4,5,6,"a"]
- unshift() 、shift()
- unshift：将元素插入头部
- shift：弹去头部的一个元素
sort()排序
arr = ["B","C","A"];
arr.sort(); // ["A","B","C"]
reverse()元素反转
arr = ["A","B","C"];
arr.reverse(); // ["C","B","A"]
concat()
arr = ["C","B","A"];
arr.concat([1,2,3]); // ["C","B","A",1,2,3]
//注：concat()没有修改数组，会返回一个新的数组
- 连接符join
arr = ["C","B","A"];
arr.join('-'); // ["C-B-A"]
- 多维数组
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]; // 4
3.对象
- 由若干个键值对组成，键值对描述属性为 xxxx:xxxx，多个属性之间用逗号隔开，最后一个属性不用逗号（注：JavaScript中所有的键都是字符串，值是任意对象）
var 对象名 = {
属性名 : 属性值 ,
属性名 : 属性值 ,
属性名 : 属性值
}
//定义一个person对象
var person{
age:18,
name:"wao",
id:"11"
}
- 对象赋值
person.name = "waowao"
- 使用一个不存在的对象属性时，不会报错，显示undefined
person.sex //undefined
- 动态删减属性，通过delete删除对象属性
delete person.name
- 动态添加，直接给新的属性添加值即可
person.sex = "男"
- 判断属性值是否在这个对象中
' age ' in person //true
' toString ' in person //true,继承关系
- 判断一个属性是否是这个对象自身拥有的
hasOwnproperty()
person.hasOwnProperty('toString') //false
person.hasOwnProperty('age') //true
4.流程控制
- if判断
- while循环（避免死循环）
- for循环
- forEach循环遍历数组
let age=[21,5,2,548,21,8,45];
//函数
age.forEach(function (value){
console.log(value)
})
- for…in 遍历数组
let age=[21,5,2,548,21,8,45];
for (let num in age){
console.log(age[num])
}
5.Map 和 Set
- Map：
//学生名字，学生成绩
// let name = ["tom","mark","jack"];
// let score = [100,80,75];
let map = new Map([ ["tom",100],["mark",80],["jack",75] ]);
let name =map.get("tom");// 通过key获得value值
map.set('admin',123456);//新增 或 修改
map.delete("tom");//删除
- Set 无序不重复集合
let set = new Set([3,2,1,1,1,1]);// [3,2,1]
set.add(5);//添加
set.delete(3);//删除
console.log(set.has(3));//是否包含
6.iterator
- 遍历数组时可以通过下标进行遍历
for...in，遍历Map和Set时则无法使用下标遍历，则统一使用for...of循环进行遍历 - 遍历数组
let arr = [21,596,216,3,82,45];
//用for...of
for (let x of arr){
console.log(x);
}
//用for...in
for(let x in arr){
console.log(arr[x]);
}
- 遍历map
let map = new Map([["tom",120],["jack",100],["mary",110]]);
for (let x of map){
console.log(x);
}
- 遍历set
let set = new Set([3,5,4,8]);
for (let x of set){
console.log(x);
}
6、函数
1. 定义函数
- 定义方式一
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
注：
1）函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回
2）如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined
- 定义方式二
var abs = function(x){
if(x>=0){
return x;
}else {
return -x;
}
};
function (x) { ... }是一个匿名函数，将这个匿名函数赋值给变量abs，通过变量abs可以调用该函数
- 调用函数
abs(10);//返回10
//传入任意参数不影响调用
abs(-9,'wao','l',null); //返回9
// 传入参数比定义的少也可以正常使用
abs();//undefined,返回NaN
可以通过手动抛出异常来规避undefined
function abs(x) {
if (typeof x !== 'number') {
throw 'Not a number';
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
- arguments
获得调用者传入的所有参数，是一个数组
function arr(x){
for (
let i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
arr(10,20,30,40,50);//10 20 30 40 50
- rest
获取除了已经定义的参数之外的所有参数
rest参数只能写在最后面，且必须使用...标识
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// a = 1
// b = undefined
// Array []
2.变量的作用域
var声明的变量变量在函数体内时，该变量只能在当前的函数体内使用
function text(){
var x = 1 ;
x=x+1;
}
x = x + 2; //报错
- 若存在多个不同的函数体声明了同一个变量，则该变量只在各个函数体内作用，互不影响
function text1(){
var x = 5;
x = x + 1;//6
}
function text2(){
var x = 'a';
x = x + 'b';//ab
}
- 在嵌套的结构体内，内部函数可以访问外部函数的变量，反之不行
function outer(){
var x = 10;
function inner(){
var y=x+1;
console.log(y);// 11
}
var z = y+1;// y is not defined
}
- 在嵌套的结构体内，若内函数的变量和外函数的变量重名时，会从 “内” 到 “外” 查找，以在该结构体内的变量为主
function outer(){
var x = 10;
function inner(){
var x = 'a';
console.log('inner ->'+x); //inner->a
}
inner();
console.log('outer->'+x);//outer->10
}
- 变量作用域的提升
function text(){
var x = 'x' + y;
console.log(x);//输出：xundefined
var y='y';
}
这里y的声明被提升了，但是其赋值不会被提升，相当于：
function text(){
var y ;
var x = 'x' + y;
console.log(x); //输出：xundefined
y='y';
}
因为存在这种特性，规范 所有的变量定义都放在函数体的头部
function text(){
var x = 1,
y = x + 1,
z , a , q ;
}
- 全局函数
x =1;//全局变量
function f(){
console.log(x);// 1
)
f();
console.log(x);// 1
全局对象window
var x = 'a' ;//全局变量
alter(x);
alter(window.x);//结果与alter(x)相同
即默认所有的全局变量都会自动绑定在window对象下；alert()函数也是一个window变量
JavaScript实际上只有一个全局作用域，任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误
- 名字空间
全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，会造成命名冲突，减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中
var ONLY={};//唯一的全局变量
//其他变量
ONLY.name='only';
ONLY.age=18;
//其他函数
ONLY.text=function (){
//...
};
把自己的代码全部放入自己定义的唯一名字空间，降低全局命名冲突的问题
- 局部作用域 let
function text(){
for(var i = 0;i<10;i++){
console.log(i);
}
console.log(i+1);//这里i出了作用域还可以用
}
//使用let关键字进行解决
function text2(){
for(let i = 0;i<10;i++){
console.log(i);
}
console.log(i+1);// i is not defined
}
- 常量 const
const PI='3.14';
console.log(PI);
PI='123456'; //报错，常量无法改变
3.方法
- 定义方法
在一个对象中绑定函数，称为这个对象的方法
对象里只有两个东西：属性、方法
var xiaoming = {
name:'小明',
birth:2001,
//方法
age:function(){
var now = new Date().getFullYear();
return now-this.birth;
}
}
//调用方法，一定要带（）
xiaoming.age();
上面代码也可以写成
function getAge(){
var now = new Date().getFullYear();
return now-this.birth;
}
var xiaoming = {
name:'小明',
birth:2001,
age:getAge
}
xiaoming.age(); //21
getAge();//NaN,这里的this指向的是window
注：this指向的是被调用的对象
- apply
可以控制this的指向，接收两个参数，第一个参数是需要绑定this的变量，第二个是函数本身的参数，Array的形式
function getAge(){
var now = new Date().getFullYear();
return now-this.birth;
}
var xiaoming = {
name:'小明',
birth:2001,
age:getAge
}
getAge.apply(xiaoming,[]); //21 这里this指向的变量是xiaoming，参数为空
7、内部对象
1.Date
var now = new Date();
now.getFullYear();//年
now.getMonth();//月 从0到11，表示1月到12月
now.getDate();//日
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳，全世界统一
console.log(new Date(1659796411819)) //时间戳转为时间，Sat Aug 06 2022 22:33:31 GMT+0800
//转化
now = new Date(1659796411819);
now.toLocaleString();//转化为本地时间：2022/8/6 22:33:31
now.toGMTString();//转化为UTC时间：Sat, 06 Aug 2022 14:33:31 GMT
2.JSON
在JavaScript中一切皆为对象，任何 js 支持的类型都可以用JSON表示，如number、string、...
- 格式：
- 对象用 { }
- 数组用 [ ]
- 所有键值对用 key : value
//对象
var user = {
name:"xiaoming",
age:18,
sex:'男'
}
//将对象转化为JSON字符串
var jsonUser = JSON.stringify(user);//{"name":"xiaoming","age":18,"sex":"男"}
//将json字符串转化为对象
//括号里面的参数是字符串，要使用引号包裹，json字符串里面使用的是双引号，则包裹的用单引号
var obj = JSON.parse('{"name":"xiaoming","age":18,"sex":"男"}');// {name: 'xiaoming', age: 18, sex: '男'}
3.Ajax
- 原生js写法；xhr类型；异步请求
- jQuey 封装好的 方法；${“#name”}.ajax(“”)
- axios 请求
8、面向对象编程
- 原型对象
- 类：模板
- 对象：具体实例
原型：
var Student = {
name:"xiaolan",
age:18,
run:function (){
console.log(this.name + "跑起来")
}
};
var xiaoming ={
name:"xiaoming"
};
//xiaoming 的原型对象是 Student
xiaoming.__proto__=Student;
- class 继承
1）定义一个类，属性、方法
//定义一个学生类
class Student{
//构造器
constructor(name) {
this.name=name;
}
hello(){
alert("hello")
}
}
var xiaoming=new Student("xiaoming");
2）继承
//定义一个学生类
class Student{
//构造器
constructor(name) {
this.name=name;
}
hello(){
alert("hello")
}
}
class XiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert("xiao xue sheng")
}
}
var xiaoming=new Student("xiaoming");
var xiaohong=new XiaoStudent("xiaohong",1);
3）原型链
9、操作BOM对象
BOM：浏览器对象模型
window
window 代表浏览器窗口
window.alert() //弹窗
window.innerHeight //内高
window.innerWidth //内宽
window.outerHeight //外高
window.outerWidth //外宽
Navigator
封装了浏览器的信息
navigator.appName //当前应用名
'Netscape'
navigator.appVersion //当前浏览器版本
'5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.userAgent //获得用户的一些东西
'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.platform //获得系统版本
'Win32'
navigator 对象可以被人为修改，所以不推荐使用这些属性去判断和编写代码
screen
屏幕尺寸大小
screen.width
1536
screen.height
864
location（重要）
location代表当前页面的URL信息
host: "www.baidu.com" //当前主机
href: "https://www.baidu.com/" //跳转的地址
protocol: "https:" //协议
reload: ƒ reload() //方法，重新加载，刷新网页
//设置新的跳转地址
location.assign("https://uland.taobao.com/")
document
document代表当前页面
document.title
'百度一下，你就知道'
document.title="waowao"
'waowao'
获取具体的文档树结点
<dl id="app">
<dt>one</dt>
<dd>two</dd>
<dd>three</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
服务器端可以设置cookie: httpOnly，保证安全性
history
history.back() //后退
history.forward() //前进
10、操作DOM对象
核心
浏览器页面就是一个 DOM 树形结构
- 更新：更新DOM节点
- 遍历DOM节点：得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个新的节点
要操作一个DOM节点，就必须要先获得DOM节点
获得DOM节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2"> p2</p>
</div>
<script>
'use strict'
//对应css选择器
var father = document.getElementById("father");
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var children = father.children[index];
// father.firstChild;
// father.lastChild;
</script>
更新节点
<div id = "d1"></div>
<script>
var d1 = document.getElementById("d1");
</script>
- 操作文本
d1.innerText = '123'修改文本内容d1.innerHTML = '<strong>456</strong>'添加文本内容，并且可以解析html标签
- 操作css
//属性使用字符串， ”-“ 改写为驼峰命名
d1.style.color = 'red';
d1.style.fontSize = '20px';
d1.style.padding = '10px';
删除节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2"> p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self);
//删除是一个动态过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);//因为是动态删除，则这个不存在了
</script>
注意：删除多个节点时，children是随时变化的
插入节点
若获得的DOM节点为空，可以使用innerHTML添加元素，若该DOM节点已存在元素，使用innerHTML会覆盖掉原有的元素
- 追加 append
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaMe</p>
</div>
<script>
var js = document.getElementById('js');
var list= document.getElementById(`list`);
list.appendChild(js);//将js追加到list中的后面
</script>
/*
结果为：
JavaSE
JavaEE
JavaMe
JavaScript
*/
创建一个新的标签
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaMe</p>
</div>
<script>
'use strict'
var js = document.getElementById('js');
var list= document.getElementById(`list`);
//创建新的节点
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText='hello';
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
//创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color:red;}';
document.getElementsByTagName('head')[0].appendChild(myStyle);//将css样式放到head里面
</script>
inserBefore
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaMe</p>
</div>
<script>
var me = document.getElementById('me');
var js = document.getElementById('js');
var list = document.getElementById('list');
//要包含插入的节点.insertBefore(newNode,targetNode)
list.insertBefore(me,js);
</script>
11、操作表单
- 表单 form
- 文本框 text
- 下拉框 < select >
- 单选框 radio
- 多选框 checked
- 隐藏域 hidden
- 密码框 password
- …
表单的目的：提交信息
- 获得提交的信息
<form action="" method="post">
<p>
<span>用户名：</span> <input type="text" id="username">
</p>
<!-- 选框的值，就是定义好的value-->
<p >
性别：
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
var username = document.getElementById('username');
username.value;//获取输入的值
username.value='waowao';//修改输入的值
//对于单选框和多选框等固定的值，用boy.value只能获取当前的value值，不能获取选中对象的值
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
boy.checked;//查看返回结果，为true则被选择
girl.checked;
boy.checked = true;//赋值，让其被选中
</script>
- 提交表单 md5加密 优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--表单绑定提交事件 若return false 则提交后不会跳转，提交不过去
onsubmit 绑定一个提交检测的函数，true / false
然后将这个结果返回给表单 用onsubmit接收
-->
<form action="#" method="post" onsubmit="return wao()">
<p>
<span>用户名：</span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span> <input type="password" id="input-pwd">
</p>
<input type="hidden" id="md5-pwd" name="password">
<!--按钮绑定事件，onclick被点击时发生事件
<button type="button" οnclick="wao()">提交</button>-->
<button type="button">提交</button>
</form>
<script>
function wao(){
var username = document.getElementById("username");
var pwd = document.getElementById("input-pwd");
var md5pwd=document.getElementById("md5-pwd")
//优化
md5pwd.value = md5(pwd.value);
console.log(username.value);
console.log(pwd.value);
console.log(md5pwd.value);
//没优化
// console.log(username.value);
// console.log(pwd.value);
// //MD5 算法
// pwd.value=md5(pwd.value);
// console.log(pwd.value);
return true;//可以校验判断表单内容，true为通过提交，false为阻止提交
}
</script>
</body>
</html>
12、jQuery
jQuery库，里面存在大量Javascript函数
导入jQuery
//cdn引入
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
//本地引入
<script src="./jquery-3.6.0.min.js"></script>
用法公式
$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- cdn引入-->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<a href="" id="d1">点我</a>
<script>
//选择器就是css选择器
$('#d1').click(function (){
alert('hello')
})
</script>
</body>
</html>
选择器
//原生js，选择器少，麻烦
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery
$('p').click();//标签选择器
$('#d1').click();//id选择器
$('.class1').click();//class选择器
...
文档工具：https://jquery.cuishifeng.cn/
事件
鼠标事件、键盘事件、其他事件
//当网页加载完毕后响应事件
$(document).ready(function (){});
//简写
$(function (){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery-3.6.0.min.js"></script>
<style>
div{width: 200px;height: 200px;border: 2px red solid;}
</style>
</head>
<body>
mouse:<span></span>
<div id="divMove"></div>
<script>
$(function (){
$('#divMove').mousemove(function (e){
$('span').text('x:'+e.pageX+' y:'+e.pageY)
})
})
</script>
</body>
</html>
操作DOM
节点文本操作
$('#div1').text();//获得值
$('#div1').text('abc');//设置值
$('#div1').html();//获得值
$('#div1').html('<strong>abc</strong>');//设置值
css操作
$('#div1').css("color","red")
元素的显示隐藏
$('div1').show() //显示
$('div1').hide() //隐藏
$('div1').toggle() //将隐藏的内容显示，将显示的内容隐藏
window
$(window).width()
$(window).height()
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
