前端
文章平均质量分 77
前端界面语法
boboluotou
前端小白的进阶之路。
展开
-
箭头函数跟普通函数的区别
目录1 箭头函数跟普通函数的区别2 箭头函数为什么不能使用new命令1 箭头函数跟普通函数的区别区别:1 箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象2 不可以使用arguments 对象,该对象在函数体内不存在。如果要用,可以用rest参数代替3 不可以使用yield命令,因此箭头函数不能用作Generator函数4 不可以使用new命令2 箭头函数为什么不能使用new命令普通函数可以使用new生成实例如何生成new实例呢,点击这里查看原因1 没有自原创 2021-05-12 10:24:46 · 160 阅读 · 0 评论 -
手动实现Promise.all()和 Promise.race()
参考链接:https://www.jianshu.com/p/c17085ce40ec1 Promise.allPromise.all() 方法接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的输入,并且只返回一个Promise实例, 那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束,或者输入的iterable里没有promi原创 2021-03-21 16:18:06 · 481 阅读 · 0 评论 -
Promise
1 为什么使用PromisePromise是异步编程的一种解决方案。可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果可以在对象之间传递和操作promise,帮助我们处理队列1.1 异步回调的问题之前处理异步是通过纯粹的回调函数的形式进行处理;很容易进入到回调地狱中,剥夺了函数return的能力;问题可以解决,但是难以读懂,维护困难;稍有不慎就会踏入回调地狱 - 嵌套层次深,不好维护;1.2 什么时候会来处理异步事件呢?一种很常见的场景应该就是网络请求了。我们封装一原创 2021-03-21 11:39:13 · 127 阅读 · 0 评论 -
DOM 重点核心
目录1 DOM 简介1.1 创建1.2 增1.3 删1.4 改1.5 查1.6 属性操作1.7 事件操作1 DOM 简介 关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。1.1 创建1.2 增1.3 删1.4 改1.5 查1.6 属性操作1.7 事件操作在这里插入图片描述...原创 2020-11-13 21:52:21 · 131 阅读 · 0 评论 -
JS 操作元素
目录1 操作元素1.1 改变元素内容1.2 表单元素的属性操作1.3 样式属性操作 JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。1 操作元素1.1 改变元素内容 这个是普通盒子 比如div 标签里面的内容element.innerText从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。不识别html标签。element.innerHTML起始位置到终止位置的全部内容,包括html标原创 2020-11-09 16:51:32 · 772 阅读 · 0 评论 -
JS 事件的执行
目录1 事件1.1 执行事件的步骤1.2 常见的鼠标事件1 事件1.1 执行事件的步骤获取事件源注册事件(绑定事件)添加事件处理程序<button id="btn">唐伯虎</button><script> // 点击一个按钮,弹出对话框 // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素 // (1) 事件源 事件被触发的对象 谁 按钮 var btn=document.ge原创 2020-11-08 15:57:01 · 275 阅读 · 0 评论 -
JS 数据类型
目录1 数据类型简介1.1 为什么需要数据类型1.2 变量的数据类型2 简单数据类型2.1 简单(基本)数据类型2.2 数字型 Number2.2.1 数字型进制2.2.2 数字型三个特殊值2.2.3 isNaN()2.3 字符串型String2.3.1 字符串引号嵌套2.3.2 字符串转义符2.3.3 字符串长度2.3.4 字符串拼接2.3.5 字符串拼接加强2.3.6 布尔型 Boolean2.3.7 Undefined和Null3 获取变量数据类型3.1 获取检测变量的数据类型4 数据类型转换4.1原创 2020-11-07 14:39:09 · 315 阅读 · 0 评论 -
JS引擎运行 js 预解析
目录1 JS引擎运行 js1.1 预解析1.2 代码执行2 代码案例2.1 第一个案例2.2 第二个案例2.3 第三个案例(重点)1 JS引擎运行 js 我们JS引擎运行js分为两步:预解析 、代码执行。1.1 预解析 预解析JS引擎会把js里面所有的var还有function提升到当前作用于的最前面。变量提升:就是把所有的变量声明提升到当前作用域的最前面,不提升赋值操作。函数提升:就是把所有的函数声明提升到当前作用域的最前面,不调用函数。1.2 代码执行 按照代码书写的顺序从上往下执行原创 2020-11-07 14:38:28 · 204 阅读 · 0 评论 -
JS 变量
目录1 变量概述1.1 什么是变量1.2 变量在内存中的存储2 变量的使用2.1 声明变量2.2 赋值2.3 变量的初始化2.4 变量语法扩展2.4.1 更新变量2.4.2 同时声明多个变量2.4.3 声明变量特殊情况3 变量命名规范4 小结1 变量概述1.1 什么是变量1.2 变量在内存中的存储 本质是程序在内存中申请的一块用来存放数据的空间。2 变量的使用 变量在使用时分为两步:1.声明变量 2.赋值2.1 声明变量2.2 赋值2.3 变量的初始化2.4 变量语法扩展2原创 2020-11-03 15:21:49 · 301 阅读 · 0 评论 -
JS 书写位置和输入输出语句
这里写目录标题1 JS书写位置1.1 行内式JS1.2 内嵌JS1.3 外部JS2 JS 输入输出语句1 JS书写位置JS书写位置分为3种:行内式JS、内嵌式JS和外部JS1.1 行内式JS1.2 内嵌JS1.3 外部JS2 JS 输入输出语句原创 2020-11-03 11:05:18 · 222 阅读 · 0 评论 -
响应式开发
目录1 响应式开发1.1 响应式开发原理1.2 响应式布局容器1 响应式开发1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备划分尺寸区间超小屏幕(手机)<768px小屏设备(平板)768px<= ~ <992px中等屏幕(桌面显示器)992px<= ~ <1200px宽屏设备(大桌面显示器)1200px<= ~1.2 响应式布局容器 响应式需要一个父级原创 2020-11-02 20:34:15 · 827 阅读 · 0 评论 -
gitee上传代码
目录1 上传项目2 查看项目3 另一种方法1 上传项目需要下载git ,下载地址:https://git-scm.com/downloads/下载是exe文件,双击一路点击next即可。在需要上传的文件夹中右键点击Git Base Here,打开命令行输入2 查看项目3 另一种方法...原创 2020-10-30 22:14:34 · 223 阅读 · 0 评论 -
rem和Less
目录1 rem1.1 rem能解决什么问题1.2 rem是什么?2 媒体查询2.1 mediatype查询类型2.2 关键字2.3 媒体特性1 rem1.1 rem能解决什么问题页面布局文字能否随着屏幕大小变化而变化?流式布局和flex布局主要针对于宽度布局,那高度如何设置?怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放? 所以提出rem1.2 rem是什么? rem(root em)是一个相对单位,类似于em,em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体原创 2020-10-28 09:42:47 · 490 阅读 · 0 评论 -
flex布局
目录1 flex布局原理2 flex布局父项常见属性2.1 常见父项属性2.2 flex-direction2.3 justify-content 主轴2.4 flex-wrap2.5 align-items 侧轴2.6 align-content2.7 flex-flow3 flex布局子项常见属性3.1 flex属性3.2 align-self3.3 order1 flex布局原理 display:flex。 flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵原创 2020-10-25 20:50:23 · 392 阅读 · 0 评论 -
前端移动端基础
目录1 移动端基础1.1 meta视口标签1.2 背景缩放1.3 特殊样式1 移动端基础1.1 meta视口标签<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0 minimum-scale=1.0">属性解释说明width宽度设置的是viewport宽度,可以设置device-width特殊值i原创 2020-10-24 21:05:30 · 331 阅读 · 0 评论 -
CSS 2D 3D
目录1 CSS 2D转换1.1 2D转换之移动translate1.2 2D转换之旋转rotate1.3 2D转换中心点transform-origin1.4 2D转换之缩放scale2 CSS动画2.1 定义动画2.2 元素使用动画3 动画常用属性1 CSS 2D转换 同时又位移和其他属性,我们需要把位移放到最前面1.1 2D转换之移动translate 2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。语法:transform: translate(x,y);原创 2020-10-24 18:57:02 · 427 阅读 · 0 评论 -
CSS3属性 模糊、过渡
目录1 图片变模糊2 CSS3 calc函数3 CSS3过渡1 图片变模糊CSS3滤镜filterfilter CSS属性将模糊或颜色偏移等图形效果应用于元素。filter:函数(); 例如:filter:blur(5px); // blur模糊处理 数值越大越模糊2 CSS3 calc函数calc() 此CSS函数让你在声明CSS属性值时执行一些计算。width: calc(100%-80px)括号里面可以使用+ - * / 来计算。3 CSS3过渡 谁做过渡给谁加代原创 2020-10-18 22:29:21 · 625 阅读 · 0 评论 -
HTML5的新特性
目录1HTML5的新特性1.1 新增语义化标签1.2 新增多媒体标签1.2.1 音频 audio1.2.2 视频 video1.3 新增的input表单1.4 新增表单属性1HTML5的新特性1.1 新增语义化标签1.2 新增多媒体标签1.2.1 音频 audio 语法:<audio src="文件地址" controls="controls"></audio>音频文件最好使用MP3格式,常见属性如下:属性值描述autoplayautopl原创 2020-10-18 15:44:22 · 198 阅读 · 0 评论 -
CSS常见布局技巧
常见布局技巧目录1 margin 负值的运用1.1 去除边框叠加加粗1.2 鼠标移动到盒子盒子变色2 文字围绕浮动元素3 行内块的巧妙运用4 CSS三角强化1 margin 负值的运用1.1 去除边框叠加加粗 边框盒子在合并时中间边框会叠加加粗。如下图所示: border: 2px solid rebeccapurple; 左移的值跟边框宽度时一致的。 margin-left: -2px;1.2 鼠标移动到盒子盒子变色 中间盒子右框线不能显示 解决方案若盒子无定位,添加相原创 2020-10-18 10:41:18 · 376 阅读 · 0 评论 -
CSS 样式部分细节处理
目录1 鼠标样式cursor2 表单轮廓线 outline3 防止拖拽文本域 resize4 vertical-align 属性应用4.1 解决图片底部默认空白缝隙问题5 溢出的文字省略号显示5.1 单行文本溢出显示省略号5.2 多行文本溢出显示省略号1 鼠标样式cursor2 表单轮廓线 outline3 防止拖拽文本域 resize4 vertical-align 属性应用4.1 解决图片底部默认空白缝隙问题5 溢出的文字省略号显示5.1 单行文本溢出显示省略号 单行文本原创 2020-10-17 19:52:35 · 260 阅读 · 0 评论 -
CSS字体图标
目录1 字体图标2 导入字体图标2.1 HTML标签内添加小图标2.2 字体图标的追加1 字体图标2 导入字体图标在CSS样式中全局声明字体:简单理解把这些字体通过css引入到我们页面中。将下列代码放入style中 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedde原创 2020-10-17 17:56:30 · 604 阅读 · 0 评论 -
CSS三角
目录1 CSS三角2 设置一个角3 京东案例1 CSS三角 三角大小由盒子边框大小决定。2 设置一个角 只需设置盒子边框为透明,设置其中一个方向为所需颜色。3 京东案例 需要一个大盒子和一个向上的三角。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS三角</title> <style>原创 2020-10-17 17:55:53 · 144 阅读 · 0 评论 -
CSS元素的显示与隐藏
元素的显示与隐藏目录1 display 显示隐藏1.1 display 隐藏属性三级目录2 visibility 显示隐藏3 overflow 溢出显示隐藏1 display 显示隐藏1.1 display 隐藏属性 display用于设置一个元素应如何显示。display: none ; 隐藏对象display: block; 除了转换为块级元素之外,同时还有显示元素的意思 display 隐藏元素后,不再占有原来位置。三级目录2 visibility 显示隐藏3 overfl原创 2020-10-17 10:35:48 · 194 阅读 · 0 评论 -
CSS定位
目录1 定位2 定位模式2.1 静态定位 (了解)2.2 相对定位 relative2.3 绝对定位 absolute2.3.1 子绝父相的由来2.4 固定定位 fixed2.4.1 固定在版心右侧位置2.5 粘性定位sticky2.6 定位的总结3 边偏移4 定位拓展4.1 定位叠放次序 z-index4.2 绝对定位的盒子居中4.3 定位特殊特性1 定位 定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。 定位=定位模式+边偏移。 定位模式用于指定一个元素在文档中的定位原创 2020-10-16 20:03:57 · 297 阅读 · 0 评论 -
CSS 浮动
目录1浮动1.1 为什么需要浮动?1.2 什么是浮动?1.3 浮动的特性1浮动1.1 为什么需要浮动?1.2 什么是浮动?1.3 浮动的特性原创 2020-10-14 19:31:38 · 176 阅读 · 0 评论 -
CSS盒子模型
目录1 盒子模型1.1 边框1.1.1 表格的边框细线1.1.2 内边距1 盒子模型1.1 边框 border可以设置元素的边框,边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色。语法:border : border-width || border-style || border-color边框简写:border:1px solid red; 没有顺序边框样式:solid(实线边框)、dashed(虚线边框)、dotted(点线边框)。可以上下左右单独设置:border-原创 2020-10-13 11:04:16 · 312 阅读 · 1 评论 -
CSS的元素显示模式
目录1 元素显示模式2 元素显示模式转换1 元素显示模式 元素模式就是元素(标签)以什么方式进行显示,比如 <div><div><div>自己占一行,比如一行可以放多个<span><span><span>。 HTML元素一般分为块元素和行内元素两种类型。常见的块元素有<h1> <h6>、<p>、<div>、<ul>、<ol>、<li>&原创 2020-10-10 21:28:47 · 269 阅读 · 0 评论 -
css属性 字体、文本、背景
目录1 字体属性2 文本属性1 字体属性2 文本属性原创 2020-10-09 21:25:59 · 146 阅读 · 0 评论 -
CSS选择器
目录1 基础选择器1.1 标签选择器1.2 类选择器1.3 id选择器1.4 通配符选择器 选择器就是根据不同需求把不同的标签选出来。 选择器分为基础选择器和复合选择器两个大类 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器。1 基础选择器1.1 标签选择器标签选择器(元素选择器)是指HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。选择器可以把某一类标签全部选出来语法:标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3原创 2020-10-09 16:32:31 · 436 阅读 · 0 评论 -
HTML常用标签下
HTML常用标签这里写目录标题8 表单标签8.1 表单域8.1.1 <input><input><input>表单元素8.1.2 <label><label><label>标签8.1.3 <select><select><select>标签8.1.3 <textarea><textarea><textarea>标签8 表单标签8.1 表单域 表单域是一个原创 2020-10-08 22:04:29 · 145 阅读 · 0 评论 -
HTML常用标签
文章目录HTML 常用标签1 文本格式化标签2 div 和 span3 图像标签和路径4 超链接HTML 常用标签1 文本格式化标签加粗<strong></strong> (<b></b>)倾斜<em></em> (<i><i/>)删除 <del></del> (<s><s/>)下划线<ins>原创 2020-10-08 16:39:32 · 335 阅读 · 0 评论