毕设储备1-前端

前端易忘点归纳（自用版）

一、html5

二、css

1.列表

1.去除无序列表前的小圆点

li{
      list-style: none;
    }

2.阴影(文字和盒子)

值	描述
h-shadow	*水平阴影位置，可负值
v-shadow	*垂直阴影位置，可负值
blur	模糊距离
spread	阴影尺寸（盒子）
inset	将阴影改至内部（盒子）
color	阴影颜色

3.布局

3.1布局准则

1.多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
2.先设置盒子大小，之后设置盒子位置

3.2浮动

1.用同一方向浮动一个盒子会紧贴在另一个盒子后面
2.浮动元素会脱离标准流(脱标)
3.浮动的盒子不再保留原先的位置
4.多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列
5.浮动元素会具有行内块元素的特性
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性

• 块级盒子没设置宽度，默认和父级一样，添加浮动后大小根据内容决定
• 浮动盒子中间是没有缝隙的，是紧挨一起的
• 行内元素同理

6.清除浮动
本质：清除浮动元素脱离标准流造成的影响
策略：闭合浮动，只让浮动再父盒子内部影响，不影响父盒子外面的其他盒子
方法：①额外标签法（隔墙法）：
②父级添加overflow属性
无法显示溢出部分

/* 给浮动元素父元素添加 */
overflow: hidden;

③父级添加afer伪元素

