【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。

从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。

JavaScript 基础知识 - 入门篇(一)

JavaScript 基础知识 - 入门篇(二)

JavaScript 基础知识 - DOM篇(一)

JavaScript 基础知识 - DOM篇(二)

JavaScript 基础知识 - BOM篇

JavaScript 进阶知识 - 特效篇(一)

JavaScript 进阶知识 - 特效篇(二)

JavaScript 进阶知识 - Ajax篇

JavaScript 进阶知识 - 高级篇

jQuery 入门详解（一）

jQuery 入门详解（二）

HTML5 入门详解

CSS3 入门详解（一）

CSS3 入门详解（二）

three.js 入门详解(一)

three.js 入门详解(二)

---------------------------------------- 未完待续----------------------------------------

本篇文章主要讲的是js最基础的知识点，从变量说起，到什么是数组，什么是函数...

JavaScript 基础知识 - 入门篇(一)

JavaScript 基础知识 - 入门篇(二)

1. 初识JS
    1.1 什么是JS语言
    1.2 JS的三个组成部分
    1.3 script 标签
    1.4 js中输入输出语句
    1.5 注释
2. 变量
    2.1 变量的声明与赋值
    2.2 变量的命名规则与规范
    2.3 交换两个变量的值
3. 数据类型
    3.1 如何查看数据类型
    3.2 Number 类型
    3.3 String 类型
    3.4. boolean 类型
    3.5 undefined类型与null类型
4. 简单数据类型转换
    4.1 转字符串类型
    4.2 转数值类型
    4.3 转布尔类型
5. JS小数运算精度丢失
    5.1 JS数字精度丢失的一些典型问题
    5.2 JS数字丢失精度的原因
    5.3 JS数字丢失精度的解决方案
6. 运算符
    6.1 一元运算符
    6.2 逻辑运算符
    6.3 运算符的优先级
7. 选择语句
    7.1 if..else语句
    7.2 switch..case
    7.3 三元运算符
8.循环语句
    8.1 while 循环
    8.2 do..while 循环
    8.3 for 循环
    8.4 break 和 continue
    8.5 循环语句练习
9. 数组
    9.1 创建数组
    9.2 数组的下标与长度
    9.3 数组的赋值与取值
    9.4 数组的遍历
    9.5 数组综合练习
10. 冒泡排序
    10.1 冒泡排序的思路
    10.2 按性能等级冒泡排序分3个等级
11. 函数
    11.1 函数的基础知识
    11.2 函数的声明与调用
    12.3 声明函数的两种方式
    11.4 函数的参数
    11.5 函数的返回值
    11.6 函数三要素
    11.7 文档注释
    11.8 函数综合练习
    11.9 函数的作用域
    11.10 预解析
    11.11 递归函数
    11.12 回调函数
12. 对象
    12.1 对象的基本概念
    12.2 创建对象
    12.2.1 通过构造函数创建
    12.2.2 通过对象字面量
    12.2.3 关于 this
    12.3 操作对象的属性
    12.3.1 "." 语法
    12.3.2 "[]"语法
    12.3.3 两种方法的区别
    12.4 遍历对象
    12.5 查看对象的类型
    12.6 批量创建对象
    12.7 值类型与引用类型
    12.8 基本包装类型
    12.9 伪数组(类数组)
    12.10 arguments 对象
    12.11 JSON 对象
13. 内置对象
    13.1 Math 对象
    13.2 Date对象
        13.2.1 创建一个日期对象
        13.2.2 日期格式化
        13.2.3 获取日期的指定部分
        13.2.4 时间戳
    13.3 Array 对象
        13.3.1 数组转换成字符串 join()
        13.3.2 数组的增删操作
        13.3.3 数组的翻转与排序
        13.3.4 数组的拼接与截取
        13.3.5 数组查找元素
        13.3.6 清空数组
        13.3.7 数组的综合练习
    13.4 String 对象
        13.4.1 字符串大小写转换的方法
        13.4.2 indexOf 查找指定字符串
        13.4.3 trim 去除空白
        13.4.4 slice 截取字符串
        13.4.5 substring 截取字符串
        13.4.6 字符串的 substr方法
        13.4.7 match 查找字符串
        13.4.8 replace 替换字符串
        13.4.9 split 切割字符串转为数组
    13.5 Array对象 与 String对象综合练习

