前端相关知识学习
文章平均质量分 83
前端相关知识学习
@Autowire
这个作者很懒,什么都没留下…
展开
-
数据可视化工具 - ECharts饼形图的编写
/// 1. 实例化对象varinit"main";// 2. 指定配置和数据tooltiptrigger'item'legendtop'5%'left'center'seriesnametype'pie'radius'40%''70%'falselabelshowfalseposition'center'labelLineshowfalse。原创 2023-05-10 14:14:50 · 727 阅读 · 0 评论 -
数据可视化工具 - ECharts折线图的编写
以下是后台送过来数据(ajax请求过来的)// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 2. 指定配置和数据。// 2. 指定配置和数据。// 1. 实例化对象。// 1. 实例化对象。原创 2023-05-10 13:29:56 · 1057 阅读 · 0 评论 -
数据可视化工具 - ECharts以及柱状图的编写
准备一个具备大小的DOM容器初始化echarts实例对象指定配置项和数据(option)将配置项设置给echarts实例对象完整代码需要了解的主要配置:series xAxis yAxis grid tooltip title legend color通过一个案例详细解释配置:工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。3 柱状图图表(两大步骤)官网找到类似实例, 适当分析,并且引入到HTML页面中根据需求定制图表3.1原创 2023-05-09 13:27:51 · 1447 阅读 · 0 评论 -
一文让你真正了解正则表达式
其中分组体现在:所有以()元字符所包含的正则表达式被分为一组,每一个分组都是一个子表达式,它也是构成高级正则表达式的基础。// 分组 abc 匹配一次或者多次 let reg = / (abc)+ / console . log(reg . test('adcdd')) // false console . log(reg . test('abcc')) // true console . log(reg . test('abdabcc')) // true。原创 2023-04-27 08:55:09 · 537 阅读 · 1 评论 -
FE_TA不知道的CSS 换行系列【2】word-break & word-wrap
从这个名字可以知道,这个属性是控制单词如何被拆分换行的。它有三个值:normal | break-all | keep-all。原创 2023-04-24 15:15:57 · 439 阅读 · 0 评论 -
FE_TA不知道的CSS 换行系列【1】white-space
简单总结一下,当文本长度超出容器时,浏览器在单词边界、连字符、音节、标点符号、空格等地方都可以进行换行,这些点即是。所以答案明了,空格是可以进行换行的地方,而white-space用来影响空格的表现,故white-space的第二个作用便是影响文本换行。这里也解释了为什么white-space、word-break、word-wrap等多个属性都可以改变文本的换行行为,它们改变的都是soft wrap opportunities,间接导致了换行的变化。原创 2023-04-24 14:48:59 · 1027 阅读 · 0 评论 -
FE_CSS 常见布局技巧
* 2.如果li都有定位,则利用 z-index提高层级 *//*1. 如果盒子没有定位,则鼠标经过添加相对定位即可*/原创 2023-04-21 13:44:56 · 290 阅读 · 0 评论 -
FE_CSS 鼠标样式 cursor & 轮廓线 outline & 防止拖拽文本域 resize && vertical-align 属性应用 && 溢出的文字省略号显示
此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。/* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 *//* 这个单词的意思是如果文字显示不开自动换行 *//* 设置或检索伸缩盒对象的子元素的排列方式 *//* 3. 文字溢出的时候用省略号来显示 *//* 限制在一个块元素显示的文本的行数 *//* 2.溢出的部分隐藏起来 *//* 让图片和文字垂直居中 *//* 弹性伸缩盒子模型显示 *//* 取消表单轮廓 */原创 2023-04-21 13:28:54 · 78 阅读 · 0 评论 -
FE_CSS 精灵图技术 字体图标 CSS三角
一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称CSS Sprites、CSS 雪碧)。核心原理:将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。原创 2023-04-21 13:09:32 · 144 阅读 · 0 评论 -
FE_CSS 元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!原创 2023-04-15 12:17:51 · 385 阅读 · 0 评论 -
FE_CSS 页面布局之定位
以上效果,标准流或浮动都无法快速实现,此时需要定位来实现。定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。相对定位的特点:(务必记住)4 绝对定位 absolute(重要)绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)。绝对定位的特点:(务必记住)5 子绝父相的由来这个“子绝父相”太重要了,原创 2023-04-15 12:10:14 · 419 阅读 · 0 评论 -
FE_CSS 页面布局之浮动
网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):所谓的标准流: 就是标签按照规定好默认方式排列以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式。如何让多个块级盒子(div)水平排列成一行?比较难,虽然转换为行内块元素可以实现一行显示,但是他们之间会有大的空白缝隙,很难控制。我们可以使用浮动来解决以上问题:如何实现两个盒子的左右对齐?3 浮动(float)有很多的布局效果,标准流没有办法完原创 2023-04-13 12:47:26 · 323 阅读 · 0 评论 -
FE_CSS 页面布局之圆角边框 & 盒子阴影 & 文字阴影
在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角。CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。在 CSS3 中,我们可以使用 text-shadow 属性将阴影应用于文本。/* 50% 就是宽度和高度的一半 等价于 100px *//* 原先盒子没有影子,当我们鼠标经过盒子就添加阴影效果 *//* 圆角矩形设置为高度的一半 */原创 2023-04-13 10:51:18 · 225 阅读 · 0 评论 -
FE_CSS 页面布局之盒子模型 边框 & 内外边距
所谓 盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色CSS 边框属性允许你指定一个元素边框的样式和颜色。边框样式 border-style 可以设置如下值:CSS 边框属性允许你指定一个元素边框的样式和颜色。请给一个 200*200 的盒子,设置上边框为红色,其余边原创 2023-04-12 14:16:11 · 847 阅读 · 0 评论 -
FE_CSS CSS 的三大特性
* li 么有手动指定文字大小 则会继承父亲的 文字大小 body 12px 所以 li 的文字大小为 12px。/* 这个1.5 就是当前元素文字大小 font-size 的1.5倍 所以当前div 的行高就是21像素 */相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。当前li 的行高就是 12 * 1.5 = 18。/* 子元素继承了父元素 body 的行高 1.5 *//* 1.5 * 16 = 24 当前的行高 */原创 2023-04-12 13:05:29 · 557 阅读 · 0 评论 -
FE_CSS 复合选择器 & 元素显示模式 & CSS背景
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。元素1 和 元素2 中间用空格隔开元素1 是父级,元素2 是子级,最终选择的是元素2元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可元素1 和 元素2 可以是任意基础选择器1.2 子选择器子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.上述语法表示选择元素1 里面的所有直接后原创 2023-04-12 11:01:05 · 498 阅读 · 0 评论 -
FE_CSS 基础选择器 & 字体属性 & 文本属性 & 综合案例
选择器分为基础选择器和复合选择器两个大类,基础选择器是由单个选择器组成的,基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器。/* * 这里把 html body div span li 等等的标签都改为了红色 *//* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 *//* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 *//* 想要图片居中对齐,则是让它的父亲 p标签添加 水平居中的代码 *//* 首行缩进2个字的距离 */原创 2023-04-12 09:19:29 · 552 阅读 · 1 评论 -
FE_HTML标签学习
外部链接:例如百度。内部链接:网站内部页面之间的相互链接.直接链接内部页面名称即可,例如首页。空链接:如果当时没有确定链接目标时,< a href=“#”>首页。下载链接:如果href 里面地址是一个文件或者压缩包,会下载这个文件。网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.3 综合案例总结以上标签合并单元格三步曲:5 列表标签表格是用来显示数据的,那么列表就是用来布局的。列表最大的特点原创 2023-04-11 16:39:29 · 676 阅读 · 0 评论 -
2023/2/24 图数据库Neo4j的理解与应用
大数据”每年都在增长,但如今的企业领导者不仅需要管理更大规模的数据,还迫切需要从现有数据中得出深刻见解。企业需要摈弃仅仅收集数据点的做法,开始着手建立数据之间的关联关系。数据点之间的关系甚至比单个点本身更重要。讽刺的是,传统的关系数据库管理系统(RDBMS)并不擅长处理数据之间的关系。那些表状数据模式和呆板的结构难以添加新连接或不同类型连接。为了利用这些数据关系,需要一种能将关系信息存储为一等实体的新型数据库技术,这种技术就是图数据库。原创 2023-02-24 16:28:25 · 952 阅读 · 0 评论 -
2023/02/22 await async 语法学习
注意: await并不是将异步函数改变为同步函数,只是改变了异步函数的调用方式,所以await不是说在哪都能用的,当我们使用了await,catch方法就不能调用了,只能通过try-catch来处理可能的异常。async声明的异步函数中。在JS中可以通过async关键字来快速的创建异步函数。特点:async声明的异步函数,它的返回值会自动包装为Promise;async声明的异步函数中可以使用await来调用其他异步函数。原创 2023-02-22 20:13:59 · 81 阅读 · 0 评论 -
2023/02/18 ES6数组的解读
flatMap() ] 方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行 [ flat() ] 方法. 该方法返回一个新数组,不改变原数组.数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组. 该方法返回一个新数组,对原数据没有影响.数组实例的 [ find ] 方法,用于找出第一个符合条件的数组成员. 它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出。原创 2023-02-19 09:18:47 · 403 阅读 · 0 评论 -
2023/02/18 ES6对象属性的解读
in会返回继承的属性, 其他三个方法都会忽略继承的属性, 只处理对象自身的属性. 实际上, 引入“可枚举”(enumerable)这个概念的最初目的, 就是让某些属性可以规避掉for…in操作, 不然所有内部属性和方法都会被遍历到. 比如, 对象原型的toString方法, 以及数组的length属性, 就通过“可枚举性”, 从而避免被for…第二种和第三种写法是super用在一个函数里面, 然后赋值给foo属性. 目前, 只有对象方法的简写法可以让 JavaScript 引擎确认, 定义的是对象的方法.原创 2023-02-18 13:56:44 · 494 阅读 · 0 评论 -
箭头函数中的this指向问题
【代码】箭头函数中的this指向问题。原创 2023-02-18 11:28:52 · 63 阅读 · 0 评论 -
FE_ES6基本语法学习
const 除了 let 的三个特性,还有下面的特性:数组也可以修改元素的值:建议:在默认的情况下用 const,而只有在你知道变量值需要被修改的情况下使用 let。使用 tab 键上面的反引号,插入变量时使用 ${变量名}。由三个点 … 和一个紧跟着的具名参数指定,比如:…keys,这个解决了 arguments 的问题。剩余运算符:把多个独立的参数合并到一个数组中扩展运算符:将一个数组分割,并将各个项作为分离的参数传递给函数ES6 允许使用“箭头”(=>)定义函数如果原创 2023-01-20 15:56:01 · 1055 阅读 · 0 评论 -
2023/1/15 JS-闭包问题研究
如果是这种多次柯里化的,如何理解?理解 : 前n - 1 次调用,其实是提前将参数传递进去,并没有调用最内层函数体,最后一次调用才会调用最内层函数体,并返回最内层函数体的返回值结合上文可知,这里的多个连续箭头(无论俩个箭头函数三个及以上)函数连在一起 就是在柯里化。所以连续箭头函数就是多次柯里化函数的 es6 写法。比如对于上面的 test 函数,它有 3 个箭头, 这个函数要被调用 3 次 test(a)(b)(c) ,前两次调用只是在传递参数,只有最后依次调用才会返回 {原创 2023-01-15 21:21:51 · 332 阅读 · 0 评论 -
2023/1/15 JS-函数中的this指向问题
【代码】2023/1/15 JS-函数中的this指向问题。原创 2023-01-15 18:07:07 · 71 阅读 · 0 评论 -
2023/1/15 JS-作用域与作用域链
在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则。理解 - 就是一块"地盘", 一个代码段所在的区域,它是静态的(相对于上下文对象), 在编写代码时就确定了。直到全局作用域, 如果还找不到就抛出找不到的异常。作用: 隔离变量,不同作用域下同名变量不会有冲突。原创 2023-01-15 17:46:33 · 424 阅读 · 0 评论 -
FE_JS-变量提升与函数提升 && 执行上下文
通过 function 声明的函数, 在声明语句之前就可以直接调用 - 值: 函数定义(对象)function声明的函数 -->赋值(函数名如,fun__),添加为执行上下文的方法。function声明的全局函数–>赋值(fun__),添加为window的方法。var定义的局部变量–>undefined,添加为执行上下文的属性。arguments–>赋值(实参列表), 添加为执行上下文的属性。形参变量–>赋值(实参)–>添加为执行上下文的属性。this–>赋值(调用函数的对象)3. 开始执行全局代码。原创 2023-01-15 17:08:05 · 355 阅读 · 0 评论 -
2023/1/14 js基础学习
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。对象是JS中的引用数据类型,对象是一种复合数据类型,在对象中可以保存多个不同数据类型的属性。引用数据类型的数据,变量是保存的对象的引用(内存地址),如果多个变量指向的是同一个对象,此时修改一个变量的属性,会影响其他的变量。基本数据类型的数据,变量是直接保存的它的值,变量与变量之间是互相独立的,修改一个变量不会影响其他的变量。比较两个变量时,对于基本数据类型,比较的就是值,对于引用数据类型比较的是地址,地址相同才相同。原创 2023-01-15 10:52:47 · 918 阅读 · 0 评论 -
2023/2/23 Web前端axios-入门篇【原理之后补充】
git:全局安装json-server:npm install -g json-server在该文件目录下运行:json-server --watch db.json查看id为1的页面在http://localhost:3000.posts/1其中, /1就是id。原创 2023-01-13 14:03:39 · 629 阅读 · 0 评论 -
FE_Web前端Promise学习理解
状态:实例对象中的一个属性 【PromiseState】,三个值pending 待定resolved / fullfilled 成功rejected 失败状态改变:只能由pending改成resolved 或 pending改成rejected状态只能改变一次实例对象中的另一个属性 【PromiseResult】- 对象的值保存着异步任务『成功/失败』的结果resolvereject只有resolve、reject可以修改其值。原创 2023-01-12 00:22:50 · 424 阅读 · 0 评论