何北木-优快云博客

原创 CSS3-其它特性

1. web字体和字体图标1.1 web字体概述：用户电脑上没有安装相应字体，强制让用户下载该字体（浏览器临时性自动下载网页编写者给定在CSS中的字体文件）步骤：提供需要生成字体的字体文件内容使用网络资源生成web字体,然后下载并解压到本地;如阿里巴巴icofont字体图标网站把解压的字体文件复制到,项目的font文件夹中把下载到的字体代码复制到css文件中 /*代码格式：*/ @font-face{ font-family:"字体名";

2020-11-27 02:47:13 349

原创 CSS3-弹性布局篇

1. flex弹性布局1.1 概述布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。别名：伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局1.2 布局原理flex 是 flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的

2020-11-27 02:45:27 877

原创 CSS3-过渡、变形、动画

1. 过渡在CSS3里使用 transition 可以实现补间动画（过渡效果）速写语法transition:要过渡的属性、花费时间、运动曲线、何时开始。/*如果有多组属性变化，用逗号隔开*/设置过渡属性名称transition-property :要过渡属性的名称（如width）设置过渡花费时间transition-duration :过渡花费的时间（默认是0,时间单位为s/秒）设置过渡时间曲线transition-timing-function :规定过渡效果的时间曲线默认是ea

2020-11-27 02:39:39 529

原创 CSS3-背景篇

1. 文本阴影text-shadowtext-shadow属性还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片现在有了css3可以直接使用 text-shadow属性来指定阴影这个属性可以有两个作用：产生阴影和模糊主体。这样在不使用图片时能给文字增加质感语法：text-shadow ：x轴偏移 y轴偏移模糊距离阴影颜色;// (必须)x、y轴取正负值如5px、-5px// (可选)模糊距离必须取正值如：5px// (可选)阴影颜色为色值，也可以是rgba透明色

2020-11-27 02:31:53 407

原创 CSS3-选择器篇

1. CSS3概述如同人类的的进化一样，CSS3是CSS2的进化版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷css当js用js当后台语言用2. CSS3现状浏览器支持程度差，需要添加私有前缀(移动端)a). -webkit- 谷歌(Google)b). -moz- 火狐(Firefox)c). -o- 欧鹏(Opera)d). -ms- IE(Internet Explorer)e). -khtml-

2020-11-27 02:12:20 201

原创 Node-Gulp模块篇

1. Gulp 是什么Gulp 是第三方模块Gulp 是基于node平台开发的前端构建工具，将机械化操作编写成任务，想要执行机械化操作时，执行一个命令行命令任务就能自动执行了实际上就是用机器替代手工，提高开发效率2. Gulp 能做什么项目上线时，将 HTML、CSS、JS文件压缩合并语法转换(es6、less…)公共文件抽离修改文件浏览器自动刷新3. Gulp 的使用下载： npm install gulp// gulp为库文件，把命令行路径切换至当前项目路径，gul

2020-11-21 13:21:45 211

原创 MongoDB-数据库篇

1. 关系型数据库和非关系型数据库1.1 关系型数据库关系：表就是关系，表与表之间存在关系所有的关系型数据库都需要通过 sql 语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约束：唯一的、主键、默认值、非空1.2 非关系型数据库非关系型数据库非常灵活有的非关系型数据库就是 key-value对2. MongoDB数据库概述MongoDB 是由c++语言编写的，是一个基于分布式文件存储的开源数据库系统MongoDB 是长的最像关系型数据库的非关系型数据

2020-11-21 13:20:49 289

原创 art-template-模板引擎篇

1. 概述art-template的GitHub仓库：https://github.comart-template的官方文档：https://github.com/aui/art-templateart-template 主要用于客户端art-template 模板引擎不仅可以在浏览器使用，也可以在node中使用模板引擎最早诞生于服务器领域，后来才发展到前端art-template 模板引擎，属于第三方模块2. art-template 的安装安装命令：npm install art-

2020-11-21 13:18:27 416

原创 Node-Express框架

1. 概述原生的 http系统模块在某些方面表现不足以应对我们的开发需求所以我们就需要使用框架来加快我们的开发效率框架的目的就是提高效率，让我们的代码更高度统一(每个人的原生代码写法都不一样)在 Node 中，有很多 Web 开发框架，我们这里以学习 Express 为主Express模块官网：http://expressjs.com2. Express模块下载在项目路径下 npm init -y // 生成 package.json 文件，有则无需重复生成 npm install

2020-11-21 13:17:24 670 2

原创 Node-服务端开发规范

