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使用