认识什么是DOM，通过什么样的方法去对页面元素进行增删改查...

JavaScript 基础知识 - DOM篇(一)

JavaScript 基础知识 - DOM篇(二)

1. DOM 基本概念
2. 查找 DOM 对象
    2.1 根据id获取元素
    2.2 根据标签名获取元素
3. 注册事件
    3.1 事件三要素
    3.2 注册事件的两种方式
    3.3 鼠标点击事件
    3.4 鼠标经过、离开事件
    3.5 表单获得、失去焦点事件
    3.6 其他触发事件汇总
4. 优雅降级和渐进增强
5. 属性操作
    5.1 普通标签属性
    5.2 表单属性操作
    5.3 标签自定义属性
        attribute系列
    5.4 排他思想(tab栏的主要思想)
    5.5 tab 栏切换
6. 标签内容
    6.1 innerHTML
    6.2 innerText
    6.3 innerText 的兼容性问题
7. 节点操作
    7.1 节点的属性
    7.2 节点层次
        7.2.1 孩子节点
        7.2.2 兄弟节点
        7.2.3 父节点
8. 样式操作
    8.1 样式操作注意点
    8.2 样式操作案例
9. 动态创建元素
    9.1 克隆节点
    9.2 添加节点
        9.2.1 appendChild
        9.2.2 insertBefore
    9.3 创建节点
        9.3.1 document.write(基本不用)
        9.3.2 innerHTML
        9.3.3 createElement
    9.4 删除节点
    9.5 动态创建元素综合练习

本篇最主要的知识点就是“定时器”，后面不管是动画还是轮播图特效都会用到定时器。

JavaScript 基础知识 - BOM篇

1. BOM 基本概念
2. window 对象
    2.1 window.onload
    2.2 window.open
    2.3 window.close
3. 定时器
    3.1 延时定时器
    3.2 间歇定时器
    2.3 定时器综合练习
4. Location对象
    4.1 常用的属性和方法
5. Navigator 对象
6. Screen 对象
7. History 对象
8. javascript 弹框
9. javascript Cookie

通过原生js实现动画，再去拓展一些特效：“轮播图”、“手风琴”...

JavaScript 进阶知识 - 特效篇(一)

JavaScript 进阶知识 - 特效篇(二)

1. offset 系列
    1.1 offsetWidth 和 offsetHeight
    1.2 offsetParent
    1.3 offsetLeft与offsetTop
2. 匀速动画框架
    2.1 匀速动画初体验
    2.2 匀速动画函数封装
3. 轮播图
    3.1 简单轮播图
    3.2 左右焦点轮播图
    3.3 无缝轮播图
    3.4 完整版轮播图
4. 缓动动画框架
    4.1 缓动动画初体验
    4.2 缓动动画函数封装
    4.3 获取元素计算后的样式
    4.4 缓动动画修改多个样式
    4.5 缓动动画修复定时器bug
    4.6 缓动动画兼容其它样式属性
    4.7 缓动动画添加回调函数
5. 筋斗云案例
6. 右下角关闭广告案例
7. 手风琴案例
8. 旋转木马案例
9. 三大系列
    9.1 offset 系列
    9.2 scroll 系列
    9.3 client 系列
    9.4 screen 系列
    9.5 三大系列的区别
10. 事件对象
    10.1 事件对象的概述
    10.2 获取事件对象
    10.3 事件对象的常用属性
    10.4 pageX与pageY的兼容性
    10.5 案例：鼠标跟随
    10.6 案例：拖拽效果
    10.7 案例：放大镜
