一次就好吧
前端
获得徽章 0
- this:
this` 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 `this` 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 `this` 默认的取值】情况进行归纳和总结
普通函数:
普通函数的调用方式决定了 `this` 的值，即【谁调用 `this` 的值指向谁】
// 普通函数
function sayHi() {
console.log(this)
}
// 函数表达式
const sayHello = function () {
console.log(this)
}
// 函数的调用方式决定了 this 的值
sayHi() // window
window.sayHi()
// 普通对象
const user = {
name: '小明',
walk: function () {
console.log(this)
}
}
// 动态为 user 添加方法
user.sayHi = sayHi
uesr.sayHello = sayHello
// 函数调用方式，决定了 this 的值
user.sayHi()
user.sayHello()展开评论2 - 箭头函数:
箭头函数**中的 `this` 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 `this` ！箭头函数中访问的 `this` 不过是箭头函数所在作用域的 `this` 变量
console.log(this) // 此处为 window
// 箭头函数
const sayHi = function() {
console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
}
// 普通对象
const user = {
name: '小明',
// 该箭头函数中的 this 为函数声明环境中 this 一致
walk: () => {
console.log(this)
},
sleep: function () {
let str = 'hello'
console.log(this)
let fn = () => {
console.log(str)
console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
}
// 调用箭头函数
fn();
}
}
// 动态添加方法
user.sayHi = sayHi
// 函数调用
user.sayHi()
user.sleep()
user.walk()展开评论2 - this指向:
JavaScript 中允许指定函数中 `this` 的指向，有 3 个方法可以动态指定普通函数中 `this` 的指向
使用 `call` 方法调用函数，同时指定函数中 `this` 的值
1. call` 方法能够在调用函数的同时指定 `this` 的值
2. 使用 `call` 方法调用函数时，第1个参数为 `this` 指定的值
3. `call` 方法的其余参数会依次自动传入函数做为函数的参数
apply:
1. apply` 方法能够在调用函数的同时指定 `this` 的值
2. 使用 `apply` 方法调用函数时，第1个参数为 `this` 指定的值
3. `apply` 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数
bind` 方法并不会调用函数，而是创建一个指定了 `this` 值的新函数:
bind` 方法创建新的函数，与原函数的唯一的变化是改变了 `this` 的值展开17 - 正则表达式：
正则表达式是用于匹配字符串中字符组合的模式。在JS中，正则表达式也是对象
作用：表单验证，过滤敏感词
语法
(1）定义规则
(2）根据规则去查找
const 变量名 = /正则表达式字面量/
变量名.test(被检测的字符串) //检测是否匹配
变量名.exec(被检测的字符串) //搜索匹配
test：找到就返回true，找不到就返回false
exec：找到就返回数组，找不到就返回null
元字符：
具有特殊含义的字符
边界符 （表示位置）
用来提示字符所处的位置
（1） ^xxx：表示以xxx开头
（2） xxx$：表示以xxx结尾
注意：^和$一起使用，必须是精确匹配
console.log(/^哈$/.test('哈')) //true
console.log(/^哈$/.test('哈哈')) //false
量词 （表示重复次数）
（1） *可有可无 重复次数>=0
（2） + 重复次数 >=1
（3） ？重复0次或1次
（4） {n} 必须出现n次
（5） {n,} 重复n次或更多次
（6） {n,m} 重复次数 >=n && <=m
逗号左右不能有空格
字符类
（1） [ ] 匹配字符集合
console.log(/[abc] /.test('agnbth')) //后面的字符串只要包含abc中的任意一个字符，都返回true
（2）[ ] 里面加上-连字符，表示一个范围
[a-z] 表示 a到z 26个英文字母都可以
[a-zA-Z] 表示大小都可以
[0-9] 表示0-9的数字都可以
3）[ ] 里面加上^ 取反符号
[a-z]在a前面加^ 匹配除了小写字母以外的字符
（4）匹配除换行符之外的任何单个字符
（5）预定义类：指某些常见模式的简写方式
修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
（1） 语法：/表达式/修饰符
i 是ignore的缩写，正则匹配时字母不区分大小写
g 是单词global的缩写，匹配所有满足正则表达式的结果
（2） replace 替换
语法：字符串.replace(/正则表达式/，'替换的文本')展开评论7 - 页面加载事件：
加载外部资源（如图片、外联CSS和JavaScript等）完毕时触发的事件
为什么要使用页面加载事件：
①有时候需要等页面资源全部处理完了再做一些事情
②老代码习惯把script写在head中，这时候直接找dom元素找不到
load事件（监听整个页面资源，给window加）
等待页面所有资源加载完毕，再去执行回调函数：
window.addEventListener(’load‘, function () {
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
console.log('111')
})
})
DOMContentLoaded 事件
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而**无需等待样式表、图像等完全加载
监听页面DOM加载完毕：
document.addEventListener('*DOMContentLoaded', function () {
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
console.log('111')
})
})
页面滚动事件（scroll ）
滚动条在滚动的时候持续触发的事件
事件名：scroll 可以被两个对象注册
（document（文档）对象 和 window对象）
window对象：监听整个页面滚动（拖动滚动条，会一直打印）
window.addEventListener('scroll', function(){
console.log('啦啦啦')
}展开评论3 - 监听某个元素的内部滚动，直接给某个元素添加
const box = document.querySelector('.box')
box.addEventListener('scroll', function () {
console.log('box.scrollTop')
})
页面滚动事件-获取位置（数字类型，可读写）
scrollTop
被卷去的向上的看不到的距离
scrollLeft
被卷去的向左的看不到的距离
获取页面的html元素
document.documentElement
检测页面滚动的头部距离的属性
document.documentElement.scrollTop
页面滚动事件-滚动到指定坐标
window.scrollTo(x轴, y轴)
window.scrollTo(0, 1000)
让页面滚动到y轴1000像素的位置
页面尺寸事件（resize）
会在窗口尺寸改变的时候触发事件
window.addEventListener('resize', function(){
//执行的代码
}
页面尺寸事件-获取元素宽高
获取元素的可见部分宽高（不包含边框、margin、滚动条等）
clientWidth 和 clientHeight
元素尺寸于位置：
使用场景：通过js的方式，得到元素在页面中的位置
元素尺寸于位置-尺寸
获取宽高：
①、获取元素的自身宽高、包含元素自身设置的宽高、padding、border
②、offsetWidth 和 offsetHeight 只读
③、获取的是数值、可视宽高，如果盒子是隐藏的，获取的结果是0
获取位置
（1）、offsetLeft 和offsetTop ⭐
①、获取元素距离自己定位到父级元素的左、上距离
②、offsetLeft 和offsetTop 只读
以带有定位的父级的位置为准；如果没有，就以文档左上角为准
（2）、element.getBoundingClientRect()方法
返回元素的大小及其相对于视口的位置展开评论7 - 一、定位
1.1 网页常见布局方式
1. 标准流
1. 块级元素独占一行 → 垂直布局
2. 行内元素/行内块元素一行显示多个 → 水平布局
2. 浮动
1. 可以让原本垂直布局的 块级元素变成水平布局
3. 定位
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于 盒子之间的层叠情况
相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动
代码：position : relative
特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标
➢ 应用场景：
.配合绝对定位组CP（子绝父相）
用于小范围的移动
绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
代码：position : absolute
特点：
1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
应用场景：
1. 配合绝对定位组CP（子绝父相）
固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动
代码：position : fixed
特点：
1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置 → 已经脱标
应用场景：
1. 让盒子固定在屏幕中的某个位置
子绝父相的含义是什么？
• 子元素：绝对定位
• 父元素：相对定位
➢ 子绝父相的应用场景是什么？
• 让子元素相对于父元素进行自由移动
➢ 子绝父相的好处是什么？
• 父元素是相对定位，则对网页布局影响最小展开评论2 - 审核中 Flex布局模型构成
目标：能够使用Flex布局模型灵活、快速的开发网页
基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局
父元素添加 display: flex，子元素可以自动的挤压或拉伸
父元素为弹性容器,子元素为弹性盒子
开启弹性容器 flex布局 display: flex;
每个盒子左右都有间隙 2倍 justify-content: space-around
两侧没有间隙 justify-content: space-between
间隙 一样大 justify-content: space-evenly
垂直居中对齐 align-items: center
拉伸 需要把子盒子的高度注释 align-items: stretch;展开评论4
