前端入门
2023-12-25 11:54:10 24 举报AI智能生成
前端开发入门，是学习构建网页和应用程序的第一步。它涵盖了HTML、CSS和JavaScript等核心技能，通过这些技术，你可以创建出美观且功能丰富的网页。HTML用于定义网页的结构和内容，CSS则负责样式和布局，而JavaScript则赋予网页交互性和动态性。学习前端开发需要掌握基本的编程概念和技术，如变量、函数、条件语句等。同时，了解浏览器的工作原理和常用的调试工具也是必备的技能。通过不断实践和项目经验，你将逐渐熟悉前端开发的流程和常用工具，从而能够独立完成网页和应用的开发。无论是初学者还是有一定基础的人，前端开发都是一个有趣且具有挑战性的领域，它将为你打开通往Web世界的大门。
作者其他创作
大纲/内容
https://www.bilibili.com/video/BV17z4y1D7Yj/?spm_id_from=333.999.0.0
HTML+CSS
https://www.bilibili.com/video/BV1ay4y1r78B/?spm_id_from=333.999.0.0
基础
https://www.bilibili.com/video/BV1AT4y1v75t/?spm_id_from=333.999.0.0
进阶
JS
https://www.bilibili.com/video/BV1Zy4y1K7SH/?spm_id_from=333.999.0.0
VUE
https://www.bilibili.com/video/BV1834y1676P/?spm_id_from=333.999.0.0&vd_source=2f0871ea1f78232f9798f6c8915f6915
微信小程序
https://www.bilibili.com/video/BV1oy4y1j75s/?spm_id_from=333.999.0.0
uniapp
https://www.bilibili.com/video/BV1ma4y1h79M/?spm_id_from=333.337.search-card.all.click&vd_source=2f0871ea1f78232f9798f6c8915f6915
域名/服务器/DNS
学习资料
前端生态
前端优化
凡是能彼此通信的设备组成的网络就叫互联网
定义
互联网
国家和地区
通用
新通用
顶级域名
一级域名
二级域名
分类
域名
域名系统（DNS，Domain Name System），将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串
DNS
数据接收和传递
存储
处理
服务器
JS引擎
渲染引擎
浏览器
常见协议
请求类别
常见状态码
Cookie
HTTPS
HTTP
前端基础知识
相互存在关系的数据元素集合
数据元素之间的逻辑关系
有且仅有一个开始和一个终端节点，所有节点最多只有一个直接前驱和一个直接后继
线性结构
一个节点可能有多个直接前驱和直接后继
非线性结构
划分类型1
结构元素同属一个集合
集合结构
结构元素存在一对一的线性关系
结构元素存在一对多的层次关系
树形结构
结构元素存在多对多的任意关系
图状结构
划分类型2
种类
逻辑结构
数据元素及其关系在计算机内存中的表示(映像)
一组【连续】的存储单元依次存储数据元素，并用【存储位置】表示逻辑关系
顺序
一组【任意】的存储单元依次存储数据元素，并用【指针】表示逻辑关系
链式
存储节点信息的同时， 建立附加的索引表
索引(了解)
根据节点的关键字直接计算出该节点的存储地址
散列(了解)
存储结构
对数据结构可以施加的操作及其存储结构上的实现
同性质值集合 + 集合上的一组操作
数据类型
数学模型 + 模型上的一组操作
数据对象
逻辑关系
基本操作
抽象数据类型
数据运算
内容
数据结构
数值
非数值
数据
性质相同的数据元素集合
组成数据的基本单位
数据元素
构成数据元素不可分割的最小单位
数据项
数据术语
解决问题的方法和步骤，指定的有限序列
自然语言
流程图
伪代码
程序代码
描述
步骤有穷
时间有穷
有穷性
明确无歧义指令
确定性
可行性
零个或多个
输入
一个或多个
输出
特性
正确性
可读性
输入非法数据时有相对响应
健壮性
事后统计
∑语句频度(执行次数) * 语句执行一次所需时间
语句执行一次所需时间由硬件决定，故假设其均为单位时间 ==> 语句频度之和决定算法运行时间 ==> 比较算法数量级n^m(渐进时间复杂度) ==> 基本语句(语句频度最大/嵌套层次最深)重复执行的次数T(n)=O(n^m)
最坏
平均
最好
常数阶<对数阶<线性阶<线性对数阶<平方阶<立方阶<K次方阶<指数阶
时间复杂度T(n)=O(f(n))
事前分析
时间
输入/输出
指令
常数
变量
本身占据空间
辅助空间
占据空间
空间复杂度S(n)=O(f(n))
高效性
要求
算法与算法分析
数据结构的基本概念
具有相同特性的数据元素的有限序列
顺序表示(常用)
数据域 + 指针域
存储元素 + 下一个元素地址
链式表示
线性表
push插入元素到栈顶(表尾)
栈已满仍然压入元素，一种错误
上溢
栈已空仍然弹出元素，问题处理结束
下溢
顺序栈实现
入栈
pop删除栈顶(表尾)元素
出栈
分治法求解
递归
栈 Stack(后进先出)
push表尾
插入
pop表头
删除
队列 Queue(先进先出)
栈和队列(操作受限的线性表)
零个或任意字符组成的有限数列
串 String(内容受限的线性表)
数组和广义表(线性结构推广)
根节点
节点拥有的子树数
树内各节点度的最大值
树的度
终端节点，度 = 0
叶子
度
树的最大层次
树的深度
m(m ≥ 0)棵互不相交的树的集合
森林
基本术语
结构简单、规律性强，所有树都能转为唯一对应的二叉树，简化存储和运算
度 ≤ 2
子树分左右，空也占位置
可以存在空集(空左/右树)
特点
节点之间的分支之和
路径长度
树根到每个节点的路径长度之和
树的路径长度
将树中节点赋于某种含义的数值为该节点的权
权
根节点到该节点之间的路径长度与该节点权的乘积
节点带权路径长度
树中所有叶子节点的带权路径长度之和
树的带权路径长度WPL
基本概念
带权路径长度(WPL)最短的二叉树(多为完全二叉树)
满二叉树不一定是哈夫曼树
哈夫曼树中权越大的叶子离根越近
具有相同带权节点的哈夫曼树不唯一
构造哈夫曼树时首选权值小的叶子结点
初始有n棵二叉树，n - 1次合并形成哈夫曼树
n - 1次合并产生n - 1个新节点
共2n - 1个节点，度均不为1
总结
贪心算法
哈夫曼树(最优二叉树)
二叉树
树
定点和边的集合
带箭头的边
有向图
无箭头的边
无向图
任意两点有边
完全图
边或弧很少(e < nlogn)
稀疏图
边或弧很多
稠密图
边/弧带权
网
有边/弧相连的两个顶点之间的关系
邻接
边/弧与顶点之间的关系
关联
与该顶点相关联的边的数目
顶点的度
图
基本的数据结构
查找技术
排序技术
基本的数据处理技术
基本结构
B站链接：https://ock.cn/bpmjj
青岛大学-王卓
课程介绍
数据结构与算法基础
计算机是互联、自治的自算计集合
概念
终端设备
客户机
PC机
工作站
高性能计算机
网络服务器
计算机系统
网络交换设备
互联设备
传输设备
网络通信设备
高性能打印机
大容量硬盘
网络外部设备
网络操作系统
客户连接软件
网络管理软件
网络软件
组成
资源共享
数据通信
远程传输
集中管理
分布式处理
负载均衡
功能
广域网
城域网
局域网
个人区域网
规模/距离
公用网
专用网
使用者
电路交换
报文交换
分组交换
交换技术
广播式
点对点
传输技术
星状网
环状网
树状网
网状网
总线型网
拓扑结构
概述
应用层
表示层
会话层
传输层
网络层
数据链路层
物理层
OSI
TELNET
FTP
SMPT
TCP
UDP
IP
网际层
网络接口层
TCP/IP
域名解析
DNS劫持
DNS污染
DNS查询算法
DNS服务器搭建
FTP服务器搭建
FTP/TFTP
静态IP
动态IP
DHCP服务器搭建
DHCP
远程登录的应用
请求方式
响应状态码
协议格式
HTTP1.1
HTTP2.0
HTTP与HTTPS
SMTP
SNMP
面向连接
点对点通信
可靠交互
全双工通信
面向字节流
特征
确认和超时重传
数据合理分片与排序
流量控制
拥塞控制
数据校验
保证可靠传输
报文结构
粘包问题
建立连接:三次握手
断开连接:四次挥手
连接管理
有限状态机
无连接
尽最大努力交付
面向报文
无拥塞控制
支持一对一、一对多、多对多的交互通信
首部开销小
协议
FTP:21
TELNET:23
SMTP:25
DNS:53
TFTP:69
HTTP:80
HTTPS:443
SNMP:161
端口号
作用
构成
A类
B类
C类
D类
E类
IPv6
专用IP地址
0.0.0.0
127.0.0.1
255.255.255.255
特殊IP地址
子网掩码
ARP
报文格式
PING
TTL
应用
ICMP
IGMP
VPN
NAT
VPN和NAT
静态路由
RIP
OSPF
内部网关协议
BGP
外部网关协议
动态路由
路由表
路由与转发
数据单元:帧
封装成帧
透明传输
差错检测
三个基本问题
点对点协议
硬件地址（MAC地址）
单播帧（一对一）
广播帧（一对全体）
多播帧（一对多）
广播信道
主要信道
传输数据的基本单位
数据传输系统
单向通道（单工通道）
双相交替通信（半双工通信）
双向同时通信（全双工通信）
通道
频分复用
时分复用
波分复用
码分复用
通道复用技术
五层协议
体系结构
计算机网络
操作系统
计算机基础
物理屏幕
物理分辨率
软件驱动
代码参考
逻辑分辨率
分辨率
实现 => 网页宽度 = 设备宽度
视口viewport
工具：像素大厨
二倍图
移动端
设计模式
用于获取并设置存储库或全局选项（一般刚下载的git需要配置用户名和用户邮箱，以获取获取代码的权限）
git config
将远程仓库的资源克隆到本地
git clone
将远程仓库的资源拉取到本地
git pull
从远程仓库中下载资源，且和pull不一样，pull会合并资源，fetch不会
git fetch
查看当前项目中源代码的状态
git status
把所有的文件都提交到暂存区
git add
将文件从工作区和暂存区删除
git rm <file>
强行将文件从工作区和暂存区中删除，如果删除之前修改过并且已经放到暂存区的话，则必须要用强制删除选项-f
git rm -f <file>
将文件从暂存区中移除，但仍然希望保留在当前工作目录中
git rm --cached <file>
git rm
将暂存区中的内容添加到本地仓库中
git commit -m \"提供信息\"
查看本地的分支
git branch
新建一个分支并切换到该分支
git checkout -b 分支名
git checkout
将某个分支合并到当前所在分支
git merge
在另一个分支基础之上重新应用，用于把一个分支的修改合并到当前分支，解决代码冲突
git rebase
将本地分支的更新，推送到远程仓库中
git push <远程主机名> <本地分支名>:<远程分支名>
用于显示提交的日志信息
git log
常用指令
Github
代码托管
Git
Git版本控制
Linux服务商
正则表达式
软件开发基础
前端基础
【创建】超文本标记语言，它不是一种编程语言，而是一种标记语言，使用标记标签来描述网页。然后浏览器读取HTML文档，使用标签来解释页面的内容，以网页的形式显示。
定义（Hypertext Markup Language）
记事本.html
VScode
工具
title
description
keywords
html（html/head/body）
div
h1-h6（文本标题）
p（段落）
ul>li
ol>li
dl>dt>dd
列表
table
form
hr（水平线）
br（换行）
元素名
元素显示为矩形区域
独占父元素一行，默认自上而下排列
宽度默认父元素宽度，高度内容撑开，宽高自定义
一般作为其他元素的容器
块元素block element
a（链接）
span（文本独立修饰，内容宽度占空间距离）
u(下划线)
b/strong(加粗)
i/em(倾斜)
s/del(删除线)
sup(上标)
sub(下标)
小标
父元素内同行显示，默认横向排列
不能定义宽高，只能根据所包含的文本决定
遵循盒模型基本规则
行内元素inline element
img
input
textarea
button
select
同时具备块和行内元素特点
一行可以显示多个
可以设置宽高
行内块元素inline-block element
历史标签
<link rel="shortcut ico" href="ico图片路径" type="image/x-icon">
ico图标
header/section/footer
nav/main/aside
figure/article
H5语义化标签
color/width/height/align/style...
标签属性
常用标签
type="1/a/A/i/I"
start="取值为数字，代表type开始位置"
ol属性
有序列表（ol>li）
disc（默认实心圆）
circle（空心圆）
square（实心方块）
none（无）
type=
ul属性
无序列表（ul>li）
./当前路径
../返回上一级文档路径
src="图片路径"
title="鼠标悬停后的提示信息"
alt="图片加载失败后的提示信息"
width="默认单位px"
height="默认单位px"
属性
图片（img）
href="引用路径"
_self（默认原页面打开）
_blank（新页面打开）
target="文档打开位置"
超链接（a）
自定义列表（dl>dt>dd）
width
height
bgcolor
背景
solid
dotted
dashed
border（外边框）
bordercolor
合并边框
border-collapse:collapse
边框
单元格与单元格的间距
cellspacing
单元格与内容的间距
cellpadding
left
center
right
align（表格对齐)
表格
thead
tbody
tfoot
结构
标题，仅一个，居中显示
caption
表头，内容居中，加粗显示
thtable head
行高
align（水平对齐)
top
middle
bottom
valign（垂直对齐）
文字对齐
trtable row
列宽
合并单元格列数
colspan
合并单元格行数
rowspan
表格合并
tdtable data
表格（table>tr>td）
get（从服务器获取数据）
post（向服务器发送数据）
method=
action="发送表单数据的位置"
text
password
submit
<button>按钮名称<button>
reset
历史属性
color（颜色选择）
tel（电话号码，仅适用手机端）
search（搜索）
min=“最小值”
max=“最大值”
value=“初始值”
step=“步长”
range（滑块效果）
number（数字类型）
email（邮箱）
url（完整http地址）
month（月份选择）
week（周数选择）
time（时间选择）
datetime-local（当地时间选择）
date（日期选择）
H5新增属性
<input type="text" list="mylist" name=""><datalist id="mylist"> <option value="手机"></option> <option value="手表"></option> <option value="手镯"></option> <option value="手环"></option> </datalist>
H5数据/选项
name="必须设置，用于准确发送对应用户数据给服务器"
value="修改按钮上显示的文字"
placeholder=“输入框内提示必须按照1个数字，3个大写字母填写”
title=“悬浮提示必须按照1个数字，3个大写字母填写”
autofocus(获取焦点）
required（必填项）
pattern=“[0-9][A-Z]{3}"（正则表达式）
mutiple（支持多个邮箱地址，逗号隔开）
H5新增
其他属性
input（输入框）
<option value=‘选项’>选项</option>
select（选择框）
表单（form>input）
scr="引用地址"
controls（播放按钮）
loop（循环）
autoplay（自动播放）
muted（静音）
audio属性
poster=“海报”
width=“宽度”
height=“高度”
video属性
H5音/视频
特殊标签
标签
尖角
（文本影响宽度）
&emsp（一个中文宽度）
空格
©
版权
&trade
®
商标
特殊符号
注释：crtl+/
换行：ctrl+enter
标注：alt+w
复制：alt+shift+↓
快速创建：标签名a>标签名b*N
快捷键
HTML
【美化】层叠样式表，是一种样式表语言用来渲染HTML网页，可以更改颜色、字体、位置等等属性，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
定义（Cascading Style Sheet）
选择符{属性1：属性值； 属性2：属性值……}
样式模板<style>
html内部使用
内部样式表
style行内嵌入
行内样式表
<link href='' rel="stylesheet">
head最下方
位置
引用
XHTML的标签
兼容性强
与html同步展示页面
rel=stylesheet
type=text/CSS
href=CSS文件路径
link
CSS的语言
语言较新，兼容性较差
会出现延迟加载CSS情况
url（地址）
@import
新建CSS文档
外部样式表
样式表类型
外部<内部<行内（就近原则）<!important
样式表优先级
样式
color
style
weight
size
family
font
indent
align
line-height
继承性
不同样式 => 样式叠加
相同样式 => 样式覆盖
同一标签(相同优先级)
层叠性
继承<通配符＜标签＜类＜id＜行内样式＜!important
公式
实际开发不建议使用
位置：属性值后面，分号前面
继承：不支持继承优先级
!important
优先级
display/position/float/clear/visibility/overflow
布局属性
width/height/margin/padding/border/background
盒子模型+背景
color/font/text-decoration/text-align/line-height
文本内容属性
cursor/border-radius/text-shadow/box-shadow
点缀属性
书写顺序
含义：元素/类型选择器
语法：元素名{属性：属性值；}
特点：批量操作，无法精确定位
element
含义：类选择器
语法：.class名{属性：属性值；}
特点：批量选择某类信息，class顺序决定优先级，后覆盖前
class
含义：ID选择器
语法：#id名{属性：属性值；}
特点：精准一一对应
id
含义：通配符选择器
语法：*{margin：0； padding:0;}清除所有元素默认的边距和填充
特点：一般用做清理
*
含义：群组选择器
语法：选择符1，选择符2……{属性：属性值；}
特点：批量添加任意选择符，统一操作
群组
含义：包含选择器
语法：选择符1 选择符2{属性：属性值；}
特点：选择符1包含选择符2
包含/后代
定义：伪类选择器（超链接）
a:link{属性：属性值；} 初始时※
a:visited{属性：属性值；} 访问后
a:hover{属性：属性值；} 悬停时※
a:avtive{属性：属性值；} 点击时
语法
特点：语法顺序不能更换
a
类型
高权重覆盖低权重
相同权重，就近原则
权重
ul>li（亲儿子）
li1+li2(同等级后第一个亲兄弟）
li1~li2（同等级后所有亲兄弟）
层级
[class]
属性选择
[class=box]
特点：仅属性为需求属性值时选取
完全匹配
[class~=box]
特点：无论元素同时包含几个属性值，只要含有需求属性值就选取
包含匹配
[class^=a] 以a开头元素
[class$=a] 以a结尾元素
[class*=a] 包含a的元素
模糊匹配（字母）
属性[]
:first-child
:last-child
n
even/2n
odd/2n-1/2n+1
:nth-child()
多子
:only-child
独生子
:emtpy(空格、回车等文本均不允许存在)
无子
:root(等同html)
根
结构伪类
手风琴
目标伪类:target
input:disabled（输入框失效）
input:focus（焦点选择器）
去除默认值：input[type=checkbox]{apprearance:none}
点击后属性：input:checked{}::selection()
checkbox
UI状态伪类
:not(其他选择器)
否定伪类
:link
:visited
:active
:hover
a选择器
动态伪类
伪类
CSS3新增
选择器
italic
oplique
normal
font-style：倾斜
100px slighter
400px normal
700px bold
900px holder
font-weight：粗细
12px（设计偏好）
16px（系统默认）
font-size：大小
font-family：字体
justify
font-align：对齐
font: style weight size/line-height family
合并
line-height：垂直对齐
文本
行内(块)元素
text-align：水平对齐
对齐
red/green/blue...
rgb（255，0，0）
#fff
color：字体颜色
capitalize：首字母全部大写
uppercase：字母全部大写
lowercase：字母全部小写
text-transform：英文大小写
@font-face:{\url(地址);}
添加至项目后下载
字体图标iconfont
C3字体引入
字体
text-indent：字符缩进，常用2em
letter/word-spacing：字体、字符间距
underlin
overline
line-through
none
text-decornation：线修饰
文章
background
disc
circle
square
list-style-type
list-style-image:url(地址）
outside（默认）
inside
list-style-position:
list-style：square url(地址) inside
复合
width/height：大小
red...
a表示透明度
background-color
H：Hue(色调)，取值0 - 360：0(红)-120(绿)-240(蓝)-360(红)
S：Saturation(饱和度)，取值0.0% - 100.0%
L：Lightness(亮度)，取值0.0% - 100.0%
A：Alpha(透明度)，取值0-1
HSLA
背景块
background-image:url（）:插入
repeat（默认）
repeat-x
repeat-y
no-repeat
background-repeat：平铺
px px
% %
left/right/center top/bottom/center
background-position:位置
放到最大，铺满背景
cover
图片边长放到背景最大，无法铺满背景，留白
contain
background-size:大小
随背景滚动离开
scroll(默认)
相对浏览器页面固定（位置）
fixed
background-attachment
background中未填写的属性值会覆盖之前数据
background-size不可以复合
background：color url(地址）repeat position/size
图片
包含盒子内容一同影响
0-1：全透明-不透明
透明opacity
padding（内边框）
solid（默认）
double
边线
width: 0px;height: 0px;border: 50px solid transparent;border-bottom/top: 50px solid black;
三角形
border（边框）
margin：0 auto（屏幕内居中）
支持负距离
水平求和
垂直合并
兄弟背景
互相嵌套的块级元素，子margin-top👉父padding-top，导致父元素一起下移
分隔父子上边框 => 父元素设置border-top/padding-top/输入文本
给父盒子或子盒子添加浮动
overflow：hidden
解决方法
父子背景(塌陷现象)
块元素
水平方向：有效
垂直方向：无效
margin/padding布局
行内元素
margin（外边框）
box-sizing:content-box（默认）
盒子大小=padding+margin+width/height
性质
标准盒模型
水平偏移 垂直偏移 模糊距离 阴影大小 阴影颜色 inset(内外)
box-shadow:
水平偏移 垂直偏移 阴影宽度 阴影颜色
text-shadow:
阴影
正方形
边长(border+padding+width/height)一半
50%-100%
border-radius:
矩形
border-radius:50%;
ellipse
矩形（长宽2：1）
border-radius:宽 宽 0 0;
halfcircle
border-radius:宽 0 0 0;
sector
border-radius:圆角边框
边框/阴影
box-sizing:border-box;
盒子大小=width/height（自动调整）
怪异盒模型
box
浮动到上层脱离标准流，不能撑开父元素，未浮动盒子补位
定义网页中其他文本如何环绕该元素显示
实现横向排列，可以设置宽高
受上面元素边界影响
逻辑
float
添加浮动
浮动过多，换行会出现问题
父元素高度height
增加空标签，不利于代码可读性；行内元素不支持
both
额外标签法clear
父元素内容之后添加
单伪元素清除法：father::after{content:'';display:block;clear:both;//补充代码：网页中伪元素隐藏height:0;visibility:hidden}
::after
父元素内容之前添加
同时可以解决margin塌陷问题
::before
伪元素清除法(CSS模拟标签)
块元素相互影响，溢出内容隐藏
overflow:hidden
Web页面可是CSS渲染的一部分，块盒子布局过程发生区域，浮动元素与其他元素交互区域
html标签
display:inline-block
overfolow:auto/hidden...(非visible)
创建方法
BFC盒子会默认包裹住内部子元素(标准流、浮动)
清除浮动
BFC盒子本身与子元素不存在margin塌陷
解决margin塌陷
块格式化上下文Block Formatting Content
浮动
visible（默认，溢出内容显示在元素外）
hidden（溢出内容隐藏）
scroll（固定滚动条）
auto（溢出时添加滚动条）
inherit（遵从父元素继承overflow属性值）
x（x轴溢出）
y（y轴溢出）
父盒子设置overflow保持其他盒子正常显示
子盒子设置overflow单独设置滚动条
子盒子滚动条
::-webkit-scrollbar{display:hidden}
隐藏滚动条
特殊用法
overflow（容器）:
normal（默认，浏览器忽略空白）
nowrap（不换行）
pre（不换行，显示空格、tab、回车）
pre-wrap（换行，显示回车、空格）
pre-line（换行，显示回车，不显示空格）
white-space（文本空白）:
亚洲文字换行规则
非亚洲文字换行规则
按语音折行
“-”处折行
纯字母/数字无法折行
亚洲文字换行规则：字母数字都是字符可以任意换行，会破坏掉英文的组词
break-all
非亚洲文字换行规则：英文内容换行，文字无法换行
keep-all
word-break（字内换行）：
允许内容顶开容器边界
文字在边界内换行
break-word
word-wrap（文字边界） :
clip（默认）
white-space:nowrap
text-overflow:ellipsis
背景声明
ellipsis（省略号）
text-overflow（溢出文本）:
溢出
标准流情况
static（默认静态定位）
相对于自己原来的位置进行移动
子绝父相
小范围移动
页面中占位置，没有脱标
relevant（相对定位）
默认相对于浏览器可视窗移动
无
相对 最近 & 有定位 的祖先元素移动
有
祖先元素定位
全脱离文档，不会出现文字环绕
父元素有定位即可，一般选相对定位不影响布局
position：absolutetop:50%left:50%margin-left: -half widthmargin-top: -half height
水平垂直居中
值越大，层级越大越靠上，支持负数
父子元素中，添加到子元素
兄弟元素中，添加两者均可
z-index
absolute（绝对定位）
相对浏览器进行定位移动
页面中不占位置，已脱标
相对固定在浏览器可视页面
fixed（固定定位）
sticky（粘性定位）
inherit（继承定位）
position（定位）:
<a herf="#页面内引用元素名称“>点击文字</a>
锚点
background-image
background-position
精灵图
auto（不写时默认自适应）
min/max控制最小和最大长度
宽高
两栏布局
三栏布局
N栏布局
窗口
自适应
name=“同组内容单选”；id=“提供标签实现文字点选”；checked（默认选择）
label：for=“input内的id名称”
radio：单选框
checkbox：复选框
image：上传“提交”标志
file：上传文件
hidden：隐藏文件
size=“显示几个选项”multiple=“同时支持选择几个选项”
option：value（回传前端信息，用户不可见）；selected（默认选择）
select：下拉菜单
<textarea placeholder=“输入提示”>有我没提示，空格也占位的意见输入框</textarea>
textarea：文本域
<fieldset> <legend>外框显示内容</legend> <input type="radio" name="aaa" id="man"><label for="man">选项</label></fieldset>
fieldset：字段集
baseline(默认)
vertical-align
input & button
input & img
div & input
div & img
针对：行内(块)元素
垂直对齐
进阶表单
to right/top/bottom left...
0-180deg
direction
color-stop
ellipse(默认)
shape
side
corner
closest
farthest
gradient渐变
width/height
transform
propery
持续多久
duration
delay
linear(匀速)
ease(逐渐变慢的减速)
ease-in(加速）
ease-out（减速）
ease-in-out（先加速，后减速）
cubic-bezier(贝塞尔曲线网站复制属性值)
两个关键帧之间的帧数，数值越大越接近linear
start 保留下一帧，看不到第一帧 === step-start
end保留当前帧，看不到最后一帧（闪现太快），因此最后一页多为空白用于跳过，有n个关键帧就用100除n得到百分比 === step-end
timing-function
复合：all/具体属性值 运动时间 延迟时间 动画类型
transition：过渡
translateX（右正左负）
translateY（下正上负）
类别
先移动再缩放/旋转，否则影响图片坐标轴方向
translate平移
scaleX
scaleY
scale()
支持负值缩放，倒向放大效果
scale缩放
rotateX
rotateY
正值 顺时针
负值 逆时针
rotate旋转
skewY
skewX
skew倾斜
transform-origin：left bottom;
中心点修改
2d变形
flat（默认2d舞台）
preserve-3d（3d空间）
transform-style：
添加到父级
perspectice:800-1200px景深/透视
特殊要求
平移
缩放
旋转
立方体
3d变形
transform：变形
liner
补间动画(多)
咔咔表
n=精灵图个数
精灵图动画
steps(n):逐帧动画
速度曲线
infinite
重复次数
alternate
动画方向
动画停留在最初状态
backwards(默认)
动画停留在结束的状态
forwards
执行完毕状态
paused
配合:hover使用
暂停动画animation-play-state
animation:动画名称1* 动画时长* 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态，动画名称2* 动画时长*，...;
使用动画animation
from{}to{}
0%{}n%{}100%{}
定义动画@keyframes 动画名称{}
none（默认值）
forwards（动画停在最后一帧）
backwards（动画停在初始化面，第一帧）
animation-fill-mode:
注意
抽屉
多张图片横向排列为一张长图轮流在盒子显示
匀速播放，重复画面短暂停下
为实现无缝隙轮播，最后一份与第一份一致
@keyframes name{}
轮播
使用案例
animation：关键帧动画
动画
从上往下，垂直布局，独占一行
块级元素
从左往右，水平布局，自动折行
标准流(文档流)
垂直布局块级元素 => 水平布局
元素在网页任意位置摆放，用于盒子层叠情况
定位后的元素层级最高，可以层叠在其他盒子上
可以让盒子始终固定在屏幕中某位置
定位
宽度自适应
古老布局，目前使用较少
百分比布局(流式布局)
标准流＜浮动＜定位
不同布局
相对 = 决定 = 固定
HTML位置：越靠后，层级越高
z-index：数值越大，层级越高
不同定位
基础布局
column-count:元素应该被分隔的列数
column-gap:列之间的间隔大小px
column-rule:列边框分割线px
auto列高度自适应内容
balance所有列的高度以其中最高的一列统一
column-fill:设置或检索对象所有列高度是否统一
none不跨列
all横跨所有列
column-span:设置或检索对象元素是否横跨所有列
column-width:设置或检索对象每列的宽度px
break-inside:avoid;禁止盒子内部折行
多列布局
一套代码适配不同尺寸网页
从小到大写
min-width
从大到小写
max-width
portrait
landscape
orientation
@media screen and(媒体特性){body{}}
媒体查询
内容挤压、拉
换行、平铺
删减、增加
布局不变（内容）
模块位置变换
模块展示方式（隐藏，展开）
布局改变
布局变动
灵活适配不同分辨率设备
快捷解决多设备显示适应问题
优点
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用元素，加载时间长
这种设计解决方案，多方面因素印象导致达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆情况
缺点
将整个网页宽度分为12等份
<768px
col-xs-份数
超小屏幕
＞=768px
col-sm-份数
小屏幕
＞=992px
col-md-份数
中等屏幕
＞=1200px
col-lg-份数
大屏幕
栅格系统
BootStrap框架
响应式布局
px绝对长度
em相对父辈字体的倍数
remroot em相对根元素字体倍数
100%
vh视口高度
vw视口宽度
单位区分
相对于HTML标签字号计算结果
1rem = 1HTML字号大小
rem单位
检查视口宽度，设置差异化CSS样式
实现在不同宽度设备中，网页元素尺寸等比缩放效果
目的
参考设备宽度
视口宽度vw
vw/10
基准根字号
px单位数值/基准根字号
rem单位尺寸
@media (width: 视口宽度px){html{font-size:字号px}}
flexible.js
rem布局
相对视口尺寸计算结果
1vw = 1/100视口宽度
viewport width
1vh = 1/100视口高度
viewport height
尺寸
vw/vh
移动适配
容器从上向下排列
grid（块网格）
容器从左向右排列
inline-grid（行内网格，行内块）
触发网格布局display:
px px px...;
固定值
% % %...;
百分比
repeat
nfr nfr nfr...
px nfr nfr
px px nfr
fr(fraction)
min/max
px auto px
auto auto px
auto
行列属性grid-template-rows/columns:
'a a a d''e e g d''e e k l'
指定区域
父盒子
a;
d;
e;
指定项目grid-area:
子盒子
区域命名与合并grid-template-areas:
gap:
间距grid-gap:
row（默认）
column
排序方式grid-auto-flow:
justify-content:
align-content:
项目对齐place-content:
justify-items:
align-items:
元素对齐place-items:
对齐方式
grid-column/row-start:
grid-column/row-end:
start/end
项目属性grid-row/column:
grid网格布局
新布局方式，适合移动端，浏览器提倡
子元素（项目）默认横向排列
行内元素转化为块元素
主轴：默认情况下弹性盒水平排列的轴，可以修改为垂直排列
侧轴：垂直于主轴的默认竖向排列轴，可以修改为水平排列
row/row-reverse
column/column-reverse
flex-direction:修改主轴方向
flex-start(默认初始位置对齐)
flex-end(结尾对齐)
space-between（两端对齐）
space-evenly（等距对齐）
space-around（距离求和）
justify-content:主轴对齐
flex-start（默认）
flex-end
默认沿侧轴拉伸
无高度
默认主轴宽度为内容大小
无宽度
stretch
align-items:侧轴对齐
轴对齐
轴
flex-start（baseline）
不固定高度情况下，默认stretch
主轴水平
不固定宽度情况下，默认stretch
主轴垂直
align-self:单个项目对齐
按比例填充主轴宽度
数值越大填充越多
占用父盒子剩余尺寸的份数
flex:伸缩比
项目（小盒子）边长可以参考容器（大盒子）边长等分值
flex-wrap:wrap;折行
align-content:行间距
值越大，越靠后
值越小，越靠前（含负数）
order:数字
盒子
弹性盒display:flex;
布局
div/p/ul li/h1-h6...
display:block/inline-block
position:absolute
float:left/right
转化方法
block/list-item（块元素）
a/b/em/i/span/strong...
inline（行内元素）
img/input...
inline-block（行内块元素）
display
CSS
【交互】一种运行在浏览器上的直译式脚本语言，通常JavaScript脚本通过嵌入在HTML中来实现自身的功能。语法上与Java有类似之处，一些名称和命名规范也借自Java。
定义（JavaScript）
标准，语法
定义（ES)
ECMAScript
JS操作浏览器发生变化的属性和方法
定义（Browser Object Model）
BOM
JS操作文档流发生变化的属性和方法
定义（Document Object Model)
DOM
直接把代码书写在标签上
书写在href属性上
<a href="javascript:JS代码；">点我</a>
a 标签
书写在行为属性上
<div onclick="alert('百日梦想家')">点我</div>
非 a 标签
容易导致html文件臃肿且不易维护，不推荐
行内式
把代码书写在一个script标签对内
<script>alert('百日梦想家')</script>
不依赖任何行为，打开页面就会执行
不需要建立太多js文件，讲课多用，不推荐
内嵌式
建立.js外文档，使用script的src引入
<script src="外链接名称.js" rel='text/javascript></script>
body最下方
不依赖任何行为，打开页面就执行，最推荐
外链式
浏览器弹窗
alert（）
浏览器控制台
console.log()
浏览器输入框
prompt()
页面显示，css选择用法
document.write()
输出方式
编程语言
【变量声明】提到【当前作用域】最前面
【不提升】【赋值】操作
变量提升
提到当前作用域最前面
【不调用】函数
函数提升
第一步：预解析
按代码书写顺序从上往下执行
第二步：代码执行
运行机制
js引擎(解释器)
代码执行之前进行编译，形成中间代码文件文件
如：Java
编译
运行时及时解释，立即执行
如：JavaScript
解释
翻译方式(时间点差异)
翻译器
机器语言(二进制)
语言
程序运行过程中，使用一个中间值
var
禁止重复声明
块级作用域
不存在变量提升
不影响作用域链
let声明变量
必须有初始值
一般常量使用大写（编程规范）
常量的值不能修改
支持对数组和对象的元素修改
const声明常量
变量声明
constant
常量声明，定义不可改变的值
const
变量声明，定义可以改变的值
let
variable
旧版本变量声明，尽量使用前两个
开发人员为变量、属性、函数、参数取的名字
字母、数字、下划线、美元符号
有效字符
使用有意义的名称，如英文或全拼
首字母小写，后续单词均首字母大写
禁止JS关键字或保留字
弱引用类型，但是不建议改变变量的数据类型，容易引起歧义
命名要求
用法
标识符
把一个值放到一个变量内保存
声明变量时直接赋值
初始化
声明变量时没有值，可以设置为空值
空值
=
赋值
值可以被修改
正负数值
2e5（2*10^5)
科学计数法
0x开头
十六进制
0o开头
八进制
0b开头
二进制
数字>number
定义：一切单双引号包裹内容
换行符，newline
\
\\\\
\\'
\\"
缩进，tab
\\t
空格，blank
\\b
转义符\\
长度length
' ' + ' '字符/变量
数值相加，字符相连
拼接+
定义：反引号包裹内容
`字符 + ${变量}`
模板字符串
字符串>string
ture
false
布尔>boolean
值存在，为空
null>object
定义变量，没有赋值
undefined>undefined
空
基本/简单数据类型<栈==执行代码>
函数
数组
对象
引用/复杂数据类型<堆==存储对象>
up:Symbols()
[Syobol('say')]:fn
对象添加属性
自定义遍历数组
for...of遍历数组，返回对象
Symbol.iterator迭代器
内置属性
唯一值，解决命名冲突
不能与其他数据或自身运算
不能用for...in遍历，可以用Reflect.ownKeys获取对象所有键名
'张三'作为描述，作用相当于注释
即使描述一致，实际返回值不同
let s = Symbol('张三')
传入描述一致，实际返回值一致
返回唯一值
let s = Symbol.for('张三')
创建
Symbl（ES2015）
BigInt（ES2020）
更新
typeof 要检测的变量
该变量存储数据的类型
结果
typeof数据类型检测
String(变量)
变量.toString()
+ 拼接字符串
隐式转换
转字符串
从第一为开始检测是否为合法数字，保留数字直到非数字类型出现
仅解析整数
parseInt()
支持解析小数
parseFloat()
转化成功
合法数字
NaN（数值类型，非数字）
非合法数字
number()
算术运算- * / %
隐式转换
转数值
0
NaN
' '
undefined
null
其他
Boolean()
转布尔
转化类型
不同数据类型无法进行运算，后台自动转化为同一数据类型再计算
自动数据类型转换
数据类型转换
值
一个变量仅存储一个值，再次赋值覆盖前者
根据等号右边的值确定变量数据类型
数据类型根据等号右边的值变化
+
-
/
取余运算，用来判断数字是否可以被整除
%
幂
**
运算符
浮点数精度有问题，尽量避免小数计算/比较
%取余运算导致百分比需要用小数表示
算数运算符
n++;👇n=n+1
++（在自身的基础上加1）
n--;👇n=n-1
--（在自身的基础上减1）
符号
先自增/减，后返回值
先己后人
前置
先返回原值，后自增/减
先人后己
后置
递增/减(仅搭配变量)
=（右边的值赋给左边的变量）
n+=10;👇n=n+10
+=
-=
n*=10;👇n=n*10
*=
/=
%=
先 左侧(+ - * / %)自身运算后 右侧 = 赋值
赋值运算符
>
>=
<
<=
对比值和数据类型，用用用
===（全等）
对比值，不考虑数据类型，最好不用
==（等于）
对比值和数据类型，任意一个不等即true，用用用
!==（不全等于）
!=（不等于）
比较运算符
两边同时为true，结果true
&&（与）
两边同时为false，结果false
||（或）
本身为true👉false
本身为false👉true
！（非）
一元运算符内 ! 优先级很高
&& 优先级高于 ||
有多个表达式(值)时，左边表达式可以确定结果时，不再继续运算右边表达式的值
返回表达式2
真
返回表达式1
假
表达式1
表达式1 && 表达式2
表达式1 || 表达式2
短路运算(逻辑中断)
逻辑运算符
把数组转化为参数序列
数组的合并
[...克隆数组名称]
数组的克隆
[...伪数组名称]
将伪数组转为真数组
...
扩展运算符
条件表达式?表达式1：表达式2；
? :
条件（三元）运算符
运算符号
按照代码的先后顺序，依次执行
顺序结构(顺序执行)
if(条件表达式){执行语句；//true }else{}
一个条件
if(条件表达式1{执行语句1}else if(条件表达式2){执行语句2}..else{执行语句n}
多个条件
匹配判断条件
条件表达式1 ？ 结果表达式2 ：结果表达式3；
if双分支语句的简写
本质
三元表达式
if/else
const num = n;switch(n){case value1： n=== value1 时执行代码； break；case value2： n === value1 时执行代码； break；...default： n !== 任意 value 时执行代码;}
匹配确定的结果
switch/case
语句
二者可以互换
一般情况
switch用于处理 case 比较确定值；if用于范围判断
判断条件
switch语句条件判断后直接执行符合程序的语句，效率高
if判断所有条件，效率较低
效率
少，if 执行效率高于 switch
多，switch 执行效率高于 if，结构清晰
分支
区别
分支结构(条件执行)
需要计数，适合数组
for( let i = 1; 条件表达式; 变量计数){循环语句;}
for( let i = 1; i<=mxj.length; i++){正循环语句;}
外循环执行一次，内循环全部执行
外循环控制行数，内循环控制列数(个数)
双重 for 循环
let i = n;
计数器：初始化变量
i取值范围;
终止条件：条件表达式
i++/--
递增/递减：操作表达式
组件
符合条件后跳过
if(typeof mxj[i] !== 'string')continue;
continue退出当前循环
复合条件前停止
if(typeof mxj[i] === 'number')break;
break退出整个循环
return退出当前函数
中断对比
for loop
计数器独立，可自由设置条件
较复杂的条件判断
let i =0;
while(条件表达式){循环语句;i++;}
while loop
至少执行一次循环体
let i = 1;
do { 循环语句； i++;} while (条件表达式)
do while
循环结构(循环执行)
语句(流程控制)
一组数据的集合，存储在单个变量下
有序信息，顺序取值
内容仅一个数字时，无数据，声明长度
创建数组(放入数据)
const 函数名=函数(arr[i])
形式
arr[i]
i初始值为0
索引
arr.length
长度
数组遍历
arr[i]='新内容'
arr.push('last内容')
arr.unshift('first内容')
支持查看length
增加
arr.pop(last)
arr.shift(first)
支持查看取下元素名
index：起始位置
n：删除的项数
insertValue：插入任意数量的项数
替换/删除
修改
查询位置
arr.indexOf('内容')
查询存在（区分数字和字段）
arr.includes('内容')
操作
访问数据
一种算法，把一系列数据按顺序进行排列显示(从小到大/从大到小)
重复走访要排序的数列，一次比较两个元素，如果顺序错误就交换，重复执行到没有需要交换的数据
原理
外层for循环：arr.length - 1
趟数
内层for循环：arr.length - i - 1
次数
temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
交换两个变量
冒泡排序
数组new Array
封装一段可以被重复执行调用的代码块
利用 function 自定义命名
函数关键字
如hello world
function 函数名(){函数体(具体执行代码);}
无参数，无返回值
如定义几次hello world
有参数，无返回值
function 函数名(形参){函数体(具体执行代码);return 表达式;}
到达后停止运算
函数名() = return 后表达式结果
逗号分割仅支持返回最后一个值，通过数组返回多个值
return返回值
有参数，有返回值
函数声明
调用函数
声明函数
声明变量模式
无函数名，仅变量名
支持传参，需要调用函数
const 变量名 = function(){}；function();
匿名函数(函数表达式)
const 变量名 = 参数=> 函数体(具体执行代码);
箭头函数
函数名必须体现其功能
函数不调用就不执行
实际开发中，引用变量接收函数返回结果
函数功能
不确定的值
形参parameter=the placeholder
实际数值
实参argument=real value
用伪数组的形式，存储所有传递过来的实参(不清楚用户传递实参个数时使用)
意义
伪数组，不是真正意义数组
按照索引方式进行存储
只有函数含arguments对象，且均提前内置
arguments——数组
rest——对象
用实参给形参赋值
传参
参数
全局调用
构造函数调用
函数方法调用
apply
call
函数调用
代码名字(变量)的有效作用范围
划分不同作用域提高程序可靠性，减少命名冲突
在函数外 ，整个script标签
页面打开时创建，页面关闭时销毁
全局作用域
在函数内部
局部/函数作用域
{被花括号包裹的区域}
作用域
全局作用域下的变量，全局可以使用
注意：函数内部，没有声明直接赋值也属于全局变量(不建议使用)
效率：任意作用域引用，只有在浏览器关闭时被销毁，比较占内存
全局变量
局部作用域下的变量，函数内部可以使用
注意：函数形参也可以看做局部变量
效率：仅在函数内部使用，所在代码块被执行时初始化；代码块运行结束后被销毁，节省内存空间
局部变量
变量作用域
内部函数访问外部函数的变量，用链式查找方式决定取值(就近原则，由内到外逐层查找，查到即停)
作用域链
函数function
依附在对象上的变量
依附在对象上的函数
方法
复合数据类型，是一组无序的相关【属性】和【方法】的集合
obj.属性名
obj['属性名']
属性访问(获得对象里的属性值)
obj.方法名()
方法访问(获得对象里的函数)
访问对象（查）
obj.属性名 = 值
obj.方法名 = function(){}
重新赋值（改）
obj.新属性名 = 新值
添加数据（增）
delete obj.属性名
删除属性（删）
操作数据
k 是 key 的缩写，键值对(key:value)(属性:属性值)中的键
k 是一个变量，不能加 ''
for (let k in obj){console.log(k) //属性名console.log(obj[k]) //属性值}
遍历对象for in
开发人员自己创建
自定义对象
js语言自带对象供开发者使用，并提供一些常用或基本而必要的功能（属性和方法）
Math.floor(Math.random() * (M - N + 1)) + 1
trunc()：保留小数点左侧取整
ceil()：向上取整
floor()：向下取整
特殊情况- .5往大取整：round(-1.5) //-1
round()：就近取整
max/min
pow：幂运算
abs：绝对值
Math
Number
String
.parse()
getTime()
.setTime()
时间戳：从1970.1.1距今总毫秒数
new Date()
Date.now()
返回指定对象的原始值
valueOf()
日期
倒计时
Date
Array
Boolean
random
floor
ceil
round
trunc
常用
MDN
W3C
查文档
内置对象
console
BOMBrowser Object Model
document
DOMDocument Object Model
JS运行环境提供对象
宿主对象
字面量
var obj = new Object();obj.name = '';obj.sex = '';obj.friends = function(){}
new Object
把对象中相同的属性和方法抽象出来封装到函数里
构造函数
创建对象
对象.属性名='';
对象['属性名']='';
添加/修改属性
点后面必须输入已有属性
对象.属性名
方括号内可以添加表达式
对象['属性名']
对象.方法名()
属性名
属性值
for(var k in obj){console.log(k);console.log(obj[k])}
for in遍历属性
读取属性
delete 对象.属性名
delete 对象['属性名']
删除属性
true
"属性名" in 对象；
检查属性是否存在
添加在对象上，作为属性保存的函数表达式
为避免重复，使用this.对象名来引用内容
全局作用域或普通函数——window
方法调用——调用者
构造函数——构造函数实例
指向调用者
this
方法methods
静态属性，作用域固定指向函数声明时所在作用域下的this值
不能作为构造实例化对象
一个形参，省略形参小括号
一行代码，省略花括号和return
简写
定时器
适合无关this
事件回调
对象方法
不适合有关this
使用范围
.this
对象objects
基础语法
文档对象模型(Document Object Model)操作html和css，浏览器提供的专门用来【操作网页内容】的功能
开发网页内容特效(改变网页内容、结构、样式)、实现用户交互
HTML内容完整呈现，利用DOM树进行复杂交互操作
直观体现标签与标签之间的关系
document:网页的一个页面
文档
element:页面所有标签
元素
node:网页中所有内容(标签、属性、文本、注释等)
节点
DOM树
浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上找到
修改对象的属性会自动映射到标签上
把网页内容当做对象来处理
核心思想
DOM对象
选取第一个元素对象，可以直接操作
.querySelector('CSS选择器')
有长度、索引值的伪数组；
无pop()、push()等数组方法；
需要遍历for获得里面每一个对象
.querySelectorAll('CSS选择器')
查询选择器
通过CSS选择器
.getElementID('html id名')
ID
.getElementsByTagName('html 标签名')
标签名
.getElementsByClassName('html 类名')
类名
document.body
body
document.documentElement
html
特殊元素
parentNode
父
children
子
previousElementSibling
nextElementSibling
兄
其他(了解)
获取元素
只能将文本内容追加到</body>前面的位置
文本中包含的标签会被解析
将文本内容添加/更新到任意标签位置
【不识别标签】
obj.innerText
【解析标签】
obj.innerHTML
.src/.href/.title
.style样式
修改样式较多，借助css类名修改style属性
新值覆盖旧值，如果需保留旧值同时引用
.className操作类名
.add('类名')
.remove('类名')
.toogle('类名')
.classList类属性
.value值
.checked选中
.type类型
.disabled禁用
表单
window.setTimeout(函数，延迟的毫秒数)
clearTimeout(timerName)
一次性延时
setInterval(函数，间隔毫秒数)
clearInterval(timerName)
timerName返回定时器序号
间歇函数
设置/修改元素
编程时系统内发生的动作或事情
事件
程序检测是否有事件发生，一旦触发事件立即调用相应函数响应
事件监听
事件源.on事件 = fn(){}
后注册事件覆盖之前
同一事件&对象
冒泡阶段
执行
null覆盖
解绑
L0
后注册事件不会覆盖之前
false(默认)
捕获阶段
第三个参数
匿名函数无法解绑
L2
事件操作接受对象
事件源DOM元素
click鼠标点击
mouseenter鼠标经过
mouseleave鼠标离开
鼠标事件
focus获得焦点
blur失去焦点
焦点事件(表单光标)
任意键
keydown按键后触发，长按重复触发
字符键
keypress点击后触发，长按重复触发
keyup释放时触发事件
键盘事件(全局事件)
元素.value.length
input用户输入
文本事件(表单输入)
事件触发方式
事件操作影响对象
事件调用函数
三要素
当做值使用
函数表达式
当做参数使用
回调函数
高阶函数
谁调用，this指向谁
箭头函数this指向全局
环境对象this
当前元素为A状态，其他元素为B状态
for循环
干掉别人
this/下标
复活自己
css预填加唯一类，js找到并删除
添加类属性
预加active
排他思想
' str '.trim()
去收尾空格trim
拓展
DOM树里每一个内容
元素(标签)
parentNode.属性
父节点
获得所有子节点，包括文本节点(空格、换行)、注释节点等
childNodes
仅获得所有元素节点
返回伪数组
父元素.children(重点！)
子节点
previousElementSibling属性
nextElementSibling属性
兄弟节点
查找节点
createElement('标签')
innerHTML赋值
创建节点
父元素.appendChild('标签')
父元素的最后一个
父元素的某元素前
追加节点
普通操作
var li = ``
元素自身前面
beforebegin
元素内部第一个子节点前面
afterbegin
元素内部最后一个子节点后面
beforeend
元素自身后面
afterend
高级操作
包含后代节点
不包含后代节点(默认)
元素.cloneNode(布尔值)
复制原有节点
克隆节点
增加节点
JS的原生DOM中，必须通过【父元素】删除节点
父元素.removeChild(要删除的元素)
无父子关系，无法删除
从html中删除节点，与隐藏节点(display:none)不同
删除节点
获得当前时间
(空)
返回指定时间
(指定时间)
实例化(new)
四位年份
getFullYear()
getMonth() + 1
几号
getDate()
定义arr星期数组显示
getDay()
getHours()
getMinutes()
getSeconds()
简化获取当地时间
toLocalString()
时间对象
从1970年1月1日0是0分0秒起现在的【毫秒数】，一种特殊计量时间方式
利用 new Date 隐式转换，强烈推荐！！
+new Date()
仅得到当前时间戳
方式
时间戳(倒计时)
如：鼠标点击事件中，保存鼠标点击位置的信息
有事件触发时相关信息的对象
事件绑定回调函数的第一个参数(event/evt/e)
获取
type
获取光标相对于【浏览器可见窗口】左上角位置
clientX/Y可见窗口
获取光标相对于【文档】左上角位置
pageX/Y文档
获取光标相对于【当前DOM元素】左上角位置
不常用
offsetX/Y盒子
用户按下键盘的键值
keyCode已失效不提倡
key
常用属性
事件对象
事件完整执行过程中的流动路径
从DOM根元素开始去执行对应事件，需要写对应代码
事件捕获
捕获阶段触发(用得少)
冒泡阶段触发(默认)
只有冒泡没有捕获
L0(onclick)
代码
捕获阶段(父到子)
元素触发事件后，依次向上调用所有父级元素的【同名事件】
事件冒泡
冒泡阶段(子到父)
阶段
事件对象.stopPropagation()
事件流动
事件对象.preventDefault()
默认行为
阻止
mouseover
mouseout
冒泡效果
mouseenter
mouseleave
无冒泡效果(推荐)
鼠标经过事件
利用事件流特征解决一些开发需求
父元素添加事件，触发子元素
真正触发元素：事件对象.target
避免使用for循环，提高性能
事件委托
事件流
DOM节点
HTML，生成DOM树
CSS，生成样式规则
解析(Parser)
根据DOM树和样式规则生成
渲染树(Render Tree)
得到节点几何信息(位置、大小、布局等)
页面首次刷新
浏览器窗口大小变化
元素大小/位置变化
字体大小变化
内容变化(input输入，图片大小)
激活css伪类(:hover)
脚本操作DOM(添加或删除可见的DOM元素)
影响布局，导致回流
布局(Layout)回流/重排
根据计算和获取信息进行整个页面绘制(颜色、阴影等)
重绘(Painting)
重绘和回流
展示在页面上
展示(Display)
浏览器界面渲染
分支主题
重构
页面进行滚动时触发的事件
滚动事件scroll
外部资源(图片/外联CSS/JS等 加载完毕时触发)
需要页面资源全部加载后进行
script写进head内时，无法直接找到DOM元素
DOM树加载完就进行，不等图片/样式表加载，速度更快
加载事件load
窗口尺寸改变的时候触发
改尺寸事件resize
监听事件
获取滚动距离(像素)
scrollWidth
scrollHeight
获取宽高【内容】
scrollLeft
相对浏览器可见窗口上边界，向上滚动的不可见内容距离（卷去的头部）
document.documentElement.scrollTop
documentElement ==> html所有标签
scrollTop
获取位置【内容】
scroll
获取元素自身宽高、padding、bordor
offsetWidth
offsetHeight
获取宽高(整个盒子)
offsetLeft
offsetTop
获取位置(定位父级)
offset
获取当前可视区域宽高，不含滚动条和bordor
clientWidth / n ==> 获取 rem
clientWidth
clientHeight
获取宽高(可视区域)
clicentLeft
clientTop
获取边框(元素边框)
client
元素大小和位置
网页特效
浏览器对象模型(Browser Object Model)，提供独立于内容而与浏览器窗口交互的对象，核心对象是window
navigator
location
history
screen
window全局对象
let timer = setTimeout(回调函数，等待毫秒数)
clearTimeout(timer)
定时器延时函数
自己调用自己的函数
fn(){ fn() }fn()
易造成死递归，必须添加退出条件
递归函数
Dom元素、图片、css等全部加载完毕后
load
DOM加载完毕后，速度更快
DOMContentLoaded
窗口加载
resize
当前屏幕宽度
innerWidth
窗口大小
window.setTimeout(调用函数，[延迟的毫秒数])
clearTimeout(timerID)
setInterval(调用函数，[延迟的毫秒数])
clearInterval(调用函数)
重复延时
window对象常用事件
单线程，同一时间只能做一件事
JavaScript
单线程/按顺序执行
同步任务<执行栈>
click
普通事件
error
资源加载
setInterval
setTimeout
promise
async await
ajax
异步任务<任务队列>
主线程不断地重复获得、执行任务，再获得、再执行任务
【主线程/执行栈】中同步任务执行完毕，查询【任务队列】，推入主线程处理
同步任务=>JS主线程
异步任务提交对应【异步进程】，根据任务先后顺序排列，推入任务队列
异步API(web API)
微任务
宏任务
异步任务=>任务队列
执行机制
事件循环event loop
任务
JS执行机制event loop
window提供本属性用于获取或设置窗体的URL，且可用于解析URL
统一资源定位符(Uniform Resource Locator)，互联网标准资源的地址
protocol://host[:port]/path/[?query/#fragument
获取或设置整个URL
href
返回参数，符号？后面部分
search
返回哈希值，符号#后面部分
hash
刷新(本地缓存)，等同F5
强制刷新(网络更新)，等同ctrl+F5
刷新按钮
reload()
跳转页面，记录浏览历史支持后退
assign()
跳转页面，不记录浏览历史支持后退
replace()
location属性/方法
URL链接
location对象
返回客户机发送服务器的useragent头部值，配合前端代码判断终端类型，实现跳转
userAgent
navigatior对象
window提供一个history对象（含用户浏览器窗口中访问过的URL），与浏览器历史记录交互
back()
forward()
前进后退功能
参数为1，前进1个页面
参数为-1，后退1个页面
go(参数)
history对象
window对象
官网查看使用方式
swiper插件
存储数据
getItem('key')
获取数据
removeItem('key')
删除数据
clear()
全部删除
简单数据
【复杂数据】转为【JSON字符串】
【JSON字符串】转为【对象】
getItem('JSON.parse(localStorge.getItem('obj'))')
复杂数据
localStorage(常用)
生命周期到浏览器关闭
多窗口(页面)共享(同一浏览器)
键值对形式存储使用
与localStorge基本相同
sessionStorage
在用户浏览器中存储数据
设置、读取方便，页面刷新不丢失数据
容量较大，sessionStorage和localStorage约5M
仅存储字符串
本地存储
标签自带属性
固有属性
程序员自主添加属性
自定义属性
data-自定义属性
匹配：表单验证
替换：过滤页面敏感词
提取：获取特定部分
用户匹配字符串组合的模式，通常用于查找、替换符合正则表达式的文本
介绍
/ / => 字面量
let reg = /obj/
reg.test('包含obj吗?')
regObj.exec('包含obj吗?')
查找
字母
数字
仅描述自身
普通字符
/^开头/
/结尾$/
/^精确匹配$/
边界符(开头/结尾)
重复零次或多次
n >= 0
重复一次或多次
n >= 1
重复零次或一次
n = 0 || n = 1
?
重复n次
{n}
重复n次或多次
重复n-m次
量词(重复次数)
[a-zA-Z-]
[0-9_]
中文一到九，含所有汉字
[\\u4e00-\\u9fa5]
[类选一]
取反，禁止输入某字符
[^]
匹配除换行符之外的任意单个字符
.
[0-9]
\\d
[^0-9]
\\D
[a-zA-Z0-9_]
\\w
[^a-zA-Z0-9_]
\\W
匹配空格(换行符、制表符、空格符等)
[\\t\\\\v\\f]
\\s
[^\\t\\\\v\\f]
\\S
预定类
字符类(简写形式)
元字符(特殊字符)
ignore，匹配字母不区分大小写
/表达式/i
global，匹配所有满足结果
/表达式/g
替换敏感词
字符串.replace(/表达式1|表达式2/g，'**')
修饰符(约束细节)
字符
正则表达式Regular Expression
Web APIs
是JS的规格，JS是其实现
ECMAScape6.0
声明变量仅在【块级作用域】有效
无变量提升
区块中存在let/const，区块内声明变量形成封闭作用域覆盖全局变量，声明前使用这些变量会报错
暂时性死区
let不允许相同作用域内，重复声明同一个变量
不允许重复声明
内层代码块不影响外层代码块
外层作用域无法读取内层作用域的变量
声明的函数类似var，会提升到块级作用域头部
尽量写成函数表达式
声明一个只读的常量，必须初始化
特点同let
import
声明命令
赋值运算符的扩展，从数组和对象中提取
let {}/[] = 变量名
解构
仅数组成员严格等于 undefined 时，默认值生效
默认值为表达式时惰性求值，用到时才会求值
允许指定默认值
数组元素按照次序排列，变量取值由位置决定
对象属性没有次序，变量必须与属性同名
先找到同名属性，然后赋值给对应变量
字符串转换为类似数组的对象
字符串
只要等号右边值不是对象，先转换为对象
undefined/null无法转换对象，进行结构赋值会报错
数值/布尔值
为变量x，y指定默认值
为函数参数指定默认值
默认值
函数参数
变量声明语句
赋值语句整个模式，或嵌套模式中的一层
禁用情况
赋值语句的非模式部分
使用情况
圆括号
交换变量的值
从函数返回多个值
将一组参数与变量名对应
提取JSON数据
函数参数的默认值
遍历Map结构
输入模块的指定方法
用途
解构赋值
\\uxxxx表示一个字符，xxxx为字符码点
字符范围超过\\uFFFF，将码点放入大括号
Unicode表示法
正确处理4个字节储存的字符，返回一个字符的码点
测试字符的字节为2/4
实例对象.codePointAt()
用于从码点返回对应字符
String.fromCodePoint()
for...of 循环遍历
识别大于0xFFFF的码点
遍历器接口
识别大于0xFFFF的码点，返回正确字符
at()
表示欧洲语言的语调和重音符号
normalize()
`字符串${变量/表达式/调用函数}`
保留空格、缩进、换行
实例：模板编译
模板字符串紧跟在一个函数名后面，该函数被用来处理这个模板字符串
标签`字符串` => 函数(参数)
标签模板(函数调用)
模板字符串处理函数，返回的字符串斜杠也被转义(斜杠前面再加一个斜杠)，对应替换变量后的模板字符串。原字符串斜杠已经转义，则不做处理
String.raw()
字符串扩展
忽略原有的正则表达式修饰符，使用新指定修饰符
RegExp构造函数
match()
search()
split()
字符串的正则方法
Unicode模式，用来正确处理大于\\uFFFF的Unicode字符
含义
除换行符以外的任意单个字符
点（.）字符
大括号表示Unicode字符
Unicode字符表示法
量词
预定义模式
i 修饰符
正则表达式行为
u修饰符
g修饰符在剩余未知中存在匹配即可
y修饰符确保匹配从剩余的第一个位置开始
粘连(sticky)修饰符，类似g修饰符全局匹配，后一次匹配从上一次匹配成功的下一个位置开始
y修饰符
是否设置y修饰符
stycky属性
返回正则表达式修饰符
flags属性
x只有(不)在y前面才匹配
先行(否定)断言
x只有(不)在y后面才匹配
后行(否定)断言(ES7提案)
断言
正则扩展
0b/0B
二进制前缀
0o/0O
八进制前缀
进制表示法
isFinite()
isNaN()
是否为整数
isInteger()
极小常量，用于为浮点数计算设置误差范围
EPSILON()
Max/Min_SAFE_INTEGER
isSafeInteger()
去除一个数的小数部分，返回整数部分
内部使用Number方法将其先转为数值
空值/无法截取整数
rtrunc()
+1
正数
-1
负数
-0
其他值
sign()
计算一个数的立方根
cbrt()
JS正数用32位2进制表示，该方法返回数值的32位无符号【整数】有多少前导0
clz32()
返回两个数以32位带符号整数相乘的结果，精度更高
imul()
返回数值的单精度浮点数形式
fround()
返回【所有参数】平方和的平方根
hypot()
Math.
Number.
数值扩展
将类伪数组转为真正数组
将一组值(任意数据类型)转为数组
Array.of()
从该位置开始替换数据
target(必填)
开始/停止读取数据，负值表示倒数
找出第一个符合条件的数组成员并返回
当前值
value
当前位置
index
原数组
arr
返回第一个符合条件的数组成员位置
用于空数组的初始化，数组原有元素被覆盖
键名遍历
keys()
键值遍历
values()
键值对遍历
entries()
遍历数组for...of/next()
数组是否包含给定值vaule，start为起始位置
ES6明确将空位转为undefined，函数对空位的处理规则不统一，尽量避免出现空位
空位
数组扩展
参数变量在参数定义后面默认声明，不能用let/const再次声明
...value
剩余参数
与解构赋值默认值结合使用
尾参数
参数无法只省略该参数而不省略后面参数，除非显示输入undefined
非尾参数
参数默认值位置
返回没有指定默认值的参数个数，length属性不计入参数后面的值
length
当参数默认值是变量，其作用域规则等同其他变量，即先当前函数作用域，后全局作用域
函参的默认值
形参 => 获取函数多余参数并放入数组
只能放在最后，不在length属性内
剩余运算符(...value)
函数调用 => rest参数逆运算，将数组分隔为参数
扩展运算符可以展开数组，无需apply方法
Math.max(...[])
push(...[])
例子
替代数组apply方法
合并数组
与结构赋值结合
返回多个值
函数返回值
将字符串转为真正数组
正确返回32位Unicode字符长度
任何Iterator接口的对象，均可用扩展运算符转为真正数组
Map/Set/Generator
实现Iterator接口对象
扩展运算符(...)
返回函数的函数名
name属性
基本用法
this静态，指向函数定义生效时所在对象
不能作为构造函数 new 实例化对象
不能使用arguments变量，可以使用Rest参数
不能使用yield命名，不能用作Generator函数
嵌套
对象::函数
自动将左边的对象，作为this对象绑定到右边函数上
函数绑定运算符（::）
某函数的【最后一步】是调用另一个函数
尾调用(Tail Call)
函数调用在内存形成的调用记录，保存调用位置和内部变量等信息。所有的调用帧形成一个调用栈(call stack)
调用帧(call frame)
指不再用到外层函数的内部变量，仅保留内层函数调用帧，仅严格模式开启
正常模式下，函数内部有两个变量arguments和caller可以跟踪函数调用栈；严格模式禁用这两个变量
严格模式
采用“循环”换掉“递归”，自己实现尾递归优化
正常模式
尾调用优化(Tail call optimization)
尾调用
函数调用自身
同时保存成千上百个调用帧，非常消耗内存，易发生“栈溢出”错误
尾调用自身
只存在一个调用帧，不会发生“栈溢出”错误
尾递归
所有用到的内部变量改写为函数的参数
将多参数的函数转为单参数形式
柯里化(curring)
递归函数改写
函数参数的尾逗号
尾调用优化
函数扩展
大括号内直接写变量(属性)和函数(方法)
属性名 = 属性值 => 直接写属性名，省略属性值
属性的简洁表示法
标识符 作为属性名
[表达式] 作为属性名
属性名表达式
返回函数名
返回bound 函数名
bind()方法创造函数
返回anonymous
Function构造函数创造函数
返回该Symbol值的描述
Symbol值
特殊情况
方法的name属性
+0 不等于 -0；
NaN 等于自身
类似(===)，差异
Object.is()(严格相等判断)
对象合并，将源对象(obj)所有可枚举属性复制到目标对象(target)
目标对象与源对象或源对象之间有同名属性，后覆盖前
返回该参数
一个
先转为对象再返回
非对象
报错
undefined/null
拷贝失败
无限/不可枚举
所有参数转为对象
undefined/null不会报错
无法转为对象即跳过
不报错，除字符串以数组形式拷入目标对象，其他值不产生效果
其他类型值(数值、字符串、布尔值)
非首参数
浅拷贝，目标对象仅拷贝源对象的对象值引用，对象任何变化直接反映到目标对象
嵌套对象中遇到同名属性，直接替换
数组视为属性名index的对象，不同数组形成覆盖
为对象添加属性
为对象添加方法
克隆对象
合并多个对象
为属性指定默认值
常见用途
对象的每个属性都有一个描述对象(Descriptor)来控制该属性行为，本方法可以获取属性描述对象
可枚举性
enumberable属性
尽量使用Object.keys()
getOwnPropertyDescriptor()
属性的可枚举型
for...in
Object.keys()
getOwnPropertyNames()
getOwnPropertySymbols()
Reflect.wonKeys()
①数值，按数字排序
②字符串，按生成时间排序
③Symbol值，按生成时间排序
遍历次序规则
属性遍历
用于读取或设置当前对象的prototype对象，不建议使用
setPrototypeOf(写操作)
getPrototypeOf(读操作)
creat(生成操作)
_proto_属性
扩展运算符（...）
对象扩展
独一无二的值，通过Symbol函数产生
不能与其他类型值进行计算，可以显式转为字符串/布尔值
使用[]
作为属性名
在代码中多次出现，与代码形成强耦合的某一个具体字符串或数值
将魔术字符串写成一个变量
消除魔术字符串
获取指定对象的所有Symbol属性名，返回数组
Object.getOwnPropertySymbols()
属性名遍历
返回该Symbol值
存在
返回一个以该字符串命名的Symbol值
不存在
接受字符串作为参数，搜索以该参数命名的Symbol值
生成的新Symbol登记在全局环境供搜索，每次调用先检查给定的key是否存在
Symbol.for()
返回一个已登记的Symbol类型值的key
Symbol.keyFor()
调用
指向一个内部方法，其他对象使用instanceof，判断是否为该对象实例
hasInstance
布尔值，表示该对象使用Array.prototype.concat()时，是否可以展开
isConcatSpreadable
指向一个方法，该对象作为构造函数创造实例时会调用
species
指向一个函数，当执行str.match(myObject)时如果该属性存在会调用，返回该方法的返回值
match
指向一个方法，当该对象被String.prototype.replace方法调用，会返回该方法的返回值
replace
指向一个方法，当该对象被String.prototype.search方法调用，会返回该方法的返回值
指向一个方法，当该对象被String.prototype.split方法调用，会返回该方法的返回值
split
指向该对象的默认遍历器方法
iterator
指向一个方法，该对象被转为原始类型的值时，会调用该方法，返回该对象对应的原始类型值
toPrimitive
内置Symbol值
Symbol
Proxy和Reflect
ArrayBuffer对象
TypedArray视图
DataView视图
二进制数组
无重复值的有序列表
构造函数，默认时Set函数
prototype.constructor
返回集合的元素个数
实例属性
添加元素
add(value)
删除元素
delete(value)
校验某个值是否存在
has(value)
清除所有成员，没有返回值
操作方法(操作数据)
返回键名
返回键值
返回键值对
使用回调函数遍历每个成员
forEach()
遍历方法(遍历成员)
实例方法
属性和方法
与Set类似是不重复的值的集合
成员值类型只能是对象
弱引用，不可遍历
WeakSet
Set
键值对的有序数列，键和值是任意类型
返回Map的元素个数
增加一个新元素，返回当前Map
读取key对应键值，找不到key返回undefined
get(key)
检测Map中是否包含某个元素，返回Boolean值
has(key)
删除某个键
delete(key)
遍历Map每个成员
与Map结构基本类似，区别是仅接受对象作为键名(null除外)
没有遍历操作
无法清空
WeakMap
Map
Set和Map数据结构
一种新遍历机制接口，能快捷访问数据
通过Symbol.interator创建迭代器，与生成器一起使用
通过迭代器next()获取迭代结果
迭代器时用于遍历数据结构的指针(数据库游标)
核心
返回键值，只返回具有数字索引的属性
可以与break、continue、return配合使用
遍历顺序是各成员被添加进数据结构的顺序
Set结构 => 值
Map结构 => 数组
Set和Map
for...of
写法较麻烦
数组内置，无法中途跳出循环
forEach
返回键名，遍历数组时以字符串作为键名
除遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键
某些情况下，以任意顺序遍历键名
适合遍历对象，不适合数组
Interator遍历器
异步编程，通过yield关键字将函数挂起，可以改变执行流
function关键字与函数名之间有一个*
yield只能在此函数内部使用，让函数挂起=> 暂停执行
不能带参数
第一个next()
参数为上个yield的返回值
有参数
上个yield的返回值undefined
无参数
第二次及之后next()
为不具备Interator接口的对象提供遍历操作
使用场景
异步操作的同步化表达
控制流管理
部署Iterator接口
作为数据接口
无需调用next()进行遍历，但是next()返回对象done属性为true，循环终止且不含该返回对象(return表达式无法返回)
原生JS对象无遍历接口，通过Generator函数加上接口，可以使用for...of循环
Array.form()
在一个Generator函数里执行另一个Generator函数
yeild*
*Generator函数名
作为对象的属性
Generator生成器
异步编程的新解决方案，用来封装异步操作并可以获取其成功或失败的结果
Pending（进行）
Resolved（成功）
Rejected（失败）
对象状态不受外界影响
状态改变后不能逆转，随时可以得到此结果
Promise构造函数：Promise(excutor){}
Promise.prototype.then()
Promise.prototype.catch()
Pormise
JS执行环境为“单线程”，有异步编程才正常执行
发布/订阅
Promise对象
异步编程
Generator函数的语法糖，使异步操作更加方便
then
catch
返回一个romise对象
Async函数
异步操作和Async函数
抽取【对象】共用的【属性/方法】封装成一个类(模板)
实例
类内构造函数constructor(默认)，可以接收参数返回实例对象
类必须使用new实例化对象
类里面所有函数不需要写function，禁止逗号分隔
继承父类属性和方法
extends
调用父类函数
必须放到构造函数的参数之前
super
共有的属性和方法必须全部加this
this指向实例化对象，方法的this指向调用者
构造函数constructor()
实例化子类输出一个方法，先检测子类，子类无此方法再检测父类(就近原则)
类的继承
类(抽象)
对【类】进行【实例化】，获取类的对象
对象(具体)
class和对象
一个函数，在代码编译时修改类的行为
修饰器Decorator
ES6新增
分析步骤，用函数一步一步实现步骤，调用函数
性能高，适合硬件关联任务
没有面向对象容易维护、复用、扩展
面向过程POP
分解对象，由对象之间分工与合作，每个对象都是功能中心
封装性
多态性
容易维护、复用、扩展，由于特性可以设计低耦合系统
性能比面向过程低
面向对象OOP
编程思想
JS高级
跨浏览器的JS库，封装JS方法，简化DOM操作
将Dom对象封装为jQuery包装集 => $()
包装集
jQuery
art-template
第三方库
全称为Asynchronous Javascript And Xml，是异步JS和XML
无刷新获取数据
简介
无浏览历史，无法退回
存在跨域问题（同源）
SEO不友好
在用户和服务器之间的中间层(AJAX引擎)，使用户操作与服务器响应异步化
—些数据验证和处理交给Ajax引擎做，需要新数据由Ajax引擎代为向服务器提交请求
工作原理
初识Ajax
存有处理服务器响应的函数
onreadystatechange
0\t请求未初始化（在调用 open() 之前）
1\t请求已提出（调用 send() 之前）
2\t请求已发送（这里通常可以从响应得到内容头部）
3\t请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4\t请求已完成（可以访问服务器响应并使用它）
存有服务器响应的状态信息
readyState
取回由服务器返回的数据
responseText
GET
POST
参数1：设置请求类型
参数2：文件在服务器上的位置
参数3：是否异步处理请求
send(null)
超文本传送协议 (HTTP-Hypertext transfer protocol)，定义浏览器和万维网服务器之间互相通信的规则
HTTP协议
XMLHttpRequest
new XMLHttpRequest()
创建XMLHttpRequest对象
更新服务器上的文件或数据库
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
设置请求方式
调用回调函数
发送请求
步骤
Ajax
JavaScript 对象表示法（JavaScript Object Notation）轻量级的文本数据交换格式
{ “key” : value}
{ “key” : “value”}
{ “key” : [value]}
{ “key” : {value}}
对象数组
数组对象
JSON
cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
进程
cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
线程
- 工厂的资源 -> 系统分配的内存（独立的一块内存）
- 工厂之间的相互独立 -> 进程之间相互独立
- 多个工人协作完成任务 -> 多个线程在进程中协作完成任务
- 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成
- 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等）
比喻：进程(工厂)和线程(工人)
系统给其进程分配资源（cpu、内存），每打开一个Tab页，就创建一个独立的浏览器进程
浏览器的唯一主进程（负责协调、主控）
负责浏览器界面显示，与用户交互。如前进、后退等
负责各个页面的管理，创建和销毁其他进程
将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
网络资源的管理，下载等
Browser进程
默认每个Tab页面一个进程，互不影响
页面渲染，JS 执行，事件循环
负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
GUI渲染线程与JS引擎线程互斥：当JS引擎执行时GUI线程被挂起；当GUI更新会被保存在一个队列中等到JS引擎空闲时立即执行
GUI渲染线程
JS内核，负责解析、运行JS脚本程序
JS引擎等待任务队列中的任务，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
GUI渲染线程与JS引擎线程互斥：如果JS执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞
JS引擎线程
归属浏览器而非JS引擎，用来控制事件循环（JS引擎忙不过来，需要浏览器另开线程协助）
当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
由于JS单线程，待处理队列中的事件必须排队等待JS引擎处理（JS引擎空闲时执行）
事件触发线程
setInterval与setTimeout所在线程
通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms
定时触发器线程
XMLHttpRequest在连接后是通过浏览器新开一个线程请求
将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由JS引擎执行
异步http请求线程
主要常驻线程
渲染进程（浏览器内核）
每种类型的插件对应一个进程，仅当使用该插件时才创建
第三方插件进程
最多一个，用于3D绘制等
GPU进程
主要进程
避免单个page/插件崩溃影响整个浏览器
多进程充分利用多核优势
方便使用沙盒模型隔离插件等进程，提高浏览器稳定性
优势
内存等资源消耗会更大，用空间换时间
多进程
进程与线程
基础三件套
生成数据
Model业务逻辑和数据库
视图UI
View页面视图
请求数据及业务逻辑
ViewModel视图数据模型和展现逻辑
data中所有属性，最终出现在vm身上
vm身上所有属性及Vue原型上所有属性，在Vue模板中都可以直接使用
结论
MVVM
修改路径
cd
后置准确地址/文件名
node
清空屏幕
cls
清空一行
esc按键
win+R或文件内shift+右键打开powershell
终端
官方提供的用来操作文件的模块（file system)
const fs = require('fs')
导入
参数1：必选参数，字符串，表示文件路径
参数2：可选参数，表示以什么编码格式来读取文件（一般UTF-8）
err:null
读取成功
err:错误对象
dataSTR:undefined
读取失败
参数2：必选参数，表示要写入的内容
参数3：可选参数，表示以什么编码格式来读取文件（一般UTF-8）
./
../
相对路径
原因
\\为转义符，需将路径反斜杠全部修改为\\\\
移植性差，不易维护
绝对路径
当前文件所处目录__dirname
方案
路径动态拼接问题
fs文件系统模块
官方提供用于处理路径的模块
const path = require('path')
'../'可以抵消前一个路径
__dirname当前文件所处目录
path.join([...paths])多路径片段拼接为完整路径字符串
参数1：必选参数，路径
参数2：可选参数，扩展名
path.extname(path)获取路径中文件扩展名
path路径模块
官方提供用于创建web服务器的模块，将普通电脑转为web服务器，对外提供web资源
const http = require('http')
const server = http.creatServer()
创建web服务器实例
req(request)
解决中文乱码问题
res(response)
为服务器实例绑定request事件，监听客户端请求
server.listen()端口号，cb回调
启动服务器
创建基本web服务器
互联网上每台计算机的唯一地址
(a.b.c.d)
点分十进制
Windows终端运行ping 网址
IP地址查询
IP地址
localhost
域名和域名服务器
标识主机上进行通信的不同应用程序
实际应用中URL的80端口可以被省略
服务器相关
http路径模块
内置APIfs/path/http
基于内置模块封装出来，极大地提高了开发效率
www.npmjs.com
搜索
registry.npmjs.org
下载
npm包共享平台node package manager
来源
终端内操作：npm install 包完整名称/nmp i 包完整名称
安装
项目开发中把node_modules文件夹，添加到.gitignore忽略文件中
npm init -y快捷在项目根目录中创建package.json配置文件，自动记录项目中安装的包
包管理配置文件
国外下载，海底电缆速度受限
npm config get registry
查看当前镜像源
npm config set registry=https://registry.npm.taobao.org/
修改镜像源为淘宝
切换npm淘宝下包镜像源
npm i nrm -g
nrm ls
nrm use taobao
安装nrm工具，快速切换下包镜像源
下包速度慢
安装到项目node_modules中的包
记录到dependencies节点，开发和项目上线后都需要用到包
开发依赖包
npm i 包名-D记录在devDependencies节点，项目开发阶段使用，项目上线后不会用到
核心依赖包
项目包
执行npm install命令时提供了-g参数
npm i 报名 -g
npm uninstall 包名 -g
卸载
nrm
i5ting_toc
全局包
npm与包
优于http内置模块并基于此封装的第三方包，专门用来创建web网站/API接口的服务器
const express = require('express');
导入express
const app = express();
创建web服务器
get
post
监听客户端请求并响应
调用app.listen(端口号，启动成功后的回调函数)，启动服务器
托管静态资源
客户端请求与服务器处理函数之间的映射关系，业务处理最后环节
请求类型
请求的URL地址
处理函数
为方便对路由进行模块化管理，不建议将路由直接挂载到app上，推荐由路由抽离为单独模块
创建路由模块对于.js文件
调用express.Router()函数创建路由对象
向路由对象上挂载具体路由
使用module.exports向外共享路由对象
使用app.use()注册路由模块
模块化
路由
业务处理过程中的中间环节，包含输入和输出，本质是一个函数
当一个请求到达express服务器后，可以连续调用多个中间件，从而对本次请求预处理
多个中间件和路由间共享一份req和res，因此可以在上游【统一定义】中间件req和res自定义属性和方法，供下游使用
调用流程
next函数是实现多个中间件连续调用的关键，表示把流转关系转交给下一个中间件或路由
app.use(mw)
简化全局生效
全局生效
不使用app.use(mw)
路由内添加中间件名称
多个局部中间件
局部生效
app.use()
app.get()
app.post()
绑定到app实例上
应用级别
router.post()
绑定到router实例上
路由级别
用来捕获整个项目发生的异常错误，防止项目异常崩溃
错误级别中间件必须放在所有路由之后
形参提示错误
错误级别
.static
配置解析json格式数据
app.use(express.json())
req.body
.json
配置解析x-www-form-urlencoded格式数据
app.use(express.urlencoded({ extended: false}))
.urlencoded
express内置
const parser = require('body-parser')
app.use(parser.urlencoded({ extended: false}))
注：urlencoded根据此中间件封装
body-parser
第三方
中间件
创建基本服务器&API路由模块
编写GET/POST接口
由一系列HTTP响应头组成，并由其决定浏览器是否组织前端JS代码跨域获取资源
npm i cors
const cors = require('cors')
app.use(cors())
配置
主要在服务器进行配置
在浏览器有兼容性
Origin
额外请求头信息需要在服务器端，通过本代码声明
Headers
默认支持GET/POST/HEAD请求
Methods
CORS响应头部Access-Control-Allow-
GET/POST/HEAD
无自定义头部字段
HTTP头部信息
简单请求
GET/POST/HEAD外的请求类型
自定义头部字段
JSON格式
向服务器发送数据
Option预检请求
CORS（推荐使用）Corss-Origin Resource Sharing
JSON（仅支持GET请求）
接口跨域问题
API接口
cors跨资源共享
终端命令从node app.js 修改为nodemon app.js实现项目自动重启
nodemon
express
组织、存储和管理数据的仓库
数据库
数据表
数据行
字段
数据组织结构
专门用来提供数据存储和服务的软件
MySQL Server
可视化的MySQL管理工具，操作MySQL Server中数据
MySQL Workbench
安装教程：https://ock.cn/1emg9
安装/配置
基本使用
express中操作
前后端身份认证
mysql
第三方API模块(包)express/mysql
使用require()加载自定义模块必须指定以./ 或../ 开发的路径标识符，否则node将其作为内置模块或第三方模块进行加载
自定义模块
遵守固定规则，将大文件拆成独立且相互依赖的多个小模块。加载模块路径——require()
代码复用性高
代码可维护
按需加载
官方提供，如fs、path、http等
内置模块
用户创建的每个.JS文件
第三方开发模块，使用前需下载
第三方模块
自定义模块中定义的变量、方法等只能在当前模块内被访问，模块级别的访问限制
存储和当前模块有关的信息
require()模块时，恒得到module.exports指向对象
为防止混乱，同一模块中仅使用一个
module.exports === exports
向外共享模块作用域中的成员module对象
模块作用域
规定模块的特性和各模块间如何相互依赖
module变量代表当前模块
module变量是一个对象，其exports属性是对外接口
require()方法用于加载exports属性
CommonJS模块化规范
模块
一种基于chromeV8引擎的JS运行环境，不是独立语言
JS的前端运行环境，支持调用BOM/DOM等浏览器内置API
JS的后端运行环境
node.js
将原始数据排版为面向用户的界面
自底层向上逐层应用，支持小巧核心库和引入各式插件
一套用于构建用户界面的渐进式JS框架
组件化，复用代码，提高可维护性
声明式，无需直接操作DOM，提高开发效率
虚拟DOM+Diff算法，复用DOM节点
创建Vue实例，传入配置对象
root容器内代码（vue模板）符合html规范，混入一些特殊vue语法
Vue实例与容器必须一一对应
现实开发中只有一个Vue实例，配合组件一起使用
{{js表达式}}可以自动读取到data中所有属性
data中数据发生改变，页面中引用该数据的地方也会自动更新
过程
初识Vue
{{js表达式.属性}}
解析标签体，可以直接读取data属性
插值语法
v-bind:href='表达式.属性' :href='表达式.属性'
解析标签(标签属性/标签体内容/绑定事件...)，可以直接读取data属性
指令语法
模板语法（容器）
<script type="text/javascript"> Vue.config.productionTip = false;
阻止提示
el:'容器名称'
创建new Vue时
v.$mount('容器名称')
创建new Vue后
el关联模板
data:{}
对象式
data(){return{}}
data:function(){return{}}
组件必须使用函数式，否则报错
Vue管理的函数禁止使用箭头函数，会改变this指向
函数式
data数据
methods数据代理
computed计算属性
对要显示的数据进行特定格式化后再显示（适用于简单逻辑处理）
全局
new Vue{filters:{}}
局部
注册
{{ xxx | 过滤器名 }}
v-bind:属性 = 'xxx | 过滤器名'（不常用）
使用
过滤器可以接收额外参数，多个过滤器可以串联
没有改变原数据，产生新对应数据
filters过滤器
Vue完成模板解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
mounted挂载后调用
创建Vue实例
数据只能从data流向页面
v-bind: ==> :
单向(v-bind:)
数据支持data与页面相互流动
v-model:value= ==> v-model=
用于【表单/输入】
双向(v-model:)
条件(v-if)
监听(v-on)
数据绑定
model（模型储存data数据）
view（页面）
viewmodel（页面模型，即vue实例）
MVVM模型
通过一个对象代理对另一个对象中属性的操作（读/写）
是否可枚举，默认false
enumerable:true
是否可修改，默认false
writable:true
是否可删除，默认false
configable:true
读取数据属性时，get函数(getter)被调用，返回变量值
get(){return 变量}
修改数据属性时，set函数(setter)被调用，返回修改值
set(){return 变量}
数据代理
keyup
v-on:xxx ==> @xxx
@click='引用事件函数'
事件=>按钮标签内
methods:{事件函数(){}}
事件函数=>Vue实例内
methods中配置函数，禁止使用箭头函数，否则导致this作用域成为window
methods中配置函数，均为Vue管理，this指向 vm 或 组件实例对象
@click='demo($event)'
$event
prevent阻止默认事件
stop组织事件冒泡
once事件仅触发一次
capture使用事情的捕获模式
self仅当前操作元素为event.target时触发
passive事件的默认行为立即执行，无需等待事件回调
修饰符可以连续写
事件修饰符
enter
delete
esc
space
tab(特殊：必须配合keydown使用)
up
down
常用9键
ctrl
alt
shift
meta(win键)
4键
按下修饰键的同时按任意其他键，释放其他键时触发事件
正常触发事件
keydown
系统修饰键
Vue.config.keyCodes.别名=n
自定义别名按键（不推荐）
键盘事件
事件处理
需要属性不存在，通过对已有属性计算得到
computed:{fn(){}}
只读不写无setter 简写 ==>
底层借助Object.defineproperty方法提供的getter和setter
与methods相比，内部有缓存机制(复用)，效率高，调试方便
初次读取执行一次
依赖数据发生改变再次调用
get执行条件
体现在vm上，直接读取即可
set函数修改计算属性，且必须改变计算依赖数据
计算属性
computed:{}计算属性
无immediate/handler简写 ==>vm.$watch('监控对象'，function(){})
初始化时调用handler
immediate
Vue实例
范围
初始化值，由handler调用
监控值前后变化
handler
Vue中的watch默认不监测对象内部值改变
配置deep:true可以监测对象内部值改变
Vue自身可以监测对象内部值变动，但Vue提供的watch默认不可以，需根据数据结构决定是否使用deep
deep:true深度监控
watch:{}监视
watch >= computed
watch支持异步操作
Vue管理函数，写成普通函数
非Vue管理函数(回调函数:定时器、ajax、Promise)，写成箭头函数
this必须指向vm或组件实例对象
对比
计算属性与监视
正常样式正常写
class='basic'
变化样式绑定写
:class='变量'
样式类名不确定，动态指定
适用
字符串写法
:class='classArr'
样式个数/名字不确定
数组写法
:class='classObj'
样式个数/名字确定，动态决定使用情况
对象写法
class样式
:class='styleObj'
:class='styleArr'
style样式
绑定样式
v-show='表达式'
隐藏样式，适合高频切换
v-show
v-if='表达式'
v-else-if='表达式'
v-else='表达式'
多数据同条件使用
template v-if
删除样式，适合低频切换
v-if
条件渲染
key是虚拟DOM对象标识，当数据发生改变时，Vue根据【新数据】生成【新虚拟DOM]
直接使用之前真实DOM
DOM内容不变
生成新的真实DOM，替换页面中之前的真实DOM
DOM内容改变
相同key
创建新的真实DOM，渲染到页面
不同key
新旧虚拟DOM对比
工作流程
产生不必要的真实DOM更新，效率低下
不含输入类DOM
产生错误DOM更新，界面有问题
含输入类DOM
进行逆序添加/删除等破坏顺序操作
index缺点(索引值)
推荐使用数据唯一标识作为key，如id、手机号、身份证号等
不存在破坏顺序操作，仅用于渲染列表展示，可以使用index，且不设置时自动默认key值为index
选取规则
:key=''
v-for遍历
渲染
watch
computed
过滤
排序
监测data中所有层次数据
在new Vue时传入要检测数据
后追加属性默认非响应式处理
后追加属性响应式处理需使用API
通过setter实现监视
push/pop/shift/unshift/splice/sort/reverse
不支持给vm/vm根数据添加属性
Vue.set()/ vm.$set()
修改数组中某元素
监测数据
v-model收集value值，用户输入value值
v-model收集value值，给标签配置value值
radio
未配置value属性，收集checked（布尔值）
收集checked（布尔值）
非数组
收集value组成的数组
配置value属性，v-model初始值：
input type
失去焦点后收集数据
lazy
输入字符串转为有效数字
number
输入收尾空格过滤
trim
v-model修饰符
收集表单数据
单向绑定，简写为冒号 :
v-bind
双向绑定
v-modul
遍历数组、对象、字符串
v-for
绑定事件监听，简写为@
v-on
v-else
文本渲染，替换节点内容，不常用
v-text
渲染包含html结构内容，替换节点内容
有安全性问题，禁用在用户提交内容上
条件渲染，是否展示
v-html
没有值的特殊属性，vue实例创建完毕并接管容器后删除
配合css的display:none 解决网速慢时显示裸露模板问题
v-cloak
没有值的指令，所在节点初次动态渲染后视为静态内容
后续数据变动不会引起v-once所在结构的更新，可用于优化性能
v-once
没有值的指令，跳过所在节点的编译过程
跳过：没有使用指令语法/插值语法的节点，加快编译
v-pre
内置指令
new Vue({directives:{指令名：配置对象}})
new Vue({directives{指令名：回调函数}})
局部指令
Vue.directive(指令名：配置对象)
Vue.directive(指令名：回调函数)
全局指令
指令与元素成功绑定时调用
bind
指令所在元素被插入页面时调用
inserted
指令所在木板结构被重新解析时调用
update
常用回调
定义指令时不加v-，使用时加v-
指令名多个单词时，使用kebab-case命名，不要使用camelCase命名
自定义指令
内置/自定义指令
Vue在关键时刻调用的特殊名称函数，又名生命周期回调函数、生命周期函数、生命周期钩子
生命周期函数的名字不可更改，函数具体内容由程序员根据需求编写
生命周期函数中this指向是vm或组件实例对象
将要创建
beforeCreate
创建完毕
created
将要挂载
beforeMount
挂载完毕
发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
mounted
将要更新
beforeUpdate
更新完毕
updated
将要销毁
清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
beforeDestroy
销毁完毕
destroyed
销毁后借助vue开发工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，即使操作也不再触发更新流程
销毁vue实例
vm生命周期
生命周期
过度&动画
自定义插件
主要内容
一、Vue核心
向外提供特定功能的js程序，一般就是一个js文件
理解
复用js，简化编写，提高js运行效率
实现应用中局部功能代码和资源的集合(html/css/js/image/mp3/mp4...)
复用编码，简化项目编码，提高运行效率
全部js都是以模块来编写的应用
全部功能都是以多组件方式编写的应用
组件化
模块与组件模块化与组件化
一个文件中包含n个组件
Vue.extend(options)
所有组件由一个vm管理，vm的el决定服务容器指向
禁写el
避免组件复用时，数据引用
data函数式
配置组件结构
template
创建组件
靠new Vue传入的components选项
局部注册
全局注册
注册组件
写组件标签：<组件名></组件名>
使用组件
组件使用三步骤
word
Word
一个单词
kebab-case
需要vue脚手架支持
CamelCase
多个单词
回避html已有元素名称
可以使用name配置项指定组件在开发者工具中呈现的名字
备注
组件名
<组件名></组件名>
仅限脚手架下使用
<组件名/>
组件标签
const school = Vue.extend(option)==>const school = options
组件本质是一个名为VueComponent的构造函数，非程序员定义，由Vue.extend生成并返回不同的VueComponent
组件实例对象 vc
组件配置
Vue实例对象 vm
new Vue(options)配置
data函数methods/match/computed中的函数this指向
VueComponent
非单文件组件
一个文件中只包含1个组件
单文件组件（推荐）
二、Vue组件化编程
win + r ==> cmd
命令运行
npm i -g @vue/cli
全局安装
vue create xxx
创建项目
npm run serve
启动项目
npm config set registry https://registry.npm.taobao.org
npm镜像
vue inspect > output.js
查看影藏配置
创建vue脚手架
引入vue的注册容器，是入口文件，管理App
main.js
项目主组件，是所有组件的父组件，汇总所有组件
App.vue
存放所有的组件（App.vue除外）
components
脚手架结构
核心功能
模板解析器
完整版
vue.js
运行版
vue.runtime.xxx.js
运行版vue没有模板解析器，不能使用template配置项，需要使用render函数接收到createElement函数指定具体内容
render函数
异版Vue
初始化脚手架
用来给元素或子组件注册引用信息（id替代）
真实DOM元素
ref = 'xxx'
标识
this.$refs.xxx
ref属性
props配置
mixin混入
用于增强Vue
添加全局过滤器
添加全局指令
配置全局混入
Vue.use()
插件
让样式在局部生效，防止冲突
<style scoped>
写法
scoped样式
配置项
抽取组件，使用组件实现静态页面效果
实现静态组件
数据类型/名称
数据保存的组件位置
展示动态数据
从绑定事件监听开始
交互
组件化编码流程（通用）
一种组件间通信的方式，子组件 ==> 父组件
B（子组件）传A（父组件），A中给B绑定自定义事件（事件回调在A）
场景
v-on/ @
native修饰符
绑定原生DOM事件
绑定事件(父组件中)
触发事件
this.$off('xxx')
解绑事件
组件的自定义事件
一种组件间通信方式，适用于任意组件间通信
$bus是当前应用vm
接收数据A绑定自定义事件，回调留在A自身
接收数据
提供数据
在beforeDestory钩子中，用$off解绑当前组件所用事件
全局事件总线GlobalEventBus
npm i pubsub-js
import pubsub from 'pubsub-js'
引入
在beforeDestory钩子中，用pubsub.unscribe(pid)取消订阅
消息订阅与发布pubsub
组件通信
插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
v-enter
v-enter-active
v-enter-to
进入
v-leave
v-leave-active
v-leave-to
离开
元素样式
使用<transition>包裹过渡元素，配置name属性
appear：初始动画
<transition name='demo' appear> <h1 v-show='isShow'>你好</h1></transition>
单一元素
<transition-group name='demo'> <h1 v-show='isShow' key='1'>你好</h1> <h1 v-show='!isShow' key='2'>你好</h1></transition-group>
多个元素
包裹元素
transition
Vue封装的过渡与动画
三、使用Vue脚手架
四、Vue中的ajax
五、vuex
url 地址与资源之间的对应关系
单页面应用程序（Single Page Application），全部只有一个页面，内容变化通过 ajax 局部更新实现，支持浏览器地址栏的前进与后退
SPA
引用语法
重定向
嵌套路由
Vue Router
相关理解
npm i vue-router
安装 Vue-Router
Vue.use(VueRouter)
应用插件
// 引入 VueRouter
import VueRouter from 'vue-router'
// 引入路由组件
import Login from '../components/Login'import Home from '../components/Home'
// 创建 router 实例对象，按组管理路由规则并暴露
编写 router 配置项
<router-link to='/login'>Login</router-link>
实现切换
<router-view></router-view>
指定展示位置
一般组件
路由组件
pages
基本路由
路由传参
编程式路由导航
六、vue-router
elementUI
七、Vue UI组件库
Vue
前端工程化
网络安全
主机安全
数据安全
1、注入攻击: 检测Web网站是否存在诸如SQL注入、入、Ldap注入、Xpath注入等漏洞，如果存在该漏洞，攻击者对注入点进行注入攻击，可轻易获得网站的后台管理权限，甚至网站服务器的管理权限
2、X55跨站脚本: 检测Web网站是否存在XSS跨站脚本漏洞，如果存在该混洞，网站可能遭受Cookie欺狼、网页挂马等攻击
3、网页挂马:检测Web网站是否被黑客或恶意攻击者非法植入了木马程序
4、缓冲区溢出检测Web网站服务器和服务器软件，是否存获得网在缓冲区溢出混洞，如果存在，攻击者可通过此混洞，站或服务器的管理权限
5、上传漏洞:检测Web网站的上传功能是否存在上传漏洞，如果存在此混洞，攻击者可直接利用该混洞上传木马获得WebShell
6、源代码泄重:检测Web网络是否存在源代码泄重潺洞如果存在此混洞，攻击者可直接下载网站的源代码
7、隐藏目录泄露:检测Web网站的某些隐藏目录是否存在泄露混洞，如果存在此混洞，攻击者可了解网站的全部结构
8、数据库泄露:检测Web网站是否在数据库泄露的混洞如果存在此混洞，攻击者通过暴库等方式，可以非法下载网站教据库
9、弱口令:检测Web网站的后台管理用户，以及前台用户，是否存在使用弱口令的情况
10、管理地址泄露:检测Web网站是否存在管理地址泄露功能，如果存在此漏洞，攻击者可轻易获得网站的后台管理地址
web安全
前端开发
0 条评论
回复 删除
下一页