11. 注册事件
    11.1 on + 事件名称 方式
    11.2 addEventListener 方式
12. 事件冒泡和事件捕获
    12.1 事件冒泡
    12.2 阻止事件冒泡
    12.3 事件捕获
    12.4 事件流
    12.5 键盘事件
    12.6 案例：弹幕效果
13. 瀑布流
    14. 正则表达式
    14.1 创建正则表达式
    14.2 元字符
    14.3 正则内部类
    14.4 正则边界
    14.5 量词
    14.6 括号总结
    14.7 正则表达式综合案例
    14.8 正则补充知识点

简单介绍什么是服务器，并且教你怎么搭建一台本地运行的服务器，最后详细介绍Ajax的操作过程。

JavaScript 进阶知识 - Ajax篇

1. 服务器端技术基础
    1.1 服务器
    1.2 客户端
    1.3 软件开发架构
    1.4 网络基础
2. Web 服务器
    2.1 Web服务器的作用
    2.2 AMP 集成环境
    2.3 Web服务器软件的安装
    2.4 安装的建议与问题
    2.5 Wamp服务器的使用
    2.6 Wamp服务器的简单配置
3. HTTP传输协议
    3.1 请求报文
    3.2 响应报文
4. Ajax 编程
    4.1 Ajax的基本概念
    4.2 创建Ajax
    4.3 Ajax实现一个简单的聊天室
    4.4 复杂的数据格式介绍
    4.4.1 XML数据格式
    4.4.2 JSON数据格式
    4.5 Ajax代码的封装
5. jQuery中的Ajax操作
6. 模板引擎的使用
    6.1 模板引擎的使用步骤
    6.2 模板引擎的其他用法
    6.3 模板引擎原生语法
    6.4 案例：Ajax模拟请求json数据案例
    6.5 案例：Ajax提供数据实现瀑布流
7. Ajax请求模拟软件
8. 同源策略
    8.1 什么是同源策略
    8.2 同源策略的目的
    8.3 限制范围
9. 跨域
    9.1 JSONP
    9.2 WebSocket

本篇文章主要介绍的是js高级阶段的知识点，主要有：面向对象编程思想、原型、闭包、递归。函数的apply和call调用模式...

JavaScript 进阶知识 - 高级篇

1.异常处理
    1.1异常捕获
    1.2抛出异常
    1.3异常的传递机制
2.面向对象编程
    2.1 面向过程和面向对象的的对比
    2.2 面向对象编程举例
    2.3 面向对象的三大特性
    2.4 创建对象的方式
    2.5 面向对象案例
3.原型
    3.1 传统构造函数存在问题
    3.2 原型的概念
    3.3 原型的使用
    3.4 __proto__属性
    3.5 constuctor属性
    3.6 原型继承
4.原型链
    4.1 什么是原型链
    4.2 原型链的拓展
    4.3 属性的搜索原则
5.Object.prototype成员介绍
    5.1 constructor 属性
    5.2 hasOwnProperty 方法
    5.3 isPrototypeOf 方法
    5.4 propertyIsEnumerable 方法
    5.5 toString 和 toLocalString 方法
    5.6 valueOf 方法
6.静态方法和实例方法
7.作用域
    7.1 块级作用域
    7.2 词法作用域
    7.3 变量提升（预解析）
    7.4 作用域链
8.Function
    8.1 创建函数的几种方式
    8.2 Function 构造函数创建函数
    8.3 Function 的使用
    8.4 Function 的原型链结构
    8.5 完整的原型链
9.arguments对象
10. 函数的四种调用模式
    10.1 函数模式
    10.2 方法模式
    10.3 构造器模式
    10.4 上下文（借用方法）模式
    10.5 面试题分析
11.递归
    11.1 什么是递归
    11.2 化归思想
    11.3 递归练习
12. JS 内存管理
    12.1 内存生命周期
    12.2 垃圾回收