.clearfix:after{
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

.clearfix{
      zoom: 1;
    }

④父级添加双伪元素

.clearfix:before,
.clearfix:after{
    content: "";
    display: table;
  }

.clearfix:after{
    clear: both;
  }

.clearfix{
    zoom: 1;
  }

ps:
1.为约束浮动元素位置，一般用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，其余兄弟元素也要浮动，浮动的盒子只影响浮动盒子后面的标准流，不会影响前面的标准流
3.浮动的盒子没有外边距合并的问题

4.书写顺序

1.布局定位属性：display/position/float/clear//visibility/overflow
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient……

5.定位

定位=定位模式（用于指定一个元素在文档中的定位方式）+边偏移（决定了该元素的最终位置）

5.1定位模式和边偏移

值	语义	是否脱标	移动位置
static	静态定位	否	不能用边偏移
relative	相对定位	否(占位)	相对于自身
absolute	绝对定位	是(不占位)	带有定位的父级
fixed	固定定位	是(不占位)	浏览器可视区
sticky	粘性定位	否(占位)	浏览器可视区

值	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底端偏移量，定义元素相对于其父元素下边线的距离
left	left :80px	左端偏移量，定义元素相对于其父元素左边线的距离
right	right :80px	右端偏移量，定义元素相对于其父元素右边线的距离

5.2相对定位

1.移动位置参照点是自己原来的位置
2.不脱标，继续保留原来的位置，后面的盒子仍然以标准流的方式对待它

5.3绝对定位

1.移动位置参照点是祖先元素的位置
2没有祖先元素/祖先元素没有定位，则以浏览器为准
3.如果祖先元素有定位，则以最近一级有定位祖先元素为参考点移动位置
4.不占有原先祖先的位置

5.4固定定位

元素固定于浏览器可视区的位置
1.移动位置参照点是浏览器的可视窗口
2.不占有原先的位置

5.5子绝父相（常用）

子级是绝对定位的话，父亲要用相对定位
1.自己绝对定位不会占位置，可以放到父盒子的任意一个地方，不影响其他兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时，需要占位置，只能是相对定位

5.6定位叠放顺序

/* 默认auto，数值越大，盒子越靠上，不能加单位，只有定位有*/
{z-index：1;}

6.字体图标

    /* 字体声明 */
    @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?kmsz6c');
      src:  url('fonts/icomoon.eot?kmsz6c#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?kmsz6c') format('truetype'),
        url('fonts/icomoon.woff?kmsz6c') format('woff'),
        url('fonts/icomoon.svg?kmsz6c#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

7.鼠标样式

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

li{cursor: xxx}

8.溢出显示

1.单行

/* 1.如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/* 2.溢出部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出部分 */
text-overflow: ellipsis;

2.多行

   {
      overflow: hidden;
      text-overflow: ellipsis;
      /* 弹性伸缩盒子模型展示 */
      display: -webkit-box;
      /* 限制在一个块元素显示的文本的行数 */
      -webkit-line-clamp: 3;
      /* 设置成检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;
    }

9.属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性且值以val开头的E元素
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素
E[att*=“val”]	匹配具有att属性且值含有val的E元素

ps:类选择器、属性选择器、伪类选择器，权重为10

10.伪类选择器

属性	简介
E :first-child	匹配父元素中的第一个E元素
E :last-child	匹配父元素中的最后一个E元素
E :nth-child(n)	匹配父元素中的第n个E元素

11.过渡

transition: 变化的属性 花费时间 运动曲线 何时开始;

12.flex布局

原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式

12.1 flex-direction设置主轴方向

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

12.2 justify-content设置主轴上的子元素排列方式

使用这个属性之前要先确定主轴

属性值	说明
flex-start	默认值 从头部开始 如果主轴是x轴 则从左到右
flex-end	从尾部开始排列
center	从主轴居中对齐(如果主轴是x轴则水平居中)
space-around	平分剩余空间
space-between	先两边贴边 在平分剩余空间

12.3 flex-wrap设置子元素是否换行

属性值	说明
nowrap	默认值，不换行
wrap	换行

12.4 align-items设置侧轴上的子元素排列方式（单行）

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中(垂直居中)
stretch	拉伸(默认值)

12.5 align-content设置侧轴上的子元素排列方式（多行）

属性值	说明
flex-start	默认值 在侧轴的头部开始排列
flex-end	从侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子元素在侧轴平分空间
space-between	子元素在侧轴先分布在两头，再平分剩余空间
stretch	设置子元素高度平分父元素高度

ps：flex-flow是flex-direction和flex-wrap的复合属性

12.6 子项flex属性

控制子元素在父元素中所占份数

12.7 align-self控制子项自己在侧轴上的排列方式

12.8 order定义项目的排列顺序

三、js

1.输入输出内容

	// 输出内容
   	document.write('<h1>我是一级标题</h1>')
    // 控制台打印
    console.log('日志')
    // 输入语句
    prompt('请输入年龄:')
    // alert弹出警示框，输出的展示给用户的
    alert('计算的结果是：')

2.模板字符串

简化字符串拼接

模板字符串 外面用`` 里面${变量名}

3.检测数据类型

typeof(x)/typeof x

4.数组

4.1 查找和修改

arr[下标]
arr[下标] = 新值

4.2 新增

arr.push(x1,x2...) //将一个或多个元素添加到数组的末尾，并返回该数组的新长度
arr.unshift(x1,x2...) //将一个或多个元素添加到数组的开头，并返回该数组的新长度

4.3 删除

arr.pop()//从数组中删除最后一个元素，并返回该元素的值
arr.shift()//删除第一个元素
arr.splice(start,deletCount)//指定位置移除指定个数元素

4.4排序

arr.sort(function(a,b){
	return a-b//升序排列
})
arr.sort(function(a,b){
	return b-a//降序排列
})

5.函数

1.具名函数的调用可以写到任何位置

function fun(){}

2.函数表达式必须先声明函数表达式再调用

let fn = function () {};
fn();

3.立即执行函数必须加分号
4.逻辑与左边为flase则逻辑中断，逻辑或左边为true则逻辑中断
5.’’，0，undefined，null，NaN为假

对象外叫函数，对象内叫方法

6.对象

6.1.对象的声明

对象是一种数据类型，无序的数据集合

let 对象名 = {
	属性名：属性值；
	方法名：函数
}
let 对象名 = new Object()

由属性(特征：尺寸，颜色，重量…)和方法(功能：吃，看电影，打电话)组成

6.2 增删改查

	//查找
	对象名.属性
	//更改
	对象名.属性=新值
	对象名['属性名']
	//添加
	对象名.新属性=新值
	//删除
	delete 对象名.属性

6.3 遍历对象/数组对象

for (let k in obj) {
	console.log(k);
	console.log(obj[k]);
   }
for (let i = 0; i < arr.length; i++) {
   console.log(arr[i].属性名);
   }

6.4 内置对象

方法	说明
random	生成0-1之间的随机数(包含0但不包含1)
ceil	向上取整
floor	向下取整
max	找最大数
min	找最小数
pow	幂运算
abs	绝对值

//生成N-M之间的随机整数
Math.floor(Math.random()*(M-N+1))+N

6.5 事件对象

1.在绑定事件的回调函数的第一个参数就是事件对象
2.trim方法

字符串.trim()//去除字符串左右的空格

6.6 环境对象

谁调用，this就是谁

6.6 日期对象

	// 1.得到当前时间
    const date = new Date()
    // 2.指定时间
    const date = new Date('具体时间')

时间戳
1.getTime()
2.+new Date()
3.Date.now()

6.7 栈和堆

1.栈：简单数据类型存放到栈里面
2.堆：引用数据类型存放到堆里面

四、APIs

1.DOM元素

1.1 通过css选择器来获取dom元素

//1.获取匹配的第一个元素 可以直接修改
  	const box = document.querySelector('css选择器')
//2.选择匹配的多个元素 得到的是伪数组 通过遍历获取其中内容
	document.querySelectorAll('css选择器')//返回值是css选择器匹配的NodeList对象集合

1.2 查找DOM元素

针对的找亲戚返回的都是对象
①父级：parentNode，获得所有子节点、包括文本节点（空格、换行）、注释节点等
②子级：children，仅获得所有元素节点，返回的是一个伪数组
③兄弟：nextElementSibling、previousElementSibling

1.3 增加DOM元素

//插入到父元素最后
父元素.appendChild(要插入的元素)
//插入到某个子元素前面
父元素.insertBefore(要插入的元素,在哪个元素前面)
//克隆一个已有的元素节点
元素.cloneNode(布尔值)

1.4 删除DOM元素

父元素.removeChild(子元素)

1.5 修改DOM元素

①innerText
将纯文本内容添加/更新到任意标签位置，显示纯文本，不解析标签
①innerHTML
会解析标签，多标签建议使用模板字符

ps：innerHTML得不到表单的内容

1.6 操作元素属性

1.6.1 操作常用属性

href、title、src

1.6.2 操作元素样式属性

①通过style修改样式属性

//修改样式属性 多组单词的采取小驼峰命名 要加单位
对象.style.样式属性='值'

②操作类名(className)修改css

//active是一个类名
元素.className = 'active'

③通过classList修改样式

// 追加类一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')
// 有没有包含某个类，有则返回true，无则返回false
classList.contains(’类名‘)

1.6.3 操作表单元素属性

只接受布尔值：checked,disabled,selected

1.6.4 自定义属性

标签上一律以data-开头，dom对象上一律以dataset对象方式获取

2.定时器setInterval

setInterval(函数,间隔时间) 函数名不要加小括号

关闭定时器

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

3.事件注册、解绑

3.1 传统on注册（L0）

①同一个对象，后面注册的事件会覆盖前面注册(同一个事件)
②直接使用null覆盖就可以实现世界肩膀
③冒泡阶段执行

3.2事件监听注册（L2）

元素对象.addEventListener('事件类型'，要执行的函数)

①后面注册的事件不会覆盖前面的事件(同一个事件)
②可以通过第三个参数去确定是在冒泡阶段或者捕获阶段执行
③匿名函数无法被解绑，其余解绑方式：

btn.removeEventListener(事件类型, 事件处理函数，获取捕获或者冒泡阶段)

3.1 三要素

①事件源：哪个dom元素被事件触发了，要获取dom元素
②事件类型：用什么方式触发
③事件调用的函数：要做什么事

3.2 事件类型

类型	触发条件
鼠标事件	click鼠标点击
	mouseenter鼠标经过
	mouseleave鼠标离开
焦点事件	focus获得焦点
	blur失去焦点
键盘事件	Keydown键盘按下触发
	Keyup键盘抬起触发
文本事件	Input用户输入事件
页面加载事件	监听整个页面，等页面资源加载完再执行回调函数window.addEventListener('load', function () {}）
	无需等待样式表、图像等完全加载document.addEventListener('DOMContentLoaded', function () {}）
页面滚动事件	监听整个页面滚动window.addEventListener('scroll', function () {})
页面尺寸事件	resize 浏览器窗口大小发生变化的时候触发事件

属性	作用	说明
scrollTop和scrollLeft	被卷去的头部和左侧	配合页面滚动来用，可读写
clientWidth和clientHeight	获得元素的宽度和高度	不包含border，margin，滚动条 ，用于js获取元素大小，只读属性
offsetWidth和offsetHeight	获得元素的宽度和高度	包含border，padding，滚动条，只读
offsetLeft和offsetTop	获取元素距离自己定位父级元素的左、上距离	获取元素位置的时候使用，只读

4.事件流

4.1 事件捕获

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

true：从dom根元素开始执行对应的事件(从外到里)

4.2事件冒泡

false：当一个元素触发事件后，依次向上调用所有父级元素的同名事件
阻止冒泡：

事件对象.stopPropagation()

5.事件委托

①事件委托给父元素
②获得真正触发事件的元素：事件对象.target.tagName

6.阻止元素默认行为

e.preventDefault()

7.定时器

let timer = setTimeout(回调函数,等待的毫秒数)
//清除延时函数
clearTimeout(timer)

8.本地存储

1.localStorage
只能存储字符串数据类型，关闭页面也会存在(手动删除除外)，可以多窗口（页面）共享（同一浏览器可以共享）

// 存储方式
localStorage.setItem('key',value)
// 获取方式
localStorage.getItem('key')
// 删除本地存储 只删除名字
localStorage.removeItem('key')
// 修改
localStorage.setItem('已存在的key', new value)

2.sessionStorage
生命周期为关闭浏览器窗口，在同一个窗口(页面)下数据可以共享
3.复杂数据类型

// 转换为JSON数据类型
JSON.stringify(复杂数据类型)
// 将字符串转换为对象
JSON.parse(JSON字符串)

9.map和join

1.map
遍历数组处理数据，返回新的数组，有返回值，forEach没有返回值

数组.map(function (ele, index) {})

2.join
把数组中所有元素转换为一个字符串

10.正则表达式

//定义语法
const 变量名 = /表达式/
//判断是否有符合规则的字符串
regObj.test(被检测的字符串)
//检索(查找)符合规范的字符串
regObj.exec(被检测的字符串)

10.1 元字符

①边界符：表示位置，开头和结尾，必须用什么开头，用什么结尾
②量词：表示重复次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	出现n次
{n,}	大于等于n次
{n,m}	大于等于n次且小于等于m

③字符类：

符号	说明
[ ]	后面的字符串只要包含abc中任意一个字符，都返回true，使用连字符-表示一个范围 ，里面加^表示取反符号
.	匹配除换行符之外的任何单个字符

④预定义类

符号	说明
\d	匹配0-9之间的任一数字
\D	匹配所有0-9以外的字符
\w	匹配任意的字母、数字、下划线
\W	除所有字母、数字、下划线以外的字符
\s	匹配空格(包括换行符、制表符、空格符等)
\S	匹配非空字符的字符

10.2修饰符

/表达式/修饰符

字符	说明
i	正则匹配时字母不区分大小写
g	匹配所有满足正则表达式的结果

补充：字符串.replace(/正则表达式/，‘替换的文本’)

五、Ajax

优点：
①可以无需刷新页面与服务器端进行通信
②允许你根据用户事件来更新部分页面内容
缺点：
①没有浏览历史，不能回退
②存在跨域问题(同源)
③SEO不友好

六、Vue

1.创建vue实例，初始化渲染的核心步骤

1.准备容器(Vue所管理的范围)
2.引包(开发版本包/生产版本包)
3.创建实例new Vue()
4.添加配置项(el data)=>渲染数据
el：指定挂载点，选择器指定控制的是哪个盒子
data：提供数据

2.插值表达式{{}}

1.使用的数据必须存在(data)
2.支持的是表达式，而非语句
3.不能再标签属性中使用{{}}

3.v-show和v-if

区别：1.v-show底层原理：切换css的display：none来控制显示隐藏，v-if底层原理：根据判断条件控制元素的创建和移除(条件渲染)
2.v-show：频繁切换隐藏的场景，v-if：要么显示，要么隐藏，不频繁切换的场景