10 2020 档案

摘要:1.MongoDB增删改查操作 1.1 创建集合 创建集合分为两步,一是对对集合设定规则,二是创建集合,创建mongoose.Schema构造函数的实例即可创建集合。 // 创建集合规则 const courseSchema = new mongoose.Schema({ name: String, 阅读全文
posted @ 2020-10-26 16:49 행운의소녀 阅读(185) 评论(0) 推荐(0) 编辑
摘要:1. 数据库概述及环境搭建 1.1 为什么要使用数据库 动态网站中的数据都是存储在数据库中的 数据库可以用来持久存储客户端通过表单收集的用户信息 数据库软件本身可以对数据进行高效的管理 http://www.czxy.com/article?id=1http://www.czxy.com/artic 阅读全文
posted @ 2020-10-23 22:44 행운의소녀 阅读(206) 评论(0) 推荐(0) 编辑
摘要:请求响应原理及HTTP协议 1.服务器端基础概念 1.1 网站的组成 网站应用程序主要分为两大部分:客户端和服务器端。客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。 1.2 阅读全文
posted @ 2020-10-22 21:28 행운의소녀 阅读(244) 评论(0) 推荐(0) 编辑
摘要:1.模块加载及第三方包 1.1.Node.js模块化开发 1 JavaScript开发弊端 JavaScript在使用时存在两大问题,文件依赖和命名冲突。 2 生活中的模块化开发 3 软件中的模块化开发 一个功能就是一个模块,多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。 4 Nod 阅读全文
posted @ 2020-10-20 17:21 행운의소녀 阅读(80) 评论(0) 推荐(0) 编辑
摘要:1.Node.js 基础 1.1Node开发概述 1为什么要学习服务器端开发基础 能够和后端程序员更加紧密的配合 网 宽知识视野,能够站在更高的角度审视整个项目 2 服务器端开发要做的事情 实现网站的业务逻辑 数据的增删改查 3.为什么选择Node 使用JavaScript语法开发后端应用 一些公司 阅读全文
posted @ 2020-10-19 17:09 행운의소녀 阅读(95) 评论(0) 推荐(0) 编辑
摘要:1. ES6 的内置对象扩展 1.1 Array 的扩展方法(★★) 扩展运算符(展开语法) 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; ...ary // 1, 2, 3 console.log(...ary); // 1 2 3,相当于下面的代 阅读全文
posted @ 2020-10-18 16:55 행운의소녀 阅读(131) 评论(0) 推荐(0) 编辑
摘要:1.ES6相关概念(★★) 1.1什么是ES6 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 1.2为什么使用 ES6 ? 每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升 阅读全文
posted @ 2020-10-18 16:49 행운의소녀 阅读(112) 评论(0) 推荐(0) 编辑
摘要:1.正则表达式概述 1.1什么是正则表达式 正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵 阅读全文
posted @ 2020-10-17 10:39 행운의소녀 阅读(172) 评论(0) 推荐(0) 编辑
摘要:1.递归 1.1什么是递归 递归:如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数 <script> //递归函数:函数内部自己调用自己,这个函数就是递归函数 var num = 1; ​ function fn() { consol 阅读全文
posted @ 2020-10-17 10:25 행운의소녀 阅读(110) 评论(0) 推荐(0) 编辑
摘要:1.闭包 1.1 变量的作用域复习 变量根据作用域的不同分为两种:全局变量和局部变量。 函数内部可以使用全局变量。 函数外部不可以使用局部变量。 当函数执行完毕,本作用域内的局部变量会销毁。 1.2 什么是闭包 闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用域 阅读全文
posted @ 2020-10-17 10:20 행운의소녀 阅读(186) 评论(0) 推荐(0) 编辑
摘要:1.严格模式 1.1什么是严格模式 JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式,即在严格的条件下运行 JS 代码。 严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被 阅读全文
posted @ 2020-10-17 10:14 행운의소녀 阅读(131) 评论(0) 推荐(0) 编辑
摘要:1.this 1.1函数内部的this指向 这些 this 的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同 一般指向我们的调用者. 1.2改变函数内部 this 指向 JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题 阅读全文
posted @ 2020-10-17 10:09 행운의소녀 阅读(98) 评论(0) 推荐(0) 编辑
摘要:1.函数的定义和调用 1.1函数的定义方式 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn = function(){ 方式3 new Function() var f = new Function('a', 阅读全文
posted @ 2020-10-17 10:01 행운의소녀 阅读(111) 评论(0) 推荐(0) 编辑
摘要:简单版电子时钟,需要以下几个步骤 1. 封装一个函数 返回当前的时分秒 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用 3. 把获取到的时间放到span盒子里,添加样式 效果展示 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch 阅读全文
posted @ 2020-10-16 09:25 행운의소녀 阅读(196) 评论(0) 推荐(0) 编辑
摘要:筛选商品案例 案例分析 1. 把数据渲染到页面中 (forEach) 2. 根据价格显示数据 3. 根据商品名称显示数据 实现代码 定义数组对象数据 var data = [{ id: 1, pname: '小米', price: 3999 }, { id: 2, pname: 'oppo', pr 阅读全文
posted @ 2020-10-15 11:08 행운의소녀 阅读(143) 评论(0) 推荐(0) 编辑
摘要:1.ES5新增方法 1.1 ES5 新增方法概述 ES5 中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:  数组方法  字符串方法  对象方法 迭代(遍历)方法:forEach()、map()、filter()、some()、every(); 1.2数组方法forE 阅读全文
posted @ 2020-10-15 10:59 행운의소녀 阅读(152) 评论(0) 推荐(0) 编辑
摘要:1.继承 1.1call() call()可以调用函数 call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3..使用逗号隔开连接 function fn(x, y) { console.log(this); console.log(x + y); 阅读全文
posted @ 2020-10-15 10:56 행운의소녀 阅读(113) 评论(0) 推荐(0) 编辑
摘要:1.构造函数和原型 1.1对象的三种创建方式--复习 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(name,age){ this.name = name; this.age = age; } va 阅读全文
posted @ 2020-10-15 10:51 행운의소녀 阅读(166) 评论(0) 推荐(0) 编辑
摘要:1.面向对象版tab 栏切换 1.1功能需求 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字可以修改里面的文字内容 1.2案例准备 获取到标题元素 获取到内容元素 获取到删除的小按钮 x 阅读全文
posted @ 2020-10-14 09:40 행운의소녀 阅读(121) 评论(0) 推荐(0) 编辑
摘要:一.表格 table(会使用) 目标: 理解: 能说出表格用来做什么的 表格的基本结构组成 应用: 能够熟练写出n行n列的表格 能简单的合并单元格​ 表格作用: 存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。 因为它可以让数据显示的非常的规整,可读性非 阅读全文
posted @ 2020-10-13 14:17 행운의소녀 阅读(151) 评论(0) 推荐(0) 编辑
摘要:认识WEB 1. 认识网页 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。 思考: 网页是如何形成的呢? 总结 网页有图片、链接、文字等元素组成,我们后面的任务就是要把这部分网页元素用代码写出来。。。 2. 浏览器(显示代码) 浏览器是网页显 阅读全文
posted @ 2020-10-13 14:04 행운의소녀 阅读(203) 评论(0) 推荐(0) 编辑
摘要:1. 代码开发工具(书写代码) 为了提高我们的开发效率 减少代码的出错我们不提倡用记事本开发,我们有更好的软件。 Dreamweaver SublimeText WebStorm HBuilder VScode 有人说: 普通青年 Dreamweaver 文艺青年 sublime 高手和傻子 用记事 阅读全文
posted @ 2020-10-13 13:35 행운의소녀 阅读(101) 评论(0) 推荐(0) 编辑
摘要:1.对象与类 1.1对象 对象是由属性和方法组成的:是一个无序键值对的集合,指的是一个具体的事物 属性:事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词) 1.1.1创建对象 //以下代码是对对象的复习 //字面量创建对象 var ldh = { nam 阅读全文
posted @ 2020-10-10 21:21 행운의소녀 阅读(112) 评论(0) 推荐(0) 编辑
摘要:1.面向过程与面向对象 1.1面向过程 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。 1.2面向对象 面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。 1.3面向过程与面向对象对比 面向过程面向对象 优点 性能比面向 阅读全文
posted @ 2020-10-10 21:09 행운의소녀 阅读(86) 评论(0) 推荐(0) 编辑
摘要:1. 综合案例: toDoList案例分析 1.1 案例:案例介绍 1. 文本框里面输入内容,按下回车,就可以生成待办事项。 2. 点击待办事项复选框,就可以把当前数据添加到已完成事项里面。 3. 点击已完成事项复选框,就可以把当前数据添加到待办事项里面。 4. 但是本页面内容刷新页面不会丢失。 1 阅读全文
posted @ 2020-10-09 21:46 행운의소녀 阅读(306) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 插件 ​ jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入 jQuery文件,因此也称为 jQuery 插件。 ​ jQuery 插件常用的网站: jQuery 插件库 http:// 阅读全文
posted @ 2020-10-08 22:57 행운의소녀 阅读(157) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 事件对象 ​ jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。 语法 element.on(events,[selector],function(event) {}) 阻止默认行为:event.p 阅读全文
posted @ 2020-10-08 22:46 행운의소녀 阅读(115) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 事件注册 ​ jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托,且无法实现事件解绑,需要借助其他方法。 语法 element.事件(function(){}) $(“d 阅读全文
posted @ 2020-10-08 22:40 행운의소녀 阅读(169) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 尺寸、位置操作 ​ jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下。 1.1. jQuery 尺寸操作 ​ jQuery 尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型。 语法  1.以上参数为空,则是获取相应 阅读全文
posted @ 2020-10-07 23:25 행운의소녀 阅读(211) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 元素操作 ​ jQuery 元素操作主要讲的是用jQuery方法,操作标签的遍历、创建、添加、删除等操作。 1.1. 遍历元素 ​ jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。 语法1 $("div").each(func 阅读全文
posted @ 2020-10-07 23:17 행운의소녀 阅读(286) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 文本属性值 ​ jQuery的文本属性值常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。 1.1 jQuery内容文本值 ​ 常见操作有三种:html() / text() / 阅读全文
posted @ 2020-10-07 23:05 행운의소녀 阅读(163) 评论(0) 推荐(0) 编辑
摘要:1.jQuery 属性操作 ​ jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href ,比如 <input> 元素里面的 type。 语法 1. 获 阅读全文
posted @ 2020-10-07 22:54 행운의소녀 阅读(136) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 效果 ​ jQuery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 划入画出:slideDown() / slideUp() / slideToggle() ; 淡入淡出:fadeIn() / fadeOut() 阅读全文
posted @ 2020-10-06 23:53 행운의소녀 阅读(170) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 样式操作 ​ jQuery中常用的样式操作有两种:css() 和 设置类样式方法 1.1. 方法1: 操作 css 方法 ​ jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。 ​ 常用以下三种形式 : // 1.参数只写属性名,则是返回属性值 阅读全文
posted @ 2020-10-06 23:33 행운의소녀 阅读(96) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 选择器 ​ 原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。 1.1. 基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可,但是要加引号 1.2. 层级选择器 ​ 层级选择器最常用的两个分别为 阅读全文
posted @ 2020-10-06 23:25 행운의소녀 阅读(121) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 的基本使用 1.1 jQuery 的下载 ​ jQuery的官网地址: https://jquery.com/,官网即可下载最新版本。 各个版本的下载:https://code.jquery.com/ ​ 版本介绍: 1x :兼容 IE 678 等低版本浏览器, 官网不再更新 2 阅读全文
posted @ 2020-10-06 23:23 행운의소녀 阅读(94) 评论(0) 推荐(0) 编辑
摘要:1. jQuery 介绍 1.1 JavaScript 库 ​ JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。 简单理解: 阅读全文
posted @ 2020-10-06 23:20 행운의소녀 阅读(121) 评论(0) 推荐(0) 编辑
摘要:1. 本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。 1.1.本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,sessionS 阅读全文
posted @ 2020-10-05 23:18 행운의소녀 阅读(156) 评论(0) 推荐(0) 编辑
摘要:1.移动端常用开发框架 1.1. 移动端视频插件 zy.media.js 框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。 插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小。 前端常用的框架 阅读全文
posted @ 2020-10-05 23:14 행운의소녀 阅读(155) 评论(0) 推荐(0) 编辑
摘要:1. 移动端常用开发插件 1.1. 什么是插件 移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢? JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点:它一般是为了解决某个问题而专门存在,其功能单一 阅读全文
posted @ 2020-10-05 23:12 행운의소녀 阅读(114) 评论(0) 推荐(0) 编辑
摘要:click 延时解决方案 移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案: ​ 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" cont 阅读全文
posted @ 2020-10-05 23:08 행운의소녀 阅读(136) 评论(0) 推荐(0) 编辑
摘要:1.案例:返回顶部 当页面滚动某个地方,就显示,否则隐藏 点击可以返回顶部 2.案例分析 滚动某个地方显示 事件:scroll页面滚动事件 如果被卷去的头部(window.pageYOffset )大于某个数值 点击,window.scroll(0,0) 返回顶部 // 返回顶部模块制作 var g 阅读全文
posted @ 2020-10-05 23:05 행운의소녀 阅读(129) 评论(0) 推荐(0) 编辑
摘要:1. 移动端常见特效 1.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致。 可以自动播放图片 手指可以拖动播放轮播图 1.2. 案例分析: 自动播放功能 开启定时器 移动端移动,可以使用translate 移动 想要图片优雅的移动,请添加过渡效果 // 1. 获取元素 var focus 阅读全文
posted @ 2020-10-05 23:02 행운의소녀 阅读(181) 评论(0) 推荐(0) 编辑
摘要:1触屏事件 1.1. 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可 阅读全文
posted @ 2020-10-04 22:50 행운의소녀 阅读(103) 评论(0) 推荐(0) 编辑
摘要:案例:筋头云案例 利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可 鼠标离开某个小li,就把目标值设为 0 如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置 <script> window.addEv 阅读全文
posted @ 2020-10-04 22:46 행운의소녀 阅读(97) 评论(0) 推荐(0) 编辑
摘要:.案例:返回顶部 带有动画的返回顶部 此时可以继续使用我们封装的动画函数 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 页面滚动了多少,可以通过 window.pageYOffset 得到 最后是页面滚动,使用 window.scroll(x,y) <script> // 阅读全文
posted @ 2020-10-04 22:43 행운의소녀 阅读(163) 评论(0) 推荐(0) 编辑
摘要:1. 案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化。 ​ 4.点击小圆圈,可以播放 阅读全文
posted @ 2020-10-04 22:41 행운의소녀 阅读(275) 评论(0) 推荐(0) 编辑
摘要:1.动画函数封装 1.1. 动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置。 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 1 阅读全文
posted @ 2020-10-03 22:48 행운의소녀 阅读(127) 评论(0) 推荐(0) 编辑
摘要:1.mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样,就是因为mouseen 阅读全文
posted @ 2020-10-03 22:42 행운의소녀 阅读(194) 评论(0) 推荐(0) 编辑
摘要:1.元素滚动 scroll 系列 1.1. scroll 概述 scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.2. 页面被卷去的头部 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被 阅读全文
posted @ 2020-10-03 22:39 행운의소녀 阅读(188) 评论(0) 推荐(0) 编辑
摘要:1. 元素可视区 client 系列 1.1 client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2. 淘宝 flexible.js 源码分析 立即执行 阅读全文
posted @ 2020-10-03 22:34 행운의소녀 阅读(132) 评论(0) 推荐(0) 编辑
摘要:1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 offset 系列常用属 阅读全文
posted @ 2020-10-03 22:31 행운의소녀 阅读(265) 评论(0) 推荐(0) 编辑
摘要:1. JS执行机制 以下代码执行的结果是什么? console.log(1); setTimeout(function () { console.log(3); }, 1000); console.log(2); 以下代码执行的结果是什么? console.log(1); setTimeout(fu 阅读全文
posted @ 2020-10-02 10:06 행운의소녀 阅读(94) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示