- 博客(29)
- 收藏
- 关注
RSS订阅原创 ajax请求及前端发送请求的几种方式
什么是Ajax？ajax是一种用于创建快速动态网页的技术，是一个默认异步执行机制的功能，ajax分为同步（async=false）和异步（async=true）。通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。也就是说可以在不重新加载整个网页的情况下，使网页的局部更新。什么是同步请求？同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码。类似于单线程任务要一个一个来什么是异步请求？（ajax请求默认异步）异步请求就是当发生请求的同时，浏
2021-10-19 22:15:02
1944
原创 css3总结
em和remem单位根据元素的父元素的大小而计算出实际的大小。rem单位根据页面上的根元素(html)的大小而计算出实际的大小例：我们指定HTML元素的字体大小为10px，small元素的字体大小为11px,strong元素的字体大小为18px。//大多数浏览器中，默认字体大小为16px,也可将根元素的大小设为62.5% 从而使浏览器自动算出10个像素。html{font-size:10px;}small{font-size:1.1rem;}strong{font-size:1.8rem
2021-06-09 17:43:02
178
原创 css3笔记总结——选择器
本文对css3的一些知识点做了一些简单的概括和总结，欢迎大家一起学习共同进步，如有不足欢迎指正。选择器是css3中一个重要的内容，大型网站中如果单一的使用元素的class属性书写样式有两个缺点：一：class属性本省没有语义，纯粹用来服务css样式，属于多余属性；二：使用class属性，并没有把样式与元素绑定起来，针对同一个class属性，文本框、下拉框、甚至按钮也可以使用，这样是非常混乱的，修改样式也不方便。所以，在css3中，提倡使用选择器来将样式与元素直接绑定起来。属性选择器（att代表属性，va
2021-06-05 18:27:23
248
原创 重绘和回流
回流：当render tree(渲染树)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（reflow）。常见的回流的操作1、页面初次渲染2、更改浏览器尺寸（window）大小3、修改元素的尺寸4、部分dom操作重绘是当节点需要更改外观而不会影响布局的操作，比如改变 color 就叫称为重绘常见的重绘的操作：1.改变元素的背景色或字体颜色2触发页面回流的属性1、盒子模型相关属性会触发重布局2、定位属性及浮动也会触发重布局3、改变节点内部文字结构也会触发重布局widt
2020-09-13 14:53:20
144
原创 浅谈函数防抖和节流
什么是防抖、节流 ?防抖和节流是针对响应跟不上事件触发频率，而影响浏览器性能这类问题的两种解决方案。 像鼠标移动事件onmousemove,滚动滚动条事件onscroll,窗口大小改变事件onresize，这类我们无法控制触发频率的事件，瞬间的操作都会导致这些事件会被高频触发。如果事件的回调较为复杂，就会导致响应跟不上触发，进而出现页面卡顿，假死现象。在实时检查输入时，如果我们绑定onkeyup...
2020-04-06 11:37:33
159
原创 前后端分离技术mock
mock是干什么的？mock.js官网上介绍的是 生成随机数据，拦截Ajax请求。简单说 mock就是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试mock功能1.模拟ajax请求，生成请求数据2.根据数据模板生成模板数据3.加快前端开发速度在开发过程中，进度比较赶的情况下，前端人员当页面写完时，后台的接口还没写完，等要交付的时候后端才把接口给你，这个时候就很尴尬...
2020-03-27 11:31:56
450
原创 ES6 Promise
Promise基本上是面试面试必问点之一。为什么能在面试这么高频的呢？什么是Promise它的出现是为了更好地解决JavaScript中异步编程的问题，传统的异步编程最大的特点就是大量的回调嵌套，被称为回调地狱，一旦嵌套次数过多，就很容易使我们的代码难以理解和维护。而promise则可以让我们通过链式调用的方法去调用回调嵌套的问题，使我们的代码更容易理解和辩护，而且promise还增加了许多有...
2020-03-26 20:37:07
107
原创 ES6详解
首先唠唠ES的发展史，ES6为ECMAScript的六个版本。ESMAScript是一个语言的标准。ESMAScript+WEBapi(DOM、BOM)=JavaScriptActionScript+WEBapi(DOM、BOM)=flash年份版本事件1996ES1.0Netscape公司把js交个了ECMA的组织，es正式出现2007ES4.0由于更新...
2020-03-21 20:56:20
203
原创 原生ajax和jQuery中的ajax
Ajax全称是asynchronous javascript and xml,主要用来实现客户端与服务器端的异步通讯效果，实现页面的局部刷新，从而创建快速动态网页的技术什么是同步？什么是异步？同步：同一时刻只能做一件事，上一步完成才能开始下一步异步：同时做多件事，效率更高原生js中ajax发送数据的步骤第一步：创建XMLHttpRequest对象，也就是创建一个异步对象//必须基于xh...
2020-03-12 10:34:45
289
原创 js的时间线
首先大家要知道JavaScript是单线程，解释型，弱类型的语言。JavaScript异步加载和ajax是没有任何关系的，然后再来看JavaScript时间线的过程。时间线的步骤1.创建document对象，开始解析web页面，解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中，这个阶段document.readyState = “loading”2.遇到link...
2020-03-10 13:31:13
207
原创 JavaScript正则表达式
一.正则表达式是匹配模式，要么匹配字符，要么匹配位置。什么是位置？如何匹配字符？如何匹配位置？位置的特性？模糊匹配： 而模糊匹配，有两个方向上的“模糊”：横向模糊和纵向模糊。横向模糊指： 一个正则可匹配的字符串的长度不是固定的，可以是多种情况。**实现的方式：**使用量词，譬如{m,n},表示连续出现最少m次,最多n次。比如正则/ab{2,5}c/表示匹配这样一个字符串：第一个字符是...
2020-02-17 16:15:37
862
原创 前端经典面试题
const shape = { radius: 10, diameter() { return this.radius * 2; }, perimeter: () => 2 * Math.PI * this.radius }; shape.diameter(); shape.perimeter();输出 1 3对于箭头函数，t...
2020-02-03 18:29:35
362
原创 Flex-弹性布局
首先父容器设置弹性盒子：display：flex；1.flex-direction设置主轴方向row:默认值 主轴从左到右；column:主轴从上到下；row-reverse:主轴从右到左；column-reverse:主轴从下到上；2.设置子项是否换行：flex-wrap:wrapnowrap:默认值wrap:会换行wrap-reverse:倒着换行3.设置主轴上的对齐方...
2020-01-09 08:34:19
178
原创 实现响应式布局的两种方法（媒体查询，Bootstrap框架）
一媒体查询二Bootstrap框架上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https:...
2020-01-07 22:49:24
1247
原创 web常用的三种存储方式的区别及记录登录名和密码案例
一.服务器存储：数据库：存储项目的核心数据session技术：存储当前用户的信息客户端存储：cookie存储：大小限制在4kb，通过请求服务器返回一个cookieID存在浏览器缓存中，占用宽带，浏览器通用IE6限制每个与，名20个cookiesuserDate是IE的专用特性，用的人较少，现在用的最多的flash的本地存储，空间是cookie的25倍，已被淘汰。Google Gears...
2019-12-26 17:25:11
1586
原创 H5 canvas实现简单的飞机大战小游戏
整体分析飞机大战游戏游戏存在就会有准备阶段（控制游戏全局属性）：1. 定义游戏状态 第一阶段：游戏欢迎状态 0 START 第二阶段：游戏加载状态 1 LOADING 第三阶段：游戏运行状态 2 RUNNING 第四阶段：游戏暂停阶段 3 PAUSE 第五阶段：游戏结束阶段 4 GAMEOVER2. 定义游戏得分 score ...
2019-12-21 11:17:05
1720
4
原创 多物体多目标的缓冲运动及js设置获取元素css样式的方法
获取元素样式的方法：ps:element表示待求解样式的DOM元素对象1.element.style //获取行内（内联）样式表对象2.window.getComputedStyle(element,null)//IE9以下能兼容，第二个参数获得伪类元素的样式3.element.currentStyle()设置元素CSS样式的方法：element.style.attrName ...
2019-12-14 11:31:22
151
原创 前端工程师与搜索引擎 网站SEO优化
标签语义话的好处：1.提高搜索引擎 SEO（搜索引擎优化）2.让代码开发者更加高效的工作，简化代码标签的使用搜索引擎的工作原理：网络蜘蛛爬虫，不断升温去收集关键字前端工程师如何优化？一关键词策划1为了搜索引擎更好的识别网站的核心内容，关键词布局要合理2.关键词布局合理的几点建议：1网站的logo通过alt以及title标签来设置关键字2导航是作为仅次于网站logo权重分配的...
2019-12-09 20:44:54
352
原创 window属性和方法和修改滚动条样式
1.文档加载事件window.onload():当文档内容完全加载完成才会触发事件（css,html,js,图像，音频）只能写一次DOMContentLoaded():等 除外部文件（图像，音频，视频）加载完成就会出发（可写多次）2.文档显示区的宽度和高度：window.innerHetght//宽度window.innerHeight //高度3滚动条的偏移量，可以设置，但不能控制...
2019-12-05 20:10:05
547
原创 BOM（快速获取url后的参数）
**BOM:**浏览器对象模型 专门操作浏览器的api 兼容性不好。核心操作对象是window:1.它是js访问浏览器的一个接口，封装了所有dom和bom的方法。2.它是全局作用域对象，定义在全局中的变量和函数都会变成它的属性和方法六个字对象：document ： DOMevent：事件对象history：浏览器的历史记录location：窗口的url 地址栏的信息s...
2019-12-03 22:18:08
672
原创 事件委托，冒泡，捕获和行为
首先我们要搞明白什么是事件？事件：就是满足条件后，会去执行某一段代码用户有操作的时候鼠标事件用法click鼠标单击dbclick鼠标双击onmousedown鼠标按下时mouseup鼠标抬起时mousemove鼠标移动mouseover鼠标移入mouseout鼠标移出键盘事件用法––onkeyup抬起...
2019-12-02 22:08:26
109
原创 浏览器的渲染过程及document和Document的区别
浏览器的渲染过程：1，浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个标签都是DOM树中的一个节点，根节点就是常用的document对象。DOM树里包含了所有HYML标签，包括display:none隐藏，还有用js动态添加的元素等。2.浏览器把所有样式解析成样式结果体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而FF会去掉_开头的样式。3，...
2019-12-02 19:40:11
777
原创 jsDOM操作总结（下）
核心DOM获取属性：可以操作一切结构文档API，访问标准的html属性1，获取元素的属性值：1 var strValue = elem.getAttribute("属性名");//只能找一个属性值2 elem.attributes 集合：包含了当前元素所有属性的节点对象 elem.attributes[i,"属性名"]//返回一个属性节点对象 elem.attributes[i,...
2019-12-02 17:12:20
193
原创 javascript DOM操作总结（上）
js组成：1.ECMAscript语法标准（ES5 ES6）2 BOM:Browser Object Model(浏览器对象模型)3 DOM : Document Object Model (文档对象模型)DOMdocument代表整个文档 ，html是整个文档的根标签，DOM操作元素可以改变网页内容结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等文档：一个页面就是一个文...
2019-11-23 15:24:54
340
原创 如何理解闭包
什么是闭包？**简单讲，闭包是指有权访问另一个函数作用域中的变量的函数**闭包的作用1.可以在函数的外部访问到函数内部的局部变量2让这些变量始终保存在内存中，不会谁着函数的结束而自动销毁（即：闭包是可以在另一个函数的外部访问到其作用域中的变量的函数。而被访问的变量可以和函数一同存在。即使另一个函数已经运行结束，导致创建变量的环境销毁，也依然会存在，直到访问变量的那个函数销毁）闭包的注...
2019-11-12 20:51:21
3815
原创 函数预编译过程和案例分析
函数预编译过程和案例分析JS代码执行步骤1语法分析（即通篇扫描所有代码）如果有明显的语法错误 直接报错，不执行所有的代码2预编译3解释执行(边解释边执行)预编译过程案例一： function fn(a,b){ console.log(a); var a = 99; console.log(a); function a(){}; co...
2019-11-12 11:32:11
307
原创 用js实现简单的图片轮播效果
用js实现简单的图片轮播效果HTML部分HTML分为三部分 一，左右两个人调节图片按钮 二，4张图片 三4个显示按钮位置的圆点<script> //跑动的次数 var count = 0; //动画的执行方向 var isgo = false; //定义计时器对象 var timer; window.onload...
2019-11-10 11:14:35
300
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人