前端非框架类知识点汇总
html单词库
"stylesheet" href="css文件路径">css引入
图片标签：
img src="" title="" alt=""
src属性 是指图像文件路径
alt属性 是在图片加载不出来时替换成文本
title属性 是在鼠标悬停的时候显示
srcset属性 是在不同的屏幕上显示不同的图片
srcset=“url 2x， url 3x”
视频标签：video是一个双标签
controls 播放控件
autoplay 自动播放 谷歌默认视频不自动播放 需要添加禁音才能实现自动播放
muted 禁音
loop 循环播放
poster 等待画面
音频标签：audio双标签
controls 播放控件
autoplay 自动播放 谷歌默认音频不自动播放 需要用js解决
muted 禁音
loop 循环播放
preload 音频是否默认被加载auto 开/ none 关
a标签
a标签中href属性 设置链接的的位置必须写的属性
a中的target属性 可以设置连接打开方式
target属性中_blank 在新窗口打开
target属性中_self 在当前窗口打开
target属性中的name名 再估计盒子打开
表格标签
table标签
table中align属性 可以调整位置
table中的border属性 可以设置边框
table中的cellpadding属性 可以设置单元格与内容之间的距离
table中的cellspacing属性 可以设置单元格与单元格之间的距离
table中的rules='all'属性 可以单元格与单元格之间间距
caption标签 表格的表格名
thead标签 表格的表头
tbody标签 表格的身体
tfoot 标签 表格的底部
rowspan属性 合并行
colspan属性 合并列
表单标签：
from 标签
action属性 是指提交的位置
method属性 可以选着提交方式
method属性中的post属性 提交时安全性强
method属性中的get属性 提交时安全性差
input标签
input type="text”
type属性：
button 按钮
checkbox 复选框
file 上传文件
image 图片提交按钮
password 密码框
radio 单选按钮
reset 重置按钮
submit 提交按钮
text 文本框
HTML5新增加input表单type属性
email 邮箱
url 网址
date 日期
time 时间
number 数量
tel 手机号码
search 搜索
color 颜色
range 进度条
但是我们验证的时候必须添加form表单域
当我们点击提交按钮就可以验证表单了
input的name属性 定义input元素的名称
input的value属性 规定input元素的值
input的checked属性 规定 input元素首次加载被选中
input的maxlength属性 规定输入字段中的字符最大长度
input的placeholder属性 显示占位符
HTML5新增加的input属性
input的required属性 必填项
input的placeholder属性 占位符 提示信息
input的autofocus属性 自动获取聚焦
input的autocomplete属性 是否展开你的搜索记录 on打开 off关闭
input的multiple属性 多选文件上传
label标签
label常用于与单选框复选框的点击文字选择
select下拉表单
select标签中的 selected属性 是可以设置下拉表单默认选中项
textarea文本域标签
文本域标签里的空格会正常解析
cols属性是展示行内字数
rows属性是展示数列
文本格式标签
strong和b 加粗
em和i 倾斜
del和s 删除线
ins和u 下划线
特殊字符
>; >大于号
<; <小于号
; 空格
&; &
"; “引号
®; ® 已注册
©; © 版权
™ ™ 商标
¥; ¥ 钱
css单词库
encodeURI('转码') 中文转换成uri码
decodeURI('')URI码转中文
"stylesheet" href="css文件路径">css引入
html引入
媒体查询
and两侧必须有空格 screen可以省略不写
@media screen and (max-widht:1200px) {
.box {
} }
@media screen and (max-width:1200px) and (min-width:992px) {
} 闭合区间
less的书写
导入的功能 就是在一个less中导入另一个less文件
语法：
@import "被导入的less文件";
@import与被引入的文件之间必须要有空格
@import后面要以分号结束；
@import被引入的less文件也可以省略扩展名
@import "02-base.less";
调试视口
"viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
meta name="viewport" 用于设置视口
content 用于设置视口得相关信息width=device-width 将视口得宽度设置为当前屏幕的宽度
initial-scale 用于设置页面初次显示时的缩放比例
maximum-scale 用于设置页面最大的缩放比例
user-scalable 用于设置是否允许用户对页面进行缩放
width:12px; 宽度
height:12px; 高度
字体属性
font-family:"宋体"; 修改文字字体
font-size:12px; 修改字体大小
font-weight:400; （100-900，400等于normal不加粗，700等于bold加粗，数字不加单位） 设置字体的粗细
font-weight:normal; 默认不加粗字体
font-weight:bold;加粗字体
font-style:italic; 显示斜体字体样式
font-style:normal; 斜体变正常
复合属性：
font: font-style font-weight font-size/line-height font-family;顺序不能错
font: italic 700 16px 'Microsoft YaHei'; 顺序不能错
font:16px 'Microsoft YaHei'; 可以不写字体样式、字体粗细、字体高度，但是不能不写字体大小与文字字体
文本属性
color:red; （#ff0000; 十六进制代码形式 rgb(255,0,0);rgb代码形式） 修改字体颜色
text-align:center;文字居中
text-align:left;左对齐
text-align:right;右对齐
text-decoration:none; 没有装饰线（取消a的下划线）
text-decoration:underline;下划线
text-decoration:overline; 上划线
text-decoration:line-through; 删除线
text-indent:2em; 首行缩进
line-height:26px;设置行间距 行高
链接伪类选择器：
a:link{
} 把没有点击过（没有访问过的）链接选出来
a:visited{
} 选择点击过的（访问过的）链接选出来
a:hover{
} 选择鼠标经过的（停留的）链接选择出来
a:active{
} 选择鼠标正在点击（按下）还没有弹起来的那个链接
hover 可以作用到任何标签
为了确保生效，请按照lvha的循顺序声明 :link-:visited-:hover-:active
input伪类
:focus伪类选择器
input:focus{
} 选择获取光标的input表单元素选取出来
input{
outline:none;}取消光标的默认样式
显示display
display:block; 行内元素变成块元素
display:inline; 把块元素变成行内元素
display:inline-block; 把块元素或者行内元素变成行内块元素
解决行内块元素的缝隙 可以是font-size（字体大小）变成零
弹性布局 一般用于在父元素 控制子元素进行布局
display:flex; 弹性布局
justify-content: flex-start;用于设置多个子元素在主轴方向上的排列与分布
flex-start 默认从左向右排列
center 中间对齐
flex-end 从右向左排列
space-between 等距离分隔
space-around 等距离环绕
space-evenly 平均分
align-items: flex-start; 用于控制子元素在次轴上排列
flex-start 靠上对齐（默认）
flex-end 靠下对齐
center 居中
baseline 文字基线对齐
stretch 将子元素的高度设置为与父元素高度相同
flex-wrap: wrap; 用于设置子元素换行
nowrap 不换行
wrap 换行（向下换行）
warp-reverse 换行（向上换行）
align-content: flex-start; 在多行情况下控制排列
flex- start 靠上对齐
flex-end 靠下对齐
center 居中
space-between 等距分隔
space-around 等距环绕
space-evenly 平均分
弹性布局控制子元素在水平 垂直 排列 分布
水平： justify-content
取值：flex-start、flex-end、center、space-between、space-around、space-evenly
垂直： algin-items（单行）
取值：flex-start、flex-end、center、space-between、space-around、space-evenly
换行：flex-wrap
取值：wrap
align-content（多行）
取值：flex-start、flex-end、center、space-between、space-around、space-evenly
flex 设置子元素对父元素剩余空间的占比
flex: 1;
order: -1; 用于设置单个子元素的排列顺序
默认是0
值越小越靠前
align-self:flex-start; 用于单独控制某个子元素在次轴上的排列方式
取值:flex-start 向上、flex-end向下
flex-direction: row; 用于修改主轴方向
row 水平，从左向右默认
row-reverse 水平，从右向左
column 垂直，从上向下
column-reverse 垂直，从下向上
display:grid; 网格布局
划分网格
grid-template-rows:100px 100px 200px;
grid-template-columns:200px 300px;
复合写法
grid-template: 100px 100px 200px / 200px 300px;
间隔
grid-row-gap: 5px; 行
grid-column-gap: 5px; 列
浮动float
float:left; 左浮动
float:right; 右浮动
visibility:hidden; 隐藏（伪类）
float:content; 浮动到中间 中间浮动
类名:nth-child(3) {
margin-right: 0;} 结构伪类选择器
清除浮动
clear: both; 额外标签法：在最后的一个浮动元素的后面 添加一个块级元素添加清除浮动核心代码 clear:both;
清除浮动1
overflow: hidden; 溢出隐藏 给父盒子添加
清除浮动2
.clearfter::after{
content: "";（ 是伪元素必须给的属性 ） display: block;（伪元素默认是行内元素） clear: both;（清除浮动）height:0; 看不到元素 visibility: hidden; 隐藏}在盒子内容的后面创建一个盒子
.clearfter{
*zoom: 1; (解决上面出现的浏览器兼容问题 必须写)} 解决浏览器兼容
清除浮动3
.clearfix::before,.clearfix::after {
content: ""; （ 是伪元素必须给的属性 ） display: table; （理解成在同一行显示的两个块级元素）}
.clearfix::after{
clear: both;}清除浮动
.clearfix {
*zoom: 1; }解决浏览器兼容
背景background
background-color:red; 修改背景颜色
background-image:url(图片的位置); 修改背景图片
background-repeat:repeat(no-repeat不平铺, repeat-x横向平铺, repeat-y;纵向平铺); 默认纵横平铺
background-position:水平方向的位置 垂直方向的位置; 背景位置方位名词
background-position: top right(100px 50px; 固定单位 有顺序之分先水平后垂直, bottom 100px; 混合单位 有顺序之分先水平后垂直);背景位置固定
background-attachment:scroll(fixed 背景固定 不会随着滚动条而动); 背景随着盒子的滚动而滚动
background: 背景颜色 背景图片 背景平铺 背景固定 背景位置; 复合写法
background: red url("./images/logo.png") no-repeat fixed 20px 20px; 复合写法
background:rgba(125,125,125,0.5); 这是背景颜色半透明 背景半透明不会影响内容
opacity:0.5; 设置背景半透明 会影响内容
backgroun-size:cover; 等比例缩放，当背景图完全覆盖盒子时停止缩放
background-size:contain; 等比例缩放，当盒子完全包含背景图片停止缩放
background-size: 1000px 500px; 设置背景图片高度和宽度
background-image: linear-gradient(to right, red 50%, yellow 70%, blue, yellowgreen, orange, pink); 渐变色
object-fit:contain; 处理图片，保持原有尺寸
权重
color:red !important; 在后面加上!important优先执行 权重最大
继承 < 通配符 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
边框border
border: 10px solid yellowgreen; 复合写法
border-right(left左, top上, right右, bottom下 ): 20px(边框宽度) solid(边框样式:实线 solid 虚线dashed 点线dotted ) red(边框颜色);
border-collapse; 合并边框 这个属性是table的属性 合并相邻边框
边框圆角border-radius
border-radius:10px（length）; （数值的是表示高度的）边框圆角
border-radius:50%; (百分比是表示宽度的) 圆形
图片边框 利用边框图片属性，来设置边框效果
border-image-source: url('./images/border.jpg'); 边框图片路径
border-image-width: 20px; 边框图片宽度
border-image-slice: 167 167 167 167; 边框的截取距离：给你四刀的机会把边框图片的四个角切出来，顺时针方向
border-image-repeat: repeat; 中间剩余部分排布方式（平铺）
border-image-repeat: round; 中间剩余部分排布方式（环绕）
border-image-repeat: stretch; 中间剩余部分排布方式（拉伸）
border-image: url("images/border.jpg") 167/20px round; 组合写法
盒子阴影box-shadow
box-shadow: h-shodow(水平阴影的位置 必需) v-shadow(垂直阴影的位置 必需) blur(模糊距离 可选) spread(阴影尺寸 可选) color(阴影颜色 可选) inset(将外部阴影改成内部 可选); 用于盒子阴影
文字阴影text-shadow
text-shadow:h-shodow(水平阴影的位置 必需) v-shodow(垂直阴影的位置 必需) blur(模糊距离 可选) color(阴影颜色 可选); 用于文字阴影
内边距padding
内边距 是调盒子里面的距离 盒子边框距离内容的距离
padding: 20px; 四边一样
padding: 20px 50px; 对边一样
padding: 20px（上） 50px（右） 80px（下） 100px（左）; 复合写法
padding-left(top上， right右， bottom下， left左): 20px; 拆分写法
外边距margin
外边距 是调盒子与盒子之间的距离 盒子边框距离盒子边框的距离
写法与内边距差不多
margin: 50px 100px;复合写法
margin: 0 auto; 块元素居中
margin-top(top上， right右， bottom下， left左):20px; 拆分写法
overflow: hidden; 溢出隐藏
垂直对齐方式
vertical-align: baseline; 基线对齐 默认值
vertical-align: bottom; 底部对齐
vertical-align: middle; 中部对齐
vertical-align: top; 顶部对齐
这三句代码执行的效果是 单行文本超出显示省略号
white-space: nowrap; /* 一行显示 不换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 文本超出用省略号代码 */
使用多行文本溢出显示省略号 需要适当调整高度
/* 1. 超出的部分隐藏 */
overflow: hidden;
/* 2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 在第几行显示省略号 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
鼠标样式
cursor: default; 鼠标默认样式
cursor: text; 鼠标文本样式
cursor: pointer; 鼠标小手样式
cursor: move; 鼠标移动样式
cursor: not-allowed; 鼠标禁止样式
cursor: zoom-in; 鼠标放大样式
cursor: none!important;隐藏鼠标
定位：position
position: relative; 相对定位 一般用于限制绝对定位的，给绝对定位的父级元素使用
position: absolute; 绝对定位 以最近一级有定位的祖先元素为单位对接 需要与相对定位配合使用更好
position: fixed; 固定定位
所有定位都需要边偏移也就是left，right，top，bottom
让定位的盒子定位到中间可以先走父盒子宽度的一半50%，往回走自身宽度的一半。代码如下：
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
显示隐藏
display:none; 不占位隐藏
display: block; 显示元素
visibility: hidden; 元素的可以见性 占位隐藏
visibility:visible; 元素显示
overflow: hidden 超出的内容隐藏
overflow:visible; 不做处理 超出显示
overflow: scroll; 给盒子添加滚动条 不管内容是否超出 都添加滚动条
overflow: auto; 如果内容超出 添加滚动条 如果没有内容超出就 不添加滚动条
设置三角形
/* 宽高为0 边框三个透明色 一个边有颜色 */
width: 0;
height: 0;
margin: 0 auto;
border: 50px solid transparent;
border-bottom: 50px solid yellow;
直角三角形
width: 0;
height: 0;
margin: 100px auto;
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
/* 解决img底部缝隙 只要不是baseline就可以 */
/* 推荐使用vertical-align 属性 */
/* 方法一 */
vertical-align: bottom;
/* 方法二 */
/* display: block; */
标准盒模型的border与padding向外扩展
css3盒模型的border与padding向内扩展
box-sizing: border-box; css3盒模型 怪异盒模型 ie和模型
box-sizing: content-box;标准盒模型
伪元素选择器 (HTML5 +css3 技术提升）
:first-child 选择第一个子元素
:last-child 选择最后一个子元素
:nth-child(even) even偶数 odd基数
:not(:last-child) 选择除了最后一个子元素的所有元素子元素
:first-of-type 选择种类的第一个元素
:last-of-type 选择种类的最后一个元素
:nth-of-type 指定元素的元素排序
:not(:first-of-type) 选择除了第一个子元素的所有子元素
:checked 它能匹配选中的元素
伪元素
div::before 在盒子的内容前面创建一个元素 默认行内元素
div::after 在盒子内容的后面创建一个元素 默认行内元素
list-style:none; 取消li自带的圆点
font-size: calc(375px / 6.4); calc是css3新增的功能，用与进行简单的数学运算
less预处理语法
@import "02-base.less"; 在less文件引入less文件
@w:100px; 定义变量 储存数据 （：）后面的都是可以当数据保存
width: @w; 使用变量
width: @w - 50; less语法可以使用简单的 + - * / 运算符两侧需要由两侧空格
font-size: (30px / 2); 除法需要用小括号 括起来
过渡 transition:
transition-property: all; 设置需要应用过渡效果的样式，必选的 all 表示所有的
transition-duration: 1.5s; 设置过渡效果的时间 秒s
transition-delay: 3s; 用于设置过渡效果延迟的时间 单位：秒s
transition-timing-function: ease; 用于设置过渡效果速度曲线，取值：ease默认() linear 匀速
2d变换 transform:
transform:translate(x, y); 偏移 单位px， x=水平偏移 y=垂直偏移 负值就是反向移动
transform: rotate(360deg); 旋转 单位deg， 正数为顺时针旋转，负数为逆时针旋转
transform:scale(h,y); 放大或缩小 没有单位 h=水平缩放比例，v=垂直缩放比例，大于0的数，0-1表示缩小，按照自身比例的倍数放大，缩小
transform: skew(h,v); 倾斜， h 表示水平的倾斜角度 单位deg，v 表示垂直的倾斜角度 单位deg
transform: translate(100px,0) rotate(360deg); 如果是同时又旋转与偏移，要注意顺序
修改变换的基准点
transform-origin: top left;
transform-origin: 100% 0;
3d变换
perspective: 800px; 设置视距
transform: translateZ();
transform: rotateX(); 沿着x轴
transform: rotateY(); 沿着Y轴
帧动画
1.定义帧动画
@keyframes move {
/* 动画开始的样式 */
from{
left: 0px;}
/* 动画结束的样式 */
to {
left: 200px;}
}
animation: move（动画名） 1s（时间） linear（ease或linear或steps） 3s（延迟时间）infinite（重复次数无限） alternate（方向） forwards（停止时的状态）;
animation-play-state: paused; 用于控制暂停动画
animation-play-state: running;运行
ateps()用于对动画进行分割
语法：
steps(n,start或end);
n表示分割几段
start 表示第1段不参与动画
end 表示最后一段不参与动画
animation: a 5s steps(5, end) infinite;
移动端布局
单词语法
meta name="viewport"用于设置视口
content 用于设置视口的相关信息
width=device-width 将视口的宽度设置为当前屏幕的宽度
initial-scale 用于设置页面初次显示时的所放比例 1.0为用户第一次登录时的界面缩放
maximum-scale 用于设置页面的最大缩放比例 1.0为缩放的倍数
user-scalable 用于设置是否允许用户对页面进行缩放 0为禁止缩放
viewport 视口，用于显示页面的那个区域（默认尺寸是980，并不是于屏幕设备的尺寸相同，所以需要通过设置i漱口的宽度，让页面再任何设备上都能于屏幕同宽）
background-size 用于设置背景图片的尺寸
取值为：
设置图片大小是必须要在前面加 /
contain（包含） 图片会等比例缩放直到盒子将图片完全包含才会停止
cover（覆盖） 图片会等比例覆盖，直到将盒子完全覆盖才会停止
百分比 相对于盒子的宽高尺寸
数值 指定背景图片的大小
srcset 根据不同的屏幕选择所显示的图片
语法 例：
"./imgs/sample.jpg" srcset="./imgs/[email protected] 2x, ./imgs/[email protected] 3x" alt="">
display：flex 开启弹性布局
justify-content：space-between 开启弹性布局后，子元素会共存于一行
justify-content 用于设置多个子元素在主轴上的排列
取值为：
flex-start 默认从左向右排列
center 中间对齐
flex-end 从右向左排列
space-between 等距分隔
space-around 等距环绕
space-evenly 平均分
align-items 主要控制于单行情况下子元素在次轴上的排列方式
取值为：
flex-start 靠上对齐（默认）
flex-end 靠下对齐
center 居中
baseline 文字基线对齐
stretch 将子元素的高度设置为与父元素高度相同
flex-warp 默认如果子元素的宽度大于父元素的宽度，子元素会被压缩，用于设置子元素的换行
取值为：
nowrap 不换行
wrap 换行（向下换行）
wrap-reverse 换行（向上换行）
align-content 用于多行子元素在次轴的排列和分布
取值为：
flex-start 默认从左向右排列
center 中间对齐
flex-end 从右向左排列
space-between 等距分隔
space-around 等距环绕
space-evenly 平均分
flex 当子元素的宽度和小于父元素的宽度时，可以使用flex来设置子元素的剩余占比
取值：数值，百分比
order 用于设置单个子元素的排列顺序
默认值是0值越小越靠前越大越靠后
align-self 用于单独控制某个子元素在次轴上的排列方式
取值：flex-start
flex-direction 用于修改主轴的方向
取值：
row 水平，从左往右
row-reverse 水平，从右往左
column 垂直从上往下
column-reverse 垂直从下往上
display:grid 开启网格布局
grid-template 划分网格
grid-row-gap: 5px 控制网格行间距
grid-column-gap:5px 控制表格列间距
em 是一个相对单位，相对于自身的font-size
em各自为政，之作用于自己，如果整体效果要放大或者缩小需要对每一个使用em单位进行修改
rem 是一个相对单位，相对于html的font-size
rem可以统一根据html标签的font-size来个控制页面中所有使用了rem单位的元素尺寸
rem在使用是分为两步
1.编码阶段
需要对尺寸（根据ui的设计稿）转换为rem
由px转换为rem
1.1先将设计稿上的尺寸转换成编码尺寸
400/2 = 200px
1.2将编码尺寸转换成为rem
200px/html的字体大小 rem
所要除的html的字体大小设置成多少都可以，主要是为了方便编码
html的字体大小主要有两种方案：
方案1：
取屏幕的十分之一，编码阶段参照设计搞
320/10 = 32
在使用32去除具体的尺寸
200/32 = 6.25rem
方案2：
去设计搞上屏幕尺寸的百分之一，作为一个奇数再用这个基础去除屏幕尺寸作为html的字体大小
640/100 = 6.4
320/6.4 = 50
将这个50作为html的字体大小
再将50去除具体的尺寸
200/50 = 4rem
2.显示阶段
浏览器会根据html的字体大小将代码中的rem转换成为px
如果想动态的设置html的font-size，需要借助别人写好的工具来实现
flexible.js
是淘宝公司为自己的移动端去动态的适配显示屏幕而书写的一个js文件
flexible.js文件所完成的功能就是，动态的读取屏幕的尺寸，取十分之一的值设置给html的font-size
less的使用流程：
前提：需要安装easy less插件
1.创建less文件
2.由less文件生成css文件（预编译）
由于已经安装了easy less插件，所以easy less会自动将less文件转换成css文件
3.引入编译后的文件
混入语法
将共有的写法提取到一个类选择器中，之后再需要使用的地方直接使用类名
less语法还可以进行简单的+ - * 运算
如果是除法要用小括号括起来
导入的功能 就是在一个less中导入另一个less文件
语法
@import"被导入的lesss文件"
@import 与引入的文件之间必须有空格
@import 后要以分号结束
被引入的less文件也可以省略扩展名
响应式
一套适配多种终端
响应式的核心原理
根据不同的屏幕尺寸应用不同的样式
媒体查询语法
and两侧必须由空格
@media screen and （屏幕尺寸）
大屏pc尺寸 大于1200px
小屏pc尺寸 大于992px
平板尺寸 大于760px
手机尺寸 小于768px
过渡效果
transition 复合属性
transition默认是没有任何顺序的
后面的是延迟时间前面的是持续时间
transition-property 设置需要应用的过渡效果样式（必填）
transition-duration 设置过渡下效果的持续时间 单位秒s
transition-delay 设置过渡的延迟时间
transition-timing-function 设置过渡速度的曲线
取值：
ease 默认
linear 匀速
transform 2d实现变换属性
取值：
translate(x,y) 实现偏移效果，如果只有一个值默认是水平方向的值
translate(-50%,-50%)实现完美居中
rotate(角度单位deg) 实现2d旋转效果
修改旋转中心
transform-origin:left top ;
transform-origin:right bottom ;
transform-origin:left bottom ;
transform-origin:right top ;
transform-origin:100% 0 ;
scale(x,y) 实现2d缩放效果
修改缩放的基准点
transform-origin: right;
transform-origin: top;
transform-origin: left;
取值，大于0的数，0-1之间表示缩小，大于1表示放大
skew(x,y) 实现2d倾斜效果
x 水平倾斜的角度
y 垂直倾斜的角度
无论是2D还是3D使用的都是transform属性
transform 3d实现变换属性
translateX() 和translate效果是一样的
translateY() 和translate效果是一样的
transform: rotateX();默认实现的是翻本的效果
transform: rotateY();默认实现的是翻书的效果
transform: rotateZ();默认与rotate()相同
3D变换如果有近大远小的效果需要设置视距
perspactive
perspective: 像素;
帧动画
有两个步骤
定义帧动画
为某个元素应用帧动画
语法
@keyframes 动画名{
from{
}
to{
}
}
animation: 帧动画名 持续时间 延迟时间 动画的速度曲线 重复的次数 方向 停止时的状态;
animation-name 动画名
animation-duration 持续时间
animation-delay 延迟时间
animation-timing-function 速度曲线
ease，linear，ease-in，ease-out
steps(n,start|end)
n表示分割几段
start表示第一段不参与动画
end表示最后一段不参与动画
animation-iteration-count 重复次数
infinite 无限次
animation-direction 动画的重复效果
alternate 往复的执行
reverse 从结束到开始，反向播放
animation-fill-mode 停止的状态
forwards 结束时停留在终止的位置
backwards 结束时停留在起始的位置
用于控制暂停动画
animation-play-state:paused;
百分比动画
@keyframes move {
0% {
transform:translate(0);
}
20% {
transform:translate(200px,0);
}
40% {
transform:translate(200px,200px);
}
60% {
transform:translate(400px,200px);
}
80% {
transform:translate(400px,400px);
}
100% {
transform:translate(0,400px);
}
}
JS基础
DOM和BOM
浏览器有三种语言 Html/Css JavaScript
JavaScript有三个组成和部分
ECMAScript 就是JS的语法规则
DOM WebAPI
BOM WebAPI
JS的语言规则
JS的语言规则
1.JS是严格遵循大小写的
2.在JS中一般一条语句结束时是以分号标识，分号可以省略
3.一般一行代码仅书写一条语句，如果一行包含多条语句，语句之间必须包含分号
JS输入输出语法
输入
方法一：prompt
语法：
prompt('提示信息')
弹窗让用户输入信息
方法二：confirm
语法：
confirm('提示信息')
弹窗让用户确定
输出
方法一：alert()
语法：
alert('内容')
弹窗输出
方法二：console.log()
语法：
console.log('内容')
在控制台中输出
方法三：document.write
语法：
documetn.write('内容')
输出在页面中
JS变量
定义变量
let 变量名 = 数据 定义变量的同时赋值，术语称之为初始化
定义变量会在内存中申请一个空间，并为这个空间取一个名字
变量的操作
定义一个变量用于存储数据
let a = 10; //此处的10是程序员定义的
let age = prompt('请输入年龄'); //此处的数据是由浏览者提供的
1.读取变量内容（值）；
alert(a);
console.log(age);
2.修改变量的值
let b = 100;
console.log(b);
b = 200;
console.log(b);
注意 let声明的变量值能声明一次
3.变量参与运算
let c = 100;
将变量c的值于300相加的结果赋予另一个变量d
let d = c + 300;
consloe.log(d);
变量的内存原理
内存是由windows浏览器来维护的
windows为了方便维护内存会给每个空间编码个号
定义一个变量
let a = 10;
申请一个变量，同时为这个变量起个名字，在将数据10保存到这个空间中
console.log(a + 100);
在内存中查看是否有变量a的存在，如果有，就将空间中的数据10读取出来，
与数据100进行运算，得到的结果输出显示
a = a + 10;//在内存中查找是否有变量a存在，如果有就将空间中的的数值读取出来，
与10进行运算相加，看到的结果保存到空间中，此时a空间的值被修改
变量的扩展操作
一次定义多个变量（不推荐使用）
let a,b,c;
仅定义了变量，但变量的值没有定义
let b ; 此时的值undefined（未定义）
交换两个变量的值
let m = 10;
let n = 20;
交换两个变量的值
第1步，定义第三个变量
let tmp;
第二步，将m赋值给tmp
tmp = m;
第三步，将n赋值给m
m = n;
第四步：将tmp 赋值给m
n = tmp;
变量的命名规则
1.变量名只能包含字母,数字,下划线，以及$
2.不能以数字开头
3.变量名不能使用JS的关键字
4.如果变量名由多个单词组成，使用小驼峰命名法
除第一单词外，其后的首字母大写
5.变量命名时尽量达到见名知意
JS数据类型
数据类型
number数值类型:这是数学中的数字，可以时整数，小数，正数和负数
String字符串类型，使用单引号或者双引号括起来的多个字符
引号的嵌套：单引号中可以包含双引号，双引号也可以包含单引号
在使用引号定义字符串时
默认单引号中不能包含单引号
默认双引号中不能包含双引号
Boolean布尔类型
布尔类型仅有两个值 true和false
true和false的含义是由程序员赋予的
true 可以表示男 false表示女
true 可以表示对 false表示错
true 可以表示同意 false表示不同意
true 可以表示同意 false可以不同意
布尔类型的值true与false本身并没有实际的意思，
主要看程序员赋予他什么含义
布尔值是不需要加引号的
undefined类型
undefined类型仅有一个值，undefined未定义
当定义了一个变量，但没有为这个变量赋值，其赋值就是undefined
null类型
null仅有一个值，其值就是null（空）
检查数据类型
typeof()用于检查简单数据类型
对于prompt()
如果用户点击了确定按钮，我们接收到的就是String类型
如果用户点击了取消按钮，我们接收到的就是null
对于confirm()
如果用户点击了确定按钮，我们接收到的就是true
如果用户点击了取消按钮，我们接收到的就是false
运算符
= 赋值运算符
运算规则，将右边的数据赋值给左边的变量
Js中的=并不是数学的判断两个数是否相等的符号
算数运算符是对Number类型的数据进行运算
JS中的+ - * //用于数学中的运算规则相同
% 取余（取模）
运算规则：求两个数相除的余数
++ 自增运算符
运算规则，变量的值自增1
-- 自减运算符
运算规则，变量的值自减1
+=，-= 自操作运算符
可以用于任何数值进行操作
+，+= 在字符串运算中主要进行的字符串的拼接操作
+= 在一个字符串变量原值的基础上在拼接上新的字符串再赋值给自己
+ += 在算术运算符中出现，又在字符串中出现
参与运算的两个数，只要有一个是字符串，就会进行字符串拼接
比较运算符
> < >= <= 与数学的运算规则相同
== 运算规则：判断两个数据的值是否相等，如果相等返回true 否则返回false
!= 运算规则：判断两个数据的值是否相等，如果不相等返回true否则返回false
运算符的优先级
算数运算符
字符串运算符
比较运算符
赋值运算符
一个式子中可能出现多种运算符，他们的运算优先级
先乘除后加减 再比较<=,>= 最后赋值
可以使用()来修改运算符的优先级
Math对象
Math对象是JS提供的一个工具，能通过Math对象进行一个比较复杂的数学运算
1.获取圆周率
Math.PI()
2.求最大值
Math.max()
3.求最小值
Math.min()
4.向下取整
Math.floor()
5.向上取整
Math.ceil()
6.生成一个随机的小数,函数包含0 但不包含1
Math.random
7.函数返回一个数的平方根
Math.sqrt()
分支结构
if单分支
语法：
if( 表达式。){
语句。。
}else{
语句。。。
}
执行逻辑：
当表达式成立()就执行if中的代码语句，
不成立就跳过if，执行其后的代码
if双分支
语句：
if( 表达式1){
//代码语句1。。
}else if(表达式2){
代码语句2.。
}
执行逻辑：
首先判段表达式1是否成立，如果成立就执行代码块1
当代码块1结束后不会再判断表达式2，而直接执行整个if后面的代码
如果表达式1不成立，才来判断表达式2，如果表达式2成立立即执行代码块2
，如果不成立就退出
if多分支
语法：
if(表达式1){
代码块1
}else if（表达式2）{
代码块2
}else if(表达式3) {
代码块3
}else{
代码块14
}
执行逻辑：
自上而下的判断，表达式是否成立 如果成立就执行对应的代码块
，当代码块执行结束后直接整个if结构，执行其后的代码，
如果不成李就一次判断其后的表达式
如果所有的表达式都不成立，则执行缺省代码块
else if 可以有多个，else也可以省略
数据类型扩展
Number是数值类型，值有无数个，其中有两个特殊的值
Infinity 无穷大
NaN Not a Number 不是一个数，最终结果无法使用数值来表示
在Js中表示的数值是有范围的，我么你可以通过Number对象来查看这个范围
Number.MAX_VALUE 记录这个JS能表示的最大的数
Number.MIN_VALUE 记录这个JS能表示的最小的数
在Js中有一个神奇的数，NaN，Nan都不等与自己本身
如果就想判断一个变量的值是不是NaN，上面使用的运算符已经判断不了
所以Js为我们提供了一个方法：isNaN();
isNaN()可以 判断一个数值是不是NaN
Srting类型扩展
转意字符： ``
作用：
1.去掉某个字符被Js赋予的特殊的功能
2.为某些字符添加特殊的功能
\n 换行 \t 制表符 \r 换行
模板字符串
模板字符串：就是定义字符中的一种新的语法
定义字符串中使用 引号
引号定义的字符串不能进行定义
引号定义的字符串中的变量的值不能被解析出来
模板字符串的定义语法
是用反引号定义内容`
可以换行定义字符串的内容
模板字符串可以解析变量的值，需要使用${
变量名}
字符串获取长度.length
数据类型转换
不同的运算符有不同的运算符规则，为了能进行准确的运算，
我们需要对数据类型进行转换
！默认只有相同的数据才可以进行转换，在进行某些计算时，Js会自动进行转换，根据运算符进行转换
数据类型的转换有两种：
1.隐式转换
js自动进行的转换
在进行数学运算时(除+ += ，因为+ += 优先进行字符串拼接操作)，
如果参与运算的数据都不是number类型，就会触发数据类型的隐式转换
当一个数据作为条件表达式时，会触发布尔值的隐式转换
当进行+ += 操作时，如果有一个是字符串，那么不是字符串的数据就会触发字符串的隐式转换
绝大多数的时候，JS的隐式转换都可以帮我们正确的进行计算
唯独在进行+ += 运算时 要特别注意，是要进行字符串的拼接还是数学的运算
2.强制转换
程序员通过Number(),String(),Boolean()...方法进行的转换
数值的提取
parseInt()
作用：只能提取整数
是一个字符串中，从左往右一次提取整数，直到遇见第一个非数字结束提取
parseFloat()
作用：提取小数
是一个字符串中，从左往右一次提取小数，直到遇见第一个非数字结束提取
自增自减运算符的扩展
++ 自增
前自增 ++a
先自增再运算
后自增 a++
先运算再自增
运算符的扩展
比较运算符
> < >= <= == !=
=== 全等比较
运算规则，比较两个数据的值于类型是否完全相等，
相同返回true，否则返回false
与 == 的区别 仅判断值不判断类型
！== 不全等
运算规则，判断两个数的数值和类型至少有一个不同
如果至少有一个不同就返回true否则返回false
=== 更多的时候是为了判断，真的true或者真的false
不是经过转换后的等效于true或false的值
逻辑运算符
比较运算符：仅能表示一个条件
逻辑运算的作用：用于多个条件进行逻辑判断
&& 逻辑于 找假
运算规则：如果参与的运算的两个操作数，同时
为true，最终的结果就是true（只要有一个false结果就是false）
|| 逻辑非 找真
运算规则：如果参与的运算的两个操作数只要有一个true结果就是true
！ 逻辑非
运算规则取反
true再参加数学运算时，会进行隐式转换，转换成1
逻辑短路
是在进行逻辑运算时，左侧已经决定了整个式子的结果时，js的一种特殊处理方式
根据逻辑或的运算规则
由于左侧已经决定了整个式子结果（只要有一个true结果就是true）
右侧不会再去运算，这种现象就称之为逻辑或短路
根据逻辑非的运算规则
由于左侧的已经决定了整个式子的结果（只要有一个false结果就是false）
右侧不会再去运算，这种现象称之为逻辑于短路
三元运算符
语法：表达式1？表达式2：表达式3
运算规则：
首先判断表达式1是否成立，成立就执行表达式2不成立就执行表达式3
三元运算补就是简单的if双分支，一般只有if的代码块只有一条语句时
才可以使用三元运算符进行简化
switch分支
switch也是一种分支结构。
switch后的变量与case后的值是全等比较
语法：
switch(){
case:值1
语句块1
break;
case:值2
语句块2
break;
case:值3
语句块3
break;
default:
缺省语句块1
}
执行逻辑：
根据switch后的变量于case后的值匹配情况将程序转向不同的语句块执行
当某个语句块执行结束后，遇到了break，就跳出整个switch结构，继续
执行代码，当所有的case的值都不匹配，就执行缺省语句块，case可以
有多个，default也可以省略
switch的穿透：
每个语句块后的break也是可以省略的，如果省略，会继续执行其后的代码
块，不会判断其后的case值，直接执行
if于switch的区别
if分支
if条件可以表示一个范围，也可以表示一个具体的值
swith分支
条件是一个具体的值，如果时对一个变量和具体值的比较，
我们推荐使用switch，switch对于处理这种情况效率更高
for循环
循环：用于重复执行一段代码
语法：
for(循环变量初始化;表达式;变量修改){
执行语句
}
执行逻辑：
循环变量初始化 表达式 循环控制变量 循环三要素
1.循环变量初始化，仅执行一次
2.判断表达式是否成立，如果不成立直接结束循环结构执行其后的代码
3.如果成立就执行循环体
4.循环体里面的代码执行结束后再来执行循环控制的变量修改
5.依次循环2 3 4次代码，直到表达式不成立
箩筐思想：
由用户输入五个整数，对这几个数求和
定义一个变量用于累加
let sum = 0;
for (let i = 0; i < 6; i++) {
let n = Number(prompt());
sum += n;
}
console.log(sum);
1.在循环外定义一个变量
2.再循环之内将需要累加的数据加到这个变量上
3.再循环结束后得到累加的结果
注意：
累加变量要放在循环之外
如果是求和就给初值赋值为0
如果是求乘需要个初值赋值为1
如果是字符串拼接需要个初值赋值为空字符串
while循环
while循环就是for循环的一种变型
while(表达式){
//循环体
}
执行逻辑：
判断表达式是否成立，如果不成立就结束循环，继续其后的代码执行
如果成立就执行循环体，循环体执行结束后，再判断表达式是否成立
依次规律循环往复的执行，直到表达式不成立
while就是for循环的一个变型，
语法中仅规定了表达式，另外两个要素需要我们自己不足
do...while循环
do{
//循环体
}while(表达式)
执行逻辑：
先执行依次循环体
循环体执行结束后再判断循环体
如果不成立就结束do..while循环结构
如果成立就再次执行循环体，循环结束后再来判断表达式
依次规律，循环往复的执行，直到表达式不成立
do...while循环与while循环的区别
while循环先判断后执行
do...while循环先执行一次后再判断
continue 继续
continue与break用于控制循环的，所以必须放在循环里
continue用于跳过本次循环，继续下一次循环
当循环中某次执行到continue时，本次循环其后的代码将会被跳过
break
当某次循环执行到了break时，会直接结束循环
for循环与while循环的区别
for循环
for循环用于解决根据次数进行循环
循环次数已知
while循环
while循环用于根据条件循环，
循环次数未知
数值
简介
数组就是一组数据的有序集合，能够储存多个数据
数组又三个要素
元素：数组中的每一个数据就是数组的元素
下标：数组中的元素的序号，序号是从0开始的
数组的长度：数组中元素的个数就是数组的长度，读取数组的长度为 数组名.length
定义
格式：
数组名[数值1，数值2，...]
数组中的数据可以是任何类型
此种定义的方式：定义数组的同时赋值，属于称之为初始化数组
let arr = [20, 30, 40, 50];
定义一个空数组
let arr1 = [];
数组元素的操作
在定义数组时使用[]
[]不但可以定义数组，还可以对数组中的元素进行操作
1.读取数组中的元素
语法：
数组名[下标]
2.修改数组元素
语法：
数组名[下标] = 值
如果下标不存在，就是添加数组元素
3.读取数组的长度
语法：
数组名.length
在定义数组的时候使用[]
注意：数组的操作必须通过下标
如果所读取的下标不存在，值就为undefined
JS中数组的下标是连续的
数组的长度与最后一个元素下标的关系是相差为1
数组的长度-1就是最后一个元素的下标
动态的添加数组元素
利用数组的长度添加元素
let arr = []
arr[arr.length] = 值
遍历数组
历数组
由于某个需求，需要对数组的每个元素都要访问到
语法逻辑：
1.使用循环控制变量来模拟数组下标的规律
2.循环内将循环控制变量作为下标
let arr = [10,20,30,40,50];
for (i = 0;i < arr.length ;i++) {
console.log(arr[i]);
}
反转数组
思想逻辑：
1.定义一个新数组
2.遍历数组arr，倒序遍历
3.将arr读取到的每个元素添加到Narr中
let Narr = []
for(let i = arr.length-1;i>=0;i--){
nArr[nArr.length] = arr[i];
}
擂台思想
主要用于求数组中的最大值和最小值
思想逻辑：
1.定义一个擂台变量
2.从下标1开始遍历数组
3.将遍历得到的元素与擂台变量进行比较
let arr = [9, 2, 6, 8, 96, 14, 15, 23, 5];
let max = arr[0];
for (let i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
函数
函数的定义
1.函数用用于封装代码块的的
2.函数必须调用才能将里面的代码执行，函数的调用必须在函数名后加()
定义:
function 函数名(){
//代码
}
默认函数的定义是不会自动运行的，必须通过函数名来调用这个函数
调用:
函数名{
}
函数作用域
函数作用域
作用域是变量的访问范围，在JS中，函数是用于划分作用域的
全局变量和局部变量
全局作用域：在任何函数之外的全是全局作用域
全局变量在任何的位置都可以访问
局部作用域(函数作用域)：在函数内部的就是局部作用域
局部变量只能在定义他的函数内部才能访问
变量的访问规则
默认let声明的变量，在同一个作用域不可以声明多次
局部作用域访问变量时遵循就近原则，首先在当前函数内
查找，如果没有就往上一级查找
函数的参数
函数的参数分为实参和形参
形参是函数定义是的参数
function 函数名(形参列表){
}
实参是函数调用时的参数
函数名(实参)
形参的本质就是函数内的一个局部变量
形参只有内部可见外部是无法访问的
实参与形参之间是一种赋值的关系
实参与形参之间是按顺序传递的
参数的作用
形参就是在写代码时不确定数据时的一个占位符
实参就是在函数调用时将具体的数值传递给形参的
实参与行参就是为了让函数更具有通用性
函数的拓展
arguments关键字
arguments就是用于解决行参的不确定问题
arguments是JS预定义的，在函数的内部使用
arguments会将函数调用时将传递的实参组成一个伪数组
return关键字
作用：将函数内部的数据返回函数调用处
特点：
1.当函数的内部执行到return后就会中断函数的执行
2.函数内部可以有多个return，无论哪个return被执行都会中断函数
3.函数内部如果没有return，默认返回的是undefined
4.函数内部的return会将数据返回到函数的调用处，函数的调用语句就可以当成数据使用
匿名函数
匿名函数是没有名字的
function(){
}
默认匿名函数会报错，因为不写函数名就无法使用该函数的名字调用里面的函数
在定义里面函数时，我们就要让这个式子函数调用(函数自调用)
函数自调用语法：
(function(行参列表){
}(实参列表))
函数的两种定义形式
函数的定义式
调用代码可以在定义代码之前
function 函数名(){
}
函数的表达式
表达式必须先定义后调用
let 函数名 = function(){
{
}
回调函数
函数的参数是函数
准备一个函数，将这个函数传入
让调用者传递一个函数进来。当异步操作执行得时候，拿到了数据。就调用传进来得函数，并把这个数据作为参数传进去
function demo2(callback){
let a = 10
let b = 20
setTimeout(()=>{
let c = a + b
callback(c)
})
}
demo2(data=>{
console.log(data)
})
//function fn(data){
//console.log(data)
//}
//demo2(fn)
对象
对象的基本操作
创建对象
语法：
{
键:值,键:值,键:值...}
值可以是任意的类型
对象的成员
对象中的每一个 键：值 就是对象的一个成员
成员又可以细分为属性与方法
属性：如果成员的值是非函数，那么这个成员就是对象的属性
方法：如果成员的值是函数，哪个这个成员就是对象的方法
let obj = {
name:'zhangsan',
age:20,
sex:'男',
以上的都是属性
sing:function(){
console.log('hello');
}
}
属性的操作
对属性的操作要通过对象.属性名
访问属性
语法：对象.属性名
修改属性
语法：对象.属性名 = 值
如果要修改的属性名不存在，则是添加操作
删除属性
语法：delete(对象.属性名)
方法的操作
属性的本质是变量
方法的本质是函数
方法调用
对象名.方法
添加方法
对象名.方法 = function(){
}
删除方法
delete(对象名.成员名)
this关键字
this关键字是预定义的
Js提供他的目的就是在方法内访问当前对象的其他成员
this用于方法内访问当前对象的其他成员
1.定义在对象内的方法中的this代表当前对象
2.通过添加的方法到对象上的方法中的this代表当前对象
3.将方法单独进行定义，再赋值给多个对象，此时的this，谁调用了就代表哪个对象
例：
let obj = {
name:'zangsan',
age:20,
say:function(){
console.log(this.name);
}
}
say()方法被obj对象调用了，所以say方法内的this就代表的.前obj这个对象
obj.say();
值类型与引用类型
将一个变量a赋值给另一个变量b，修改其中的一个变量
看是否影响另一个变量，这样就可以把数据类型又划分
为值类型与引用类型
值类型：将一个变量a赋值给另一个变量b，修改其中的一个变量，
不影响另一个变量
引用类型：复杂数据类型(Array,Object)就是引用数据类型
冒泡排序法
let arr = [123, 235, 365, 345, 1253, 64, 24, 25,];
冒泡排序法的核心代码就是相等的两个进行比较，如果一个比后面的打，便交换位置
外层循环用于控制比较多少轮
for (let j = 1; j < arr.length - 1; j++) {
内层循环用于获取没有比较的最大值，并保存到后面
for (let i = 0; i < arr.length - j; i++) {
如果前一个值比后一个值大在，则交换位置
if (arr[i] > arr[i + 1]) {
let tmp;
tmp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = tmp;
}
}
}
console.log(arr);
对象数组
如果一个数组中的元素都是数值，那么这个数组称之为数值数组
如果一个数组中的元素都是对象，那么这个数组称之为对象数组
对象的扩展
中括号访问符
let obj = {
name：'zhansan',age:20,sex:'man'
}
让浏览器输入所要查询的属性
let key = prompt('请输入要查询的信息')
该成员被保存到一个变量中们想要通过这个变量访问具体成员的值
此种情况就必须使用[]访问
对象的成员不但可以通过.访问，还可以通过[]访问符进行访问
[]访问符的特点可以将变量解析出来作为成员名
console.log(obj[key])
in关键字，可以判断成员是否存在
语法：
成员名 in 对象名
统计次数
例：
let arr = ['a', 'b', 'c', 'a', 'b', 'c', 'a', 'x', 'z','e','f','a','c'];
let obj = {
};
for(i = 0 ;i< arr.length ;i++){
let pro = arr[i];
先进行遍历寻找，如果这个数组下标的值存在于对象中
就对该数组下标所对应的值进行数量累加
if(pro in obj){
obj[pro]++;
如果该数组下标所对应的值不存在于对象中
就将该数组下标的所对应的值附加给对象的键
并且值的数量赋值为1然后遍历进行数量累加
}else {
obj[pro]=1;
}
}
console.log(obj);
对象的遍历
for(变量 in 对象){
}
执行逻辑：
for...in在遍历对象时，会依次读取成员的键并赋值给变量，
这个变量中保存的就是成员键
例：
for(let k in obj){
k变量中保存的是键
如果想通过这个变量读取到对应的值，需要使用[k]
console.log(k+':'+obj[k]);
console.log(obj[k]);
}
构造函数
构造函数时用于批量构造对象，
什么是构造函数，就是函数，一般如果你只是这个函数要被new
建议将这个函数名首字母大写
定义一个构造函数
function Person() {
构造函数内的this就是代表所要构造出来的那个的对象
console.log(this);
}
let o = new Person();
构造出来对象时，向这个对象添加的方式添加成员
console.log(o);
new的工作流程
当我们使用new调用了一个函数时JS执行了以下几步
1.创建了一个空对象
2.将这个对象赋值给this关键字
3.通过this向这个对象添加成员
4，将这个对象return返回
系统构造函数
系统除了提供了Object构造函数，还提供了很多的构造函数
Object，Array，Function，Boolean，Number，String
Js几乎为每一种数据类型都提供了一种构造函数
每个构造函数都可以构造相应的数据对象
数据类型检测
typeof用于检测简单数据类型
instanceof用于检测对象与构造函数的关系
有一个构造函数构造对象的过程也称之为实例化，扽到对象
判断数组：
新版本的js新增的方法
Array.isArray(),用于判断数组
let arr = []
console.log(Array.isArray(arr))
JSON格式
JSON简介
JSON Javascript Object Notation Js中的对象表示法
JSON就是近年来用于两个计算机（两种语言）之间传递的一种格式
两台计算机之间只能传递字符串(二进制)
对象,数组的JSON格式
传递之前是一个对象
let obj = {
name:'zansang',
age:20,
sex:'man'
}
为了将对象传递给另一台电脑，我们需要将这个对象转换为JSON格式
let jsonObj = '{"name":"zhangsan","age":20,"sex":"man"}';
格式：外面时单引号，对象的成员名要使用双引号
数组的JSON的格式
let jsonArr = '[10,20,30]';
JSON.parse & JSON.stringify
JS提供了一个对象，JSON，专用于JSON相关的转换
两台计算机之间只能传递字符串
JSON一种数据传递的格式，本质就是一个字符串
JSON.stringify()
用于将数组或对象转换成为JSON格式
JSON.parse()
用于将JSON格式转换成为对象或数组
date对象
创建date对象
date日期时间
1.创建时间对象
Date是JS提供的构造函数，就是为了构造时间日期对象
语法1：获取当前的时间对象
let myDate1 = new Date();
console.log(myDare1);
语法2：获取过去或将来的时间对象
let myDate2 = new Date(1980,1,16,12,12,12);
console.log(myDate2);
语法3：
let myDate3 = new Date('1980-1-1 12:12:12');
console.log(myDate3);
时间格式转换
例：
let myDate = new Date();
toLocaleDateString 获取到的日期信息 2021/4/3
console.log(myDate.toLocaleDateString());
toLocaleTimeString() 获取到的时间信息 上午9:52:01
console.log(myDate.toLocaleTimeString());
toLocaleString() 获取日期和时间信息 2021/4/3上午9:53:36
console.log(myDate.toLocaleString());
提取时间信息
例：
let myDate1 = new Date();
获取年份
console.log(myDate1.getFullYear());
获取月份
console.log(myDate1.getMonth());
获取日期
console.log(myDate1.getDate());
获取天数
console.log(myDate1.getDay());
获取小时
console.log(myDate1.getHours());
获取分钟
console.log(myDate1.getMinutes());
获取秒数
console.log(myDate1.getSeconds());
getTime用于获取时间戳
时间戳：
从时间原点到时间对象所经历过的毫秒数
时间原点：认为的规定从1970.1.1 0:0:0作为计算机世界的时间原点
console.log(myDate1.getTime());
时间函数的练习：
需求封装一个函数，返回当前的日期与时间信息
格式：2021-4-3 10:02:34
function myTime() {
let myDate1 = new Date();
let year = myDate1.getFullYear();
let month = String(myDate1.getMonth() + 1).padStart(2,'0');
let date = String(myDate1.getDate()).padStart(2,'0');
let h = String(myDate1.getHours()).padStart(2,'0');
let m = String(myDate1.getMinutes()).padStart(2,'0');
let s = String(myDate1.getSeconds()).padStart(2,'0');
2.进行拼接
let str = `${
year}-${
month}-${
date} ${
h}:${