面向对象篇
面向对象编程介绍两大编程思想 面向过程 面向对象 面向过程编程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依 次调用就可以了。 举个例子：将大象装进冰箱，面向过程做法。 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 面向对象编程在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。 面向对象的特性： 封装性 继承性 多态性 面向过程和面向对象的对比面向过程 优点：性能比面向对象高，适合跟硬件联系很紧密 的东西，例如单片机就采用的面向过程编程。 缺点：没有面向对象易维护、易复用、易扩展 面向对象 优点：易维护、易复用、易扩展，由于面向对象有 封装、继承、多态性的特性，可以设计出低耦合的 系统，使系统 更加灵活、更加易于维护 缺点：性能比面向过程低 ES6 中的类和对象面向对象面向对象更贴近我们的实际生活, 可以使用面向对象描述现实世界事物. 但是事物分为具体的事物和抽象的事物 手机 是抽象的（泛指的），小米手机 ...
内置对象篇
内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等 查文档MDN学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C 来查询。 Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。 MDN: https://developer.mozilla.org/zh-CN 如何学习对象中的方法 查阅该方法的功能 查阅该方法的功能 查阅该方法的功能 通过 demo 进行测试 Math 对象Math 概述Math 对象不是构造函数， ...
函数篇
函数的概念在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。 虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 function getSum(a,b){ var sum=0 for(var i=a;i<=b;i++){ sum+=i } console.log(sum); } getSum(1,100) getSum(50,100) 声明的使用函数在使用时分为两步：声明函数和调用函数。 声明函数// 声明函数function 函数名() { //函数体代码} function 是声明函数的关键字,必须小写 由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数 ...
对象篇
对象什么是对象现实生活中，万物皆对象，对象就是一个具体的事物，看得见摸得着的实物。例如，一本书，一脸汽车，一个人可以是“对象”，一个数据库，一张网页，一个服务器也可称“对象”。 在javascript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如：字符串、数组、数值、函数。 对象是有属性和方法组成。 属性：事物的特征，在对象中用属性来表示。 方法：事物的行为，在对象中用方法来表示。 为什么需要对象保存一个值时，可以用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢 例如，将“张三”的个人信息保存在数组中的方式为 var arr = ['张三'，'男','30'，'176']; J s中的对象表达结构更清晰，更强大，张三的个人信息在对象中的表达结构如下 张三.姓名='张三';张三.性别=‘男';张三.年龄= 128;张三.身高=154 ;person . name =张三';person . sex =男';per ...
弹性布局
容器样式属性/*开启弹性布局首先在容器样式中写 display: flex;，以下样式才生效*/flex-direction:;flex-wrap:;flex-flow:;justify-content:;align-items:;align-content:; 容器样式属性的用法flex-direction用法flex-direction是设置主轴方向的，值为：row 行 | column: 列 /* 主轴方向默认x轴，y轴为交叉轴 */flex-direction:row ;/* 主轴方向设置为y轴 ，x轴则为交叉轴*/flex-direction: column;/*主轴为x轴，项目从右至左排列*/flex-direction: row-reverse;/*主轴为Y轴，项目从下至上排列*/flex-direction: column-reverse; flex-wrap用法flex-wrap:nowrap;flex-wrap: wrap;flex-wrap:wrap-reverse;/*nowrap为默认值不换行wrap为换行wrap-reverse 换行 第一行在最下面 ...
浮动篇
在前端开发中，使用float浮动常常让几个快级元素一行排列，不过浮动后会出现高度塌陷问题，以下是解决浮动带来的高度塌陷的问题。建议使用的清除浮动的四种方法。如下图所视，子元素使用浮动后，父元素没被撑开。 <div class="box"> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> </div> *{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 1200px; border: 1px solid red; } .box>div{ width: 150px; ...
