![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
文章平均质量分 82
琦遇前端ing~
这个作者很懒,什么都没留下…
展开
-
请求数据的方式
请求数据的方式ajaxajax是什么ajax是前后端进行数据通信的一种方式。它是基于xmlhttprequest对象的,xmlhttprequest可以使用户向服务端进行请求数据和发送数据,并且不会阻塞用户。通过xmlhttprequest对象,用户可以在页面加载完成之后对页面进行局部更新。ajax的作用1、ajax是异步操作,提升了用户体验2、ajax可以实现动态刷新,即在不刷新整个页面的情况下更新局部数据ajax的get和post请求有几个步骤首先说明下readystate的5个状态原创 2021-07-21 14:11:14 · 329 阅读 · 0 评论 -
vue-router原理
前端路由什么是前端路由在web前端单页应用SPA(Single Page Application)中,路由描述的是URL和UI之间的映射关系,这种映射是单向的,即URL变化引起UI更新(无需刷新页面)如何实现前端路由实现前端路由,需要解决两个核心:如何改变URL却不引起页面刷新如何检测URL变化了目前主要有两种实现方式,分别是hash和history。hash实现hash是URL中hash(#)及后面的那部分,常用作锚点在页面内进行导航,改变URL中的hash部分不会引起页面刷新。通原创 2021-07-19 08:37:38 · 138 阅读 · 0 评论 -
vue双向绑定原理
vue双向绑定原理object.defineProperty() —vue2这个API是实现双向绑定的核心,通过它对data的属性进行重写,主要是重新数据的get、set方法。调用get方法时,绑定对应的依赖(dep)和监听器(watcher);更新数据时,调用set方式时,会通知依赖中相关的监听进行值修改。不足之处:不能检测到对象属性的增加和删除,即新增属性不是响应式的解决方法: vm.$set不能通过索引操作数组proxy —vue3proxy可以理解成在目标对象之原创 2021-07-19 08:22:06 · 498 阅读 · 0 评论 -
js学习-8(数组)
js学习-8(数组、基本操作、常用方法)一、数组数组(Array)是属于内置对象,我们可以在MDN网站上查询各种方法。数组和普通对象的功能类似,也是用来存储一些值的。不同的是:普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引来操作元素。索引:从0开始的整数就是索引。数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据,使用频率非常高。二、数组的基本操作数组的元素可以是任意的数据类型,也可以是对象,也可以是函数,也可以是数组。类型和长度都没有限制。数组的元素中,原创 2020-12-25 11:08:37 · 362 阅读 · 1 评论 -
js学习-10(事件)
js学习-10(事件)什么是事件事件: 指的是文档或浏览器窗口中发生的一些特定的交互 瞬间。对于web应用,主要的事件有:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript是以事件驱动为核心 的一门语言。JavaScript和HTML之间的交互式通过事件实现的。事件的三要素:事件的三要素:事件源、事件、事件驱动程序。事件源: 引发后续事件的html标签。事件: js所定义好的。比如:鼠标单击onclick、鼠标双击ondbclick、获得焦点onfocus等等原创 2020-12-25 11:07:29 · 89 阅读 · 1 评论 -
js学习21-(canvas)
Canvascanvas三要素 id:作为唯一的标识 width:画布内容宽度的像素大小 height:画布内容高度的像素大小注意 :canvas仅仅只是一个画布标签,绘制内容必须使用js进行绘制例子:颜色、样式和阴影属性描述fillStyle设置或返回用于填充绘画的颜色、渐变或模式。strokeStyle设置或返回用于笔触的颜色、渐变或模式。shadowColor设置或返回用于阴影的颜色。shadowBlur设置或返回用于阴影的模糊级别原创 2020-12-25 11:05:53 · 251 阅读 · 1 评论 -
js学习21-(canvas)
Canvascanvas三要素 id:作为唯一的标识 width:画布内容宽度的像素大小 height:画布内容高度的像素大小注意 :canvas仅仅只是一个画布标签,绘制内容必须使用js进行绘制例子:<body> <!-- canvas三要素: id:作为唯一的标识 width:画布内容宽度的像素大小 height:画布内容高度的像素大小 canvas仅仅只是一个画布标签,绘制内容必须使用js进行绘制 -->原创 2020-08-03 21:22:15 · 310 阅读 · 0 评论 -
js学习20-(svg)
SVGsvg简介SVG指可伸缩矢量图形 (Scalable Vector Graphics);SVG是使用 XML 来描述二维图形和绘图程序的语言、是可伸缩的、是万维网联盟的标准、是开放的标准。SVG与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。SVG文件是纯粹的 XML,可被非常多的工具读取和修改(比如记事本)SVG用来定义用于网络的基于矢量的图形,使用 XML 格式定义图形, 图像在放大或改变尺寸的情况下其图形质量不会有所损失, 图像可在任何的分辨率下被高质量地原创 2020-08-03 00:27:36 · 1042 阅读 · 1 评论 -
js学习-19(XML)
XMLXML是什么?1、XML是指可扩展标记语言。(Extensible Markup Language)2、XML是一种标记语言,类似html,html是专门用于携带网页结构数据的xml格式。3、XML的设计宗旨是用来传输和存储数据的。4、XML具有自我描述性,是w3c的推荐标准。5、XML是独立于软件和硬件的信息传输工具。XML和Html的不同点1、xml是用来传输和存储数据的,其焦点是数据的内容;html是用来显示数据的,其焦点是数据的外观。2、xml主要是传输信息;html主要原创 2020-08-01 23:08:14 · 240 阅读 · 0 评论 -
js学习-18(js错误-throw、try、catch)
Javascript错误首先我们要明确错误是一定会发生的。当错误发生的时候,JavaScript引擎通常会停止,并生成一个错误信息。描述这种情况的技术术语是:JavaScript将抛出一个错误。throw:该语句可以创建自定义错误try:该语句是用来测试代码块的错误catch:该语句是用来处理错误try—catch语句try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。finally语句是定义不论是否出现错误都会执原创 2020-08-01 18:37:48 · 281 阅读 · 0 评论 -
js学习-17(offset和scroll)
一、offset家族三大家族:offset、scroll、clientoffset:偏移、补偿、位移offset家族:是js中一套获取元素尺寸 的方法。offset家族包括:offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent1、offsetWidth和offsetHeightoffsetwidth = content + padding + borderoffsetHeight = content + padding + bor原创 2020-07-31 00:14:54 · 353 阅读 · 1 评论 -
js学习-16(正则)
RegExp对象(正则对象)RegExp对象表示正则表达式,是对字符串执行模式匹配的强大工具。创建RegExp对象的方法:1、直接字面量方式/pattern/attributes例:var reg = /hello/i; //i代表的是忽视大小写。console.log(reg);2、构造函数创建RegExp对象的方式:new RegExp(pattern,attributes)例:var reg1 = new RegExp("xiaoming","i");console.l原创 2020-07-30 00:18:46 · 189 阅读 · 0 评论 -
js学习-15(ajax)
js学习-15(ajax)AjaxAjax是一种在无需加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。同步:对于同步的理解: 比如排队去点餐,队列中共有5个人,则需第1个人点完后,服务员将餐品打包后递给第一个人,才能轮到第二个进行点餐,以此类推,直到队列中无人进行排队。ajax同步请求操作: 1、js发送1个请求去请求数据 2、js等待后台返回数据原创 2020-07-26 22:34:01 · 144 阅读 · 0 评论 -
js学习-13(本地存储)
js学习-13(本地存储)将web页面中的数据放到本地本地存储的主要关键字:loncalStorage所需解决的问题: 如何存储数据? 如何获取数据? 如何清除数据?localStorage可以永久存放到本地,但是只要清除掉浏览器的缓存,即可删除数据。1、如何存取数据://方法一localStorage.newsTitle = "圣诞快乐"//方法二localStorage['author'] = "admin";//方法三localStorage.setItem("co原创 2020-12-25 11:04:00 · 62 阅读 · 2 评论 -
js学习-11(addEventListener事件监听)
事件绑定方式一:都以点击事件为例element.onclick = function(){ }例如:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>按钮</button> <script type="text/原创 2020-07-24 00:19:19 · 849 阅读 · 0 评论 -
js学习-10(事件)
什么是事件事件: 指的是文档或浏览器窗口中发生的一些特定的交互 瞬间。对于web应用,主要的事件有:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript是以事件驱动为核心 的一门语言。JavaScript和HTML之间的交互式通过事件实现的。事件的三要素:事件的三要素:事件源、事件、事件驱动程序。事件源: 引发后续事件的html标签。事件: js所定义好的。比如:鼠标单击onclick、鼠标双击ondbclick、获得焦点onfocus等等。事件驱动程序: 对样原创 2020-07-22 01:58:48 · 156 阅读 · 0 评论 -
js学习-9(DOM)
一、DOM(Document object Model文档对象模型)**DOM:**文档对象模型(Document object Model),操作网页上元素的API。比如盒子移动、变色、轮播图等。**ECMAscript:**javascript的语法标准。包括一些基本语法,比如:变量、表达式、函数、运算符、函数、if语句、for语句等。**BOM:**浏览器对象模型(Browser object Model),操作浏览器部分功能的API。比如:让浏览器自动滚动。这三部分是javascr原创 2020-07-20 22:06:51 · 275 阅读 · 1 评论 -
js学习-6(this、arguments)
一、this解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的 上下文对象。根据函数的调用方式的不同,this会指向不同的对象:【重要】1.以函数的形式调用时,this永远都是window。比如fun();相当于window.fun();2.以方法的形式调用时,this是调用方法的那个对象3.以构造函数的形式调用时,this是新创建的那个对象4.使用call和apply调用时,this是指定的那个对象情况原创 2020-07-20 02:43:49 · 149 阅读 · 0 评论 -
js学习-8(数组、基本操作、常用方法归纳)
一、数组数组(Array)是属于内置对象,我们可以在MDN网站上查询各种方法。数组和普通对象的功能类似,也是用来存储一些值的。不同的是:普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引来操作元素。索引:从0开始的整数就是索引。数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据,使用频率非常高。二、数组的基本操作数组的元素可以是任意的数据类型,也可以是对象,也可以是函数,也可以是数组。类型和长度都没有限制。数组的元素中,如果存放的是数组,我们就称这种数组为二维数原创 2020-07-20 02:42:17 · 281 阅读 · 0 评论 -
js学习-5(面向对象)
一、面向对象简介面向对象:通过将特征和行为封装起来,便于后续的重复调用。 对象的作用是:封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。 对象具有特征(属性)和行为(方法)。面向对象:可以创建自定义的类型,很好的支持继承和多态。面向对象的特征:封装、继承、多态。基本数据类型和引用数据类型的对比基本数据类型(值类型):String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。引用数据类型(引用类型):Object 对象原创 2020-07-19 23:31:45 · 164 阅读 · 0 评论 -
js学习-4(函数和作用域)
一、函数函数: 将一些功能或语句进行封装,在需要的时候进行调用即可。函数的作用: 1)将大量重复的语句利用函数进行封装,在需要的时候调用即可,避免了重复劳动。 2)将编程模块化,更加利于后期的维护。函数的定义:1、法一:使用函数声明来创建函数function 函数名([形参1,形参2....形参N]){ 语句.... }比如: function sum(a, b){ return a+b; }function:是一个关键字。中文是“函数”、原创 2020-07-16 01:43:54 · 128 阅读 · 0 评论 -
js学习-3(流程控制语句)
js学习-3(流程控制语句)代码块js中的代码块只是用来划分区域的,并没有区别作用域的功能。即:在代码块内部的变量,在代码块外部仍然可以使用。流程控制语句流程控制语句主要包括:顺序结构选择结构:if语句、switch语句循环结构:while语句、for语句顺序结构: 顺序结构表示按照代码的先后顺序,依次执行。选择结构:if条件语句1、条件判断语句:if (条件表达式) { // 条件为真时执行的语句 }2、条件分支语句:if (条件表达式) {原创 2020-07-16 01:37:24 · 291 阅读 · 0 评论 -
js学习-2(强制类型转换和运算符)
一、强制类型转换强制类型转换:将一个数据类型转换为其他的数据类型。 主要是指将其他类型转换为string、number、boolean这几种类型。其他的类型——>string方法一:拼接 变量+“ ”或者变量+“ abc”var a = 123;console.log(a+" ");console.log(a+"abc");方法二:调用toString()方法语法:变量.toString()【重要】该方法不会影响到原变量,它会将转换的结果进行返回。若写成a原创 2020-07-15 01:00:31 · 460 阅读 · 0 评论 -
javascript学习-1
JavaScript入门介绍:js是弱变量类型的语言,变量只需要var进行声明即可。var a;浏览器工作原理:1、User Interface 用户界面,我们所看到的浏览器2、Browser engine 浏览器引擎,用来查询和操作渲染引擎3、Rendering engine 用来显示请求的内容,负责解析HTML、CSS4、Networking 网络,负责发送网络请求5、JavaScript Interpreter(解析者) JavaScript解析器,负责执行JavaSc原创 2020-07-14 03:11:26 · 151 阅读 · 0 评论 -
css3基础总结-3
一、定位1、固定定位:fixed 相对于浏览器进行具体数值的定位,会脱离正常的文档流 position:fixed; right:100px; top:100px; 必须与left、right、top、bottom配合使用才能起到固定定位的作用,将元素定位到浏览器的具体位置上。2、相对定位:relative 相对于自己当前的定位。不会脱离文档流,只是样子离开了,就好像灵魂出窍一样。 position:relative; right:100px; top:100px; 必须与le原创 2020-07-11 21:45:45 · 174 阅读 · 0 评论 -
css基础总结-2
一、过渡过渡属性:transitiontransiton主要用来设置四个过渡属性,分别为:transition-property:规定设置过渡效果的css属性的名称transition-duration:规定完成过渡效果需要的时间transition-timing-function:规定速度效果的速度曲线 属性值: ease:(默认值),速度为从慢到快再到慢 linear:速度为线性速度 ease-in:从慢到快的过程 ease-out:从快到慢的过程 cubic原创 2020-07-09 01:41:06 · 112 阅读 · 0 评论 -
Html基础知识总结
Html基础知识HTML:超文本标记语言。它是一种标识性的语言,非编程语言,不能使用逻辑运算。通过标签将网络上的文档格式进行统一,使分散网络资源链接为一个逻辑整体。超文本:是一种组织信息的方法,通过超级链接将多种媒介关联起来。标记:标签,用<>包裹的具有一定含义的内容,比如:…最基本的html结构: 文档标题原创 2020-07-08 00:10:32 · 204 阅读 · 0 评论 -
css基础总结-1
一、css是什么 css(层叠样式表),又称串样式列表,是一种用来为结构化文档(如:html、xml等)添加样式(如:字体、间距、颜色等)的计算机语言。 css的使用可以让结构与样式表现分离,方便后期维护。二、基本语法1、css语法的主要组成:选择器、属性、属性值selector{property:value} selector 选择器通常是您需要改变样式的 HTML 元素。 属性(property)是希望设置的样式属性。 每个属性有一个属性值(value)。原创 2020-07-08 00:07:49 · 142 阅读 · 0 评论