egg_er的博客

Es6循环 五种方式使用 foreach 点击显示数组目标项索引<button @click="show1">使用 foreach 点击显示数组目标项索引</button> <!-- 缺点： 即使找到了 我们想要的数据 ，也会强行把循环走完 ，且无法终止 --> var vm = new Vue({ el: '#app', data: { // 用于 foreach 以及 some

基本使用步骤在 head 标签中 导入 cropper.css 样式表：<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />在 的结束标签之前，按顺序导入如下的 js 脚本：<script src="layui.all.js"></script><script src="jquery.js"></script><script src="Cropper.

跨域在了解什么是跨域之前，我们先聊聊为什么会用到跨域，那就不得不说浏览器的同源策略了那么什么是同源呢:同源是指两个网页的协议，域名，端口都相同，那么这个两个网页就有相同的源，也就可以相互请求，不会受到浏览器同源策略的影响（同源策略就是：浏览器的保护机制：对于不同源的网页进行数据请求的时候，浏览器会阻止数据返回我们电脑的页面中）；那么什么是跨域呢：很简单，与同源相反就是跨域，也就是说，当我们在不同源的网页中进行数据请求的时候，就会用到跨域。出现跨域的根本原因就是： 浏览器的同源策略不允许非同源的U

axios发起数据请求axios类似于jQuery都是一个库，axios是专注于数据请求方面的库，轻量级，非常好用使用前需要先调用axios.js的包// 使用前先调用<script src="./js/axios.js"></script>直接上才艺，先分开说如何使用axios发起get请求以及post请求，再使用axios类似于jQuery中的$.ajax({})的方式发起get以及post请求使用axios发起get请求 <button id="btn1"

为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码ES6新增变量声明：let ：ES6中新增了用于声明变量的关键字；作用域：let声明的变量只在所处于的块级有效； if (true) { let a = 10; }console.log(a) // 此时会报错 a is not defined （作用域

什么是正则表达式我们平时打游戏需要先注册账号，注册不是随意的，而是按照一定的规则，否则就无法注册成功。那么这个规则的判断就是通过正则表达式来判断的。其他语言也会使用正则表达式，我们现在主要是利用JavaScript 正则表达式完成表单验证。知道了什么是正则表达式，那么聊聊如何使用：正则表达式在js中的使用正则表达式的创建（两种方式）：方式一：通过调用RegExp对象的构造函数创建var regexp = new RegExp(/123/);方式二：利用字面量创建 正则表达式【重点记忆，常用

什么是递归递归： 定义：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解的话就是:函数内部自己调用自己；tips： 递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。案例： （写几个案例熟练一下递归）：利用递归求1~n的阶乘：//利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n function fn(n) { if (n == 1) { //结束条件

【解决】谷歌在console面板点击刷新进入sources面板问题不知道大伙有没有遇到这个问题，在一次谷歌console控制台调试代码以后，关闭浏览器，修改代码，重新打开页面，再进入控制台刷新页面的时候，点击刷新，此时不是刷新了控制台打印的数据，而是进入了sources调试面板，这是为什么呢？产生错误原因分析：由于上一次我们在调试代码的时候，在sources面板，先设置断点，然后点击刷新,此时可以点击下一步进行调试。那么我们如果细心发现，只有先设置了断点，刷新才会进入调试。那么我们把断点取消掉不就可以

严格模式什么是严格模式：我们了解了前面的JS 函数与函数【this指向问题】 以及 改变函数内部的this指向【三种方法】后，我们来聊聊什么是彦戈模式，严格模式下this指向问题与函数问题有哪些变化。查阅文档我们知道： JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。严格模式对正常

改变函数内部 this 指向前面我们讲到函数的this指向问题:JS 函数与函数【this指向问题】；那么接下来我们聊聊改变函数内this指向如何实现， js提供了三种方法 call() apply() bind(),下面细聊他们的使用方法。call方法call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。应用场景: 经常做继承.var o = { name: 'andy'} function fn(a, b) { console.lo

函数与相关的this指向迄今为止我们经常见到的函数，在这里有六大类：普通函数构造函数对象方法函数事件绑定函数定时器函数立即执行函数六大类函数都是我们经常用到的，那么他们的函数样子还记得是什么样么？他的this指向忘记了没？下面分别对这六大函数形式总结：普通函数定义方式： function fn() { console.log('我被调用了'); } fn();window.fn(); // 此时可以看出普通函数的 this指向为 window对象函

JS商品查询案例我们在学习了ES5新增的操作数组的新方法以后，利用这些新的方法，forEach,filter,some；来动态实现一个商品查询的案例。案例需求：定义数据数组，数组中放数据对象把数据动态添加到页面当中给页面添加一个通过价格区间查询商品的功能再给页面添加一个通过名称查询商品的功能tips: 查询商品是用fliter还是some呢？ 通过价格区间查询商品功能，很显然价格区间的商品是不止一个的，也就是不唯一，那么就用filter来查询；相反通过名称查询商品就比较精确了，一般都是一个

ES5新增数组方法（常用）新增了数组的快速遍历值，索引，数组：forEach,快速查找数组中符合条件的所有值，索引,数组：filter查询数组中有没有某个值，索引，数组：somefilter 与 some的异同点：相同点：都是查询数组中符合条件的值不同点：filter查询数组中满足条件的所有值，会把数组中所有满足条件的值都返回出来。返回值为一个新的数组，可以声明一个变量保存起来这个数组，方便进行其他的操作；some 返回值是布尔类型，作用主要是查找某个元素是否存在，不存在返回fa

数据可视化【Echarts】想实现炫酷的动态数据效果嘛？想制作属于自己的数据可视化页面嘛？跟着魔鬼的步伐，5分钟，带你快速写出自己想要的可视化数据。在聊如何实现之前，必须要提的就是Echarts官网了，里面有大量的数据可视化库，供我们学习与使用。网站我放这里了Apache ECharts一个基于 JavaScript 的开源可视化图表库。其他不多说，直接上才艺，想实现任意一个可视化数据模块，大致可以分为五个步骤：引入Echarts.min.js / Echarts.js给数据模块创建一个DOM

本地储存为什么需要本地存储呢：数据存储在用户浏览器中，在控制台中Application模块中查看。设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储Application模块：本地储存分两种，一种是sessionStorage,以及localStorage.那么有什么异同点呢？分别来说：window.sessionStorage生命周期为关闭浏

侧边栏滚动固定效果滚动与scroll有关，我们使用 scroll 系列的相关属性可以动态的得到自己的大小scrollWidth; scrollHight（不含边框）、滚动距离scrollTop;scrollLeft等。tips: 上面四个方法返回的值都是数值类型，不含单位的px的；滚动是页面的滚动，我们知道当浏览器界面显示内容不全的时候就会出现滚动条，滚动条向下拉就能看到下方被隐藏的内容，同时我们当时页面的最上方也就被遮盖住了，想看到上方被遮盖住的部分，就需要滚动条向上拉。 在这里说一个方法能够获上

模态框拖拽效果在实现这个案例效果首先我们了解几个属性，offsetLeft.offsetTop,e.pageX,e.pageY;这几个量都掌握以后就可以操作了…分别解释一下：offsetLeft：指的是返回一个带有定位父元素左边偏移量的值，当然如果需要操作的元素的父元素没有定位，那么它返回的就是距离浏览器最左侧页面的距离。offsetTop：指的是返回一个带有定位父元素顶部偏移量的值，当然如果需要操作的元素的父元素没有定位，那么它返回的就是距离浏览器最顶部页面的距离。e.pageX是指鼠标距离浏

BOMBOM是浏览器对象模型，也是网页开发中最大的对象，它的核心对象时windowBOM常见的事件对象（onlode,resize,setTimeout定时器）1.onlode事件对象如何使用？我们知道js代码摆放的位置是不固定的，但是大多为外链式，并且js代码如果摆放在页面元素加载前面就会报错，由于获取不到相应的元素对象，如下代码：实现点击123所在的盒子，弹出aa的效果，此时的结果显然是实现不了的，因为按照js的执行机制是从上往下依次执行，因此js代码中是获取不到该元素的。因此报错：TypeE

设计发送验证码案例DOM部分学习以后，设计一个发送验证码，老样子，先分析，再写代码…案例分析：首先搭建好结构，一个输入框一个按钮，按钮上给个值为点击发送验证码点击以后禁用按钮点击按钮，按钮上的内容变成，倒计时锁多少秒设置一个定时器，每隔一秒执行一次，让倒计时减一判断验证当前倒计时是否已经小于0，如果小于0，那么清除定时器，并且给定时器设置初始内容以及倒计时的初始时间，并且把禁用的按钮给调回来,用：btn.disabled = flase;来实现如果当前倒计时大于0，那么让时间不断减一即可

DOMDOM部分我先现在就学完了，总结一下，不外乎对我们标签元素的增删改查，我做了一个下面的Xmind图，我们直接看图了解…利用我们上面的增删查改再加上之前学的ECMAscript就可以对我们的结构进行一系列操作前面的知识遗忘，请看这两篇的文章：DOM 详细 一篇就够【重点】和DOM 节点操作 【微重点】【案例】tips: 想场景喏…不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~...

节点（node）前面我们聊到，一篇DOM就够了章节，我们掌握了常用的操纵元素方法…接下里我们聊聊节点是如何高效操作的…那么什么是节点呢？(都有哪些类型，以及如何判断)其实页面上的所有看得到的，看不到的：都叫节点，看不到的这里举个栗子（换行,元素的属性等）。这么多节点，那一定有分类了，那你猜对了;确实有：并且分为1号标签节点，2号属性节点，3号文本节点；为什么有1.2.3号呢？这个是程序之初设置好的，我们可以这么理解，1就代表标签节点，2就代表… 3就代表文本节点…如果我们获取的节点，不知道是什么

Tab栏切换上一篇文章我们聊了DOM部分，我们掌握了一些操纵网页元素的方法，各种的"增删改查",那么之后我们就练习一些例子对DOM部分知识进行一下巩固…tab栏切换在我们实际开发中，非常常见，几乎每个网站都有他的影子，那么他是如何实现的呢？Tab栏切换效果制作：在制作以前我们先给一个场景：样式结构代码如下：样式： <style> * { margin: 0; padding: 0;

DOM相关操作JavaScript分为三个部分，我们在之前说道，JS分为三个部分，ECMAscript，DOM,和BOM;详细的在这里…JavaScript历史;至此我们ECMAscript部分已经学完，加下来就是DOM部分,DOM是文档对象模型，顾名思义也就是操纵我们我们之前写的html部分的标签的。之前有一个大佬曾经说过，万物皆对象…DOM都有哪些操作呢？我们先看图示：明显看出DOM分为四个重要部分（都是操作）操作元素内容操作元素属性操作表单属性操作元素类名操作元素内容：我们

数据类型我们都知道，数据类型分为简单数据类型（string,number,boolean,以及两种空【undefined,null】)，和复杂数据类型(object，array等)简单数据类型（值类型）细说简单数据类型的话，我们要记住一个特殊的情况，那就是null，这个值类型，如果使用typeof()检测一下的话，他的类型是对象object，这个是一个bug，并且没有去修复。那么你可能要问了，那他的使用场景呢？eg:如果我们要创建一个对象，但是又没想好，给他写哪些属性值的时候，那就直接让一个对象名等于

让浏览器时刻显示你来到这个世界上的时间利用浏览器显示电脑来到世界上多久了…数字是不断增加的，那么怎么实现呢？思路：先定义好五个变量存储，年份，天，小时，分钟，秒…获取当前的时间（这个时间是距离1970年的1月1日 0:0:0），并且给他转换成秒数把获取的时间除以相对性进制转换后的，年，月，日，时… 如果不晓得怎么算的话，eg: 年now_time /(606024360); 天：(now_time / (6060*24))%360;那么要问了，为什么取%360？因为咱们为了获取多出来的那些

限时秒杀限时秒杀（时间倒计时的操作）我们在生活中经常能见到，比如超市抽奖活动，比如某宝商城中某商品限时出售倒计时，再比如电影情节中定时炸弹，是不是来画面感了，铁铁…那么这种定时炸弹，(⊙o⊙)…不，这种定时器是怎么做的呢？废话不多说上代码：样式： <style> body { background-color: gray; } ul { list-style: none;

作用域问题：函数章节我们了解到了，函数域的概念，也就是函数作用的范围；域分为全局的作用域，也分为局部的；变量方面：我们在全局中设置的变量也就叫全局变量，在局部定义的变量就叫做局部变量。那么什么是定义局部变量什么是全局变量呢？（看以下代码） var num = 10; // 全局变量 （第一种声明方式，下面有第二种） function func() { var num = 100; // 局部变量 alert

函数封装函数章节学习中，敲了一些有代表性的案例… 巩固一下函数的运用吧…运行以后的图就不再放这里了，直接复制代码去VS-code里运行一下吧…一·用户输入年份，判断这一年的2月有多少天：<script> // 用户输入年份，判断这一年的2月有多少天 利用函数的调用 function isRanNian(year) { var flag = false; if (year % 4 == 0 &&am

arguments从使用场景？，案例？三个方面聊聊arguments…arguments是伪数组，那么什么是伪数组呢？具有数组的length长度属性;也就是可以通过arguments.length来获取数组的长度（重点）是按照索引的方式存储的，也就是说：访问第一个实参arguments[0];不具有数组的许多方法，比如pop,push,shift,unshift等…arguments 的使用场景：必须在函数中使用，并且代表的是实参列表我们都知道一点：如果传入的实参个数大于形参个数，这个

冒泡排序要了解冒泡排序怎么排，首先得知道冒泡排序的核心算法…核心算法：假如我们实现一个从小到大的数组排序；我们通俗来理解，我们要排序，那必须得有两者之间的比较，那么也就有比几轮的问题，每一轮谁和谁比的问题…这两个问题弄明白，剩下的不过是交换一下数组位置。接下来看操作…我们提到轮，显然用循环来操作…我们先定义一个数组var arr = [1, 2, 88, 8, 6, 70];既然要获取轮数，那就得知道数组中个数有多少，数组元素个数减去一就是比几轮；for (var i = 1; i < ar

网页计算器我们学完了函数，做一个网页计算器的小案例…巩固一下…案例图：相加：相减相乘相除代码如下：结构： <p>整数1： <input type="text" name="" id="num1"> </p> <p>整数2： <input type="text" name="" id="num2"> </p> <p> <input type="button" v

银行登录存取钱案例我们前面聊了，三种循环的区别与联系以及条件语句的使用，今天早上起来没啥事儿，写个这两节总结的小案例玩玩…直接上结果： （短视频） JavaScript 银行登录存钱取钱案例 代码如下：<script> // 存钱取钱功能 while (true) { // 账号登录 var use

循环使用场景不同:do-while:不知道循环次数，并且先循环，再判断while:不知道循环次数，先判断再循环for：知道循环次数，先判断再循环。结构特点：（循环体不同）do-while：do{循环体}while()for(){循环体}while(){循环体}执行代码的方式不同:do-while:不管条件满不满足，先执行一次，再进行判断。如果不满足此时跳出；满足的话继续。while:先判断，再执行代码。 如果不满足直接跳出，满足则执行相应的语句。for：与while一样，

运算损失精度的问题JavaScript在进行浮点数运算的时候会有精度丢失的问题；eg:0.1 + 0.2 = 0.3000000000004；那么为什么会造成这种情况呢，原因是，把浮点数转化为二进制机器码，然后再转换成十进制的数值的时候有精度的损失，而这个差值在我们JavaScript中，给算上了，因此0.1 + 0.2 != 0.3;怎么解决精度的问题呢？...

九九乘法表九九乘法表实现的方式有许多种，但其原理都是不变的；下手之前：首先先了解案例的需求：九列九行，并且每一行都需要输出相对应的项；因此使用循环比较合适，那么使用哪种循环比较合适呢？while?do while?for?由于我们已经知晓循环的次数，因此我们直接使用for循环…那么怎么写逻辑代码呢？很显然一共九行，并且有九列；我们细心会发现，每一列都不超过这一行的行数，那也就是列<=行；而行数又是已知的 =>>> 9;因此我们可以先循环行，然后在行的for循环中循环列，这样就

JavaScript前面我们聊了移动端响应式的布局，最主要的还是两点flex布局和rem布局,一定要掌握。接下来就是第三阶段的学习了，主要是JavaScript，JQuery，ajax,es6以及Echarts数据可视化的相关知识，关注一下吧，持续更新中。。。JavaScript是由网景公司（Nectscape）设计出的，起初被命名为LiveScript，后来被Sun公司收购，...