- 博客(42)
- 收藏
- 关注
RSS订阅
原创 前端H5面试题CSS：如何解决 margin“塌陷”？
一、外边距塌陷共有两种情况①第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。解决这种情况的方法为：两个外边距不同时出现②第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。解决这种情况的方法为：父级添加一个 css 属性，overflow：hidden，禁止超出外边距重叠就是外边距塌陷（margin-col
2022-01-07 20:27:11
797
原创 React组件销毁中清理异步操作和取消请求
1. 问题描述:通常是 react 组件已销毁，但是组件中一些异步操作还未结束会报如下这个错误:Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the c
2022-05-16 23:18:04
2139
原创 TS：class
1. 类声明class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { console.log("Hello, " + this.greeting); }}let greeter = new Greeter("world");greeter.greet()2. 继承cla
2022-05-16 20:28:02
244
原创 面包屑导航？作用？
1. 面包屑导航:这个概念源于一个童话故事“汉塞尔”和“格莱特”兄妹俩，当他们被带到森林中时想到通过沿途撒下面包屑来帮助他们能够找到回家的路。所以，面包屑导航意在告知用户所处的当前网页的位置，方便用户可以通过该导航快速返回上一级网页。2. 面包屑导航大致分为三类：一是基于位置的导航，这也是用户最经常用到的，它可以显示出当前页面在整个网站中所占据的层次，对于结构层次深的网站来说很有帮助，不至于让用户在网站中迷路，对于用户体验的提升很有帮助；二是基于属性的面包屑导航，这种导航常见于电商类网站
2022-05-16 17:15:50
370
原创 Webpack：典型的Webpack4配置
1. Webpack配置文件的构成mode 输出模式 entry 入口文件 output 输出位置配置 module.rules 不同源码模块的加载规则配置（即使用不同loader加载不同模块） plugins loader以外的工作配置 devServer 配置开发服务器（代理+热更新） optimization 优化配置 optimization.minify 文件压缩 optimization.splitChunks 分包配置2. 完整的webpack.config.js配置案例
2022-05-10 11:31:25
987
1
原创 css：css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度注意：css中无法直接给背景图片加 opacity 属性，可以使用下面的方法来给background-image加上我们想要的透明度opacity。2. 首先给大家简单介绍一下透明度opacity这个属性：属性介绍：opacity 属性设置元素的不透明级别。语法：opacity: value | inherit;属性值：value 规定不透明度。【从 0 (完全透明)到 1(完全不透明)】inherit 应该从父元素继承 opaci
2022-05-10 11:23:29
11274
1
原创 React redux-persist持久化数据存储
1. 全局数据持久化存储的需求：在React项目中，我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过redux存储的全局数据就会被全部清空，比如登录信息等。2. 引出：这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。3.redux-persist但是在.
2022-05-08 17:02:16
1727
原创 JS：ES6_解构赋值
一、解构赋值 快速地从复杂结构中提取我要的内容1. 简单对象的解构 <script> const obj = { name: "胡莎", age: 18, gender: "女", isRich: true }; /* 解构赋值 */ // let {name} = obj // let {age} = o
2022-02-21 18:48:59
152
原创 JS：正则表达式
一、创建正则表达式 <script> // 什么是正则表达式 “规则表达式” // 就是我们通过一些符号和特殊符号组成一个模式 // 用来检测字符串是不是符合我写的 “规则” // 怎么写一个正则 // 字面量创建 var reg1 = /\d{5,}@qq\.com/ //内置构造函数创建 var reg2 = new RegExp("\\d{5,}@qq\\.com") // 打印正则对象的字面量
2022-02-18 17:47:07
323
原创 JS：随机女友_DOM练习题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2022-02-11 19:27:30
1018
原创 JS：打字游戏_键盘事件监听
1. 打字游戏屏幕随机出现字母或数字 用户按下键盘，屏幕显示回答正确与否 当用户按下ESC时游戏结束<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
2022-02-10 20:33:12
2156
原创 JS：BOM应用_随着滚动条出现顶部通栏、返回顶部按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2022-02-09 17:08:51
161
原创 JS：浅拷贝、深拷贝的理解
1. 浅拷贝 = 拷贝地址 修改副本会相互影响 <script> // 1.浅拷贝 = 拷贝地址 修改副本会相互影响 var liqin = { name: "李沁", age: 24, married: true, children: [] } var husha = { name: "胡莎",
2022-02-08 16:08:19
385
原创 JS：创建Date对象、Date对象的API、计算时间差
1.创建Date对象方式 <script> // 创建Date对象 function demoCreateDate(){ // 1. 无参默认创建当前时间的Date对象 // var date = new Date(); // console.log(date); //Mon Feb 07 2022 15:38:40 GMT+0800 (GMT+08:00) .
2022-02-07 16:31:03
553
原创 JS：选择排序与冒泡排序
1. 选择排序 <script> var arr = [9, 6, 5, 3, 1, 4, 2, 8, 7, 10] // 选择排序逻辑 // 锁定一个位置，将未排序元素中最小的元素找出，与【锁定位元素】交换位置 // 锁定下一位，继续找出剩余元素中最小的，与【锁定位元素】交换位置 for (let min = 0; min < arr.length - 1; min++) {
2022-02-07 15:27:39
711
原创 JS：获取元素全部样式
1.获取非行间样式window.getComputedStyle(div) IE 9 以上使用 div.currentStyle IE 8 及一下使用<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial.
2022-02-04 23:13:43
1362
原创 JS：操作DOM元素（增、删、改、查）
一、增1. 创建一个节点 createElement、createTextNode<body> <div> <p> <span>李沁，我喜欢你！</span> </p> </div> <script> var div = document.querySelector('div'); var
2022-02-03 19:50:50
2676
原创 JS：隔行变色的表格
一、表格制作<body> <table cellspacing="0"> <thead> <tr> <th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th> </tr>
2022-02-03 00:40:14
468
原创 JS：DOM 获取节点
1. 获取元素下的所有 **子节点** .childNodes<body> <div> 我是第一个文本节点 <!-- 我是一个注释 --> <p>1</p> 我是最后一个文本节点 <p>2</p> </div> <script> var div = document.quer
2022-01-31 20:54:35
1613
原创 JS：this关键字
1.谁在调用当前函数，this就指向谁无主语，直接调用的函数，this指向是window <script> function fn(){ console.log(this); } fn(); //this指向window </script> 主语.方法名() 方法内部的this指的是主语 <script> var liqin = { .
2022-01-29 22:37:42
291
原创 JS：DOM操作标签元素
1. 操作内容_innerText、innerHTML<style> .box { width: 100px; height: 100px; background-color: blueviolet; text-align: center; font: 24px/100px "宋体"; }</style><body> <div class="box"&
2022-01-27 22:40:14
656
原创 JS：DOM获取页面元素
1. 通过id获取页面元素__document.getElementById<body> <div id="box"> <ul> <li class="box_items">李沁</li> <li class="box_items">迪丽热巴</li> <li class="box_items">李一桐</
2022-01-25 23:17:53
484
原创 前端H5面试题CSS：如何使一个盒子水平垂直居中？
1. 利用定位（常用方法,推荐） <style> .parent { width: 500px; height: 500px; background-color: cyan; position: relative; } .child { width: 100px; height: 100px;
2022-01-25 16:26:32
423
原创 JS：string常用方法API_练习题
1. 给一段文章中的全部指定词语进行过滤，自己编辑一个敏感词数组，将指定文章中的所有敏感词都替换为等量的 * <script> var dirtywords = ['萨比', '你妹', '握草']; var passages = "萨比，快点过来，你妹在等你，握草，你这个萨比！"; for (const word of dirtywords) { passages = passages.replaceAll(
2022-01-24 13:53:53
473
原创 前端H5面试题Js：JavaScript字符串的常用方法有哪些？
一、前言： 可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变。二、增 增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作，除了常用+以及${}进行字符串拼接之外，还可通过concat。1. concat() 用于将一个或多个字符串拼接成一个新字符串 <script> function demoConcat() { var str = "he...
2022-01-21 17:29:54
693
原创 前端H5面试题Js: 数组的常用方法有哪些？
1. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 <script> /* push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 */ function demoPush() { var arr = [2, 4, 6, 8, 10]; var newArr = arr.push(12); console.log(newArr);/.
2022-01-20 20:58:46
697
原创 JS：string常用方法API
1. charAt() 方法从一个字符串中返回指定的字符 <script> function demoCharAt() { var str = "我愿意为你放弃曾经那些年少轻狂"; console.log(str.length); //15 for (let i = 0; i < str.length; i++) { console.log(str.char
2022-01-20 17:50:02
622
原创 JS：数组强化练习
1. 定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数；然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程。 <script> // 1. 定义一个含有30个整型元素的数组，按顺序分别赋予从2开始的偶数； // 然后按顺序每五个数求出一个平均值，放在另一个数组中并输出。试编程。 function getAvgArray() { var arr = [];
2022-01-19 21:21:52
1016
原创 JS：数组的常用方法
1. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 <script> /* push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 */ function demoPush() { var arr = [2, 4, 6, 8, 10]; var newArr = arr.push(12); console.log(newArr);//
2022-01-19 17:21:08
681
原创 JS：JS是如何存储不同类型的变量的？
一、数据类型之间存储的区别（重点） 既然我们区分了基本数据类型和复杂数据类型 那么他们之间就一定会存在一些区别 他们最大的区别就是在存储上的区别 我们的存储空间分成两种 栈 和 堆 栈： 主要存储基本数据类型的内容 堆： 主要存储复杂数据类型的内容 二、基本数据类型在内存中的存储情况直接在 栈空间 内有存储一个数据三、复杂数据类型在内存中的存储情况 在堆里面开辟一个存储空间 把数据存储到存储空间内 ...
2022-01-19 08:45:34
369
原创 JS：定时器练习
1. 3秒后引爆炸弹<body> <p id="Bomb">距离炸弹爆炸还有10秒！</p> <button id="btn">拆取炸弹</button> <script> // 3秒后引爆炸弹 function timerBomb1() { // 引爆炸弹的赋值式函数 var handler = function () {
2022-01-18 20:44:53
568
原创 JS：声明式函数与赋值式函数有何不同？
1. 声明式函数调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面2. 赋值式函数函数调用的代码必须写到函数体后面
2022-01-18 15:41:34
525
原创 JS：什么是预解析？
1. 浏览器的JS引擎对脚本的处理过程：先通读，再执行2. 通读的过程即预解析3. 遇到变量（var xxx）分配内存 填充undefined4. 遇到函数（function xxx(){...}）分配内存 直接填充代码5. 导致的一些现象变量提升：在变量var之前就已经能访问，只不过类型和值都是undefined函数提升：声明式函数可以在声明前直接访问...
2022-01-18 15:06:00
178
原创 JS：什么值转布尔会得到 false
1. " " 、 0 、NaN 、 null 、 undefined <script> var str = ""; console.log(Boolean(str)); //false var num = 0; console.log(Boolean(num)); //false console.log(Boolean(NaN)); //false var a = null;...
2022-01-17 20:58:23
148
原创 前端H5面试题Js: Javascript 创建对象的几种方式？ （必会）
1、简单对象的创建，使用对象字面量的方式{}，创建一个对象（最简单，好理解，推荐使用） <script> var Star = {}; //JSON Star.name = "李沁"; //添加属性并赋值 Star.age = 18; Star.sayHi = function () { alert("Hi,我" + Star.name + ",今年" + Star["age"] + "岁了")
2022-01-17 20:48:47
262
原创 前端H5面试题Js: 简述创建函数的几种方式？ （必会）
1. 第一种自定义函数方式（命名函数）： <script> function getSum(a, b) { return a + b; } console.log(getSum(6, 8)); // 14 </script>2. 第二种函数表达式方式（匿名函数）： <script> var sum = function (a, b) {
2022-01-17 19:30:17
250
原创 前端H5面试题Js: JavaScript 的基本类型有哪些？引用类型有哪些？存储区别? null 和undefined 的区别？（必会）
数据类型 1. 基本数据类型：string、number、boolean、null、undefined <script> var str = "李沁"; console.log(typeof (str));//string var num = 123; console.log(typeof (num));//number var bool = true; console.log..
2022-01-17 17:48:54
162
原创 JS: 函数（function）练习题_14题
1. 编写一个函数，计算两个数字的和差积商 <script> function calculate(a, b) { return [a + b, a - b, a * b, a / b] } btn1.onclick = function () { var a = num1.value * 1; var b = num2.value * 1;
2022-01-17 17:03:45
1530
原创 JS: 参数传递（值传递和引用传递）
JS: 参数传递（值传递和引用传递）1.基本数据类型：string、number、boolean、null、undefined2.引用数据类型：funcition、array、object . . . .3.值传递和引用传递：值传递针对基本数据类型，引用传递针对引用数据类型，传递可以理解为复制变量值。
2022-01-15 17:01:37
4348
原创 JS: ES5中数组常用的批处理
ES5中数组常用的批处理，forEach()、map()、filter()、every()、some() 、reduce()
2022-01-15 15:32:15
534
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人