13. 闭包
    13.1 闭包的概念
    13.2 闭包模型
    13.3 闭包的使用
    13.4 闭包里的缓存
14. 沙箱模式
    14.1 沙箱模式的作用
    14.2 沙箱模式模型
    14.3 沙箱模式应用
    14.4 沙箱模式的说明
15. 工厂模式

虽然说jQuery的黄金时代已经过去了，但是不缺乏一些公司还在使用，本篇作为一篇“速查字典”还是可以的。

jQuery 入门详解（一）

jQuery 入门详解（二）

1. jQuery基本概念
    1.1 什么是 jQuery？
    1.2 jQuery 的版本
    1.3 jQuery 初体验
    1.4 jQuery对象 和 DOM对象
    1.5 jQuery对象 和 DOM对象相互转换
2. jQuery 选择器
    2.1 基本选择器
    2.2 层级选择器
    2.3 过滤选择器
    2.4 表单选择器
    2.5 筛选选择器
    2.6 几个小案例
3. jQuery 节点操作
    3.1 查找节点
    3.2 创建节点
    3.3 添加节点
    3.4 删除节点
    3.5 克隆节点
    3.6 替换节点
    3.7 包裹节点
    3.8 遍历节点
    3.9 节点操作案例
4. jQuery 属性操作
    4.1 attr 操作
    4.2 prop 操作
    4.3 属性操作案例
5. jQuery 样式操作
    5.1 css 操作
    5.2 class 操作
    5.4 常见的样式
    5.5 关于元素定位的常用方法
    5.6 样式操作案例
6. jQuery 设置和获取HTML、文本和值
    6.1 html()方法
    6.2 text()方法
    6.3 val()方法
7. jQuery 里的事件机制
    7.1 加载 DOM
    7.2 事件绑定
    7.3 合成事件
    7.4 事件冒泡
    7.5 事件对象的属性
    7.6 移除事件
    7.7 模拟操作
    7.8 事件委托
    7.9 其他用法
8. jQuery 动画
    8.1 show()方法 和 hide()方法
    8.2 fadeIn()方法 和 fadeOut()方法
    8.3 slideUp()方法 和 slideDown()方法
    8.4 自定义动画方法 animate()
    8.5 其他动画方法
    8.6 jQuery 动画案例
9. jQuery 里的 Ajax 操作
    9.1 load()方法
    9.2 $.get()方法和$.post()方法
    9.3 $.ajax()方法
    9.3 jQuery中的serialize和serializeArray方法
10. jQuery 插件的使用
    10.1 颜色插件-jQuery.color.js
    10.2 懒加载插件- jquery.lazyload.js
    10.3 jQuery UI 插件
    10.4 jQuery自定义插件
    10.5 jQuery自定义插件-瀑布流插件

介绍了新增的一些特性，一些操作音频视频的API，以及网络状态、地理位置和WEB存储。

HTML5 入门详解

1. 认识HTML5
2. 语法规范
3. 语义化标签
4. HTML5 浏览器支持
5. 表单
    5.1 表单控件
    5.2 表单元素
    5.3 表单属性
    5.4 表单事件
    5.5 表单样式
6. 多媒体标签
    6.1 音频
    6.2 视频
    6.3 音频/视频方法
7. DOM 扩展
    7.1 获取元素
    7.2 类名操作
    7.3 自定义属性
8. 网络状态
9. 地理定位
    9.1 获取地理信息方式
    9.2 隐私
    9.3 使用地理定位
    9.4 百度地图的用法
10. WEB 存储
    10.1 特性
    10.2 方法详解
    10.3 sessionStorage
    10.4 localStorage
    10.5 差异性
11. 文件读取
12. 拖拽

css2的升级，添加了媒体查询、Flex布局、2D & 3D转换等新特性。

CSS3 入门详解（一）

CSS3 入门详解（二）

1.选择器
    1.1 属性选择器
    1.2 伪类选择器
    1.3 伪元素选择器
