flex布局复习 2021-6-1 js复习 学习笔记 2021-6-3 js复习 2021-6-4 js高级 2021-6-7

flex布局复习 2021-6-1

3.1 常见父项属性

• flex-direction:设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素排列方式（多行）
• align-items：设置侧轴上的子元素排列样式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

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

div span:nth-child(3) {
    align-self: flex-end;
}

4.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样

float:left浮动带来的影响解决

• 父元素添加overflow:hidden

• 使用flex弹性布局

3. DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM事件流分为3个阶段

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

5.阻止事件冒泡

5.1 阻止事件冒泡的两种方式

e.stopPropagation()

6.事件委派（代理、委派）

事件委派的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

返回鼠标相当于浏览器窗口可视区的坐标

document.addEventListener('click',function (e) {
  console.log(e.clientX)
  console.log(e.clientY)
})

page鼠标在页面文档的x和y坐标

document.addEventListener('click',function (e) {
  console.log(e.pageX)
  console.log(e.pageY)
})

substr（‘起始的位置’，截取几个字符）

split()分割符

5.4 location对象的方法

js复习 2021-6-4

window.pageYOffset 页面被卷去的头部

mouseenter和mouseover的区别

• 当鼠标移动到元素上时就会触发mouseenter事件
• 类似mouseover，它们两者之间的差别是mouseover鼠标经过自身盒子触发，经过子盒子还会触发，mouseenter只会经过自身盒子触发

js高级 2021-6-7

window.sessionStorage

1.生命周期为关闭浏览器窗口

2.在同一个窗口下数据可以共享

3.以键值对的形式存储使用

window.localStorage

1.生命周期永久生效，除非手动删除 否则关闭页面也会存在

2.可以多窗口共享

3.以键值对的形式存储使用

constructor()方法是类的构造函数（默认方法），用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有显示定义，类内部会自动给我们创建一个constructor（）

（1）通过class关键字创建类，类名我们还是习惯性定义首字母大写

（2）类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象

（3）constructor函数只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数

（4）生成实例new不能省略

（5）最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function

（1）我们类里面所有的函数不需要写function

（2）多个函数方法之间不需要添加逗号分隔

3.2 super关键字

super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

• super必须在子类this之前调用

1.在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象

2.类里面的共有的属性和方法一定要加this使用