![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
前端
David凉宸
前端领域优质创作者、新星计划第一季Mix赛道新星获得者、前端技能树社区创建人 ----
一分耕耘,一分收获
展开
-
前端 文件下载方法
我们每个项目中都会有一个文件下载的需求,但有些小伙伴遇到这种问题不知道该如何解决,那我今天就来为大家讲解一下。我们请求后会得到一个blob对象,(当然请求方式很多,我只是以最基础的js请求发送来进行演示)我们需要在downloadFile方法中去写相对应的逻辑处理。我们做完这个步骤后 就可以在本地相应地方看到下载的地址了。当我们点击下载文件时会触发我们写的相应方法。然后我们需要去处理下载逻辑。原创 2024-01-18 17:36:48 · 482 阅读 · 0 评论 -
vue手写日历
【代码】vue手写日历。原创 2023-02-24 17:48:42 · 558 阅读 · 1 评论 -
echarts 仪表盘参数
【代码】echarts 仪表盘参数。原创 2023-02-24 09:50:17 · 397 阅读 · 0 评论 -
npm 常用命令
npm常用命令npm 是什么?npm install 模块安装npm uninstall 卸载模块npm update 更新模块npm ls 查看已安装模块npm init 在项目中引导创建一个package.json文件npm help 查看某条命令的作用npm start 启动模块npm version 查看模块版本npm 是什么?NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用原创 2021-08-11 15:53:55 · 619 阅读 · 17 评论 -
什么是——JS闭包
什么是闭包?「函数」和「函数内部能访问到的变量」(也叫环境)的总和,就是一个闭包闭包(closure)就是能够读取其他函数内部变量的函数。在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成 “定义在一个函数内部的函”JS中闭包的优缺点及特性优点:1.保护函数内的变量安全2.在内存中维持一个变量(用的太多就变成了缺点,占内存)3.逻辑连续,当闭包作为另一个函数调用的参数时,避免你脱离当前逻辑而单独编写额外逻辑4.方便调用上下文的局部变量5.加强封装性,可以达.原创 2021-07-29 16:17:37 · 286 阅读 · 2 评论 -
自己写一个小小的jQuery功能
现在应该有许多人在学习jQuery吧,但是去探索jQuery原理的是很少一部分人那么我们就简单来自己写一个jQuery吧新建jQuery.js文件编写如下代码class jQuery { constructor(selector) { const nodes = document.querySelectorAll(selector) const length = nodes.length for (let i = 0; i < length; i++) {原创 2021-06-19 11:24:28 · 331 阅读 · 15 评论 -
初识WEB(一)
初识WEB常见浏览器浏览器内核扩展:WEB标准w3c就类似于现实世界中的联合国。WEB标准构成构成:主要包括结构(Structure)、表现(Presenttation)和行为(Behavior)三方面。Web标准小结常见浏览器浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera,平常称为五大浏览器浏览器内核浏览器内核英文叫做:Rendering Engine扩展:移动端的浏览器主要指的是系统内置浏览器的内核。Androi原创 2020-09-06 09:53:52 · 293 阅读 · 0 评论 -
HTML表单(二)
HTML表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form> 来设置:<form>.input 元素.</form>输入元素多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:文本域(Text F转载 2020-09-08 15:39:46 · 159 阅读 · 0 评论 -
AJAX替换数据
数据替换先创建json格式文件,将需要的内容创建好,然后用js的ajax请求本文件// 创建用于执行 ajax 的 get 请求函数function http_get(url,callback){ let xml=new XMLHttpRequest() xml.open('get',url) xml.onreadystatechange=function(){ if(xml.readyState==4 && xml.status==200){原创 2021-02-02 20:06:14 · 611 阅读 · 0 评论 -
HTML列表(三)
HTML列表标签无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 <ul> 标签<ul> <li>我爱学习</li> <li>无法自拔</li> </ul>效果显示:有序列表有序列表始于<ol>标签。每个列表项始于 <li> 标签。列表项使用数字来标记。<ol> <转载 2020-09-08 13:50:16 · 145 阅读 · 0 评论 -
HTML文本溢出显示省略号(四)
单行文本的溢出显示省略号:overflow:hidden;text-overflow:elipsis;white-space:nowrap;多行文本的溢出显示省略号:display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 3;overflow: hidden;white-space: nowrap;原创 2020-09-14 19:22:52 · 264 阅读 · 0 评论 -
HTML特殊转义字符(五)
显示说明实体名称实体编号半方大的空白  全方大的空白  不断行的空白格  <小于<<>大于>>&&符号&&"双引号""©版权&...原创 2020-12-15 10:35:56 · 621 阅读 · 0 评论 -
html5新增属性(六)
html5新增属性1、form属性表单内的从属元素,可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。 <form id="testForm"> <input type="text"> </form> <textarea form="testForm"></textarea>2、formaction属性给所有的提交按钮增加formaction属性,可以通过不同的按钮将表单提交原创 2021-02-02 19:57:31 · 309 阅读 · 1 评论 -
HTML5中CSS样式初始化(七)
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, l原创 2020-09-14 19:36:10 · 550 阅读 · 0 评论 -
初次认识css(八)
初识CSS1.HTML的局限性2.css网页的美容师3.CSS初认识1.HTML的局限性说起HTML,大家本不陌生,HTML其实是一个纯朴的东西,它只关注内容语义2.css网页的美容师让我们的网页更加丰富多彩,布局更加的美观css最大的贡献让HTML从样式中脱离出来,实现了HTML专注的去做一些结构的呈现,将样式交给css做我们要记住一句话:HTML与CSS两个样式相分离CSS和JavaScript的不同在于(CSS一个相当于网页的美容师 JavaScript相当于网页的魔法师)3原创 2020-09-07 11:21:19 · 154 阅读 · 0 评论 -
WEB前端开发之CSS基础语法和核心知识点(九)
CSS核心概念和知识点语法css的核心功能是能够将css属性设定一个特定的值,一个属性与值的键值对被称为声明color:red;而如果是用{}来声明多个的话,就形成了一个声明块{ font-size:20px; color:red;}声明块如果需要用到对应的HTML元素,必须加上选择器,选择器和声明块组成了CSS 规则集,简称为 CSS 规则效果:其实规则中的最后一条声明可以省略分号,但是并不建议这么做,因为这样很容易出粗css注释/* 单行注释 */原创 2021-03-22 19:24:56 · 299 阅读 · 0 评论 -
CSS选择器总结及其注意事项(十)
CSS选择器基础选择器1.1 标签选择器1.2 类选择器1.3 id选择器1.4 通配符选择器1.5 总结基础选择器1.1 标签选择器概念:标签选择器(元素选择器)是指HTML中标签名称作为选择器,按标签名称分类,为页面之中某类标签指定的统一CSS样式。语法: 标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;属性4:属性值4;}作用:标签选择器 可以把某一类标签全部选择出来优点:能够快速为页面中间类型的标签统一样式缺点:不能设计差异化样式1.2 类选原创 2020-09-08 09:54:01 · 674 阅读 · 1 评论 -
CSS复合选择器(十&&一)
CSS复合选择器1.1 后代选择器概念:后代选择器又称为包含选择器作用用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写他的后代。父级 子级{ 属性1:属性值1; 属性2:属性值2; }.class h3{ color: red ; font-size:16px;}1.2 子元素选择器作用:子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。其写法就是把父级标签写在前原创 2020-09-08 19:49:53 · 153 阅读 · 0 评论 -
CSS文字文本样式(十一)
CSS字体样式1 font字体1.1font-size:大小1.2 font-family:字体常用字体1.3 font-weight:字体粗细1.4 font-style:字体风格1.5 font:综合设置字体1.6 font总结2 CSS外观属性2.1 color:文本颜色2.2 text-align:文本水平对齐方式2.3 line-height:行间距2.4 text-indent:首行缩进2.5 text-decoration 文本的装饰1 font字体1.1font-size:大小作用原创 2020-09-08 18:42:46 · 267 阅读 · 0 评论 -
CSS三种样式及总结(十二)
CSS样式行内式内部样式表外部样式表三种样式表集结团队约定代码的风格代码大小写CSS样式总结总结:行内式概念:称行内样式、行间样式是通过标签的style属性来设置元素的样式基本语法:<标签名 style="属性1:属性值1; 属性1:属性值2;">内容</标签名> 案例:<div style="color:red;font-size:20px;">哪有什么岁月静好,不过是有人替你负重前行</div>注意点:1、s原创 2020-09-07 17:09:49 · 1521 阅读 · 0 评论 -
CSS设置浮动(十三)
浮动1.1 什么是浮动概念:元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制移动到指定位置作用:1.让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段。2.可以实现盒子的左右对齐等等…3.浮动最早是用来控制图片,实现文字环绕图片的效果。语法:选择器{float:属性值;}属性值描述none元素不浮动(默认)left元素左浮动rigth元素右浮动1.2 浮动小结特点说明浮加了浮动的盒子原创 2020-09-13 19:39:31 · 171 阅读 · 0 评论 -
CSS清除浮动大总结(十四)
清除浮动1.1 为什么要清除浮动因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为O,就影响了下面的标准流盒子。1.2 清除浮动的方法语法:选择器{clear:属性值;}属性值描述left不允许左侧有浮动(清除左侧浮动)right不允许右侧有浮动(清除右侧浮动)both同时清楚两侧浮动的影响1).额外标签法<div style="clear:both"></div>优点:通俗易懂原创 2020-09-15 19:28:44 · 210 阅读 · 0 评论 -
rem+less+媒体查询@media(十五)
rem1)什么是remrem 是相对于根元素(html)的相对长度单位,常用于响应式布局2)不使用rem会有什么问题页面中的文字不能随着屏幕的变换而变化百分比布局和flex布局主要针对宽度布局,高度却被忽略3)为什么使用rem让页面中的文字和元素的宽高随屏幕变化而变化4)设置viewport<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maxim原创 2021-02-02 19:56:17 · 2793 阅读 · 1 评论 -
less伪元素如何生成横线
less伪元素生成横线伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。伪元素主要有:::first-letter 第一个字母的样式::first-line 首行文字的样式::before 元素头部添加的修饰::after 元素尾部添加的修饰::placeholder input的占位符样式::selection 被选中元素的样式伪类用来表示无法在CSS中轻松或者可靠检测到的某个元素的状态或属性,比如a标签的hover表示鼠标经过的样式,vi原创 2021-02-02 20:07:09 · 990 阅读 · 0 评论 -
JavaScript简介
什么是语言?计算机就是一个由人来控制的机器,人要让他干啥就干啥我们要学习的语言就是人和计算机交流的工具,人类通过语言来控制、操作计算机。编程语言和我们说的中文、英文本质上没有什么区别,只是语法特殊而已语言的发展∶纸带机︰机器语言汇编语言∶符号语言现代语言∶高级语言起源JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则比如︰用户名的长度,密码的长度,邮箱的格式等简史JavaScript原创 2020-12-14 14:26:40 · 140 阅读 · 0 评论 -
JavaScript 基础(十六)
JavaScript 基础了解位(bit):1bit可以保存一个0或者1(最小的存储单位)字节(Byte): 1B= 8b千字节(KB): 1KB= 1024B兆字节(MB):1MB= 1024KB吉字节(GB):1GB= 1024MB太字节(TB): 1TB= 1024GB大小关系: bit < byte < kb <GB <TB<…(一)前端开发三剑客:html css javascripthtml:结构层 从语义角度来原创 2020-09-20 08:07:19 · 278 阅读 · 0 评论 -
JavaScript语法(十七)
js语法js中的数据类型基本数据类型:Undefined(未定义)、Null(空)、Boolean(布尔)、Number(数字)、String(字符串),Symbol(ES6新引入的原始数据类型,表示独一无二的值)引用数据类型 :Object(对象)let und= undefined;let nul = null;let bool = true;let num = 1;let str = 'abc';let sym = Symbol();let arr = [1,2,3,4]原创 2021-02-02 20:03:30 · 159 阅读 · 0 评论 -
JavaScript数据类型和JavaScript运算符(十八)
JavaScript 第二天一、数据类型1.1、 数据类型的简介为什么需要数据类型在计算机当中,不同的数据所需要占用到的存储空间是不相同的,为了方便将数据分成各自所需要占据内存大小不相同的数据,充分的利用存储空间,于是定义了不同的数据类型。变量的数据类型变量是用来存储值的所在处,它们有各自的名字和相对应的数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定原创 2020-09-21 13:53:46 · 231 阅读 · 0 评论 -
JavaScript 面向对象(十九)
面向对象基本概念封装:能够将一个实体的信息、功能、响应都封装到一个单独对象中的特性。由于JavaScript没有public、private、protected这些关键字,但是可以利用变量的作用域来模拟public和private封装特性<script>var Person = (function() { var name = '张三'; return { getName: function() { return name原创 2020-12-24 17:33:33 · 131 阅读 · 1 评论 -
JavaScript面向对象
面向对象基本概念封装:能够将一个实体的信息、功能、响应都封装到一个单独对象中的特性。由于JavaScript没有public、private、protected这些关键字,但是可以利用变量的作用域来模拟public和private封装特性<script>var Person = (function() { var name = '张三'; return { getName: function() { return name原创 2020-12-22 08:41:51 · 226 阅读 · 0 评论 -
JavaScript 表单、对象、函数(二十一)
JavaScript表单javaScript 表单验证HTML 表单验证可以通过 JavaScript 来完成。数据验证典型的数据验证有:必需字段是否有输入?用户是否输入了合法的数据?在数字字段是否输入了文本?HTML 约束验证HTML 输入属性CSS 伪类选择器DOM 属性和方法约束验证 HTML 输入属性disabled 规定输入的元素不可用max 规定输入元素的最大值min 规定输入元素的最小值pattern 规定输入元素值的模式required 规定输入元素字段是必原创 2020-12-14 08:45:44 · 368 阅读 · 0 评论 -
JavaScript三大事件(二十二)
JS三大事件鼠标事件click:单击dblclick:双击mousedown:鼠标按下mouseup:鼠标抬起mouseover:鼠标悬浮mouseout:鼠标离开mousemove:鼠标移动mouseenter:鼠标进入mouseleave:鼠标离开<button onclick="myClick()">鼠标单击</button><button ondblclick="myDBClick()">鼠标双击</button><bu原创 2020-12-17 16:56:44 · 247 阅读 · 0 评论 -
JavaScript DOM、BOM操作(二十三)
js HTML DOM简介:HTML DOM(文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被结构化为对象树:对象的 HTML DOM 树[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-66Z91IwX-1607906799173)(C:\Users\yijiu\AppData\Local\Temp\1606048383137.png)]通过这个对象模型,JavaScript 获得原创 2020-12-14 08:47:55 · 220 阅读 · 0 评论 -
JavaScript 正则表达式(二十四)
什么是正则表达式?正则表达式是由一个字符序列形成的搜索模式当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容正则表达式可以是一个简单的字符,或一个更复杂的模式正则表达式可用于所有文本搜索和文本替换的操作正则表达式的特点灵活性、逻辑性和功能性非常的强可以迅速地用极简单的方式达到字符串的复杂控制对于刚接触的人来说,比较晦涩难懂实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式字符字符等价类含义原创 2020-12-24 17:34:46 · 234 阅读 · 1 评论 -
JavaScript 函数(二十)
函数定义和调用系统函数:parseInt():是将字符串转换为整数。parseFloat():是结果返回一个浮点数。isNan():判断函数是否是NaN(是不是数字),是数字返回false,反之true。eval():是以字符串形式表示js代码串,并回馈执行的结果。自定义函数function 函数名(){ 语句}还有就是匿名函数自己调自己<script type="text/javascript"> (function(a, b) { var c = a *原创 2020-12-24 17:31:05 · 203 阅读 · 1 评论 -
JavaScript特殊转义字符(二十五)
转义序列字符\b退格\f走纸换页\n换行\r回车\t横向跳格 (Ctrl-I)\’单引号\"双引号\\反斜杠\&&(and)符号\0nnn八进制代码 nnn 表示的字符( n 是 0 到 7 中的一个八进制数字)\xnn十六进制代码 nn 表示的字符( n 是 0 到 F 中的一个十六进制数字)\unnnn十六进制代码 nnnn 表示的 Unicode 字符( n 是 0 到 F 中...原创 2020-12-15 10:36:25 · 458 阅读 · 0 评论 -
JavaScript定时器(二十六)
定时器(计时事件)在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:setInterval() - 间隔指定的毫秒数不停地执行指定的代码。setTimeout() - 暂停指定的毫秒数后执行指定的代码Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法setInterval() 方法setInterval() 间隔指定的毫秒数不停地执行指定的代码语法:window.setInterval(" javasc原创 2020-12-17 16:57:49 · 123 阅读 · 0 评论 -
JavaScript开启定时器、清除定时器(二十七)
js时间window 对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。通过 JavaScript 使用的有两个关键的方法:setTimeout(function, milliseconds)在等待指定的毫秒数后执行函数。setInterval(function, milliseconds)等同于 setTimeout(),但持续重复执行该函数。setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。setTime原创 2020-12-14 08:48:46 · 8593 阅读 · 0 评论 -
原生JS添加HTML元素或者TEXT文本(二十八)
方法:insertAdjacentHTML(postion,html);insertAdjacentTEXT(postion,text);参数:position 是相对于 element 元素的位置,并且只能是以下的字符串之一:beforeBegin: 插入到标签开始前afterBegin:插入到标签开始标记之后beforeEnd:插入到标签结束标记前afterEnd:插入到标签结束标记后html 是 需要添加的标签节点text 是文本...原创 2021-01-16 11:13:53 · 2831 阅读 · 0 评论 -
JavaScript基础知识版图(二十九)
原创 2020-12-14 08:41:49 · 117 阅读 · 0 评论