2. 颜色
    2.1 RGBA
    2.2 HSLA
    2.3 关于 CSS 的透明度
3. 文本阴影
4. 盒模型
5. 边框
    5.1 边框圆角
    5.2 边框阴影
6. 背景
    6.1 background-size
    6.2 background-origin
    6.3 background-clip
    6.4 多背景
7. 渐变
    7.1 线性渐变
    7.2 径向渐变
8. 过渡
    8.1 帧动画
    8.2 补间动画
9. 2D转换
    9.1 位移
    9.2 缩放
    9.3 旋转
    9.4 倾斜
    9.5 矩阵
10. 3D 转换
    10.1 3D 坐标轴
    10.2 透视（perspective）
    10.3 3D呈现（transform-style）
    10.4 3D呈现案例：3D轮播图
    10.5 backface-visibility
11. 动画
    11.1 如何实现动画
    11.2 动画关键属性
    11.3 动画案例
12. 伸缩布局
    12.1 什么是伸缩布局
    12.2 基本概念
    12.3 flex-direction属性
    12.4 flex-wrap 属性
    12.5 flex-flow 属性
    12.6 justify-content 属性
    12.7 align-items 属性
    12.8 align-content 属性
    12.9 Order 属性
    12.10 flex-grow 属性
    12.11 flex-shrink 属性
    12.12 flex-basis 属性
    12.13 flex 属性
    12.14 align-self 属性

canvas的升级框架，功能更加强大。

three.js 入门详解(一)

three.js 入门详解(二)

1. 概述
    1.1 什么是WebGL？
    1.2 初识three.js
    1.3 前期准备
        1.3.1 下载地址
        1.3.2 目录结构
        1.3.3 配置开发环境
2. 开始使用Three.js
    2.1 渲染器(renderer)
    2.2 场景(scene)
    2.3 照相机(camera)
    2.4 创建一个物体
    2.5 渲染
    2.6 完整代码
3. Three.js功能概览
4. 照相机
    4.1 什么是照相机？
    4.2 正交投影和透视投影
    4.3 正交投影照相机
        4.3.1 参数介绍
        4.3.2 示例代码
    4.4 透视投影照相机
        4.4.1 参数介绍
        4.4.2 示例代码
5. 点、线、面
    5.1 3D世界的组成
    5.2 在Three.js中定义一个点
    5.3 点的操作
    5.4 绘制一条线段
    5.5 线条的深度理解
    5.6 绘制网格线
6. 几何形状
    6.1 基本几何形状
        6.1.1 立方体
        6.1.2 平面
        6.1.3 球体
        6.1.4 圆形
        6.1.5 圆柱体
        6.1.6 正四面体、正八面体、正二十面体
        6.1.7 圆环面
        6.1.8 圆环结
    6.2 文字形状
        6.2.1 下载使用
        6.2.2 参数介绍
        6.2.3 示例代码
    6.3 自定义形状
7. 材质
    7.1 基本材质
    7.2 Lambert 材质
    7.3 Phong材质
    7.4 法向材质
    7.5 材质的纹理贴图
        7.5.1 单张图像应用于长方体
        7.5.2 六张图像应用于长方体
        7.5.3 棋盘
8. 网格
    8.1 创建网格
    8.2 修改属性
        8.2.1 材质
        8.2.2 位置、缩放、旋转
9. 动画
    9.1 实现动画效果
        9.1.1 动画原理
        9.1.2 setInterval方法
        9.1.3 requestAnimationFrame方法
    9.2 使用stat.js记录FPS
    9.3 弹球案例
10. 外部模型
    10.1 支持格式
    10.2 无材质的模型
    10.3 有材质的模型
        10.3.1 代码中设置材质
        10.3.2 建模软件中设置材质
11. 光与影
    11.1 环境光(AmbientLight)
    11.2 点光源(PointLight)
    11.3 平行光(DirectionalLight)
    11.4 聚光灯(SpotLight)
    11.5 阴影
补充问题
    本地服务器