10 2020 档案

vscode jshint 插件安装报错
摘要：安装vscode jshint插件时遇到报错，右下角提示如下信息： Failed to load jshint library.Please install jshint in your workspace folder using’npm install jshint’or globally us 阅读全文
posted @ 2020-10-19 16:13 星辰ꦿ.大海 阅读(324) 评论(0) 推荐(0)
下载nrm第三方模块错误
摘要：今天学习node，下载nrm时遇到以下错误 错误情况： 执行命令npm install nrm -g下载完nrm模块后查询下载地址列表会报错，无法加载文件，因为在此系统上禁止运行脚本。 解决方法：打开Windows PowerShell命令行窗口（记住，右键以管理员身份运行） 输入以下命令：set- 阅读全文
posted @ 2020-10-19 16:06 星辰ꦿ.大海 阅读(344) 评论(0) 推荐(0)
ES6 的内置对象扩展
摘要：Array 的扩展方法（★★） 扩展运算符（展开语法）... 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary // 1, 2, 3 此参数序列的逗号在console.log() 中被视为参数分隔符，不打印出来(log方法可打印多个参数，参 阅读全文
posted @ 2020-10-16 22:12 星辰ꦿ.大海 阅读(99) 评论(0) 推荐(0)
ES6相关概念及新增语法
摘要：什么是ES6 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 ES6实际上是一个泛指，泛指ES2015及后续的版本。 为什么使用 ES6 ? 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的 阅读全文
posted @ 2020-10-16 22:10 星辰ꦿ.大海 阅读(188) 评论(0) 推荐(0)
正则表达式
摘要：1.1什么是正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中 阅读全文
posted @ 2020-10-15 16:47 星辰ꦿ.大海 阅读(194) 评论(0) 推荐(0)
递归
摘要：1.什么是递归 递归：如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。 简单理解:函数内部自己调用自己, 这个函数就是递归函数 注意：递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。 2.利用递归求1~n的 阅读全文
posted @ 2020-10-14 23:19 星辰ꦿ.大海 阅读(189) 评论(0) 推荐(0)
高阶函数和闭包
摘要：1、高阶函数 高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。 此时fn 就是一个高阶函数 函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。最典型的就是作为回调函数。 同理函数也可以作为返回值传递回来 2、闭包 2.1变量的作用域复习 变量根据作用域的不 阅读全文
posted @ 2020-10-14 21:11 星辰ꦿ.大海 阅读(366) 评论(0) 推荐(0)
严格模式
摘要：1.什么是严格模式 JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。 严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。 严格模式 阅读全文
posted @ 2020-10-14 21:07 星辰ꦿ.大海 阅读(254) 评论(0) 推荐(0)
this指向
摘要：1.函数内部的this指向 这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同 一般指向我们的调用者. 2.改变函数内部 this 指向 JavaScript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this的指向问题,常用的有bind() 阅读全文
posted @ 2020-10-14 21:06 星辰ꦿ.大海 阅读(134) 评论(0) 推荐(0)
函数的定义和调用
摘要：1.1函数的定义方式 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn = function(){} 方式3 new Function( '参数1', '参数2'，' 函数体'); var f = new Fu 阅读全文
posted @ 2020-10-14 21:02 星辰ꦿ.大海 阅读(221) 评论(0) 推荐(0)
ES5新增方法
摘要：迭代(遍历)方法: forEach()、map()、 filter()、 some()、 every() ; map()和forEach()相似，some()和every()相似 1.数组方法forEach遍历数组 array. forEach ( function (currentValue, i 阅读全文
posted @ 2020-10-13 23:36 星辰ꦿ.大海 阅读(116) 评论(0) 推荐(0)
继承
摘要：1.call() ES6之前并没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承 调用这个函数并且修改函数运行时的this指向 fun. call (thisArg, arg1, arg2, ...) thisArg : 当前调用函数this的指向对象 ar 阅读全文
posted @ 2020-10-13 22:25 星辰ꦿ.大海 阅读(88) 评论(0) 推荐(0)
构造函数和原型
摘要：1.概述： 在典型的OOP的语言中(如Java) , 都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前, JS中并没用引入类的概念。 ES6,全称ECMAScript6.0 , 2015.06发版。但是目前浏览器的JavaScript是ES5版本,大多数高版本的浏 览器也支持ES6 阅读全文
posted @ 2020-10-11 23:08 星辰ꦿ.大海 阅读(241) 评论(0) 推荐(0)
面向对象版tab 栏切换
摘要：1、功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字可以修改里面的文字内容 抽象对象: Tab对象 该对象具有切换功能 该对象具有添加功能 该对象具有删除功能 该对象具有修改功能 阅读全文
posted @ 2020-10-11 18:14 星辰ꦿ.大海 阅读(214) 评论(0) 推荐(0)
ES6中的对象与类
摘要：面向对象 面向对象更贴近我们的实际生活，可以使用面向对象描述现实世界事物，但是事物分为具体的事物和抽象的事物 手机 抽象的(泛指的) 荣耀p30 具体的(特指的) 面向对象的思维特点: 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板) 对类进行实例化，获取类的对象 面向对象编程我们考虑的 阅读全文
posted @ 2020-10-09 19:43 星辰ꦿ.大海 阅读(163) 评论(0) 推荐(0)
面向过程与面向对象
摘要：1、面向过程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 2、面向对象OOP (Object Oriented Programming) 面向对象是把事务分解成为 阅读全文
posted @ 2020-10-09 19:34 星辰ꦿ.大海 阅读(207) 评论(0) 推荐(0)
品优购电梯导航案例
摘要：案例分析： 当我们滚动到 今日推荐 模块，就让电梯导航显示出来 点击电梯导航页面可以滚动到相应内容区域 核心算法：因为电梯导航模块和内容区模块一一对应的 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().t 阅读全文
posted @ 2020-10-09 11:26 星辰ꦿ.大海 阅读(526) 评论(0) 推荐(0)
jQuery 尺寸、位置操作
摘要：jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。 1. jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。 语法 代码演示 <body> <div></div> <script> $(functi 阅读全文
posted @ 2020-10-09 08:35 星辰ꦿ.大海 阅读(212) 评论(0) 推荐(0)
本地存储应用案例 ToDoList
摘要：1、案例介绍 文本框里面输入内容，按下回车，就可以生成待办事项。 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。 但是本页面内容刷新页面不会丢失。 2、toDoList 分析 刷新页面不会丢失数据，因此需要用到本地存储 loca 阅读全文
posted @ 2020-10-08 16:53 星辰ꦿ.大海 阅读(416) 评论(0) 推荐(0)
jQuery 插件
摘要：jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。 jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ j 阅读全文
posted @ 2020-10-08 16:30 星辰ꦿ.大海 阅读(194) 评论(0) 推荐(0)
jQuery 事件对象，拷贝对象，多库共存
摘要：1. jQuery 事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。 语法 演示代码 <body> <div></div>​ <script> $(function() { $(document).on(" 阅读全文
posted @ 2020-10-07 20:57 星辰ꦿ.大海 阅读(135) 评论(0) 推荐(0)
jQuery 事件注册与事件处理
摘要：1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 语法 演示代码 <body> <div></div> <script> $(fun 阅读全文
posted @ 2020-10-07 20:53 星辰ꦿ.大海 阅读(307) 评论(0) 推荐(0)
jQuery 元素操作
摘要：jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。 一、 遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 语法1 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 阅读全文
posted @ 2020-10-05 22:41 星辰ꦿ.大海 阅读(303) 评论(0) 推荐(0)
jQuery 文本属性值
摘要：jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。 一、jQuery内容文本值 常见操作有三种：html() / text() / val() ; 分别对应JS中的 inner 阅读全文
posted @ 2020-10-05 22:37 星辰ꦿ.大海 阅读(248) 评论(0) 推荐(0)
jQuery 属性操作
摘要：jQuery 常用属性操作有三种：prop() / attr() / data() ; 一、元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。 语法 注意：prop() 除了普通属性操作，更适合操作 阅读全文
posted @ 2020-10-05 22:34 星辰ꦿ.大海 阅读(178) 评论(0) 推荐(0)
jQuery 效果
摘要：jQuery 给我们封装了很多动画效果，最为常见的如下： 显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut() / fadeToggle() 阅读全文
posted @ 2020-10-04 17:33 星辰ꦿ.大海 阅读(339) 评论(0) 推荐(0)
jQuery 样式操作
摘要：jQuery中常用的样式操作有两种：css() 和 设置类样式方法 1. 方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。 常用以下三种形式 : // 1.参数只写属性名，则是返回属性值var strColor = $(this). 阅读全文
posted @ 2020-10-04 17:23 星辰ꦿ.大海 阅读(238) 评论(0) 推荐(0)
jQuery 选择器
摘要：原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 1. 基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号 2. 层级选择器 层级选择器最常用的两个分别为：后代选择器和子代选择器。 基础选择器和层级 阅读全文
posted @ 2020-10-03 22:30 星辰ꦿ.大海 阅读(215) 评论(0) 推荐(0)
jQuery 介绍 以及基本使用
摘要：1.1 JavaScript 库 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我 阅读全文
posted @ 2020-10-03 22:25 星辰ꦿ.大海 阅读(796) 评论(0) 推荐(0)
本地存储
摘要：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂， 为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。 1.本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage约5M 阅读全文
posted @ 2020-10-02 23:14 星辰ꦿ.大海 阅读(221) 评论(0) 推荐(0)
移动端常用开发框架
摘要：框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。 插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。 前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发P 阅读全文
posted @ 2020-10-02 22:39 星辰ꦿ.大海 阅读(1364) 评论(0) 推荐(0)
移动端常用开发插件
摘要：1. 什么是插件 移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？ JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。 以前写的ani 阅读全文
posted @ 2020-10-02 22:36 星辰ꦿ.大海 阅读(249) 评论(0) 推荐(0)
移动端click 延时解决方案
摘要：移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案： 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" content="user-scala 阅读全文
posted @ 2020-10-02 22:35 星辰ꦿ.大海 阅读(186) 评论(0) 推荐(0)
移动端返回顶部
摘要：当页面滚动某个地方，就显示返回顶部图标，否则隐藏 点击可以返回顶部 实现代码跟pc端一致 案例分析： 滚动某个地方显示 事件：scroll页面滚动事件 如果被卷去的头部（window.pageYOffset ）大于某个数值 点击，window.scroll(0,0) 返回顶部 //返回顶部模块制作v 阅读全文
posted @ 2020-10-02 22:32 星辰ꦿ.大海 阅读(277) 评论(0) 推荐(0)
移动端轮播图
摘要：移动端轮播图功能和PC端基本一致。 功能需求： 可以自动播放图片 手指可以拖动播放轮播图 案例分析: 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 // 1.获取元素var focus = document.querySelector(' 阅读全文
posted @ 2020-10-02 22:30 星辰ꦿ.大海 阅读(487) 评论(0) 推荐(0)
移动端触屏事件
摘要：1. 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。 阅读全文
posted @ 2020-10-02 12:18 星辰ꦿ.大海 阅读(241) 评论(0) 推荐(0)
筋头云案例
摘要：功能需求： 鼠标经过某个小li，筋斗云跟到当前小li位置 鼠标离开这个小li ,筋斗云复原为原来的位置 鼠标点击了某个小li,筋斗云就会留在点击这个小li的位置 案例分析： 利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可 阅读全文
posted @ 2020-10-02 12:16 星辰ꦿ.大海 阅读(159) 评论(0) 推荐(0)
返回顶部案例
摘要：带有动画的返回顶部 此时可以继续使用我们封装的动画函数 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 页面滚动了多少，可以通过 window.pageYOffset 得到 最后是页面滚动，使用 window.scroll(x,y) //1. 获取元素 var sliderb 阅读全文
posted @ 2020-10-02 10:58 星辰ꦿ.大海 阅读(204) 评论(0) 推荐(0)
网页轮播图案例
摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图，轮播图 阅读全文
posted @ 2020-10-02 10:56 星辰ꦿ.大海 阅读(270) 评论(0) 推荐(0)
动画函数封装
摘要：1. 动画实现原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left <body> <div> 阅读全文
posted @ 2020-10-02 10:52 星辰ꦿ.大海 阅读(649) 评论(0) 推荐(0)