1. 服务器端项目开发规范在服务端模块中把当前模块的所有依赖，都声明在文件模块的最上面为了让目录结构保持统一清晰，所以我们约定，把所有的 HTML 文件都放在 views(视图)目录中为了方便的统一处理静态资源，所以我们约定把所有的静态资源都存放在 public(公共)目录中静态资源包括css、img、js、lib、第三方包等文件在服务端中，需要被读取的静态资源文件的路径就不要写相对路径了，因为这个时候所有资源都是通过 url(资源定位符)来获取的，我们在服务端开放了静态资源目录/p

2020-11-21 13:16:10 588

原创 Ajax-应用篇

1. Ajax编程基础传统网站中存在的问题1. 网速慢的情况下，页面加载时间长，用户只能等待2. 表单提交后，如果一项内容不合格，需要重新填写所有表单内容3. 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间4. 以上问题都能被 Ajax 解决掉Ajax概述1. Ajax：标准读音（诶驾克斯）也被读作（阿假克斯）2. Ajax 就是浏览器提供的一套 API ，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验Ajax应用场景1. 页面上拉加载更多数据2. 列表

2020-11-20 19:55:07 298

原创 ES-ES6篇

1. ES6简介1.1 ES6概念ES全称是ECMAScript，它是由ECMA国际标准化组织，制定的一项脚本语言的标准化规范ES6是ES的全新一代标准也叫做ECMA6，于2015年发布ES6每年6月会更新一次，以年份命名版本ES2015、ES2016…ES5之后的版本统称ES6支持的浏览器和环境：IE10+、Chrome、FireFox、移动端、NodeJS1.2 为什么使用ES6每一次标准的诞生都意味着语言的完善，功能的加强。javaScript本身也有一些令人不满意地方ES6之

2020-11-20 19:53:48 838

原创 ES-函数进阶篇

1. 函数内的this指向this 的指向，是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同一般指向我们的调用者序号调用方式 this指向 1 普通函数调用 window 2 构造函数调用实例对象 3 对象方法调用该方法所属对象 4 事件绑定函数

2020-11-20 19:53:33 684

原创 ES-原型篇

1. 什么是原型?构造函数中有一个属性prototype,是原型,程序员使用的实例对象中有一个属性__proto__,是原型,浏览器使用的（不是很标准的）实例对象中的__proto__指向的就是该实例对象中的构造函数中的prototype构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用原型就是属性,而这个属性也是一个对象2. 原型的作用共享数据，节省内存空间1. 在构造函数中定义属性和方法,当实例化对象的时候,实例中的属性和方法都是在自己的空间中存在的2. 如

2020-11-20 19:52:17 487

原创 ES-对象篇

1. 对象1.1 什么是对象现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”在JS中：对象是一组无序的相关属性和方法的集合，所有事物都是对象，例如字符串、数值、数组、函数等对象是由属性和方法组成的。a. 属性：事物的特征，在对象中用属性来表示（常用名词）b. 方法：事物的行为，在对象中用方法来表示（常用动词）1.2 为什么需要对象保存一个值时，可以使用变量，保存

2020-11-20 19:52:03 716 1

原创 ES-函数篇

