- 博客(56)
- 收藏
- 关注
原创 前端开发的注意事项
无论什么公司,在开发时你就需要去了解 公司的前端代码规范:大家可以去了解一下,其次就是 交互的问题,交互的前提你的页面已经完成了 达到了链条的需求,交互中可能会出现许多问题,比如参数之类的,所以交互有问题一定需要跟,相关接口的后端去沟通,有些参数 页面跳转 组件传值,前端不方便去拿,或者拿到比较麻烦,可以让后端返回给你,还有 进入接口的条件 ,前端一定要验证,即使后端有,前端也需要,现在许多公司 都有用自己的框架, 你必定有一个熟悉的过程,这个过程不一定需要去看文档,有时候 自己去看项目的代码,与
2020-12-30 14:34:18
374
原创 ES6新增的数组的方法
forEachforEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.let array = [1, 2, 3, 4];array.forEach((item, index, arr) => { console.log(item);});forEach()的用法大概就是这样的, 不过不知道各位发没发现一个问题, forEach(
2020-09-20 18:18:42
203
原创 ES6中的Primise
1、Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。2、Promise 是一个对象,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。3、Promise 对象有以下两个特点:对象的状态不受外界影响。有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。一旦状态改变,就不会再变,任何时候都可以得到这个结果
2020-09-20 18:08:55
927
原创 ajax请求的四大步骤
ajax能够刷新局部网页数据而不是重新加载整个网页,接下来 讲解一下 ajax请求的 四个步骤第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。var xhttp;if (window.XMLHttpRequest) {//现代主流浏览器xhttp = new XMLHttpRequest();} else {// 针对浏览器,比如IE5或IE6xhttp = new Ac
2020-09-10 20:07:26
400
原创 了解 es6箭头函数
es6箭头函数箭头函数用 => 符号来定义。箭头函数相当于匿名函数,所以采用函数表达式的写法。左边是传入函数的参数,右边是函数中执行的语句。 var sum =(x,y) =>{return x+y;} //相当于 var sum = function(x,y){ return x+y; }上面是完整的写法,左边小括号,右边大括号,而下面的情况可以简写:(1)当要执行的代码块只有一条return语句时,可省略大括号和return关键字: var sum = (x,y)
2020-09-10 19:36:21
274
原创 ES6 变量的解构赋值
数组的解构赋值 基本用法ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构。在ES6之前想要为变量赋值,只能指定其值,如下:let a = 1;let b = 2//而在ES6中可以写成这样,如下:let [a,b] = [1,2]// a = 1, b = 2值得注意的是,等式两边的值要对等,这样左边的变量才会被赋上右边对应的值,如果不对等左边的值将会出现undefined,如下写法:let [foo,[[bar],baz]] = [1,[[2],3]]f
2020-09-01 19:33:02
82
原创 es6中let和const(块级作用域)
在ES6之前,我们都是用 var 关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升 例如: function aa() { if(flag) { var test = 'hello man' } else { console.log(test) } }变量声明后代码实际上是: function aa() { var test // 变量提升,函数最顶部
2020-09-01 19:10:07
685
原创 JS中函数柯里化
柯里化在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。简单来说,就是固定一些参数,返回一个接受剩余参数的函数。其实就是使用闭包返回一个延迟执行函数。只看文字描述去理解柯里化可能有点难,举一个很经典的例子:// 普通的add函数function add(x, y) { return x + y}// Currying后function curryingAdd(x)
2020-08-24 14:55:26
158
原创 ajax的实例运用
<div class="nobox"> <input class="address wid" class="wid" type="text" disabled /> <p class="p-uname">禁止修改</p> <input class="name wid" type="text" placeholder="姓名" /> <p class="p-name"></p> ...
2020-08-24 14:34:17
155
原创 jquery中$.ajax()方法使用详解
1.url说明:发送请求的地址(默认为当前页面),要求是String类型的参数,比如是.net下,"~wexin(控制器)/getweinxinmenu(动作)",2.type说明:请求方法(post或者get),默认是get,要求是String类型的参数。其他的htpp请求如(put、delete)等也支持,但是要浏览器支持3.timeout说明:设置请求超时时间(毫秒),要求是number类型的参数。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async说明:默认值为true
2020-08-24 14:22:20
787
原创 echarts(雷达图和中国地图)
上一篇我们介绍了echarts的一些 基本用法, 喝简单的条形图和饼状图! 今天我们 写一下 雷达图(就像我们打lol里面战绩评分的 六芒星图),还有一个 中国地图!!<div class="warpper"></div> <script> var mychart = echarts.init($('.warpper').get(0)); mychart.setOption({
2020-08-13 19:11:08
913
原创 echarts的用法
Echarts–商业级数据图表商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。Echarts支持的图表? 折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图
2020-08-12 17:08:06
353
原创 jquery的一些动画效果
动画效果是jQuery吸引人的地方之一。通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验。jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效果——显隐效果、高度变化及淡入淡出!1、基本效果(显示与隐藏)1)show() :显示2)show(speed,[callback]) :以动画效果显示3)hide() :隐藏4)hide(speed,[callback]) :以动画效果隐藏5)toggle() :切换显示或隐藏6)toggle(swi
2020-08-12 14:26:33
320
原创 Jquery文档处理操作
文档处理1.内部插入1.1 append(content|fn) 向每个匹配的元素内部追加内容$(“p”).append(“appent”)("p").append(function(index,html)returnindex+"这个集合中的索引值"+html+"这个对象原先的html值")1.2appendTo(content)把所有匹配的元素追加到另一个指定的元素元素集合中。使用这个方法是颠倒了常规的("p").append(function(index,html){
2020-08-12 14:12:24
211
原创 jquery中的ready()和onload事件
ready()方法作用:在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验(自己理解,如有不对,欢迎评论指正。)ready()相比onload事件绑定函数的优势:具有较高优先级,只需等到html结构加载完成后即可执行;而onload必须等到图片在内的所有元素加载完毕后才执行。除了使用target选择器时需要结合window.onload,大多数我们都可以使用ready()来进行编写js代码。jquery中的ready()的三种写法1.$().re
2020-07-30 20:00:18
3653
原创 Css3动画(animation)
在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题。CSS3 的出现,让动画变得更加容易,性能也更加好。作为css3 的属性 当然也是存在兼容问题的,我是参考的菜鸟教程 上图:我们了解一下css3 动画中的animation:animation与过渡不同的是,过渡必须人为的触发才会执行动画,动画不需要人为的触发就能执行。满足以下3点,就能看到最基本的动画效果了。动画三要素:需要执行哪个动画(anima
2020-07-27 18:58:57
1119
原创 CSS3 渐变的效果及用法(兼容性)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。渐变不是一个css属性,可以把它看成一个函数,通过传入参数(渐变方向和颜色)来返回一个视觉效果一般用在background-image属性中,注意,不能用在background-color中css3跟HTML5中大多数属性存在 兼容问题 ,下面是我在 菜鸟教程截图 过来的 图片:这是这个属性的 兼容问题(仅供参考)!1.线型渐变 linear-gradient基本用法:可以传入颜色值,也可以传入16进制颜
2020-07-22 19:56:48
1058
原创 JS继承的6种方式
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。我们写6 种继承方式一 .原型链继承将父类的实例作为子类的原型特点:子类的实例也是父类的实例可以方便的基础父类型的原型中的方法,但是属性的继承无意义缺点: 只执行一次,无法给属性传值 属性的继承无意义function Cat(){ }Cat.prototype = new Animal();Cat.prototype.name = 'cat';// Test Codevar cat = n
2020-07-20 19:02:18
160
原创 JS 实现动态轮播图
页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数提示:1、 index不能一直无限制的递增下去,需做判断2、调用切换图片函数时需将递增之后的index作为参数传过去三、定义图片切换函数提示:1.遍历所有放数字索引的li,将每个li上的类去掉。2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。3. 根据传递过来的index值计算放图片的ul的
2020-07-15 19:33:47
476
原创 立即执行函数是什么
什么是立即执行函数???声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;立即执行函数的多个写法:有时,我们定义函数之后,立即调用该函数,这时不能在函数的定义后面直接加圆括号,这会产生语法错误。产生语法错误的原因是,function 这个关键字,既可以当做语句,也可以当做表达式,//语句function fn() {};//表达式var fn = function (){};为了避免解析上的歧义,JS引擎规定,如果fu
2020-07-13 19:19:44
487
原创 js中的this指向问题不是有手就行?
this指向问题, 是JS中的一个小难点! 何如去理解呢?想要理解this,你可以先记住以下两点:1:this永远指向一个对象;2:this的指向完全取决于函数调用的位置;上面第一点比较好理解,不管在什么地方使用this,它必然会指向某个对象(也就可以理解为谁点,那么this指向谁);确定了第一点后,也引出了一个问题,就是this使用的地方到底在哪里,而第二点就解释了这个问题,但关键是在JavaScript语言之中,一切皆对象,运行环境也是对象,所以函数都是在某个对象下运行,而this就是函数运行时
2020-07-08 20:11:58
136
原创 H5语义化标签(收藏)
首先对W3C的HTML5其进行大概的分类,随意看看(可以这样回答面试官,说你归纳过):1:定义上的: 定义注释。 定义文档类型。定义 HTML 文档。 定义文档的主体。
2020-07-06 19:54:09
187
1
原创 HTML页面如何布局
很久没跟新了,。。 今天说一下 当我们分好任务量, 拿到一个 页面时怎样去写布局会更加的容易,一目了然,容易调整,当然每个人的习惯不一样,当我们拿到项目图如下我习惯将每一行每一行,作为一个块级,像上图这样 我一般会分为8个div去写!听起来 有点繁琐,top上面的分的很细,但是这样写非常适合刚入行的人,一步一步容易定位,而且很好的减少一些浮动,脱离文档流等等的影响<header > <div class="top"> <div class="top-
2020-07-06 19:42:53
1333
原创 css3之弹性盒子
Css3引入了新的盒模型——弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间,使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。使用该模型,可以...
2020-05-05 20:36:16
242
1
原创 Bootstrap之按钮的样式
在bootstrap中, 按钮(button)有不同的六种方式. 默认的button的样式是: btn. 这个是必要的样式. 还有其他的六种不同方式展现.分别为: 默认, 主要, 成功, 信息, 警告, 危险, 链接.今天我们就来仔细探讨下按钮的风格样式。使用class可以快速创建一个带有样式的按钮。 <button type="button" class="btn bt...
2020-05-05 20:11:00
2086
原创 Bootstrap之栅格系统
1、栅格系统(布局)Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:网格系统的实...
2020-05-05 20:03:35
258
原创 bootstrap应用场景
BootStrap简介BootStrap是基于HTML、CSS和JavaScript的框架,使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架,他是后端程序员的福音,使他们只需要专注业务逻辑,而无须浪费太多的精力在界面设计上。它可以开发全响应式网页——不论你使用手机、平板电脑、普通个人电脑浏览网站内容,所有的元素都可以很优雅的呈现。所以,可以用他来开发适合各种设备浏览的页面,避免了大量...
2020-05-05 19:54:39
2012
原创 animation的小作用
概述CSS3的animation属性可以像flash制作动画一样,通过关键帧控制动画的每一步,实现更为复杂的动画效果。使用方法:利用@keyframes声明一个关键帧组。在animation属性中调用上述声明的的关键帧组,来实现动画。css3 大部分功能普遍存在浏览器兼容问题,这个就比我来过多讲述了animation属性的值:1)animation-name:指定一个关键帧动画的名字,...
2020-04-26 21:26:28
360
原创 CSS3添加3D色彩
CSS变形功能包括:移动(translate)缩放(scale)旋转(rotate)倾斜(skew)第二部分:坐标系x轴(横轴)y轴(纵轴)z轴(深度轴)x轴的正值在右侧,负值在左侧。y轴的正值沿纵轴向下,负值沿纵轴向上。回想一下定位元素的top属性:值为正数时元素下移,值为负数时元素上移。如果想把元素向左下方移动,要把x值设为负数,把y值设为正数:transform: t...
2020-04-26 21:13:20
218
原创 css文本阴影
本文阴影的几个属性:text-shadowbox-shadowtext-overflowword-wrapword-break改变文字盒子的样式,更加具有美观和观赏性!!! 阴影感觉就让图片 有了立体感!box-shadow 属性适用于盒子阴影div{ width:300px; height:100px; background-color:yellow;...
2020-04-20 11:22:17
203
原创 css3选择器
css3新增的选择器,我查了一些资料看到一个非常好的图片:这张图片就概括了大部分重要的选择器,我给大家举例子!!;子选择器选择匹配的B元素,且匹配的B元素所匹配的A元素的子元素A>Bdiv>em{ color: PINK; }<div> <h3>我是标题</h3> <p>我第1个是p标签</p&...
2020-04-20 11:08:23
115
原创 用canvas绘画一些图形(图标)
最近在研究HTML5,发现其中的canvas用途很广。不但可以绘制图形,还可以制作图片线性渐变,而且还能渲染文字做成特效。 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。canvas元素会在网页上创建一个空白区域(画布),然后通过API操作这个区域...
2020-04-13 21:40:01
2387
原创 百度地图开发指南api!
百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。百度地图JavaScript API支持HTTP和HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先申请密钥(ak)才可使用。在您使用百度地图J...
2020-04-12 23:13:43
814
原创 C3的理解与过程
css3 是什么?根据字面就可以理解到跟我们前面的css差不多,就是在基础上的一些拓展! 所以在理解css3 的进度跟初学css差不多!在有一定it基础理解起来就是依葫芦画瓢!根据我自己的一些方面,在c3 这一类就是有自己的想法是最好的!根据自己的想法就很容易入门!前面我们也理解到css3就是在css的基础上去加深的! 可以理解以前css 做不到的,在更新后的c3 就可以实现!其实在我们都已经步...
2020-04-12 22:05:34
593
原创 es6后续
拓展的对象功能:对象初始化简写:ES5我们对于对象都是以键值对的形式书写,有可能出现键值对重名时,常用于定义组合工具函数function people(name, age) { return { name: name, age: age }; }//键值对重名,es6简写如下function peop...
2020-03-30 13:20:17
120
原创 ES6的那些事!
一:ES6的简介:一个语法 能在it行业站住脚跟,那么必定有他的优势!结合上一遍es6 历史的一些讲解和由来!和版本等等!ES6新增了一种独一无二的数据类型:Symbol。详情会在后面解释。即现在javascript的数据类型共有以下7种。String Number Boolean null undefined Object Symbollet和con...
2020-03-30 13:11:00
119
原创 步入ES6的大门
我相信在这一行 很多人都听过ES6,但了解他吗,今天我们步入ES6了解一下这个东西!ECMAScript6(简称ES6,2015年发布),并且今后的版本以年号发布,比如2016年 就时ES7,相关插件问题可以百度!ES6常用特性let, const, class, extends, super, arrow functions, template string, destructuring,...
2020-03-21 20:00:17
109
原创 JS中关于时间线的问题
在HTML和css中我们 有讲到 按照从上往下逐步执行! 在同步异步中我们也了解到了 js 中的时间线问题!注意:时间线在js中占很重要的地位:优化DOM、逻辑正确时输出的为什么是undefind,很有可能都是时间线在作祟 (ps:对象调用错时也会是undefind1、创建document对象,开始解析web页面。创建HTMLHtmlElement对象,添加到document中。这个阶...
2020-03-13 11:59:13
320
3
原创 JS中异步和同步加载是什么?
异步是什么,刚开始听到这个词,很多同学估计都有点懵,虽然大家都遇到过这个东西!但都还不够了解它,今天我们了解一下异步,顺便了解一下同步!首先JS中的‘加载’是是什么,它是分为两个部分:下载,执行。默认的JS加载是同步的,因为浏览器需要一个稳定的DOM结构,而执行JS时可能会对DOM造成改变,所以在执行JS时一定会阻塞HTML的渲染。我们可以使用一些方法使JS的下载不会阻塞HTML渲染,但不能使J...
2020-03-12 12:46:09
1008
原创 关于函数的一些面试题
关于函数的面试题一直是前工程师的一个考点!我们分析一下几个题:在这里插入代码片 //第一题 var a=10; function aaa(a){ alert(a); var a=20; } aaa(a);很简单的一题, 此时打印出来的结果是几,这是一道关于作用域的一道题!在函数 aaa 的AO 生成时...
2020-02-14 12:55:09
300
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人