1. 函数的概念在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用JS中的函数函数就是封装一段可以重复使用的代码块。目的就是让大量代码重复使用2. 创建函数的三种方式自定义函数（命名函数）function fn() {}函数表达式（匿名函数）var fn = function () {}构造函数function Person (name, age) {

2020-11-19 12:13:37 1779

原创 ES-String篇

1 基本包装类型为了方便操作基本数据类型，JS还提供了三个特殊的引用类型：String、Number、Boolean基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法2. String的特性String是一个对象字符串可以看成是字符组成的数组,但是js中没有字符（char）类型字符是一个一个的,在别的语言中字符用一对单引号括起来在js中字符串可以使用单引号也可以使用双引号因为字符串可以看成是数组,所以,可以通过for循环进行遍历字符串特性:不可变性,

2020-11-19 12:13:11 1267

原创 ES-Date篇

1. Date(时间日期) 对象1.1 Date 概述作用：Date 对象用于处理日期和时间Date是一个构造函数，所以我们需要实例化之后才能使用1.2 创建Date对象创建对象语法：new Date()如果不传参数，获取到的是当前的时间也可以传指定的时间参数，格式为：a. 数字型：2020，07,7b. 字符串型：'2020-7-7 8::8:8'(推荐) var dt = new Date() // 获取的是当前的时间 var dt = new Date('2020-7

2020-11-19 12:12:50 1200

原创 ES-Math篇

1. 内置对象概述对象分为三种：自定义对象、内置对象、浏览器对象内置对象：JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）2. 查文档学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN、W3C来查询MDN：https://developer.mozilla.org/zh-CN/（推荐）W3C：https://www.w3school.com.cn/about/index.asp如何学习对象中的方

2020-11-19 12:12:40 2010

原创 ES-数组篇

1. 数组的概念存储一组有序的数据,数据类型可以不一样数组的作用:一次性存储多个数据数组元素:数组中存储的每个数据,叫数组元素,存储了5个数据,有5个数组元素数组的长度:数组的元素的个数,叫数组的长度（数组名.length）,数组的长度是可以改变的索引(下标):存储数组元素的编号,从0开始,到数组的长度-1结束，索引是用来存储和读取数组元素的遍历数组:通过循环的方式找到数组中的每个数据数组Array是内置对象2. 数组的定义方式通过构造函数定义数组 var arr = new A

2020-11-19 12:12:28 5608 2

原创 ES-流程语句篇

1. 流程控制概念：在一个程序执行过程中，各种代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解：流程控制就是来控制我们的代码什么结构顺序来执行。流程控制主要有三种结构：顺序结构、分支结构、循环结构，这三种结构代表三种代码执行的顺序。2. 顺序流程控制顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。3. 分支流程控制3.1 分支结构

2020-11-19 12:11:45 647

原创 ES-运算符篇

1. 运算符（操作符）运算符也被称作操作符，是用于实现赋值、比较和执行算数运算等功能的符号编号运算符描述 1 +、- 、* 、/ 、% 算术运算符 2 +=

2020-11-19 12:11:35 3039

原创 ES-复杂数据类型

1. 原始数据类型原始的数据类型：编号数据类型描述 1 Undefined 变量没有赋值那么它的值就是undefined 2 Null

2020-11-19 12:11:17 659

原创 ES-简单数据类型

1. 数据类型在计算机中，不同的数据所需占用的存储空间是不同的为了便于把数据分为所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型JS把数据类型分为两类：简单数据类型、复杂数据类型2. 简单数据类型（基本数据类型）简单数据类型也叫基本数据类型，基本类型的值在栈上序号数据类型默认值描述 1 Number 0 数字型，包含整数、小数 2 Bool

2020-11-19 12:10:44 1698

原创 JS-概述篇

1. JavaScript 历史作者：布兰登·艾奇（Brendan Eich，1961年~）布兰登·艾奇在1995年利用10天完成javaScript设计网警公司最初命名为LiveScript，后来在与Sun公司合作之后将其改名为javaScript2. JS 是什么javaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思）脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行现在也可以基于Node.js技术进行服务端

2020-11-19 12:09:09 227

原创 ES-变量篇

1. 什么是变量白话：变量就是一个装东西的盒子通俗：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。本质：变量是程序在内存中申请的一块用来存放数据的空间2. 变量的使用声明变量ver age// 1. var 是一个JS关键字，用来声明变量// 2. 使用该关键字声明变量后，计算机会自动为变量分配内存空间// 3. age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间赋值age = 10// 1. = 用来把右边的值赋给左边的变量空间中，此处

2020-11-18 16:23:46 426 1

原创 JS-浏览器篇

1. 浏览器Mosaic，是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于1993年问世。浏览器分为两个部分shell、内核shell 为用户看得到的及可以操作的部分内核处理代码，并且把代码完整显示出来的部分2. 主流浏览器主流浏览器的特点：在市场有一定的份额（大于3%)、具有独立研发的内核。浏览器内核：序号浏览器内核 1 IE trident

2020-11-18 16:16:09 456

原创 JS-计算机篇

1. 计算机组成2. 数据的存储计算机内部使用二级制 0 和 1 来表示数据所有的数据，包括文件、图片等最终都是以二进制数据（0和1）的形式存放在硬盘中所有的程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中硬盘、内存都是保存的二进制数据3. 数据存储单位bit < byte < kb < GB < TB ...位（bit）：1bit可以保存一个0或者1（最小的存储单位）字节（B

2020-11-18 16:13:54 650

原创 JS-编程基础篇

1. 什么是编程编程：就是计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令计算机：上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器等等2. 计算机语言计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介计算机语言的种类非常多，总的来说可以分成机器语言、汇编

2020-11-18 16:12:34 326

原创面向对象-类篇

1. 类class（ES6）在ES6中新增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类(class)。对象特指某一个，通过类实例化的一个具体的对象。2. 创建类语法：关键字类名{}如： class Star{}构造函数：constructor()方法是类构造函数，用于传递参数，返回实例对象。通过new命令生成对象实例时，自动调用该方法，如果没有定义，类内部会自动给我们创建一个constructor()构造函数中

2020-11-18 14:12:55 494

原创面向对象-概述篇

1. 面向过程（POP）就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步步实现，使用的时候一个一个依次调用就可以了。举个例子,将大象装冰箱分三步：开门、装进去、关门2. 面向对象（OOP）面向对象就是把事务分解成一个个对象，然后由对象之间分工合作举个例子,将大象装冰箱面向对象的做法：a). 大象对象进去方法()b). 冰箱对象开门方法() 关门方法()面向对象编程具有灵活、代码可复用、容易维护和开发的优点，适合多人合作的大型软件项目。3. 面向对象的特

2020-11-18 14:11:10 149

原创 jQuery-插件篇

1. jQuery插件概述因为有些功能不是所有人都需要使用，为了减小jQuery文件的大小，所以有些功能，另外封装了插件当需要的时候另外引入插件使用2. 懒加载 lazyload() 插件2.1 概述懒加载适用于长网页，图片较多，页面滚动条到了之后再加载图片，不用一打开网页就加载全部图片，节省网页加载时间2.2 使用先引入jQuery.js文件再引入jquery.lazyload.js文件使用插件：a. 把需要懒加载的img标签的src名称改成data-originalb. 给

2020-11-17 16:49:36 114

原创 jQuery-事件简述

1. 鼠标经过事件mouseover(函数) 此方法在鼠标经过其与其子元素的时候都会触发事件(缺点可能触发多次)mouseenter(函数) 此方法只在鼠标经过他自己的时候才会触发事件(触发一次，推荐使用)2. 鼠标离开事件mouseout(函数) 与 mouseover（鼠标经过事件）配对使用mouseleave(函数) 与 mouseenter （鼠标经过事件）配对使用3. 键盘事件keydown() 按键按下事件keyup() 按键抬起事件4. 注册事件on注册简

2020-11-17 15:01:19 249

原创 jQuery-方法篇

1. 操作样式的方法设置css单个样式：css("样式名","样式值")设置css多个样式：css({width:"100px",height:"50px"}) 样式名建议用驼峰式;获取css样式：css("样式名") 返回样式值为String类型注：隐式迭代：设置操作的时候会给jquery内部所有对象设置上相同的值。获取的时候：只会返回第一个元素对应的值2. 操作类的方法添加类：addClass("类名")移除类：removeClass("类名")判断类：has

2020-11-17 00:29:46 492

原创 jQuery-选择器篇

1. 什么是jQuery选择器jQuery选择器是jQuery提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。特点：jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器2. jQuery的基础选择器ID选择器：$('#id') 获取指定ID的元素类选择器：$('.class') 获取所有此类名元素标签选择器：$('div') 获取所有此标签元素并集选择器：$('div, p

2020-11-16 22:02:42 102

原创 jQuery-使用篇

1. jQuery 的使用jQuery 的下载：http://jquery.com/各个版本的下载地址：https://code.jquery.com/1. 版本： 1x：兼容IE678等低版本浏览器，官网不再更新 2x：不兼容IE678等低版本浏览器，官网不再更新 3x：不兼容IE678等低版本浏览器，是`官方主要更新维护的版本`引入jQuery文件 <script src="../jquery-1.12.4.js"></script>jQuery

2020-11-16 21:26:15 131

原创 jQuery-简述篇

1. JavaScript库javaScript库：是一个封装好的特定的集合（方法和函数）在这个库中封装了很多预先定义好的函数在里面，比如动画animate、hide、show、比如获取元素等简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能比如jQuery，就是为了快捷方便的操作DOM，里面基本都是函数（方法）常见的JavaScript库：jQuery、Prototype、YUI、Dojo、ExtJS、移动端的zepto，这些

2020-11-16 21:24:47 1412

原创 BOM-本地存储

1. 本地存储概述随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关的解决方案。2. 本地存储特性数据存储在用户的浏览器中设置、读取非常方便，甚至页面刷新不会丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify()编码后存储3. window.sessionStorage方式存储它的生命周期为关闭

2020-11-14 21:22:06 291

原创 BOM-三大系列篇

1. 元素偏移量offset系列1.1 offset概述offset 翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等1.2 offset 系列常用属性获取元素距定位父元素的偏移位置，返回不带单位的值（没有定位父元素，以body为准）a. 水平方向：element.offsetLeftb. 垂直方向：element.offsetTop获取元素大小（边框盒），返回值不带单位a. 宽度：element.offsetWidthb. 高度：ele

2020-11-14 21:20:49 468

原创 BOM-对象篇

1. window对象常见的事件窗口（页面）加载事件：window.onload// 1. 当文档内容（图像、脚本文件、CSS文件）完全加载完成会触发该事件，然后调用处理函数window.onload = function () {}// 或者window.addEventListener('load', function () {})DOM加载事件：document.DOMContentLoadeddocument.DOMContentLoaded = function() {}

2020-11-14 15:13:52 126

空空如也

空空如也