javascript 简单复习

2026-02-03 10:33:35 +08:00 · 2022-04-18 20:40:34 +08:00
parent c030d40264
commit bb9110d289
54 changed files with 4123 additions and 0 deletions
--- a/JavaScript/12dom.md
+++ b/JavaScript/12dom.md
@@ -0,0 +1,18 @@
+# Dom 相关的常用的操作
+
+需要知道哪里可以查询到这些东西
+
+
+## 1 基础操作
+
+### 五种节点类型
+
+
+* 文档是一个文档节点。
+* 所有的HTML元素都是元素节点。
+* 所有 HTML 属性都是属性节点。
+* 文本插入到 HTML 元素是文本节点。are text nodes。
+* 注释是注释节点。
+
+
+### 创建操作
--- a/JavaScript/ecmascript-5/01.png
+++ b/JavaScript/ecmascript-5/01.png
--- a/JavaScript/ecmascript-5/02.png
+++ b/JavaScript/ecmascript-5/02.png
--- a/JavaScript/ecmascript-5/03.png
+++ b/JavaScript/ecmascript-5/03.png
--- a/JavaScript/ecmascript-5/04.png
+++ b/JavaScript/ecmascript-5/04.png
--- a/JavaScript/ecmascript-5/05.png
+++ b/JavaScript/ecmascript-5/05.png
--- a/JavaScript/ecmascript-5/06.png
+++ b/JavaScript/ecmascript-5/06.png
--- a/JavaScript/ecmascript-5/07.png
+++ b/JavaScript/ecmascript-5/07.png
--- a/JavaScript/ecmascript-5/08.png
+++ b/JavaScript/ecmascript-5/08.png
--- a/JavaScript/ecmascript-5/09.png
+++ b/JavaScript/ecmascript-5/09.png
--- a/JavaScript/ecmascript-5/10.png
+++ b/JavaScript/ecmascript-5/10.png
--- a/JavaScript/ecmascript-5/11.png
+++ b/JavaScript/ecmascript-5/11.png
--- a/JavaScript/ecmascript-5/12.png
+++ b/JavaScript/ecmascript-5/12.png
--- a/JavaScript/ecmascript-5/13.png
+++ b/JavaScript/ecmascript-5/13.png
--- a/JavaScript/ecmascript-5/14.png
+++ b/JavaScript/ecmascript-5/14.png
--- a/JavaScript/ecmascript-5/15.png
+++ b/JavaScript/ecmascript-5/15.png
--- a/JavaScript/ecmascript-5/16.png
+++ b/JavaScript/ecmascript-5/16.png
--- a/JavaScript/ecmascript-5/17.png
+++ b/JavaScript/ecmascript-5/17.png
--- a/JavaScript/ecmascript-5/18.png
+++ b/JavaScript/ecmascript-5/18.png
--- a/JavaScript/ecmascript-5/19.png
+++ b/JavaScript/ecmascript-5/19.png
--- a/JavaScript/ecmascript-5/20.png
+++ b/JavaScript/ecmascript-5/20.png
--- a/JavaScript/ecmascript-5/21.png
+++ b/JavaScript/ecmascript-5/21.png
--- a/JavaScript/ecmascript-5/22.png
+++ b/JavaScript/ecmascript-5/22.png
--- a/JavaScript/ecmascript-5/23.png
+++ b/JavaScript/ecmascript-5/23.png
--- a/JavaScript/ecmascript-5/24.png
+++ b/JavaScript/ecmascript-5/24.png
--- a/JavaScript/ecmascript-5/array.md
+++ b/JavaScript/ecmascript-5/array.md
@@ -0,0 +1,187 @@
+数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都有一个唯一的位置。这个位置用数字表示，叫做索引数据；用字符串表示，叫做关联数组。
+
+JavaScript 数组是无类型的：数组的元素可以是任何类型，例如字符串、数字值、布尔值等，而且每个数组中的不同元素可能是不同类型。
+
+JavaScript 数组是动态的：根据需要，可以动态地向数组插入新的元素，或者从数组中删除指定的元素。
+
+## 一维数组
+
+### 定义数组
+
+数组的最大作用就是用于存储多个值。定义数组分别两种形式:
+
+- 使用数组字面量方式:
+
+```javascript
+var arr1 = [ ];
+var arr2 = [ 1, "a", true ];
+```
+
+- 使用数组关键字方式:
+
+```javascript
+var arr1 = Array( );
+var arr2 = Array( 1, "a", true );
+```
+
+> **值得注意的是:** 在一个数组中的不同元素可以是不同数据类型。
+
+### 索引数组
+
+索引数组就是存储元素的位置使用数字值来表示，一般称之为下标或角标。具体创建方式如下述代码:
+
+```javascript
+var arr = [];
+arr[0] = 1;
+arr[1] = "a";
+arr[2] = true;
+```
+
+> **值得注意的是:** 索引数组的下标是从 0 开始的。
+
+### 关联数组
+
+关联数组就是存储元素的位置使用字符串来表示，一般称之为名称（name或key）。具体创建方式如下述代码:
+
+```javascript
+var arr = [];
+arr['num'] = 1;
+arr['str'] = "a";
+arr['bool'] = true;
+```
+
+> **值得注意的是:** 关联数组的名称（name或key）是字符串，必需使用单引号或双引号将其包裹。
+
+### 稀疏数组
+
+稀疏数组就是包含 0 开始的不连续索引的数组。具体创建方式如下述代码:
+
+```javascript
+var arr = Array( 10 );// 数组没有任何元素，数组的长度为 10
+
+var arr = [];// 创建一个空数组
+arr[100] = "a";// 向下标为 100 的位置添加一个元素 a
+```
+
+> **值得注意的是:** 上述代码中的第一行，并不是创建一个数组包含一个元素 10，而是创建一个不包含任何元素的数组长度为 10。
+
+### 数组的长度
+
+每个数组都有一个length属性，表示数组的长度。
+
+- 如果为非稀疏数组的话，length 属性的值表示当前数组包含元素的个数。
+
+```javascript
+var arr1 = [ 1, "a", true ];
+console.log( arr1.length );// 输出 3
+```
+
+- 如果为稀疏数组的话，length 属性的值大于当前数组包含元素的个数。
+
+```javascript
+var arr2 = [];
+arr2[14] = "a";
+console.log( arr2.length );// 输出 15
+```
+
+### 数组元素的读取
+
+数组的主要作用是用于存储和读取数据信息，之前已经对数组存储数据信息掌握了。下面来看看如何从数组中读取指定的元素:
+
+```javascript
+var arr = [ 1, "a", true];
+console.log( arr[1] );// 输出字符串 a
+
+var arr = [];
+arr['num'] = 1;
+arr['str'] = "a";
+arr['bool'] = true;
+
+console.log( arr['str'] );// 输出字符串 a
+```
+
+### 数组元素的修改
+
+不仅可以从数组中读取指定的元素，还可以根据需求修改数组中指定的元素值。
+
+```javascript
+var arr = [ 1, "a", true];
+console.log( arr[1] );// 输出字符串 a
+arr[1] = "b";
+console.log( arr[1] );// 输出字符串 b
+
+var arr = [];
+arr['num'] = 1;
+arr['str'] = "a";
+console.log( arr['str'] );// 输出字符串 a
+arr['str'] = "b";
+console.log( arr['str'] );// 输出字符串 b
+```
+
+### 数组元素的删除
+
+不仅可以根据需求修改数组中指定的元素值，也可以删除数组中指定的元素值。数组删除指定元素值使用 delete 关键字。
+
+```javascript
+var arr = [ 1, "a", true];
+delete arr[1];
+console.log( arr[1] );// 输出字符串 undefined
+```
+
+> **值得注意的是:** 上述代码使用 delete 关键字执行删除数组元素值的操作时，并不影响数组的长度。
+
+```javascript
+var arr = [ 1, "a", true];
+delete arr[1];
+console.log( arr.length );// 输出 3
+```
+
+### 遍历数组元素
+
+使用for语句是遍历数组元素最常见的方法:
+
+```javascript
+var arr = [ 1, "a", true];
+for( var i = 0; i < arr.length; i++ ){
+	console.log( arr[i] );
+}
+```
+
+也可以从数组的最后向前（倒序）进行遍历:
+
+```javascript
+var arr = [ 1, "a", true];
+for( var i = arr.length-1; i >= 0; i-- ){
+	console.log( arr[i] );
+}
+```
+
+### for in 语句
+
+在 ECMAScript 5 中新增了 for in 语句，同样也可以用于遍历数组:
+
+```javascript
+var arr = [ 1, "a", true];
+for( var i in arr ){
+	console.log( i + " : " + arr[i] );
+}
+```
+
+> **值得注意的是:**
+> 
+> - for 关键字后定义的变量 i 表示当前数组的下标。
+> - for in 语句不仅会遍历数组的所有元素，还有一些数组自带的属性。一般建议使用 for 语句进行数组遍历。
+
+for in 语句还可以用于遍历稀疏数组，循环的每次将一个有效元素返回。不存在的索引将不会遍历到:
+
+```javascript
+var arr = [];
+arr[100] = "a";
+for( var i in arr ){
+	console.log( i + " : " + arr[i] );
+}
+```
+
+## 二维数组
+
+数组是可以嵌套的，这就意味着一个数组可以作为一个元素被包含在另外一个数组里面。利用JavaScript 这个特点，创建二维数组，即数组的数组。
--- a/JavaScript/ecmascript-5/basics-grammar.md
+++ b/JavaScript/ecmascript-5/basics-grammar.md
@@ -0,0 +1,35 @@
+## 区分大小写
+
+JavaScript 是一种区分大小写的语言。这意味着 JavaScript 的关键字、变量名、函数名、以及任何其他的标识符必须使用一致的大小写形式。比如 atguigu、Atguigu 或 ATGUIGU 是不同的变量名。
+
+```javascript
+var jinyunlong = "jinyunlong";// 定义jinyunlong变量
+console.log(jinyunlong);// 打印jinyunlong变量
+var Jinyunlong = "Jinyunlong";// 定义Jinyunlong变量
+console.log(Jinyunlong);// 打印Jinyunlong变量
+var JINYUNLONG = "JINYUNLONG";// 定义JINYUNLONG变量
+console.log(JINYUNLONG);// 打印JINYUNLONG变量
+```
+
+> **值得注意的是:** 在 JavaScript 中定义变量名和函数名时应该特别注意。
+
+## 空格和换行
+
+JavaScript 会忽略出现在代码中的空格、制表符和换行符。
+
+由于可以自由地在代码中使用空格、制表符和换行符，所以采用整齐、一致的缩进来形成统一的编码风格，从而提高代码的可读性显得尤为重要。
+
+JavaScript 还可以识别水平制表符、垂直制表符、换页符等，JavaScript 将以下字符识别为行结束符：换行符、回车符、行分隔符、段分隔符等。回车符加换行符在一起被解析为一个单行结束符。
+
+## 可选的分号
+
+JavaScript 的语句一般是以一个分号作为结尾。当然，JavaScript 也允许忽略这个分号。如果省略分号，则由解释器确定语句的结尾，如下述代码：
+
+```javascript
+var sum = a + b// 即使没有分号也是有效的语句 —— 不推荐
+var diff = a - b;// 有效的语句 —— 推荐
+```
+
+> **值得注意的是:** 在 JavaScript 中，虽然语句结尾的分号不是必需的，但还是建议任何时候都不要省略。使用分号是一个非常好的编程习惯。
+
+## 注释
--- a/JavaScript/ecmascript-5/closer.md
+++ b/JavaScript/ecmascript-5/closer.md
@@ -0,0 +1,35 @@
+## 作用域链
+
+很多开发语言中都具有块级作用域，但 JavaScript 中并没有跨级作用域，这经常会导致理解上的困惑。如下示例:
+
+```javascript
+if( true ){
+	var color = "blue";
+}
+console.log( color );// blue
+```
+
+上述代码在 if 语句中定义了变量 color。但该变量的作用域是全局域，原因是 JavaScript 中没有块级作用域。
+
+虽然 JavaScript 没有块级作用域，但具有函数作用域。在某个函数内部定义的变量的作用域就是该函数作用域。
+
+```javascript
+function fun(){
+	var javascript = "this is javascript";
+}
+console.log( javascript );// 输出报错
+```
+
+上述代码在函数 fun 内部定义了变量 JavaScript，该变量的作用域是 fun 函数作用域。所以在全局域访问该变量时会出错。
+
+每一段 JavaScript 代码（全局代码或函数）都有一个与之关联的作用域链。这个作用域链是一个对象列表或链表，这组对象定义了这段代码“作用域中”的变量。如下示例:
+
+```javascript
+var a = 1; 
+// 在全局域中只能访问变量 a
+
+function f(){
+	// 在 f 函数作用域中可以访问变量 a 和 b
+	var b = 2;
+}
+```
--- a/JavaScript/ecmascript-5/data-type.md
+++ b/JavaScript/ecmascript-5/data-type.md
@@ -0,0 +1,196 @@
+在 JavaScript 代码中，能够表示并操作值的类型称之为**数据类型**。
+
+数据类型可分为可变类型和不可变类型。可变类型的值是可修改的，对象和数据就属于可变类型；不可变类型的值是不可修改的，数字、布尔值、null 和 undefined 都属于不可变类型。
+
+字符串可以看成由字符组成的数组，可能被误认为是可变的。但在 JavaScript 中，字符串的值是不可变的。
+
+![](03.png)
+
+## 原始类型
+
+原始类型，又称为原始值，是直接代表 JavaScript 语言实现的最底层的数据。
+
+原始类型分别为 boolean 类型、number 类型和 string 类型三种。当然，有些资料将undefined 和 null 也归为原始类型（这里表示为特殊类型）。
+
+声明变量并初始化值为原始类型，一般称之为字面量方式定义变量，也可以称之为直接量方式定义变量。
+
+## boolean 类型
+
+布尔（boolean）类型是指真或假、开或关、是或否。这个类型只有两个值：true 和 false。
+
+> **值得注意的是:**
+> 
+> - 由于 JavaScript 是区分大小写的，布尔类型的 true 和 false 全部是小写。
+> - JavaScript 也可以将其他类型的数据，自动转换为布尔类型。
+
+| 数据类型 | 转换为 true 的值 | 转换为 false 的值 |
+| --- | --- | --- |
+| boolean类型 | true | false |
+| string类型 | 任何非空字符串 | “”（空字符串）|
+| number类型 | 任何非零数字值（包括无穷大）| 0和NaN |
+| object类型 | 任何对象 | null |
+| undefined | | undefined |
+
+## number 类型
+
+number 类型是指数字，JavaScript 不区分整数类型和浮点类型。
+
+- 整数类型: 包括负整数、0和正整数等。
+- 浮点类型: 表示小数，JavaScript 中的所有数字均用浮点类型表示。
+
+> **值得注意的是:** 八进制或十六进制的数值最终会被转换成十进制数值。
+
+## 浮点类型
+
+浮点类型，就是指该数值包含整数部分、小数点和小数部分。
+
+```javascript
+var floatNum1 = 0.1;
+var floatNum2 = .1;// 有效，但不推荐
+```
+
+> **值得注意的是:**
+> 
+> - JavaScript允许小数点前可以没有整数，但不推荐这种写法。
+> - 保存浮点类型需要的空间是保存整数类型的两倍。
+> - 如果小数点后面没有任何数字，那这个数值作为整数类型保存。
+
+```javascript
+var floatNum3 = 1.;// 小数点后面没有数字 —— 解析为 1
+var floatNum4 = 10.0;// 整数 —— 解析为 10
+```
+
+### 四舍五入误差
+
+整数有无数个，但JavaScript通过浮点类型只能表示有限的个数（确切地说是 18 437 736 874 454 810 627个）。也就是说，当在JavaScript中使用浮点类型时，常常只是真实值的一个近似表示。如下述代码:
+
+```javascript
+var x = .3 - .2;
+var y = .2 - .1;
+x == y;// 值为false，表示两值不相等
+x == .1;// 值为false，.3-.2 不等于 .1
+y = .1;// 值为true，.2-.1 等于 .1
+```
+
+> **值得注意的是:** 建议使用大整数表示金额。例如使用分作为单位，而不是使用元作为单位。
+
+### NaN
+
+NaN（Not a Number），即非数值，是一个特殊的数值。
+
+特点:
+
+- 任何涉及NaN的操作都会返回NaN。
+- NaN与任何值都不相等，包括NaN本身。
+
+> **值得注意的是:** 针对上述特点，JavaScript提供了isNaN( )函数。该函数用于判断计算结果是否为数值。
+
+```javascript
+console.log(isNaN(10));// 输出false（10是一个数值）
+console.log(isNaN("10"));// 输出false（可以被转换成数值 10）
+console.log(isNaN("blue"));// 输出true（不能转换成数值）
+console.log(isNaN(true));// 输出false（可以被转换成数值 1）
+```
+
+## string 类型
+
+string 类型用于表示由零或多个 16 位 Unicode 字符组成的字符序列，被称之为字符串。字符串可以由双引号（"）或单引号（'）表示。
+
+```javascript
+var firstString = "Nicholas";
+var secondString = 'Zakas';
+```
+
+string类型包含一些特殊的转义字符，用于表示非打印字符。
+
+| 转义字符 | 含义 |
+| --- | --- |
+| \n | 换行符 |
+| \t | 制表符 |
+| \b | 退格符 |
+| \r | 回车符 |
+| \f | 换页符 |
+| \\ | 斜杠 |
+| \' | 单引号（'），在用单引号表示的字符串中使用。|
+| \" | 双引号（"），在用双引号表示的字符串中使用。|
+
+## typeof 运算符
+
+由于 JavaScript 是弱类型/松散类型的，因此需要有一种手段来检测给定变量的数据类型。typeof 运算符就是负责提供这方面信息，如下述代码:
+
+```javascript
+var message = "this is message";
+console.log(typeof message);// 输出 string
+console.log(typeof(message));// 输出 string
+```
+
+> **值得注意的是:** typeof 运算符加上圆括号，会像是函数，而不是运算符，并不建议这种写法。
+
+| 值 | 类型 |
+| --- | --- |
+| true或false | boolean |
+| 任意数字或NaN | number |
+| 任意字符串 | string |
+| null | object |
+
+## 包装类型
+
+### 包装类型概述
+
+在 JavaScript 中，对应原始类型提供了包装类型。通过包装类型可以创建原始类型的对象（后面的课程学习）。
+
+由于 JavaScript 是区分大小写的，从写法上来说，原始类型是全部小写，包装类型则是全部大写。
+
+一般不建议使用包装类型定义对应的数据类型，但包装类型提供了操作相应值的方法。
+
+> **值得注意的是:** 包装类型涉及到对象的概念，具体技术内容会在后面的课程学习。
+
+### Boolean 类型
+
+Boolean 类型是原始类型 boolean 类型对应的包装类型。
+
+```javascript
+var bool = new Boolean(true);
+```
+
+boolean 类型与 Bollean 类型的区别:
+
+- typeof 运算符对原始类型返回 "boolean"，而对包装类型为 "object"。
+- instanceof 运算符测试 Boolean 类型返回 true，而测试 boolean 类型返回 false。
+
+> **值得注意的是:** 不建议使用 Boolean 类型。
+
+### Number 类型
+
+Number 类型是原始类型 number 类型对应的包装类型。
+
+```javascript
+var num = new Number(10);
+```
+
+number 类型与 Number 类型的区别:
+
+- typeof 运算符对原始类型返回 "number"，而对包装类型为 "object"。
+- instanceof 运算符测试 Number 类型返回 true，而测试 number 类型返回 false。
+
+> **值得注意的是:** 不建议使用 Number 类型。
+
+### String 类型
+
+String 类型是原始类型 string 类型对应的包装类型。
+
+```javascript
+var str = new String("hello world");
+```
+
+string 类型与 String 类型的区别:
+
+- typeof 运算符对原始类型返回 "string"，而对包装类型为 "object"。
+- instanceof 运算符测试 String 类型返回 true，而测试 string 类型返回 false。
+
+> **值得注意的是:** 不建议使用 String 类型。
+
+### instanceof 运算符
+
+instanceof 运算符的左操作数是一个包装类型的变量，右操作数是对应的数据类型。如果左侧的变量是右侧的数据类型，则表达式返回 true；否则返回 false。例如下述代码:
+
--- a/JavaScript/ecmascript-5/function-object.md
+++ b/JavaScript/ecmascript-5/function-object.md
@@ -0,0 +1,30 @@
+## 函数与 Function 对象
+
+函数是这样的一段 JavaScript 代码，它只定义一次，但可能被执行或调用多次。
+
+Function 类型是 JavaScript 提供的引用类型之一，通过 Function 类型创建 Function 对象。
+
+在 JavaScript 中，函数也是以对象的形式存在的。每个函数都是一个 Function 对象。
+
+函数名，本质就是一个变量名，是指向某个 Function 对象的引用。
+
+## 构造函数
+
+在 JavaScript 中，函数除了可以通过函数定义语句或字面量表达式两种方式定义之外，还可以通过 Function 类型进行定义:
+
+```javascript
+var add = new Function(
+	"num1", 
+	"num2",
+	"var sum = num1+num2; return sum;"
+);
+```
+
+> **值得注意的是:** 通过 Function 类型定义函数的效率远不如通过函数定义语句或字面量表达式两种方式定义。
+
+目前，定义函数具有三种方式，这三种方式之间存在一定差别:
+
+| 定义方式 | 执行 | 效率 |
+| --- | --- | --- |
+| 函数定义语句 | 函数名被声明提前 | 不存在效率问题 |
+| 字面量表达式 | 函数体固定，无法动态执行 | 不存在效率问题 |
--- a/JavaScript/ecmascript-5/function.md
+++ b/JavaScript/ecmascript-5/function.md
@@ -0,0 +1,86 @@
+函数是这样的一段 JavaScript 代码，它只定义一次，但可能被执行或调用多次。
+
+简单来说，函数就是一组可重用的代码，你可以在你程序的任何地方调用他。
+
+例如下述代码:
+
+```javascript
+function fn(){
+	console.log("this is function");
+}
+```
+
+## 函数定义
+
+定义函数有两种方式:
+
+- 函数声明方式:
+
+```javascript
+function fn(){
+	console.log("this is function");
+}
+```
+
+- 字面量方式:
+
+```javascript
+var fun = fnction(){
+	console.log("this is function");
+}
+```
+
+## 函数调用
+
+定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。调用函数才会真正执行这些动作。
+
+- 定义一个函数fn:
+
+```javascript
+function fn(){
+	console.log("this is function");
+}
+```
+
+- 调用函数fn:
+
+```javascript
+fn();// 输出字符串 this is function
+```
+
+## 函数参数
+
+函数的参数就相当于在函数中使用的变量（虽然这个比方不是很准确）。JavaScript 中的函数定义并未制定函数参数的类型，函数调用时也未对传入的参数做任何的类型检查。
+
+函数的参数可以分为以下两种:
+
+- 形参: 出现在函数定义文法中的参数列表是函数的形式参数，简称形参 。简单来说，就是定义函数时使用的参数就是形参。
+- 实参: 函数调用时实际传入的参数是函数的实际参数，简称实参。 简单来说，就是调用函数时使用的参数就是实参。
+
+> **值得注意的是:** 一般情况下，形参与实参的个数是相同的。但在 JavaScript 中并不强求这一点，在特殊情况下，函数的形参和实参的个数可以不相同。 
+
+```javascript
+function fn( one, two ){
+	console.log( one + two );
+}
+fn( 1, 2 );// 输出 3
+```
+
+上述代码中，定义函数 fn 时，one 和 two 就是函数的形参；调用函数 fn 时，1 和 2 就是函数的实参。
+
+## return 语句
+
+函数还可以包含一个返回语句（return）。当然，这并不是必需的。return 语句使函数可以作为一个值来使用。具体用法如下述代码:
+
+```javascript
+function fn( msg ){
+	return "hello" + msg;
+}
+
+// 变量 fun 的值为 hello atguigu
+var fun = fn("atguigu");
+```
+
+> **值得注意的是:** return 默认情况下返回的是 undefined。
+
+## 预定义函数
--- a/JavaScript/ecmascript-5/inherit.md
+++ b/JavaScript/ecmascript-5/inherit.md
@@ -0,0 +1,53 @@
+## 原型链
+
+构造函数或构造器具有 prototype 属性，对象具有 `__proto__` 属性，这就是之前学习的原型。
+
+如果构造函数或对象 A ，A 的原型指向构造函数或对象 B，B 的原型再指向构造函数或对象 C，以此类推，最终的构造函数或对象的原型指向 Object 的原型。由此形成一条链状结构，被称之为原型链。
+
+按照上述的描述，在 B 中定义的属性或方法，可以直接在 A 中使用并不需要定义。这就是继承，它允许每个对象来访问其原型链上的任何属性或方法。
+
+原型链是 ECMAScript 标准中指定的默认实现继承的方式。
+
+原型链的示意结构图如下:
+
+![](20.png)
+
+### 原型链实现继承
+
+```javascript
+function A(){
+	this.name = "a";
+	this.toString = function(){return this.name};
+}
+function B(){
+	this.name = "b";
+}
+function C(){
+	this.name = "c";
+	this.age = 18;
+	this.getAge = function(){return this.age};
+}
+B.prototype = new A();
+C.prototype = new B();
+```
+
+上述代码实现的示意图如下:
+
+![](21.png)
+
+### 只继承于原型
+
+出于对效率的考虑，尽可能地将属性和方法添加到原型上。可以采取以下方式:
+
+- 不要为继承关系单独创建新对象。
+- 尽量减少运行时的方法搜索。
+
+根据上述方式进行更改后，代码如下:
+
+```javascript
+function A(){}
+A.prototype.name = "a";
+A.prototype.toString = function(){return this.name};
+
+function B(){}
+B.prototype = A.prototype;
--- a/JavaScript/ecmascript-5/javascript-introduce.md
+++ b/JavaScript/ecmascript-5/javascript-introduce.md
@@ -0,0 +1,55 @@
+## JavaScript 介绍
+
+### 什么是 JavaScript
+
+JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
+
+当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有 28.8kbps，验证步骤浪费的时间太多。于是 Netscape 的浏览器 Navigator 加入了 JavaScript，提供了数据验证的基本功能。
+
+JavaScript，一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给HTML网页增加动态功能。然而现在 JavaScript 也可被用于网络服务器，如 Node.js。
+
+### JavaScript发展历史
+
+- 在 1995 年由 Netscape (网景)公司推出 LiveScript。在此之前，没有所谓的前端技术。所有的处理都需要由服务器端进行操作。当时的目的是同时在客户端和服务器端使用。
+- 由 Netscape(网景)公司联合 SUN 公司完善 LiveScrip。此时， Netscape(网景)公司将 LiveScript 更名为 JavaScript。目的是利用 Java 语言的流行。
+- 微软在推出 IE3.0 时，使用了 JavaScript 的克隆版本，Jscript。
+- 在 1997 年，JavaScript 1.1 由欧洲计算机制造商协会定义。此举，只为 JavaScript 语言定制统一的语言版本。该全新版本的推出，更名为 ECMAScript。该版本由 Netscape、Sun、微软等共同定义。
+
+### JavaScript 组成部分
+
+- ECMAScript
+	- ECMAScript是一种脚本语言的标准，ECMA-262标准。
+	- 该标准不仅限于JavaScript语言使用，例如ActionScript语言中的标准也为ECMA-262标准。
+	- ECMAScript 描述了以下内容：语法、类型、语句、关键字、保留字、运算符和对象等。
+- BOM：全称： Browser Object Model，译为浏览器对象模型。
+- DOM：全称： Document Object Model，译为文档对象模型。
+
+## ECMAScript 介绍
+
+### 什么是 ECMAScript
+
+ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）通过 ECMA-262 标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展。
+
+### ECMAScript 发展历史
+
+- 1995 年 12 月 SUN 公司与 Netscape 公司一起引入了 JavaScript。
+- 1996 年 03 月网景通讯公司发表了支持 JavaScript 的网景导航者2.0。
+- 1996 年 08 月由于 JavaScript 作为网页的客户面脚本语言非常成功，微软将之引入了Internet Explorer 3.0，取名 JScript。
+- 1996 年 11 月网景通讯公司将 JavaScript 提交给欧洲计算机制造商协会进行标准化。
+- 1997 年 06 月 ECMA-262 的第一个版本被欧洲计算机制造商协会采纳。并将 ECMA-262 标准取名为 ECMAScript。
+
+## 如何使用 JavaScript
+
+可以在HTML页面中的任何位置，使用 `<script></script>` 标签来插入 JavaScript。
+
+> **值得注意的是:** 在 HTML 页面中的不同位置，插入 JavaScript。执行地效果各不相同（执行顺序是自上而下）。
+
+`<script>` 标签的属性说明:
+
+| 属性名 | 描述 |
+| --- | --- |
+| type | text/javascript，指定使用的脚本语言。|
+| language | JavaScript，也是指定使用的脚本语言。弃用！|
+| src | 载入外部JavaScript脚本代码（路径可以是绝对路径和相对路径）。|
+
+> **值得注意的是:** 如果编写 DOM 代码时，JavaScript 插入在 HTML 页面的位置是有区别的。
--- a/JavaScript/ecmascript-5/json.md
+++ b/JavaScript/ecmascript-5/json.md
@@ -0,0 +1,44 @@
+JSON 全称为 JavaScript Object Notation，译为 JavaScript 对象表示法。是一种轻量级的数据交换格式。
+
+官网地址： [http://www.json.org/json-zh.html](http://www.json.org/json-zh.html)
+
+JSON 易于开发者阅读和编写，也易于计算机解析和生成。它基于JavaScript Programming Language，Standard ECMA-262 3rd Edition - December 1999的一个子集。
+
+JSON 采用完全独立于语言的文本格式，被 Java、C#、C++、PHP、OC 等几乎所有主流语言所支持。
+
+JSON 作为一种轻量级的文本数据交换格式，已被广泛使用于存储和交换文本数据领域。
+
+## 语法规则
+
+JSON 构建于两种语法结构:
+
+- “名称 / 值”对的集合。在 JavaScript 中被解释为 对象。
+
+![](16.png)
+
+- 值的有序列表。在 JavaScript 中被解释为 数组。
+
+![](17.png)
+
+JSON 存储数据的类型可以是字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
+
+![](18.png)
+
+## JavaScript 中的 JSON
+
+JavaScript 中使用字符串（String）来表示 JSON 的两种结构。
+
+- “名称 / 值”对的集合。
+
+```javascript
+var jsonTxt = ' { 
+	"ename" : "Tom", 
+	"salary" : 3500,
+	"isMarried" : true
+} ';
+```
+
+- 值的有序列表。
+
+```javascript
+var jsonTxt =' [ "Tom", "Mary", "John" ] ';
--- a/JavaScript/ecmascript-5/object.md
+++ b/JavaScript/ecmascript-5/object.md
@@ -0,0 +1,159 @@
+JavaScript 中的对象，和其它编程语言中的对象一样，可以比照现实生活中的对象来理解它。 JavaScript 中对象的概念可以比照着现实生活中实实在在的物体来理解。
+
+在 JavaScript 中，一个对象可以是一个单独的拥有属性和类型的实体。拿它和一个杯子做下类比，一个杯子是一个对象，拥有属性。杯子有颜色、图案、重量等等。同样， JavaScript 对象也有属性来定义它的特征。
+
+方法 是关联到某个对象的函数，或者简单地说，一个方法是一个值为某个函数的对象属性。定义方法就象定义普通的函数，除了它们必须被赋给对象的某个属性。
+
+### 对象分类
+
+- 内置对象/原生对象
+
+就是 JavaScript 语言预定义的对象。在 ECMAScript 标准定义，由 JavaScript 解释器/引擎提供具体实现。
+
+- 宿主对象
+
+指的是 JavaScript 运行环境提供的对象。一般是由浏览器厂商提供实现（目前也有独立的 JavaScript 解释器/引擎提供实现），主要分为 BOM 和 DOM。
+
+- 自定义对象
+
+就是由开发人员自主创建的对象。
+
+## 创建对象
+
+### 对象初始化器方式
+
+使用对象初始化器也被称作通过字面值创建对象。通过对象初始化器创建对象的语法如下:
+
+```javascript
+var obj = {
+	property_1: value_1, // property_# 作为一个标示符
+	property_2: value_2, // 标示符可以是一个数字值
+	// ...,
+	"property_n": value_n // 标示符也可以是一个字符串
+}; 
+```
+
+- obj 是创建的对象名称。
+- 标示符和值都是可选的。
+
+### 构造函数方式
+
+- 通过 JavaScript 提供的预定义类型的构造函数来创建对象，如下示例:
+
+```javascript
+var date = new Date();// 创建一个 Date 对象
+var str = new String("this is string.");// 创建一个 String 对象
+var num = new Number(100);// 创建一个 Number 对象
+```
+
+- 通过 JavaScript 提供的 Object 类型的构造函数来创建自定义对象，如下示例:
+
+```javascript
+var obj = new Object();// 创建一个自定义对象
+```
+
+### Object.create() 方法
+
+Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。语法如下:
+
+```javascript
+Object.create(proto, [ propertiesObject ])
+```
+
+参数:
+
+- proto 参数: 一个对象，作为新创建对象的原型。
+- propertiesObject 参数: 可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符。
+
+通过 Object.create() 方法创建一个新对象，同时扩展自有属性:
+
+```javascript
+var flyer = {
+	name : "A380",
+	speed : 1000 
+}
+var plane = Object.create( flyer,{
+	capacity : { 
+		value : 555,
+		writable : true,
+		enumerable : true 
+	}
+});
+```
+
+Object.create() 方法的一些特殊用法:
+
+- 创建一个原型为 null 的空对象。
+
+```javascript
+var obj = Object.create( null );
+```
+
+- 实现子类型构造函数的原型继承父类型构造函数的原型。
+
+```javascript
+Sub.prototype = Object.create( Super.prototype );
+```
+
+- 创建普通空对象。
+
+```javascript
+var obj = Object.create( Object.prototype );
+// 等效于 var o = {}
+```
+
+## 对象的属性
+
+### 定义对象的属性
+
+一个 JavaScript 对象有很多属性。一个对象的属性可以被解释成一个附加到对象上的变量。对象的属性和普通的 JavaScript 变量基本没什么区别，仅仅是属性属于某个对象。
+
+- 可以通过点符号来访问一个对象的属性。
+
+```javascript
+var myCar = new Object();
+
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+```
+
+- JavaScript 对象的属性也可以通过方括号访问。对象有时也被叫作关联数组, 因为每个属性都有一个用于访问它的字符串值。
+
+```javascript
+var myCar = new Object();
+
+myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+```
+
+### 访问对象的属性
+
+- JavaScript 可以通过点符号来访问一个对象的属性。
+
+```javascript
+var emp = { ename : 'Tom', salary : 3500 };
+
+emp.ename = 'Tommy';// 修改属性的值
+console.log(emp.ename);// 获取属性的值
+```
+
+- JavaScript 对象的属性也可以通过方括号访问。
+
+```javascript
+var emp = { ename : 'Tom', salary : 3500 };
+
+emp[ 'ename' ] = 'Tony';// 修改属性的值
+console.log(emp[ "ename" ]);// 获取属性的值
+```
+
+### 遍历（枚举）属性
+
+JavaScript 提供了三种原生方法用于遍历或枚举对象的属性:
+
+- for…in 循环: 该方法依次访问一个对象及其原型链中所有可枚举的属性。
+
+```javascript
+var emp = { ename : 'Tom', salary : 3500 };
+
--- a/JavaScript/ecmascript-5/operator.md
+++ b/JavaScript/ecmascript-5/operator.md
@@ -0,0 +1,184 @@
+JavaScript 提供了一组用于操作数据值的运算符。
+
+- 算数运算符（+  -  *  /  %  ++  --）
+- 比较运算符（>  >=  <  <=  ==  !=  ===  !==）
+- 逻辑运算符（&&  ||  !）
+- 赋值运算符（=  +=  -=  *=  /=  %=  ）
+- 字符串连接运算符（+）
+- 三元运算符（? :）
+- 特殊运算符（typeof  instanceof  delete）
+
+## 算数运算符
+
+给定 A=20 B=10 条件，下述表格描述算数运算符:
+
+| 运算符 | 描述 | 例子 |
+| --- | --- | --- |
+| + | 两个运算数相加 | A + B = 30 |
+| - | 第一个运算数减去第二个运算数 | A – B = 10 |
+| * | 两个运算数相乘 | A * B = 200 |
+| / | 第一个运算数除以第二个运算数 | A / B = 2 |
+| % | 求余运算符，计算整除后的余数 | A % B = 0 |
+| ++ | 增量运算符，整数值逐次加 1 | A++ = 21 |
+| -- | 减量运算符，整数值逐次减 1 | A-- = 19 |
+
+算数运算符的基本操作比较简单，但下述情况需要特别注意:
+
+- 如果运算数中的一个或两个是字符串类型，JavaScript 会自动转换为数字值，再进行计算。
+- 如果运算数中的一个或两个是字符串类型，但其中的字符不是数字，JavaScript 会自动转换数字值失败，得到 NaN 结果。
+- 任何一个运算数是 NaN，结果都是 NaN。
+- 布尔值 false 和 true 会转换为 0 和 1 进行计算。
+
+### 求余运算符
+
+求余运算符，用于计算两个运算数整除后的余数。
+
+```javascript
+console.log( 10 % 3 );// 输出 1
+
+console.log( -10 % 3 );// 输出 -1
+
+console.log( 10 % -3 );// 输出 1
+
+console.log( -10 % -3 );// 输出 -1
+```
+
+### 自增运算符
+
+自增运算符，用于整数值逐次加 1。分别具有两种用法:
+
+- 前置型：自增运算符位于运算数之前。先加 1，再赋值。
+- 后置型：自增运算符位于运算数之后。先赋值，再加 1。
+
+```javascript
+var x = 3;
+console.log( x++ );// 输出 3
+console.log( x );// 输出 4
+
+var y = 3;
+console.log( ++y );// 输出 4
+console.log( y );// 输出 4
+```
+
+### 自减运算符
+
+自减运算符，用于整数值逐次减 1。分别具有两种用法:
+
+- 前置型：自增运算符位于运算数之前。先减 1，再赋值。
+- 后置型：自增运算符位于运算数之后。先赋值，再减 1。
+
+```javascript
+var x = 3;
+console.log( x-- );// 输出 3
+console.log( x );// 输出 2
+
+var y = 3;
+console.log( --y );// 输出 2
+console.log( y );// 输出 2
+```
+
+## 比较运算符
+
+给定 A=20 B=10条件，下述表格描述比较运算符:
+
+| 运算符 | 描述 | 例子 |
+| --- | --- | --- |
+| == | 检查两个运算数的值是否相等，如果相等则结果为 true | A == B 为 false |
+| != | 检查两个运算数的值是否不等，如果不等则结果为 true | A != B 为 true |
+| > | 检查左边运算数是否大于右边运算数，如果是则结果为 true | A > B 为 true |
+| >= | 检查左边运算数是否大于或等于右边运算数，如果是则结果为 true | A >= B 为 true |
+| < | 检查左边运算数是否小于右边运算数，如果是则结果为 true | A < B 为 false |
+| <= | 检查左边运算数是否小于或等于右边运算数，如果是则结果为 true | A <= B 为 false |
+
+### 全等与全不等
+
+| 运算符 | 描述 |
+| --- | --- |
+| === | 两个运算数的值相等并且类型相同时，结果为 true |
+| !== | 两个运算数的值不等或者类型不同时，结果为 true |
+
+```javascript
+var x = 10;
+var y = '10';
+
+console.log( x == y );// 输出 true
+console.log( x === y );// 输出 false
+console.log( x != y );// 输出 false
+console.log( x !== y );// 输出 true
+```
+
+### isNaN 函数
+
+isNaN() 函数用于判断其参数是否为 NaN（非数字值）。
+
+多用于检测使用类型转换函数进行数据类型转换后的结果是否为合法的数字值。
+
+> **值得注意的是:** NaN 与任何值（包括自身）进行比较，结果都是 false。不能使用 `==` 或者 `===` 运算符判断某个值是否是 NaN，而只能使用isNaN() 函数。
+
+```javascript
+console.log(isNaN(parseInt('123.45a')));// 输出 true
+
+console.log(isNaN('123.45a'));// 输出 true
+
+console.log(isNaN(Number('123.45a')));// 输出 true
+```
+
+## 逻辑运算符
+
+给定 A=20 B=10条件，下述表格描述比较运算符:
+
+| 运算符 | 描述 | 例子 |
+| --- | --- | --- |
+| `&&` | 逻辑与运算符。如果两个运算数都是 true，则返回 true | A && B 为 true |
+| `||` | 逻辑或运算符。如果两个运算数中任何一个是 true，则返回 true | A || B 为 true |
+| `!` | 逻辑非运算符。用于改变运算数的逻辑状态。如果逻辑状态为 true，则通过逻辑非运算符是逻辑状态改为 false | !(A && B) 为 false |
+
+### 逻辑与运算符
+
+| B1 | B2 | B1 && B2 |
+| --- | --- | --- |
+| false | false | false |
+| false | true | false |
+| true | false | false |
+| true | true | true |
+
+```javascript
+console.log( false && true );// 输出 false
+console.log( true && true );// 输出 true
+
+// 数字值 1 和 0 转换为布尔值 true 和 false
+console.log( 1 && 0 );// 输出 false
+
+// 空字符串转换为布尔值 false，非空字符串转换为布尔值 true
+console.log( "" && "atguigu" );// 输出 false
+```
+
+### 逻辑或运算符
+
+| B1 | B2 | B1 或 B2 |
+| --- | --- | --- |
+| false | false | false |
+| false | true | true |
+| true | false | true |
+| true | true | true |
+
+```javascript
+console.log( false || true );// 输出 true
+console.log( false || false );// 输出 false
+
+// 数字值 1 和 0 转换为布尔值 true 和 false
+console.log( 1 || 0 );// 输出 true
+
+// 空字符串转换为布尔值 false，非空字符串转换为布尔值 true
+console.log( "" || "atguigu" );// 输出 true
+```
+
+### 逻辑非运算符
+
+| B1 | !B1 |
+| --- | --- |
+| false | true |
+| true | false |
+
+```javascript
+console.log( !true );// 输出 false
--- a/JavaScript/ecmascript-5/prototype.md
+++ b/JavaScript/ecmascript-5/prototype.md
@@ -0,0 +1,93 @@
+在 JavaScript 中，函数是一个包含属性和方法的 Function 类型的对象。而原型（Prototype）就是 Function 类型对象的一个属性。
+
+在函数定义时就包含了 prototype 属性，它的初始值是一个空对象。在 JavaScript 中并没有定义函数的原型类型，所以原型可以是任何类型。
+
+原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数本身的属性和方法。
+
+```javascript
+function foo(a,b){
+	return a + b;
+}
+console.log( typeof foo.prototype );// object
+```
+
+## 获取原型
+
+通过如下两种方式可以获取对象的原型，从而设置共享的属性和方法:
+
+- 通过构造函数的 prototype 属性。
+
+```javascript
+function Person() {
+	console.log('Person instantiated');
+}
+console.log( Person.prototype );
+```
+
+- 通过 Object 对象的 getPrototypeOf( obj ) 方法。
+
+```javascript
+function Person() {
+	console.log('Person instantiated');
+}
+console.log( Object.getPrototypeOf( Person ) );
+```
+
+## 原型的属性和方法
+
+通过如下两种方式可以设置原型的属性和方法:
+
+- 原型的属性和方法单独进行定义。
+
+```javascript
+构造函数.prototype.属性名 = 属性值;
+
+构造函数.prototype.方法名 = function(){}
+```
+
+- 直接为原型定义一个新对象。
+
+```javascript
+构造函数.prototype = {
+	属性名 : 属性值,
+	方法名 : function(){}
+}
+```
+
+## 自有属性与原型属性
+
+- 自有属性: 通过对象的引用添加的属性。其它对象可能无此属性；即使有，也是彼此独立的属性。
+- 原型属性: 从原型对象中继承来的属性，一旦原型对象中属性值改变，所有继承自该原型的对象属性均改变。
+
+```javascript
+function Emp( ename, salary ){
+	this.ename = ename;
+	this.salary = salary;
+}
+Emp.prototype = { city : "北京市", dept : "研发部" }
+var emp1 = new Emp("Mary",3800);
+var emp2 = new Emp("Tom",3000);
+```
+
+上述代码的内存结构图如下:
+
+![](19.png)
+
+## 检测自有或原型属性
+
+- 使用 hasOwnPrototype() 方法检测对象是否具有指定的自有属性:
+
+```javascript
+function Hero(){}
+var hero = new Hero();
+
+console.log( hero.hasOwnPrototype("name") );
+```
+
+- 使用 in 关键字检测对象及其原型链中是否具有指定属性:
+
+```javascript
+function Hero(){}
+var hero = new Hero();
+
+console.log( "name" in hero );
--- a/JavaScript/ecmascript-5/reference-type.md
+++ b/JavaScript/ecmascript-5/reference-type.md
@@ -0,0 +1,146 @@
+引用类型通常被叫做类（class）。但在 ECMAScript 2015 版本之前的 JavaScript 中并没有类的概念，在 JavaScript 中通常叫做对象定义。
+
+也就是说，使用引用类型其实就是使用对象（该内容在后面的章节学习）。
+
+JavaScript 中预定义了很多的引用类型，其中包含之前学习的包装类型 Boolean、Number 和 String。
+
+下述列表罗列了 JavaScript 中所提供的引用类型:
+
+| 引用类型 | 说明 |
+| --- | --- |
+| Date类型 | 获取和设置当前日期时间。|
+| Math类型 | 用于数学计算。 |
+| Global类型 | 全局对象，提供全局属性和全局方法。|
+| Array类型 | 用于有序的存储多个值。|
+| RegExp类型 | 用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。|
+| Error类型 | 用于匹配代码错误并提供对应提示内容。|
+| Functions类型 | 用于定义 JavaScript 中的函数。|
+| Object类型 | 用于定义 JavaScript 中的对象。|
+
+### Date类型
+
+#### 创建 Date 对象
+
+JavaScript 中并没有提供日期的数据类型，而是通过 Date 对象的大量方法对日期和时间进行存储或操作。
+
+```javascript
+// 使用指定的年月日[时分秒]进行初始化
+var d1 = new Date(2008, 7, 8);
+var d2 = new Date(2008, 7, 8, 20, 18, 18);
+var d3 = new Date( '2008/8/8' ); // 把string转换为Date
+// 初始化为系统时间
+var d3 = new Date() 
+var d4 = new Date;
+var d5 = Date(); // 构建一个string，值为当前系统时间
+// 初始化为距离计算机元年指定毫秒数的时间 
+var d6 = new Date(0);
+var d7 = new Date( 1000*3600*24*365 ); 
+```
+
+#### 获取日期方法
+
+通过使用如下方法，获取日期和时间:
+
+| 方法 | 说明 |
+| --- | --- |
+| getDate( ) | 返回Date对象“日期”部分数值(1 ~ 31)。|
+| getDay( ) | 返回Date对象“星期”部分的数值(0 ~ 6)。 |
+| getFullYear( ) | 返回Date对象“年份”部分的实际数值。|
+| getHours( ) | 返回Date对象“小时”部分的数值(0 ~ 23)。|
+| getMilliseconds( ) | 返回Date对象“毫秒”部分的数值(0 ~ 999)。|
+| getMinutes( ) | 返回Date对象“分钟”部分的数值(0 ~ 59)。 |
+| getMonth( ) | 返回Date对象“月份”部分的数值(0 ~ 11)。|
+| getSeconds( ) | 返回Date对象“秒”部分的数值(0 ~ 59)。|
+| getTime( ) | 返回Date对象与UTC时间1970年1月1日午夜之间相差的毫秒数。|
+
+#### 设置日期方法
+
+通过使用如下方法，设置日期和时间:
+
+| 方法 | 说明 |
+| --- | --- |
+| setDate( ) | 设置Date对象中“日期”部分的数值(1 ~ 31，但不限于)。|
+| setFullYear( ) | 设置Date对象中“年份”部分的实际数值。|
+| setHours( ) | 设置Date对象中“小时”部分的数值(0 ~ 23，但不限于)。|
+| setMilliseconds( ) | 设置Date对象中“毫秒”部分的数值(0 ~ 999，但不限于)。|
+| setMinutes( ) | 设置Date对象中“分钟”部分的数值(0 ~ 59，但不限于)。|
+| setMonth( ) | 设置Date对象中“月份”部分的数值(0 ~ 11，但不限于)。|
+| setSeconds( ) | 设置Date对象中“秒”部分的数值(0 ~ 59，但不限于)。|
+| setTime( ) | 以毫秒值设置Date对象。|
+| setDate( ) | 设置Date对象中“日期”部分的数值(1 ~ 31，但不限于)。|
+
+#### 日期格式化方法
+
+通过使用如下方法，对日期和时间进行格式化:
+
+| 方法 | 说明 |
+| --- | --- |
+| toString() | 返回Date对象的字符串形式。|
+| toDateString() | 返回Date对象“日期”部分(年月日)的字符串形式。|
+| toTimeString() | 返回Date对象“时间”部分(时分秒)的字符串形式。|
+| toLocaleString() | 基于本地时间格式，返回Date对象的字符串形式。|
+| toLocaleDateString() | 基于本地时间格式，返回Date对象“ 日期”部分(年月日)的字符串形式。|
+| toLocaleTimeString() | 基于本地时间格式，返回Date对象“时间”部分(时分秒)的字符串形式。|
+| toGMTString() | 基于GMT时间格式，返回Date对象的字符串形式。|
+| toUTCString() | 基于UTC时间格式，返回Date对象的字符串形式。|
+
+### Math类型
+
+JavaScript 为保存数学公式和信息提供了一个公共位置，即 Math 对象。与直接编写的计算功能相比，Math 对象提供的计算功能执行起来要快得多。
+
+Math 对象是 JavaScript 中的一个全局对象，它并没有构造函数，而是直接使用 Math 对象名称即可。如下所示:
+
+```javascript
+var m = new Math();// 这种写法是错误的
+
+console.log( Math.PI );// 直接使用对象名调用属性
+console.log( Math.random() );// 直接使用对象名调用方法
+```
+
+#### Math 对象的属性
+
+Math 对象具有如下成员属性:
+
+| 属性 | 说明 |
+| --- | --- |
+| E | 返回算术常量 e，即自然对数的底数（约等于2.718）。|
+| LN2 | 返回 2 的自然对数（约等于0.693）。|
+| LN10 | 返回 10 的自然对数（约等于2.302）。|
+| LOG2E | 返回以 2 为底的 e 的对数（约等于 1.414）。|
+| LOG10E | 返回以 10 为底的 e 的对数（约等于0.434）。|
+| PI | 返回圆周率（约等于3.14159）。|
+| SQRT1_2 | 返回2 的平方根的倒数（约等于 0.707）。|
+| SQRT2 | 返回 2 的平方根（约等于 1.414）。|
+
+#### Math 对象的方法
+
+Math 对象具有如下方法:
+
+| 方法 | 说明 |
+| --- | --- |
+| abs(x) | 返回数的绝对值。|
+| ceil(x) | 对数进行上舍入。|
+| exp(x) | 返回 e 的指数。 |
+| log(x) | 返回数的自然对数（底为e）。|
+| floor(x) | 对数进行下舍入。|
+| max(x, y) | 返回 x 和 y 中的最高值。|
+| min(x, y) | 返回 x 和 y 中的最低值。|
+| pow(x, y) | 返回 x 的 y 次幂。|
+| round(x) | 把数四舍五入为最接近的整数。|
+
+#### 三角函数
+
+Math 对象提供了常见的三角函数计算的方法:
+
+| 方法 | 说明 |
+| --- | --- |
+| acos(x) | 返回数的反余弦值。|
+| asin(x) | 返回数的反正弦值。|
+| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。|
+| atan2(x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。|
+| cos(x) | 返回数的余弦。|
+| sin(x) | 返回数的正弦。|
+| tan(x) | 返回角的正切。|
+
+#### 随机数
+
--- a/JavaScript/ecmascript-5/regular-expression.md
+++ b/JavaScript/ecmascript-5/regular-expression.md
@@ -0,0 +1,121 @@
+正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式。
+
+正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如: 词语出现频率统计、验证字符串是否符合邮箱格式、屏蔽一篇帖子中的限制性词语等。
+
+![](23.png)
+
+### 创建正则表达式
+
+JavaScript 中没有正则表达式数据类型，创建正则表达式的语法如下:
+
+```javascript
+var expression = / pattern / attributes ;
+```
+
+参数:
+
+- pattern 参数: 被称为模式，可以是任何简单或复杂的正则表达式，包含字符类、限定符、分组、向前查找以及反响引用等。
+- attributes 参数: 被称为修饰符，用于标明正则表达式的行为。
+
+### 直接量字符
+
+正则表达式中的所有字母和数字都是按照字面含义进行匹配的。JavaScript 正则表达式语法也支持非字母的字符匹配，这些字符需要通过反斜线（\）作为前缀进行转义。
+
+| 字符 | 匹配 |
+| --- | --- |
+| 字母和数字 | 自身 |
+| \0 | 匹配 NULL 字符，不要在这后面跟其它小数。|
+| \t | 匹配一个水平制表符。|
+| \n | 匹配一个换行符。|
+| \v | 匹配一个垂直制表符。|
+| \r | 匹配一个回车符。|
+| \f | 匹配一个换页符。|
+| \xhh | 匹配带有两位小数代码（hh）的字符。|
+| \uhhhh | 匹配带有四位小数代码（hh）的字符。|
+| \cX | 当X是处于A到Z之间的字符的时候，匹配字符串中的一个控制符。当X是处于A到Z之间的字符的时候，匹配字符串中的一个控制符。例如，/\cM/ 匹配字符串中的 control-M (U+000D)。|
+
+在正则表达式中，许多标点符号具有特殊含义，如下:
+
+```
+^ $ . * + ? = ! : | \ / ( ) [ ] { } 
+```
+
+### 字符类
+
+将直接量字符单独放进方括号内就组成了字符类。一个字符类可以匹配它所包含的任意字符。由于某些字符类非常常用，JavaScript 的正则表达式中，使用特殊转义字符表示它们。
+
+| 字符 | 匹配 |
+| --- | --- |
+| […] | 一个字符集合。匹配方括号的中任意字符。你可以使用破折号（-）来指定一个字符范围。对于点（.）和星号（*）这样的特殊符号在一个字符集中没有特殊的意义。 |
+| [^…] | 一个反向字符集。|
+| . | （小数点）匹配除了换行符（\n）之外的任何单个字符。|
+| \w | 匹配一个单字字符（字母、数字或者下划线）。等价于[A-Za-z0-9_]。|
+| \W | 匹配一个非单字字符。等价于[^A-Za-z0-9_]。|
+| \s | 匹配一个空白字符，包括空格、制表符、换页符和换行符。|
+| \S | 匹配一个非空白字符。|
+| \d | 匹配一个数字。等价于[0-9]。|
+| \D | 匹配一个非数字字符。等价于[^0-9]。|
+| [\b] | 匹配一个退格. （不要和\b混淆了）|
+
+> **值得注意的是:** 在方括号之内也可以编写这些特殊转义字符。
+
+### 重复
+
+在 JavaScript 中的正则表达式用来描述任意多位的数字，或者描述由三个字母和一个数字构成的字符串时，可以使用字符重复的标记。
+
+| 字符 | 匹配 |
+| --- | --- |
+| {n,m} | n 和 m 都是正整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 这个值被忽略。|
+| {n} | n是一个正整数，匹配了前面一个字符刚好发生了n次。|
+| ? | 匹配前面一个字符0次或者1次，和{0,1}有相同的效果。|
+| + | 匹配前面一个字符1次或者多次，和{1,}有相同的效果。|
+| * | 匹配前一个字符0次或者是多次。|
+
+> **值得注意的是:** “*”和“?”可以匹配 0 个字符，允许什么都不匹配。
+
+### 选择、分组和引用
+
+正则表达式包括指定选择项、子表达式分组和引用前一子表达式的特殊字符。
+
+| 字符 | 匹配 |
+| --- | --- |
+| x|y | 匹配“x”或者“y”。|
+| (x) | 匹配“x”并且记住匹配项。这个被叫做捕获括号。|
+| (?:x) | 匹配“x”但是不记住匹配项。这种被叫做非捕获括号。|
+| \n | 当 n 是一个正整数，一个返回引用到最后一个与有n插入的正值表达式(counting left parentheses)匹配的副字符串。比如 /apple(,)\sorange\1/ 匹配"apple, orange, cherry, peach."中的'apple, orange,'。|
+
+### 指定匹配位置
+
+正则表达式中的多个元素才能够匹配字符串的一个字符，这些元素称之为正则表达式的锚。因为它们将模式定位在搜索字符串的特定位置上。
+
+| 字符 | 匹配 |
+| --- | --- |
+| ^ | 匹配输入的开始。如果多行标示被设置为true,同时匹配换行后紧跟的字符。|
+| $ | 匹配输入的结束，如果多行标示被设置为true,同时会匹配换行前紧跟的字符。|
+| \b | 匹配一个词的边界。一个词的边界就是一个词不被另外一个词跟随的位置或者不是另一个词汇字符前边的位置。|
+| \B | 匹配一个非单词边界。|
+| x(?=y) | 匹配“x”仅仅当“x”后面跟着“y”。这种叫做正向肯定查找。|
+| x(?!y) | 匹配“x”仅仅当“x”后面不跟着“y”,这个叫做正向否定查找。|
+
+### 修饰符
+
+正则表达式的修饰符，用于说明高级匹配模式的规则。修饰符是放在“/”符号后面的，JavaScript 支持三个修饰符。
+
+| 字符 | 匹配 |
+| --- | --- |
+| i | 不区分大小写搜索。|
+| g | 全局搜索。|
+| m | 多行搜索。|
+
+## RegExp 对象
+
+JavaScript 可以通过引用类型 RegExp 创建正则表达式对象，语法如下:
+
+```javascript
+var pattern =new RegExp( pattern, attributes );
+```
+
+参数:
+
+- pattern 参数: 被称为模式，可以是任何简单或复杂的正则表达式，包含字符类、限定符、分组、向前查找以及反响引用等。
+- attributes 参数: 被称为修饰符，用于标明正则表达式的行为。
--- a/JavaScript/ecmascript-5/scope.md
+++ b/JavaScript/ecmascript-5/scope.md
@@ -0,0 +1,54 @@
+变量和函数都具有作用域。作用域就是变量和函数的可被访问的范围，控制着变量和函数的可见性和生命周期。
+
+变量的作用域可被分为全局作用域和函数作用域（局部作用域）。如果变量是被定义在全局作用域的话，在 JavaScript 代码中的任何位置都可以访问该变量；如果变量是被定义在指定函数内部的话，在 JavaScript 代码中只能在该函数内访问该变量。
+
+函数的作用域也可被分为全局作用域和函数作用域（局部作用域）。被定义在指定函数内部的函数被称之为局部函数或内部函数。
+
+> **值得注意的是:** ECMAScript 6 之前的 JavaScript 没有语句块作用域。
+
+## 变量的作用域
+
+### 全局变量
+
+在所有函数之外声明的变量，叫做全局变量，因为它可被当前文档中的其他代码所访问。具体内容如下述代码所示:
+
+```javascript
+var msg = "this is message";// 定义全局变量 msg
+
+// 在全局作用域访问变量 msg
+console.log( msg );// 输出 this is message
+
+function fn(){
+	// 在函数作用域访问变量 msg
+	console.log( msg );// 输出 this is message
+}
+fn();
+```
+
+除了上述定义全局变量外，还有一种比较特殊的方式定义全局变量（具体用法如下述代码）。但这种特殊用法并不推荐！
+
+```javascript
+function fun(){
+	// 定义变量时没有使用关键字 var
+	msg = "this is message";
+	// 在函数作用域访问变量 msg
+	console.log( msg );// 输出 this is message
+}
+fun();
+
+// 在全局作用域访问变量 msg
+console.log( msg );// 输出 this is message
+```
+
+### 局部变量
+
+在函数内部声明的变量，叫做局部变量，因为它只能在该函数内部访问。具体用法如下述代码所示:
+
+```javascript
+function fun(){
+	// 定义局部变量 msg
+	var msg = "this is message";
+	// 在函数作用域访问变量 msg
+	console.log( msg );// 输出 this is message
+}
+fun();
--- a/JavaScript/ecmascript-5/special-function.md
+++ b/JavaScript/ecmascript-5/special-function.md
@@ -0,0 +1,51 @@
+## 匿名函数
+
+JavaScript 可以将函数作为数据使用。作为函数本体，它像普通的数据一样，不一定要有名字。默认名字的函数被称之为匿名函数。 如下示例:
+
+```javascript
+function (a){return a;}
+```
+
+匿名函数的两种用法:
+
+- 可以将匿名函数作为参数传递给其他函数。这样，接收方函数就能利用所传递的函数来完成某些事情。 
+- 可以定义某个匿名函数来执行某些一次性任务。 
+
+## 自调函数
+
+所谓自调函数就是在定义函数后自行调用。如下示例:
+
+```javascript
+(function(){
+	alert("javascript");
+})();
+```
+
+上述代码的含义如下:
+
+- 第一对括号，放置的是一个匿名函数。 
+- 第二对括号的作用，是“立即调用”。 
+
+自调函数只需将匿名函数的定义放进一对括号中，然后外面再跟一对括号即可。 
+
+自调函数也可以在调用时接收参数，如下示例:
+
+```javascript
+(function(name){
+	alert("hello " + name + "!");
+})("javascript");// hello javascript
+```
+
+上述代码的含义如下:
+
+- 第一个括号中的匿名函数接受一个参数。 
+- 第二个括号，在调用时，向匿名函数传递参数内容。 
+
+## 回调函数
+
+当一个函数作为参数传递给另一个函数时，作为参数的函数被称之为回调函数。
+
+```javascript
+function add(a, b){
+	return a() + b();
+}
--- a/JavaScript/ecmascript-5/statement.md
+++ b/JavaScript/ecmascript-5/statement.md
@@ -0,0 +1,176 @@
+在 JavaScript 中，语句使用分号（;）进行分隔。可以在每行编写一条语句，也可以在每行编写多条语句。
+
+分类:
+
+- 条件语句: JavaScript 解释器根据一个值判断是执行还是跳过指定语句。
+- 循环语句: JavaScript 解释器根据一个值判断是否重复执行指定语句。
+- 跳转语句: 使 JavaScript 解释器跳转到指定语句。
+
+> **值得注意的是:** 
+> 
+> - 建议每行编写一条语句，便于提高代码的阅读性。
+> - JavaScript解释器按照语句的编写顺序依次执行。
+
+### 语句块
+
+JavaScript 中使用一对花括号（{}）表示一个语句块。使用语句块为语句进行分组，这样使语句的结构清晰明了。如下述代码:
+
+```javascript
+{
+	var arguigu = "arguigu";
+	console.log(arguigu);
+}
+```
+
+> **值得注意的是:**
+> 
+> - 语句块的结尾不需要分号。
+> - 语句块中的行都有缩进，但并不是必需的。
+> - 语句中声明变量是全局变量（后面的课程学习）。
+
+### 空语句
+
+空语句允许包含 0 条语句，JavaScript 解释器执行空语句时，不会执行任何动作。空语句如下述代码:
+
+```javascript
+;
+```
+
+> **值得注意的是:** 如果有特殊目的使用空语句时，最好在代码中添加注释。这样可以更好地说明这条空语句是有用的。
+
+### 流程控制语句
+
+JavaScript 解释器按照语句的编写顺序依次执行，但也可以编写一些复杂的语句块，基本分为下述三种:
+
+![](04.png)
+
+## 条件语句
+
+条件语句就是指通过判断指定的计算结果，来决定是执行还是跳过指定的语句块。
+
+如果说 JavaScript 解释器是按照代码的“路径”执行的话，那条件语句就是这条路径上的分叉点，代码执行到这里时必须选择其中一条路径继续执行。
+
+JavaScript 提供了两种条件语句：if else 语句和 switch case 语句。
+
+### if 语句
+
+if 语句是条件判断语句，也是最基本的流程控制语句。
+
+![](05.png)
+
+```javascript
+var num = 5;
+if( num < 10 ){
+	console.log( num );
+}
+```
+
+> **值得注意的是:**
+> 
+> - if 关键字后面的小括号不能被省略。
+> - if 关键字后面的条件判断的结果必须是布尔值。如果结果为非布尔值的话，JavaScript 会自动转换为布尔值。
+> - if 语句中的大括号（{}）可以被省略，但建议编写，以提高代码阅读性。
+
+### if else 语句
+
+if else 语句是条件判断语句，但与 if 语句的执行流程并不相同。
+
+![](06.png)
+
+```javascript
+var score = 68;
+if( score < 60 ){
+	console.log("不及格");
+}else{
+	console.log("及格");
+}
+```
+
+> **值得注意的是:** if else 语句中的大括号（{}）可以被省略，但建议编写，以提高代码阅读性。
+
+### if else 语句嵌套
+
+if else 语句支持嵌套写法，也就是说，可以在 if 或 else 后面的语句块中继续编写 if else 语句。如下述代码:
+
+```javascript
+var score = 68;
+if( score > 90 ){
+	console.log("优秀");
+}else{
+	if( score >= 80 ){
+		console.log("良好");
+	}else{
+		console.log("一般");
+	}
+}
+```
+
+### else if 语句
+
+else if 语句是在 if 语句的基础上，允许提供多个条件判断。
+
+![](07.png)
+
+else if 语句实际上就是简化了的 if else 语句的嵌套写法。如下述代码:
+
+![](08.png)
+
+### switch case 语句
+
+switch case 语句是开关语句，但整体执行流程要比 if else 语句复杂的多。具体参考下述流程图:
+
+![](09.png)
+
+```javascript
+var num = 2;
+switch( num ){
+	case 1:
+		console.log("查询余额");
+		break;
+	case 2:
+		console.log("在线充值");
+		break;
+	default:
+		console.log("转人工服务");
+}
+```
+
+> **值得注意的是:** 在实际开发中，switch case 语句与 break 语句同时使用。
+
+switch case 语句相对于 if else 语句执行性能更优，但也有很多需要注意的地方。
+
+> **值得注意的是:**
+> 
+> - switch 关键字后面的小括号、case 关键字后面的冒号都不能被省略的。
+> - default 关键字只能出现在 switch case 语句的最后面（default 关键字后面不能再出现 case 关键字）。
+> - break 语句是跳出语句，一旦被执行，表示后面所有的 case 和 default 语句都不会被执行。
+
+## 循环语句
+
+循环语句是一系列反复执行到复合特定条件的语句。为了更好地理解循环语句，可以将 JavaScript 代码想象成一条条的分支路径。循环语句就是代码路径中的一个回路，可以让一段代码重复执行。
+
+![](10.png)
+
+### while 语句
+
+while 语句是一个基本循环语句，语法结构与 if 语句很类似。
+
+![](11.png)
+
+```javascript
+var num = 0;
+while( num < 10 ){
+	console.log( num );
+	num = num + 1;
+}
+```
+
+> **值得注意的是:**
+> 
+> - while 关键字后面的小括号不能被省略。
+> - while 关键字后面的条件判断的结果必须是布尔值。如果结果为非布尔值的话，JavaScript 会自动转换为布尔值。
+> - while 语句中的大括号（{}）可以被省略，但建议编写，以提高代码阅读性。
+
+### do while 语句
+
+do while 语句也是一个基本循环语句，执行流程与 while 语句很类似。
--- a/JavaScript/ecmascript-5/string.md
+++ b/JavaScript/ecmascript-5/string.md
@@ -0,0 +1,46 @@
+## 大小写转换
+
+String 对象提供如下方法，用于大小写转换。
+
+| 方法名 | 说明 |
+| --- | --- |
+| toUpperCase() | 把字符串转换为大写。|
+| toLowerCase() | 把字符串转换为小写。|
+
+```javascript
+var msg = 'Hello World';
+
+var lowerMsg = msg.toLowerCase();
+var upperMsg = msg.toUpperCase();
+
+console.log( msg );// Hello World
+console.log( lowerMsg );// hello world
+console.log( upperMsg );// HELLO WORLD
+```
+
+## 获取指定位置的字符
+
+String 对象提供如下方法，用于获取指定位置的字符。
+
+| 方法名 | 说明 |
+| --- | --- |
+| charAt() | 返回在指定位置的字符。|
+| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。|
+
+```javascript
+var str = "HELLO WORLD";
+
+console.log( str.charAt(2) );// L
+console.log( str.charCodeAt(0) );// 72
+```
+
+## 检索字符串
+
+String 对象提供如下方法，用于检索字符串。
+
+| 方法名 | 说明 |
+| --- | --- |
+| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。|
+| lastIndexOf() | 从后向前搜索字符串。|
+
+```javascript
--- a/JavaScript/ecmascript-5/variables-and-constants.md
+++ b/JavaScript/ecmascript-5/variables-and-constants.md
@@ -0,0 +1,81 @@
+## 变量
+
+### 什么是变量
+
+变量是存储数据信息的容器。
+
+变量被认为是有名字的容器。在代码中，使用变量名为值命名，需要遵守一定的规则。
+
+> **值得注意的是:** 
+> 
+> - 在 JavaScript 代码中，必须先声明一个变量，这个变量才能被使用。
+> - JavaScript 中的变量是弱类型的，也称之为松散类型的。所谓弱类型/松散类型就是可以用来保存任何类型的数据。
+
+```javascript
+var v = 100;
+v = "string";
+```
+
+### 变量的声明
+
+在 JavaScript 代码中，使用变量前应当先声明。变量是使用关键字 `var` 声明的。
+
+#### 只声明未初始化，变量的值自动取值为 undefined
+
+- 一行代码只声明一个变量:
+
+```javascript
+var sum;// 值为undefined
+var msg;// 值为undefined
+```
+
+- 一行代码声明多个变量
+
+```javascript
+var x, y, z;// 值为undefined
+```
+
+### 将变量的声明和初始化合写在一起
+
+- 一行代码只声明一个变量并赋值:
+
+```javascript
+var sum = 100;// 值为 100
+var msg = "this is message";// 值为 this is message
+```
+
+- 一行代码声明多个变量并赋值:
+
+```javascript
+var x = 0, y = 1, z = 2;
+```
+
+> **值得注意的是:** 等号（=）是赋值运算符。
+
+### 命名规则
+
+变量的命名需要遵守一定的规则的，具体规则如下:
+
+- 必须以字母、下划线（_）、美元符号（$）开始。
+- 不能以数字开头。
+- 不能使用关键字和保留字作为名称。
+- 由于 JavaScript 是区分大小写的，大写字母与小写字母并不冲突。
+- 名称最好有明确的含义。
+- 可以采用“下划线命名法”、“小驼峰命名法”或“大驼峰命名法” 之一，在开发团队内进行协调统一。
+
+### 声明的问题
+
+#### 重复的声明
+
+使用 `var` 语句重复声明变量是合法且无害的。但是如果重复声明并初始化的，这就表示重复声明并初始化。由于 JavaScript 变量只能存储一个数据，之前存储的数据会被覆盖。
+
+```javascript
+var msg = "this is message";// 值为 this is message
+var msg = 100;// 值为 100
+```
+
+#### 遗漏的声明
+
+- 直接读取一个没有声明的变量的值，JavaScript会报错。
+- 为一个没有声明的变量初始化，是合法的，但并不推荐这样使用。
+
--- a/JavaScript/index.html
+++ b/JavaScript/index.html
@@ -0,0 +1,25 @@
+<html>
+
+<head>
+
+</head>
+
+<body>
+    <div class="msg"></div>
+    <form id="my-form">
+        <div>
+            <label for="name">Name:</label>
+            <input type="text" id="name">
+        </div>
+        <div>
+            <label for="email">Email:</label>
+            <input type="text" id="email">
+        </div>
+        <ul id="users"></ul>
+        <input class="button" type="submit" value="Submit">
+    </form>
+    <script src="index.js"></script>
+
+</body>
+
+</html>
--- a/JavaScript/index.js
+++ b/JavaScript/index.js
@@ -0,0 +1,31 @@
+const my_form = document.querySelector('#my-form')
+const name_input = document.querySelector('#name')
+const email_input = document.querySelector('#email')
+const msg = document.querySelector('.msg')
+const user_list = document.querySelector('#users')
+
+my_form.addEventListener('submit',onsubmit);
+
+function onsubmit(e){
+    e.preventDefault();
+    if(name_input.value ==='' || email_input.value===''){
+        msg.classList.add('error')
+        msg.innerHTML='Please Enter all fields';
+        setTimeout(()=>{
+            msg.remove()
+        },3000) 
+        // setTimeout本质上是一个异步的方法，不会阻塞当前线程，而是开启一个线程，执行相关的访问，非常有用
+        // 可以用来检测任务执行的状态，动态修改当前任务执行的内容。
+    }
+    else{
+        // console.log('success')
+        const li  = document.createElement('li')
+        li.appendChild(document.createTextNode(`${name_input.value}:${email_input.value}`));
+        user_list.appendChild(li);
+        name_input.value=''
+        email_input.value=''
+    }
+
+    
+
+}
--- a/JavaScript/jquery2/getting-started.md
+++ b/JavaScript/jquery2/getting-started.md
@@ -0,0 +1,112 @@
+## JavaScript 类库
+
+- **作用:** JavaScript 类库的出现，就是为了简化 JavaScript 的开发。
+- **内容:** JavaScript 类库封装了预定义的对象和函数。
+- **目的:** 帮助开发人员建立有高难度交互的 Web 2.0 特性的富客户端页面，并且兼容各大浏览器。
+
+> **扩展内容**
+> 
+> Web 2.0 相关概念:
+> 
+> 1. Web 1.0: 网络 -> 人（单向信息。网络是信息提供者，单向的提供和单一理解）
+> 2. Web 2.0: 人 -> 人（以网络为沟通渠道进行人与人沟通。网络是平台，用户提供信息，通过网络，其他用户获取信息）
+> 3. Web 3.0: 人 -> 网络 -> 人（人与网络之间的双向沟通。网络成为用户需求理解者和提供者）
+> 
+> 富客户端与瘦客户端：
+> 
+> 1. 富客户端:（Rich Internet Applications，RIA）利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。
+> 2. 瘦客户端:（Thin Client）指的是在客户端-服务器网络体系中的一个基本无需应用程序的计算机终端。
+
+## jQuery 的编程步骤
+
+- 在 HTML 页面引入 jQuery 文件
+
+```html
+<!-- 1. 引入jQuery文件 -->
+<script src="jquery-1.11.3.js"></script>
+```
+
+- 在 HTML 页面定义元素
+
+```html
+<!-- 定义HTML页面元素 -->
+<input type="text" value="请输入你的用户名" id="username">
+```
+
+- 使用 jQuery 的选择器定位元素
+
+```javascript
+// 2. 使用jQuery选择器定位HTML页面元素
+var $username = $("#username");
+```
+
+- 利用 jQuery 提供的 API 完成需求
+
+```javascript
+// 3. 调用jQuery的API方法
+console.log($username.val());
+```
+
+## jQuery 基础内容
+
+### jQuery 工厂函数
+
+jQuery 的工厂函数算做是 jQuery 的一个入口，通过它既可以使用选择器，也可以包装 DOM 对象，还可以创建元素等功能。
+
+**工厂函数的写法有两种:**
+
+- 第一种是 `$()`
+- 第二种是 `jQuery()`
+
+> 这里的 `$` 符号就表示 jQuery，是 jQuery 的一个约定。
+> 
+> 不仅如此，jQuery 也建议通过 jQuery 获取的元素变量前都增加 `$` 符号。目前有很多 JS 库都效仿了 jQuery 的这种做法，当然也引起了多个使用 `$` 的 JS 库一起使用时的一些冲突，主要还是集中在 `$` 的使用权上。
+
+### jQuery 对象与 DOM 对象
+
+#### DOM 对象
+
+定义：是指通过 DOM 获取的元素。
+
+#### jQuery 对象
+
+定义：是通过包装 DOM 对象后产生的一种对象（jQuery 自定义的全局对象）。可以说 jQuery 底层其实还是 DOM 对象。
+
+> **注意:** jQuery 是类数组对象，所以 jQuery 对象中可能包含多个 DOM 对象或一个 DOM 对象，这要看具体情况。
+
+### DOM 对象转换为 jQuery 对象
+
+DOM 对象要想转换为 jQuery 对象，需要使用 jQuery 的工厂函数 `$()` 将其包裹，返回的就是对应的 jQuery 对象。
+
+```javascript
+// DOM对象
+var username = document.getElementById("username");
+// DOM对象转换为jQuery对象
+var $username = $(username);
+// 测试
+console.log($username.val());
+```
+
+### jQuery 对象转换为 DOM 对象
+
+- jQuery 对象是数组对象。jQuery 对象[索引值]可以直接转换为对应的 DOM 对象
+
+```javascript
+// jQuery对象
+var $user = $("#username");
+// 1. jQuery对象是数组对象
+var user1 = $user[0];
+// 测试
+console.log(user1.value);
+```
+
+- jQuery提供了get(index)方法。jQuery对象.get(索引值)也可以转换为对应的DOM对象
+
+```
+// jQuery对象
+var $user = $("#username");
+// 2. jQuery提供get(index)方法进行转换
+var user2 = $user.get(0);
+// 测试
+console.log(user2.value);
+```
--- a/JavaScript/jquery2/jquery-animation.md
+++ b/JavaScript/jquery2/jquery-animation.md
@@ -0,0 +1,178 @@
+## 显示和隐藏效果
+
+通过同时改变元素的宽度和高度来实现显示或者隐藏。
+
+### 无动画效果
+	
+- 显示: show()
+- 隐藏: hide()
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+       $content.hide();
+    }else{
+       $content.show();
+    }
+})
+```
+
+### 有动画效果
+	
+#### 显示: show(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+#### 隐藏: hide(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+        $content.hide(600);
+    }else{
+        $content.show(600);
+    }
+})
+```
+
+## 滑动式动画效果
+
+通过改变高度来实现显示或者隐藏的效果。
+
+### 向上滑动: slideUp(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+### 向下滑动: slideDown(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+        $content.slideUp(600);
+    }else{
+        $content.slideDown(600);
+    }
+})
+```
+
+## 淡入淡出动画效果
+
+通过改变不透明度 opacity 来实现显示或者隐藏。
+
+### 淡入效果: fadeIn(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+### 淡出效果: fadeOut(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+        $content.fadeOut(600);
+    }else{
+        $content.fadeIn(600);
+    }
+})
+```
+
+## 动画切换效果
+
+### toggle(duration,complete): 显示或隐藏匹配元素。
+
+- duration: 一个字符串或者数字决定动画将运行多久。
+- complete: 在动画完成时执行的回调函数。
+
+```javascript
+$('#clickme').click(function() {
+	$('#book').toggle('slow', function() {
+		// Animation complete.
+	});
+});
+```
+
+### slideToggle(duration,complete)：用滑动动画显示或隐藏一个匹配元素。
+
+- duration：一个字符串或者数字决定动画将运行多久。
+- complete：在动画完成时执行的回调函数。
+
+```javascript
+$('#clickme').click(function() {
+	$('#book').slideToggle('slow', function() {
+		// Animation complete.
+	});
+});
+```
+
+## 自定义动画效果
+
+animate(properties,duration,easing,complete)
+
+- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
+- duration：一个字符串或者数字决定动画将运行多久。
+- easing：一个字符串，表示过渡使用哪种缓动函数。
+- complete：在动画完成时执行的回调函数。
+
+```javascript
+$("#panel").click(function(){
+   $(this).animate({left: "500px"}, 3000);
+})
+```
+
+aniamte(properties,options)
+
+- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
+- options：一组包含动画选项的值的集合。 支持的选项：
+	- duration：一个字符串或者数字决定动画将运行多久。
+	- easing：一个字符串，表示过渡使用哪种缓动函数。
+	- queue：一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
+	- complete：在动画完成时执行的回调函数。
+
+```javascript
+$("#panel").click(function(){
+    $(this).animate({left: "500px"}, 3000);
+})
+```
+
+> **注意：**animate方法不接受以下属性:
+> 
+> - backgroundColor
+> - borderBottomColor
+> - borderLeftColor
+> - borderRightColor
+> - borderTopColor
+> - Color
+> - outlineColor
+
+## 并发与排队效果
+
+### 并发效果: 指的就是多个动画效果同时执行。
+
+```javascript
+$("#panel").click(function(){
+   $(this).animate({left: "500px",height:"200px"}, 3000);
+})
+```
+
+### 排队效果: 指的就是多个动画按照先后顺序执行。
+
+```javascript
+$("#panel").click(function(){
+    $(this).animate({left: "500px"}, 3000).animate({height: "200px"}, 3000);
+})
+```
--- a/JavaScript/jquery2/jquery-dom.md
+++ b/JavaScript/jquery2/jquery-dom.md
@@ -0,0 +1,336 @@
+DOM 是 Document Object Model 的缩写，译为 **文档对象模型**。根据 W3C DOM 规范，DOM 是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。
+
+jQuery 中另一个重要的组成部分就是封装了原生 DOM 的操作。
+
+## 基本操作
+
+### html操作
+
+html() 方法用于读取或设置指定元素的 HTML 代码，类似于原生 DOM 中的 innerHTML 属性。
+
+```javascript
+//获取<p>元素的HTML代码
+$("input:eq(0)").click(function(){
+    alert(  $("p").html() );
+});
+//设置<p>元素的HTML代码
+$("input:eq(1)").click(function(){
+    $("p").html("<strong>你最讨厌的水果是?</strong>");
+});
+```
+
+### 文本操作
+
+text() 方法用于读取或设置指定元素的文本内容，类似于原生 DOM 中的 textContent 属性。
+
+```javascript
+//获取<p>元素的文本
+$("input:eq(0)").click(function(){
+    alert(  $("p").text() );
+});
+//设置<p>元素的文本
+$("input:eq(1)").click(function(){
+    $("p").text("你最讨厌的水果是?");
+});
+```
+
+### 值操作
+
+val() 方法用于读取或设置指定元素的 value 属性值，类似于原生 DOM 中的 value 属性。
+
+```javascript
+//获取按钮的value值
+$("input:eq(0)").click(function(){
+   alert( $(this).val() );
+});
+//设置按钮的value值
+$("input:eq(1)").click(function(){
+   $(this).val("我被点击了!");
+});
+```
+
+### 属性操作
+
+- attr() 方法用于获取或设置指定元素的属性，类似于原生 DOM 中的 getAttribute() 方法和 setAttribute() 方法。
+- removeAttr() 方法用于删除指定元素的属性，类似于原生 DOM 中的 removeAttribute() 方法。
+
+```javascript
+//设置<p>元素的属性'title'
+$("input:eq(0)").click(function(){
+   $("p").attr("title","选择你最喜欢的水果.");
+});
+//获取<p>元素的属性'title'
+$("input:eq(1)").click(function(){
+   alert( $("p").attr("title") );
+});
+//删除<p>元素的属性'title'
+$("input:eq(2)").click(function(){
+   $("p").removeAttr("title");
+});
+```
+
+## 样式操作
+
+操作样式主要分成两种：
+
+- 一种是使用style属性直接设置CSS中的属性
+- 一种是使用class样式名称设置CSS。
+
+### attr() 方法操作
+
+class 本身就是元素中的一个属性，所以也可以使用设置属性方式来设置或删除 class 样式。
+
+**语法结构:**
+
+```javascript
+element.attr("class",className)
+```
+
+> **值得注意的是:** 使用 attr() 方法设置 class 样式时，无论之前是否包含 class 属性，之前设置的样式都会被覆盖。
+
+```javascript
+//<input type="button" value="采用属性增加样式"  id="b1"/>
+$("#b1").click(function(){
+   $("#mover").attr("class","one");
+})
+```
+
+### addClass() 方法操作
+
+addClass() 方法表示追加样式，也就是说，无论之前是否包含 class 样式，调用 addClass() 方法只是在其基础上增加一个新的样式。而之前设置的样式依旧存在。
+
+```javascript
+//<input type="button" value=" addClass"  id="b2"/>
+$("#b2").click(function(){
+   $("#mover").addClass("mini");
+})
+```
+
+### removeClass() 方法操作
+
+removeClass() 方法表示删除样式，但该方法的使用有以下三种方式:
+
+- removeClass(): 默认不传递任何参数，表示删除所有样式。
+- removeClass(className): 传递一个样式名称，表示删除指定一个样式。
+- removeClass(className1 className2): 传递多个样式名称，中间使用空格隔开，表示删除指定多个样式。
+
+```javascript
+//<input type="button" value="removeClass"  id="b3"/>
+$("#b3").click(function(){
+   $("#mover").removeClass();
+})
+```
+
+### toggleClass() 方法操作
+
+toggleClass() 方法表示在没有样式与指定样式之间进行切换，效果相当于使用 addClass() 方法和 removeClass() 方法。
+
+```javascript
+//<input type="button" value=" 切换样式"  id="b4"/>
+$("#b4").click(function(){
+   // 在没有样式与指定样式之间切换
+   $("#mover").toggleClass("one");
+})
+```
+
+### hasClass() 方法操作
+
+hasClass() 方法表示指定元素是否包含指定样式。
+
+> **值得注意的是:** hasClass() 方法并不能判断是否包含样式，而是判断是否包含指定样式。
+
+```javascript
+//<input type="button" value=" hasClass"  id="b5"/>
+$("#b5").click(function(){
+   // 判断是否含有某个指定样式
+   alert($("#mover").hasClass("one"));
+})
+```
+
+### css() 方法操作
+
+css() 方法也可以获取或设置 CSS 样式，但并不是通过 class 属性，而是通过 style 属性直接设置 CSS 中的属性。
+
+#### 获取样式: 
+
+css(attrName) 方法，用于获取当前 style 属性的值。
+
+#### 设置样式: 
+
+- css(attrName,attrValue) 方法，用于设置当前 style 属性的值。**但每次只能设置一个CSS中的属性。**
+- css({attrName:attrValue,attrName:attrValue,…}) 方法，用于设置当前 style 属性的值。**每次可以设置多个CSS中的属性。**
+
+## 遍历节点
+
+### 获取父元素
+
+parent() 方法可以获取指定元素的父元素。
+
+- parent() 方法: 不传递任何参数，是获取指定元素的父元素。
+- parent(selector) 方法: 是获取指定元素的符合 selector 选择器的父元素。
+
+```javascript
+var $parent = $("li:first").parent();	//第一个<li>元素的父元素
+```
+
+### 获取子元素
+
+children() 方法可以获取指定元素的子元素。
+
+- children() 方法: 不传递任何参数，可以获取指定元素的所有子元素。
+- children(selector) 方法: 是获取指定元素的符合 selector 选择器的子元素。
+
+```javascript
+var $ul = $("ul").children();
+alert( $ul.length );//<p>元素下有3个子元素
+```
+
+### 获取兄弟元素
+
+**next() 方法是获取指定元素的下一个兄弟元素。**
+
+- next() 方法: 不传递任何参数，是获取指定元素的下一个兄弟元素。
+- next(selector) 方法: 是获取指定元素符合 selector 选择器的下一个兄弟元素。
+
+```javascript
+var $p1 = $("p").next();
+alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
+```
+
+**prev() 方法是获取指定元素的上一个兄弟元素。**
+
+- prev()方法: 不传递任何参数，是获取指定元素的上一个兄弟元素。
+- prev(selector) 方法: 是获取指定元素符合 selector 选择器的上一个兄弟元素。
+
+```javascript
+var $ul = $("ul").prev();
+alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
+```
+
+**siblings() 方法是获取指定元素的所有兄弟元素。**
+
+
+- siblings()方法: 不传递任何参数，是获取指定元素的所有兄弟元素。
+- siblings(selector) 方法:是获取指定元素符合 selector 选择器的所有兄弟元素。
+
+```javascript
+var $p2 = $("p").siblings();
+alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素
+```
+
+### 查找指定后代元素
+
+find(selector) 方法，可以查找指定元素的符合 selector 选择器的后代元素。
+
+```javascript
+var eles = $("ul").find("li");	//查找ul元素下的所有li元素
+```
+
+## 创建操作
+
+按照原生 DOM 的思路，创建节点需要分别创建元素节点、文本节点和属性节点。
+
+- 元素节点，使用 jQuery 的工厂函数 `$(HTML代码)` 来创建。
+- 文本节点，使用 jQuery 的 `text()` 方法进行设置文本，而不需要创建文本节点。
+- 属性节点，使用 jQuery 的 `attr()` 方法进行设置属性，而不需要创建属性节点。
+
+其实，使用 jQuery 创建元素，并不需要按照原生 DOM 的思路进行创建。可以一步代码创建完整的元素。
+
+```javascript
+//创建一个<li>元素 包括元素节点,文本节点和属性节点
+var $li = $("<li title='香蕉'>香蕉</li>");
+
+// 获取<ul>节点 <li>的父节点
+var $parent = $("ul");
+
+// 添加到<ul>节点中，使之能在网页中显示
+$parent.append($li);
+```
+
+## 插入操作
+
+jQuery 中的插入操作分为内部插入和外部插入。
+
+### 内部插入
+	
+- append() 方法: 将 append() 后面的元素插入在 append() 前面指定元素的后面。
+- prepend() 方法: 将 prepend() 后面的元素插入在 prepend() 前面指定元素的前面。
+- appendTo() 方法: 将 appendTo() 前面的元素插入在 appendTo() 后面的元素的后面。
+- prependTo() 方法: 将 prependTo() 前面的元素插入在 prependTo() 后面的元素的前面。
+
+```javascript
+// append - append后面的节点被添加到append前面的节点的后面
+$("#tj").append($("#ms"));
+
+// prepend - prepend后面的节点被添加到prepend前面的节点的前面
+$("#tj").prepend($("#ms"));
+
+// appendTo - appendTo前面的节点被添加到appendTo后面的节点的后面
+$("#tj").appendTo($("#ms"));
+
+// prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面
+$("#tj").prependTo($("#ms"));
+```
+
+### 外部插入
+	
+- before() 方法: 将 before() 后面的元素插入在 before() 前面的指定元素的前面。
+- after() 方法: 将 after() 后面的元素插入在 after() 前面的指定元素的后面。
+- insertBefore() 方法: 将 insertBefore() 前面的元素插入在 insertBefore() 后面的指定元素的前面。
+- insertAfter() 方法: 将 insertAfter() 前面的元素插入在 insertAfter() 后面的指定元素的后面。
+
+```javascript
+// before - before后面的节点被添加到before前面的节点的前面
+$("#tj").before($("#ms"));
+
+// after - after后面的节点被添加到after前面的节点的后面
+$("#tj").after($("#ms"));
+
+// insertBefore
+$("#tj").insertBefore($("#ms"));
+
+// insertAfter
+$("#tj").insertAfter($("#ms"));
+```
+
+## 删除操作
+
+jQuery 中的删除操作分别为 remove() 方法和 empty() 方法。
+
+- remove() 方法: 删除自身元素及所有后代元素。
+- empty() 方法: 删除所有后代元素，但保留自身元素。该方法适合完成清空操作。
+
+```javascript
+$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除
+
+$("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除
+
+$("ul li:eq(1)").empty(); // 获取第二个<li>元素节点后，清空此元素里的内容
+```
+
+## 替换操作
+
+jQuery 中的替换操作分别为 replaceWith() 方法和 replaceAll() 方法。
+
+- replaceWith() 方法: 该方法前面的元素是被替换元素。
+- replaceAll() 方法: 就是颠倒了的repalceWith( )方法。
+
+```javascript
+$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
+// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
+```
+
+## 复制操作
+
+jQuery 中的复制操作使用的方法为 clone() 方法，该方法与原生 DOM 中的复制节点的方法cloneNode() 在使用时极为相似。
+
+- 原生 DOM 中的 cloneNode(Boolean) 方法，参数 Boolean 表示是否复制后代节点。
+- jQuery 中的 clone(Boolean) 方法，参数 Boolean 表示是否复制事件。
+
+```javascript
+$("ul li").click(function(){
+   $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
+   $(this).clone(true).appendTo("ul"); // 注意参数true
+   //可以复制自己，并且他的副本也有同样功能
+})
+```
--- a/JavaScript/jquery2/jquery-event.md
+++ b/JavaScript/jquery2/jquery-event.md
@@ -0,0 +1,144 @@
+## 页面加载
+
+原生 DOM 中的事件具有页面加载的内容 onload 事件，在 jQuery 中同样提供了对应的内容ready() 函数。
+
+### ready与onload之间的区别
+
+| onload | ready |
+| ------- | ------ |
+| 没有简写方式 | 具有简写方式 | 
+| 当HTML页面所有内容加载完毕后才执行onload | 当DOM节点加载完毕后就执行ready |
+| 一个HTML页面只能编写一个onload | 一个HTML页面允许同时编写多个ready |
+
+### ready()的编写方式
+
+- $(document).ready(function(){});
+- $().ready(function(){});
+- $(function(){});
+
+## 事件绑定
+
+jQuery 中提供了事件绑定与解绑机制，类似于原生 DOM 中的 addEventListener() 方法。
+
+### jQuery 的事件绑定
+
+#### 单事件绑定
+
+单事件绑定就是指为指定元素绑定一个指定的事件，例如 click、change 等。
+
+```javascript
+<div id="panel">
+    <h5 class="head">什么是jQuery?</h5>
+    <div class="content">
+        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
+    </div>
+</div>
+
+<script>
+    $("#panel h5.head").bind("click",function(){
+        var $content = $(this).next("div.content");
+        if($content.is(":visible")){
+           $content.hide();
+        }else{
+           $content.show();
+        }
+    })
+</script>
+```
+
+#### 多事件绑定
+
+多事件绑定就是为指定元素同时绑定多个指定的事件，例如同时绑定 mouseover 和 mouseout 事件等。
+
+```javascript
+<div id="panel">
+    <h5 class="head">什么是jQuery?</h5>
+    <div class="content">
+        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
+    </div>
+</div>
+
+<script>
+   $("#panel h5.head").bind("mouseover mouseout",function(){
+       var $content = $(this).next("div.content");
+       if($content.is(":visible")){
+           $content.hide();
+       }else{
+           $content.show();
+       }
+   });
+</script>
+```
+
+## 模拟操作
+
+模拟操作就是指通过程序模拟用户在页面中的操作，比如用户点击某个按钮的事件完成一个效果，jQuery 中可以通过该方法模拟用户点击按钮事件。也就是说，不需要用户的操作行为，而是我们通过程序来模拟用户操作。
+
+```javascript
+<button id="btn">点击我</button>
+<div id="test"></div>
+
+<script>
+    $('#btn').bind("click", function(){
+        $('#test').append("<p>我的绑定函数1</p>");
+    }).bind("click", function(){
+        $('#test').append("<p>我的绑定函数2</p>");
+    }).bind("click", function(){
+        $('#test').append("<p>我的绑定函数3</p>");
+    });
+    $('#btn').trigger("click");
+</script>
+```
+
+## 与其他JS库共存
+
+### 第一种方式
+
+```javascript
+/*
+  * 先引入其他JS库,后引入jQuery
+  * * "$"符号属于其他JS库
+  * 解决冲突
+  * * jQuery中 - "$"符号指代jQuery
+  * * jQuery中不再使用"$"符号
+  */
+jQuery(document).ready(function(){
+	console.log("this is ready.");
+});
+```
+
+### 第二种方式
+
+```javascript
+jQuery(document).ready(function($){
+	// 在当前函数中使用"$"符号 - jQuery
+});
+// "$"符号 - 其他JS库
+```
+
+### 第三种方式
+
+```javascript
+(function($){
+	// "$"符号 - jQuery
+})(jQuery);
+// "$"符号 - 其他JS库
+```
+
+### 第四种方式
+
+```javascript
+jQuery.noConflict();
+jQuery(function($){
+	console.log($("p").text());
+});
+```
+
+### 第五种方式
+
+```javascript
+jQuery.noConflict();
+(function($){
+	console.log($("p").text());
+})(jQuery);
+```
--- a/JavaScript/jquery2/jquery-plugin.md
+++ b/JavaScript/jquery2/jquery-plugin.md
@@ -0,0 +1,572 @@
+## 日期插件
+
+layDate 日期插件致力于成为全球最用心的 web 日期支撑，为国内外所有从事 web 应用开发的同仁提供力所能及的动力。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>01_laydate插件的基本使用</title>
+    <script src="laydate/laydate.js"></script>
+</head>
+<body>
+    <input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
+    <br>
+    <input placeholder="请输入日期" id="hello1">
+    <span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>
+</body>
+</html>
+```
+
+### layDate API选项:
+
+- elem: '#id', //需显示日期的元素选择器
+- event: 'click', //触发事件
+- format: 'YYYY-MM-DD hh:mm:ss', //日期格式
+- istime: false, //是否开启时间选择
+- isclear: true, //是否显示清空
+- istoday: true, //是否显示今天
+- issure: true, 是否显示确认
+- festival: true //是否显示节日
+- min: `1900-01-01 00:00:00`, //最小日期
+- max: `2099-12-31 23:59:59`, //最大日期
+- start: `2014-6-15 23:00:00`,    //开始日期
+- fixed: false, //是否固定在可视区域
+- zIndex: 99999999, //css z-index
+- choose: function(dates){} //选择好日期的回调
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>02_laydate插件的高级使用</title>
+    <script src="jquery-1.11.3.js"></script>
+    <script src="laydate/laydate.js"></script>
+</head>
+<body>
+    <input id="mydate" placeholder="请输入日期" class="laydate-icon">
+    <script>
+        laydate({
+            elem : "#mydate",
+            event : "focus",
+            istime : true,
+            isclear : false,
+            istoday : false,
+            issure : false
+        });
+    </script>
+</body>
+</html>
+```
+
+## 表单验证插件
+
+表单验证插件主要是针对表单元素的值进行验证，并给出响应的图形以及文字提示。
+
+**常用验证插件**
+
+- formValidator
+- jQuery.validator
+- easyForm
+- validate.js
+
+### jQuery.validator 插件
+
+该插件提供用户方便地实现表单验证，同时还提供大量的定制选项。
+官方地址：[http://jqueryvalidation.org/](http://jqueryvalidation.org/)
+
+**validation基本使用**
+
+```html
+<div id="main">
+    <p>Take a look at the source to see how messages can be customized with metadata.</p>
+    <!-- Custom rules and messages via data- attributes -->
+    <form class="cmxform" id="commentForm" method="post" action="">
+        <fieldset>
+            <legend>Please enter your email address</legend>
+            <p>
+                <label for="cemail">E-Mail *</label>
+                <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address">
+            </p>
+            <p>
+                <input class="submit" type="submit" value="Submit">
+            </p>
+        </fieldset>
+    </form>
+</div>
+<script>
+    $(document).ready(function() {
+        $("#commentForm").validate();
+    });
+</script>
+```
+
+**validate()验证方法的选项**
+
+| 选项名称 | 描述说明 |
+| -------- | ---------- |
+| debug | 设置是否为调试模式，如果为调试模式表单不会被提交。 |
+| submitHandler | 表单提交时的回调函数，一般用于提交当前表单。|
+| rules | 设置表单元素的验证规则，格式为key:value。 |
+| messages | 设置表单元素验证不通过时的错误提示信息。 |
+| errorClass | 自定义错误提示信息的样式。 |
+| ignore | 设置哪些表单元素不进行验证。|
+
+**validation自定义验证**
+
+```html
+<div id="main">
+    <form class="cmxform" id="commentForm" method="post" action="">
+        <fieldset>
+            <legend>Please enter your email address</legend>
+            <p>
+                <label for="cemail">E-Mail *</label>
+                <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address">
+            </p>
+            <p>
+                <input class="submit" type="submit" value="Submit">
+            </p>
+        </fieldset>
+    </form>
+</div>
+<script>
+    $(document).ready(function() {
+        $("#commentForm").validate({
+            messages: {
+                email: {
+                    required: 'Enter this!'
+                }
+            }
+        });
+    });
+</script>
+```
+
+**自定义验证方法**
+
+jQuery.validator.addMethod( name, method [, message ] )方法
+
+- name：设置验证方法的名称。
+- method：回调函数，function(value,element,param){}
+	- value：元素的值
+	- element：元素本身
+	- param：参数
+- message：设置验证不通过的错误提示信息。
+
+```html
+<div id="main">
+    <form class="cmxform" id="texttests" method="get" action="foo.html">
+        <h2 id="summary"></h2>
+        <fieldset>
+            <legend>Example with custom methods and heavily customized error display</legend>
+            <table>
+                <tr>
+                    <td>
+                        <label for="number">textarea</label>
+                    </td>
+                    <td>
+                        <input id="number" name="number" title="Please enter a number with at least 3 and max 15 characters!">
+                    </td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="secret">Secret</label>
+                    </td>
+                    <td>
+                        <input name="secret" id="secret">
+                    </td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="math">7 + 4 =</label>
+                    </td>
+                    <td>
+                        <input id="math" name="math" title="Please enter the correct result!">
+                    </td>
+                    <td></td>
+                </tr>
+            </table>
+            <input class="submit" type="submit" value="Submit">
+        </fieldset>
+    </form>
+    <h3 id="warning">Your form contains tons of errors! Please try again.</h3>
+</div>
+<script>
+    // this one requires the text "buga", we define a default message, too
+    $.validator.addMethod("buga", function(value) {
+        return value == "buga";
+    }, 'Please enter "buga"!');
+
+    // this one requires the value to be the same as the first parameter
+    $.validator.methods.equal = function(value, element, param) {
+        return value == param;
+    };
+
+    $().ready(function() {
+        var validator = $("#texttests").bind("invalid-form.validate", function() {
+            $("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
+        }).validate({
+            debug: true,
+            errorElement: "em",
+            errorContainer: $("#warning, #summary"),
+            errorPlacement: function(error, element) {
+                error.appendTo(element.parent("td").next("td"));
+            },
+            success: function(label) {
+                label.text("ok!").addClass("success");
+            },
+            rules: {
+                number: {
+                    required: true,
+                    minlength: 3,
+                    maxlength: 15,
+                    number: true
+                },
+                secret: "buga",
+                math: {
+                    equal: 11
+                }
+            }
+        });
+
+    });
+</script>
+```
+
+## 瀑布流插件
+
+### 什么是瀑布流
+
+瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
+
+**特点**
+
+- 琳琅满目: 整版以图片为主，大小不一的图片按照一定的规律排列。
+- 唯美: 图片的风格以唯美的图片为主。
+- 操作简单: 在浏览网站的时候，只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。
+
+### Masonry 插件
+
+Masonry 是 jQuery 的布局插件，可以把 Masonry 看做是 CSS 的浮动布局。
+
+无论排列的元素是水平浮动的还是垂直浮动的，Masonry 都是根据网格先垂直排列元素，再水平排列元素，就像修墙一样。
+
+配置 Masonry 相当简单，只需在 jQuery 脚本简单的使用 `.masonry()` 方法来包装容器元素。由于布局，很可能需要制定一个选项。
+
+#### masonry() 方法推荐选项
+
+- itemSelector：指定使用项目中哪些子元素进行布局
+- columnWidth：设置每列的宽度
+
+```html
+<div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100
+    });
+</script>
+```
+
+#### masonry() 方法布局选项
+
+- gutter：设置每列之间的宽度
+- percentPosition：值为true，使用百分值，而不是像素值
+- stamp：在布局中标记元素，Masonry将在这些标记的元素下进行布局
+- isFitWidth：基于容器的父元素大小设置容器的宽度以适应可用的列数
+- isOriginLeft：设置布局的水平对齐，默认为true时，从左到右
+- isOriginTop：设置布局的垂直对齐，默认为true时，从上到下
+
+**百分值效果**
+
+```html
+<div id="basic" class="container">
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h2"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer h5"></div>
+    <div class="item item-sizer h2"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h5"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        columnWidth: ".item-sizer",
+        percentPosition : true
+    });
+</script>
+```
+
+**固定元素**
+
+```html
+<div id="basic" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100,
+        stamp: '.stamp'
+    });
+</script>
+```
+
+**自适应宽度**
+
+```html
+<div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100,
+        isFitWidth: true
+    });
+</script>
+```
+
+#### masonry() 方法设置选项
+
+- containerStyle：对容器中的元素使用CSS样式
+- transitionDuration：设置改变位置或外观的过度时间，默认为0.4s
+- isResizeBound：是否根据窗口大小调整大小和位置
+- isInitLayout：是否初始化布局，为false时，可以在初始化布局前，使用方法或绑定事件
+
+#### Masonry 插件的方法
+
+**布局**
+
+- masonry( )：布局容器中所有的元素。当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局
+- layoutItems( )：布局指定元素
+
+**添加或删除元素**
+
+- appended( )：在布局的最后添加并布局新的元素
+- remove( )：从Masonry对象中或DOM中删除指定元素
+
+**事件**
+
+- on事件：添加一个Masonry事件的监听器
+- off事件：删除一个Masonry事件的监听器
+
+```html
+<div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    var $grid = $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100,
+        isFitWidth: true
+    });
+
+    $grid.on( 'click', '.item', function() {
+        // change size of item via class
+        $( this ).toggleClass('grid-item--gigante');
+        // trigger layout
+        $grid.masonry();
+    });
+
+    $grid.on("layoutComplete",function( event, laidOutItems ) {
+        console.log( 'Masonry layout complete with ' + laidOutItems.length + ' items' );
+    });
+</script>
+```
+
+## 开发插件
+
+### jQuery 插件种类
+
+- 对象方法插件: 这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。
+- 全局函数插件: 可以将独立的函数添加到jQuery命名空间下，例如 `$.each( )`方法等。
+- 选择器插件: 个别情况下，会需要用到选择器插件。虽然jQuery的选择器已经很强大，但还是会需要扩展一些个性化的选择器用法。
+
+### 对象方法插件
+
+- 第一种定义方式
+
+```javascript
+jQuery.fn.changeBgColor = function(color){
+	this.css("background",color);
+}
+```
+
+- 第二种定义方式
+
+```javascript
+jQuery.fn.swapClass=function(class1,class2){
+	return this.each(function(){ //this 表示的是 匹配到的一组 <li>
+		var $element = jQuery(this); //this表示的是每个<li>
+		if($element.hasClass(class1)){
+			$element.removeClass(class1).addClass(class2);
+		} else if ($element.hasClass(class2)){
+			$element.removeClass(class2).addClass(class1);
+		}
+	});
+}
+```
+
+- 第三种定义方式
+
+```javascript
+jQuery.fn.extend({
+	changeBgColor = function(color){
+		this.css("background",color);
+	}
+});
+```
+
+### 全局函数插件
+
+- 第一种定义方式
+
+```javascript
+jQuery.globalFunction = function(){
+	alert("This is my plugins ");
+}
+```
+
+- 第二种定义方式
+
+```javascript
+jQuery.extend({
+	functionOne : function(){
+		alert("This is one function");
+	},
+	functionTwo : function(param){
+		alert("This is two function , param is "+param);
+	}
+});
+```
+
+- 第三种定义方式
+
+```javascript
+jQuery.sum = function(array){
+	var total = 0;
+	jQuery.each(array,function(index,value){
+		total += value;
+	});
+	return total;
+}
+```
+
+### jQuery插件案例
+
+```javascript
+jQuery.fn.shadow = function(){
+	return this.each(function(){
+		var $originalElement = jQuery(this);
+		for(var i=0; i < 5 ; i ++){
+			$originalElement.clone().css({
+				position:'absolute',
+				left:$originalElement.offset().left + i,
+				top:$originalElement.offset().top + i,
+				margin:0,
+				zIndex:-1,
+				opacity:0.1
+			}).appendTo('body');
+		}
+	});
+}
+```
--- a/JavaScript/jquery2/jquery-selector.md
+++ b/JavaScript/jquery2/jquery-selector.md
@@ -0,0 +1,298 @@
+## 什么是 jQuery 的选择器
+
+jQuery 的选择器的想法是源于 CSS 中的选择器的用法，其实在 JavaScript 中也有类似的用法，比如 querySelector() 或 querySelectorAll() 方法的使用，也是借助 CSS 中的选择器来定位 HTML 页面元素的。只不过相比 jQuery 中的选择器，JavaScript 中的 querySelector() 或 querySelectorAll() 方法的性能相对差一些而已。
+
+jQuery 的选择器最主要的作用就是用于定位 HTML 页面的元素。它不仅可以定位 HTML 页面中具体某个元素，还可以通过各种方式定位复合条件的一组元素等等。
+
+> **值得注意的是:** jQuery 的选择器最大的特点就是将定位元素和元素行为进行了有效的分离。这是在实际开发中非常必要的一项特点！
+
+## jQuery 选择器的种类
+
+jQuery 中使用其工厂函数 `$()` 作为容器，来接收 jQuery 的选择器内容。而 jQuery 的选择器则以字符串形式传递给 jQuery 的工厂函数。
+
+jQuery 的选择器种类大概可以分为以下几种:
+
+### 基本选择器
+
+```javascript
+//选择 id为 one 的元素
+$('#btn1').click(function(){
+    $('#one').css("background","#bfa");
+});
+//选择 class 为 mini 的所有元素
+$('#btn2').click(function(){
+    $('.mini').css("background","#bfa");
+});
+//选择 元素名是 div 的所有元素
+$('#btn3').click(function(){
+    $('div').css("background","#bfa");
+});
+//选择 所有的元素
+$('#btn4').click(function(){
+    $('*').css("background","#bfa");
+});
+//选择 所有的span元素和id为two的div元素
+$('#btn5').click(function(){
+    $('span,#two').css("background","#bfa");
+});
+```
+
+> **需要注意**
+> 
+> 1. 通配符选择器（*）默认匹配HTML页面中所有的元素。
+> 2. 复合选择器（多个选择器并列使用）的使用，每个选择器之间使用”,”进行分割。并且复合选择器匹配的结果是多个选择器的并集效果。
+
+
+### 层级选择器
+
+```javascript
+//选择 body内的所有div元素.
+$('#btn1').click(function(){
+    $('body div').css("background","#bbffaa");
+})
+//在body内的选择 元素名是div 的子元素.
+$('#btn2').click(function(){
+    $('body > div').css("background","#bbffaa");
+})
+//选择 所有class为one 的下一个div元素.
+$('#btn3').click(function(){
+    $('.one + div').css("background","#bbffaa");
+})
+//选择 id为two的元素后面的所有div兄弟元素.
+$('#btn4').click(function(){
+    $('#two ~ div').css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:**
+> 
+> selectors~selector2 选择器，是获取符合 selector1 选择器的元素后面所有符合selector2 选择器的兄弟元素。
+> 
+> jQuery 中还有一个方法 siblings()，是获取指定元素的所有兄弟元素。
+
+### 基本过滤选择器
+
+```javascript
+//选择第一个div元素.
+$('#btn1').click(function(){
+    $('div:first').css("background","#bfa");
+})
+//选择最后一个div元素.
+$('#btn2').click(function(){
+    $('div:last').css("background","#bfa");
+})
+//选择class不为one的 所有div元素.
+$('#btn3').click(function(){
+    $('div:not(.one)').css("background","#bfa");
+})
+//选择 索引值为偶数 的div元素。
+$('#btn4').click(function(){
+    $('div:even').css("background","#bfa");
+})
+//选择 索引值为奇数 的div元素。
+$('#btn5').click(function(){
+    $('div:odd').css("background","#bfa");
+})
+//选择 索引等于 3 的元素
+$('#btn6').click(function(){
+    $('div:eq(3)').css("background","#bfa");
+})
+//选择 索引大于 3 的元素
+$('#btn7').click(function(){
+    $('div:gt(3)').css("background","#bfa");
+})
+//选择 索引小于 3 的元素
+$('#btn8').click(function(){
+    $('div:lt(3)').css("background","#bfa");
+})
+//选择 所有的标题元素.比如h1, h2, h3等等...
+$('#btn9').click(function(){
+    $(':header').css("background","#bfa");
+})
+//选择 当前正在执行动画的所有元素.
+$('#btn10').click(function(){
+    $(':animated').css("background","#bfa");
+});
+```
+
+> **值得注意的是:**
+> 
+> 1. “:not(selector)” 选择器，不仅可以匹配到 class 属性值不是 one 的元素，还匹配到没有 class 属性的元素。这不仅仅只是一个反操作的过程。
+> 2. “:even” 和 ”:odd” 选择器，表示索引值为偶数或者索引值为奇数的元素，但是需要注意的是索引值是从 0 开始的。
+> 3. :header” 选择器，是匹配 h1 - h6 标题元素，并不能匹配指定的某个标题元素。如果需要匹配具体某个标题元素可以使用元素选择器，所以这种用法在实际开发中很少见到。
+> 4. “:animated” 选择器，是匹配正在执行动画效果的元素，但需要注意的是它只能匹配 jQuery 执行的动画效果，而不能匹配其他技术实现的动画效果。
+
+
+### 内容过滤选择器
+
+```javascript
+//选取含有文本"di"的div元素.
+$('#btn1').click(function(){
+    $('div:contains(di)').css("background","#bbffaa");
+})
+//选取不包含子元素(或者文本元素)的div空元素.
+$('#btn2').click(function(){
+    $('div:empty').css("background","#bbffaa");
+})
+//选取含有class为mini元素 的div元素.
+$('#btn3').click(function(){
+    $('div:has(.mini)').css("background","#bbffaa");
+})
+//选取含有子元素(或者文本元素)的div元素.
+$('#btn4').click(function(){
+    $('div:parent').css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:** “:has(selector)” 选择器，匹配含有符合 selector 选择器元素的元素，并不是匹配符合 selector 的元素。
+
+### 可见性过滤选择器
+
+```javascript
+//选取所有不可见的元素.包括<input type="hidden"/>.
+$('#btn_hidden').click(function(){
+    $('div:hidden').show(3000).css("background","#bbffaa");
+})
+//选取所有可见的元素.
+$('#btn_visible').click(function(){
+    $('div:visible').css("background","#FF6500");
+})
+```
+
+> **值得注意的是:** show() 方法表示将隐藏的元素显示，其参数表示动画执行的时长。（后面的内容会详细讲到）。
+
+### 属性过滤选择器
+
+```javascript
+//选取含有 属性title 的div元素.
+$('#btn1').click(function(){
+    $('div[title]').css("background","#bbffaa");
+})
+//选取 属性title值等于 test 的div元素.
+$('#btn2').click(function(){
+    $('div[title=test]').css("background","#bbffaa");
+})
+//选取 属性title值不等于 test 的div元素.
+$('#btn3').click(function(){
+    $('div[title!=test]').css("background","#bbffaa");
+})
+//选取 属性title值 以 te 开始 的div元素.
+$('#btn4').click(function(){
+    $('div[title^=te]').css("background","#bbffaa");
+})
+//选取 属性title值 以 est 结束 的div元素.
+$('#btn5').click(function(){
+    $("div[title$=est]").css("background","#bbffaa");
+})
+//选取 属性title值 含有 es  的div元素.
+$('#btn6').click(function(){
+    $("div[title*=es]").css("background","#bbffaa");
+})
+//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
+$('#btn7').click(function(){
+    $("div[id][title*=es]").css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:**
+> 
+> 1. “[attrName!=value]” 选择器，匹配 attrName 属性的值不等于 value 的元素，但也包含没有 attrName 属性的所有元素。
+> 2. “[attribute][attribute]” 属性复合选择器，是多个属性过滤选择器并列使用，匹配的结果是多个属性过滤选择器的交集。
+
+### 子元素过滤选择器
+
+```javascript
+//选取每个父元素下的第2个子元素
+$('#btn1').click(function(){
+    $('div.one :nth-child(2)').css("background","#bbffaa");
+})
+//选取每个父元素下的第一个子元素
+$('#btn2').click(function(){
+    $('div.one :first-child').css("background","#bbffaa");
+})
+//选取每个父元素下的最后一个子元素
+$('#btn3').click(function(){
+    $('div.one :last-child').css("background","#bbffaa");
+})
+//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
+$('#btn4').click(function(){
+    $('div.one :only-child').css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:**
+> 
+> 1. 子元素过滤选择器的特殊用法，就是在其前面需要增加空格。不然子元素过滤选择器将不会有效果！
+> 2. “nth-child(index)” 选择器中的 index 是从 0 开始的。
+
+### 表单对象属性过滤选择器
+
+```javascript
+//对表单内 可用input 赋值操作.
+$('#btn1').click(function(){
+    $("#form1 input:enabled").val("这里变化了！");
+    return false;
+})
+//对表单内 不可用input 赋值操作.
+$('#btn2').click(function(){
+    $("#form1 input:disabled").val("这里变化了！");
+    return false;
+})
+$(":checkbox").click(countChecked);
+function countChecked() {
+    var n = $("input:checked").length;
+    $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
+}
+countChecked();//进入页面就调用.
+$("select").change(function () {
+    var str = "";
+    $("select :selected").each(function () {
+         str += $(this).text() + ",";
+    });
+    $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
+})
+```
+
+> **值得注意的是:**
+> 
+> 1. “:checked” 选择器，匹配 checkbox 和 radio 元素中被选中的。
+> 2. “:selected” 选择器，匹配 select 元素中 option 元素被选中的。
+
+### 表单选择器
+
+```javascript
+var $alltext = $("#form1 :text");
+var $allpassword= $("#form1 :password");
+var $allradio= $("#form1 :radio");
+var $allcheckbox= $("#form1 :checkbox");
+
+var $allsubmit= $("#form1 :submit");
+var $allimage= $("#form1 :image");
+var $allreset= $("#form1 :reset");
+var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
+var $allfile= $("#form1 :file");
+var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
+var $allselect = $("#form1 select");
+var $alltextarea = $("#form1 textarea");
+
+var $AllInputs = $("#form1 :input");
+var $inputs = $("#form1 input");
+
+$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
+        .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
+        .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
+        .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
+        .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
+        .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
+        .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
+        .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
+        .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
+        .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
+        .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
+        .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
+        .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
+        .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
+        .css("color", "red")
+
+$("form").submit(function () { return false; }); // return false;不能提交.
+```
--- a/JavaScript/jquery2/jquery-ui.md
+++ b/JavaScript/jquery2/jquery-ui.md
@@ -0,0 +1,534 @@
+jQuery UI 能做的事可谓是包罗万象。实际上，jQuery UI 在某种意义上并不是插件，而是一个完整的插件库。
+
+jQuery UI 中主要包含以下几个功能:
+
+- Effect（效果）
+- Interactions（交互组件）
+- Widget（部件）
+- 此外，还为jQuery和核心动画提供了很多高级效果。
+
+
+## Effect（效果）
+
+### animate() 方法
+
+文档在引入核心效果文件的情况下，扩展的 `.animate()` 方法可接受另外一些样式属性。
+
+扩展后 animate 方法接受以下属性:
+
+- backgroundColor
+- borderBottomColor
+- borderLeftColor
+- borderRightColor
+- borderTopColor
+- Color
+- outlineColor
+
+```javascript
+var state = true;
+$( "#button" ).click(function() {
+	if ( state ) {
+		$( "#effect" ).animate({
+			backgroundColor: "#aa0000",
+			color: "#fff",
+			width: 500
+		}, 1000 );
+	} else {
+		$( "#effect" ).animate({
+			backgroundColor: "#fff",
+			color: "#000",
+			width: 240
+		}, 1000 );
+	}
+	state = !state;
+});
+```
+
+### effect() 方法
+
+```javascript
+function runEffect() {
+	var selectedEffect = $( "#effectTypes" ).val();
+
+	var options = {};
+	if ( selectedEffect === "scale" ) {
+		options = { percent: 0 };
+	} else if ( selectedEffect === "transfer" ) {
+		options = { to: "#button", className: "ui-effects-transfer" };
+	} else if ( selectedEffect === "size" ) {
+		options = { to: { width: 200, height: 60 } };
+	}
+
+	$( "#effect" ).effect( selectedEffect, options, 500, callback );
+};
+
+function callback() {
+	setTimeout(function() {
+		$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
+	}, 1000 );
+};
+
+$( "#button" ).click(function() {
+	runEffect();
+	return false;
+});
+```
+
+## Interactions（交互组件）
+
+### Draggable Widget
+
+Draggable Widget 允许使用鼠标移动元素。
+
+```javascript
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me around</p>
+</div>
+
+<script>
+	$( "#draggable" ).draggable();
+</script>
+```
+
+draggable()的事件:
+	
+- start：当拖动开始时触发。
+- drag：当鼠标在拖动过程中移动时触发。
+- stop：当拖动停止时触发。
+
+```javascript
+<div id="draggable" class="ui-widget ui-widget-content">
+
+    <p>Drag me to trigger the chain of events.</p>
+
+    <ul class="ui-helper-reset">
+        <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
+        <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
+        <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
+    </ul>
+</div>
+
+<script>
+    var $start_counter = $( "#event-start" ),
+            $drag_counter = $( "#event-drag" ),
+            $stop_counter = $( "#event-stop" ),
+            counts = [ 0, 0, 0 ];
+
+    $( "#draggable" ).draggable({
+        start: function() {
+            counts[ 0 ]++;
+            updateCounterStatus( $start_counter, counts[ 0 ] );
+        },
+        drag: function() {
+            counts[ 1 ]++;
+            updateCounterStatus( $drag_counter, counts[ 1 ] );
+        },
+        stop: function() {
+            counts[ 2 ]++;
+            updateCounterStatus( $stop_counter, counts[ 2 ] );
+        }
+    });
+
+    function updateCounterStatus( $event_counter, new_count ) {
+        // first update the status visually...
+        if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
+            $event_counter.addClass( "ui-state-hover" )
+                    .siblings().removeClass( "ui-state-hover" );
+        }
+        // ...then update the numbers
+        $( "span.count", $event_counter ).text( new_count );
+    }
+</script>
+```
+
+draggable() 的选项:
+
+- axis：设置只能在x轴或y轴方向拖动。
+- containment：设置在某个区域内拖动。
+- cursor：设置拖动时鼠标的样式。
+- cursorAt：设置鼠标的相对定位。
+- handle：设置指定元素触发鼠标按下事件才能拖动。
+- cancel：防止在指定元素上拖动。
+- revert：当停止拖动时，元素是否被重置到初始位置。
+- snap：拖动元素是否吸附在其他元素。
+- snapMode：设置拖动元素在指定元素的哪个边缘。
+	- snap设置为true时该选项有效。
+	- 可选值 - inner|outer|both
+
+```javascript
+<div id="draggable1" class="draggable ui-widget-content">
+    <p>I can be dragged only vertically</p>
+</div>
+
+<div id="draggable2" class="draggable ui-widget-content">
+    <p>I can be dragged only horizontally</p>
+</div>
+
+<div id="draggable4" class="draggable ui-widget-content">
+    <p>I will always stick to the center (relative to the mouse)</p>
+</div>
+
+<div id="draggable5" class="draggable ui-widget-content">
+    <p class="ui-widget-header">I can be dragged only by this handle</p>
+</div>
+
+<div id="draggable6" class="draggable ui-widget-content">
+    <p>You can drag me around&hellip;</p>
+    <p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
+</div>
+
+<div id="draggable7" class="draggable ui-widget-content">
+    <p>Revert the original</p>
+</div>
+
+<div id="draggable8" class="draggable ui-widget-content">
+    <p>Default (snap: true), snaps to all other draggable elements</p>
+</div>
+
+<div id="draggable9" class="draggable ui-widget-content">
+    <p>I only snap to the outer edges of the big box</p>
+</div>
+
+<div id="containment-wrapper" class="draggable">
+    <div id="draggable3" class="draggable ui-widget-content">
+        <p>I'm contained within the box</p>
+    </div>
+</div>
+
+<script>
+    $( "#draggable1" ).draggable({ axis: "y" });
+    $( "#draggable2" ).draggable({ axis: "x" });
+    $( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
+    $( "#draggable4" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
+    $( "#draggable5" ).draggable({ handle: "p" });
+    $( "#draggable6" ).draggable({ cancel: "p.ui-widget-header" });
+    $( "#draggable7" ).draggable({ revert: true });
+    $( "#draggable8" ).draggable({ snap: true });
+    $( "#draggable9" ).draggable({ snap: "#containment-wrapper", snapMode: "outer" });
+</script>
+```
+
+### Droppable Widget
+
+Droppable Widget 为可拖拽小部件创建目标。
+
+droppable() 的事件:
+
+- drop：该事件在被允许拖放的元素覆盖时触发。
+
+droppable() 的选项:
+
+- accept：指定可拖动的元素可被接受。
+- activeClass：被允许拖放的元素覆盖时，改变样式。
+- hoverClass：被允许拖放的元素悬停时，改变样式。
+
+```javascript
+<div id="draggable-nonvalid" class="ui-widget-content">
+    <p>I'm draggable but can't be dropped</p>
+</div>
+
+<div id="draggable" class="ui-widget-content">
+    <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+    <p>Drop here</p>
+</div>
+<script>
+    $( "#draggable, #draggable-nonvalid" ).draggable();
+
+    $( "#droppable" ).droppable({
+        accept: "#draggable",
+        activeClass: "ui-state-hover",
+        hoverClass: "ui-state-active",
+        drop: function( event, ui ) {
+            $( this )
+                    .addClass( "ui-state-highlight" )
+                    .find( "p" )
+                    .html( "Dropped!" );
+        }
+    });
+</script>
+```
+
+### Resizeable Widget
+
+Resizeable Widget 使用鼠标改变元素的尺寸。
+
+```javascript
+<div id="resizable" class="ui-widget-content">
+    <h3 class="ui-widget-header">Resizable</h3>
+</div>
+<script>
+    $( "#resizable" ).resizable();
+</script>
+```
+
+### Sortable Widget
+
+Sortable Widget 使用鼠标调整列表中或者网格中元素的排序。
+
+```javascript
+<ul id="sortable">
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
+</ul>
+<script>
+    $( "#sortable" ).sortable();
+</script>
+```
+
+## Widget（部件）
+
+### Accordion Widget
+
+Accordion Widget 把一对标题和内容面板转换成折叠面板。
+
+```javascript
+<div id="accordion">
+    <h3>Section 1</h3>
+    <div>
+        <p>
+            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+        </p>
+    </div>
+    <h3>Section 2</h3>
+    <div>
+        <p>
+            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+            suscipit faucibus urna.
+        </p>
+    </div>
+    <h3>Section 3</h3>
+    <div>
+        <p>
+            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+            Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+            ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+            lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+        </p>
+        <ul>
+            <li>List item one</li>
+            <li>List item two</li>
+            <li>List item three</li>
+        </ul>
+    </div>
+    <h3>Section 4</h3>
+    <div>
+        <p>
+            Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+            et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+            mauris vel est.
+        </p>
+        <p>
+            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+            inceptos himenaeos.
+        </p>
+    </div>
+</div>
+
+<script>
+    $( "#accordion" ).accordion();
+</script>
+```
+
+> **值得注意的是:**
+> 
+> - 使用`<div>`元素作为折叠面板的容器。
+> - 使用`<h3>`元素作为折叠面板的标题。
+> - 使用`<div>`元素作为折叠面板的内容。
+
+### Autocomplete Widget
+
+Autocomplete Widget 自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
+
+```javascript
+<div class="ui-widget">
+    <label for="tags">Tags: </label>
+    <input id="tags">
+</div>
+<script>
+    var availableTags = [
+        "ActionScript",
+        "AppleScript",
+        "Asp",
+        "BASIC",
+        "C",
+        "C++",
+        "Clojure",
+        "COBOL",
+        "ColdFusion",
+        "Erlang",
+        "Fortran",
+        "Groovy",
+        "Haskell",
+        "Java",
+        "JavaScript",
+        "Lisp",
+        "Perl",
+        "PHP",
+        "Python",
+        "Ruby",
+        "Scala",
+        "Scheme"
+    ];
+    $( "#tags" ).autocomplete({
+        source: availableTags
+    });
+</script>
+```
+
+### Datepicker Widget
+
+Datepicker Widget 从弹出框或在线日历选择一个日期。
+
+```javascript
+<p>Date: <input type="text" id="datepicker"></p>
+<script>
+    $( "#datepicker" ).datepicker();
+</script>
+```
+
+### Dialog Widget
+
+Dialog Widget 在一个交互覆盖层中打开内容。
+
+- 基本对话框示例
+
+```javascript
+<div id="dialog" title="Basic dialog">
+    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+</div>
+<script>
+    $( "#dialog" ).dialog();
+</script>
+```
+
+- 模式对话框示例
+
+```javascript
+<div id="dialog-modal" title="Basic modal dialog">
+    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
+</div>
+<script>
+    $( "#dialog-modal" ).dialog({
+        modal: true
+    });
+</script>
+```
+
+- 操作对话框示例
+
+```javascript
+<div id="dialog" title="Basic dialog">
+    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+</div>
+
+<button id="opener">Open Dialog</button>
+
+<script>
+    $( "#dialog" ).dialog({
+        autoOpen: false,
+        show: {
+            effect: "blind",
+            duration: 1000
+        },
+        hide: {
+            effect: "explode",
+            duration: 1000
+        },
+        buttons : {
+            "OK": function() {
+                $( this ).dialog( "close" );
+            },
+            Cancel: function() {
+                $( this ).dialog( "close" );
+            }
+        }
+    });
+
+    $( "#opener" ).button().click(function() {
+        $( "#dialog" ).dialog( "open" );
+    });
+</script>
+```
+
+### Tabs Widget
+
+Tabs Widget 是一种多面板的单内容区，每个面板与列表中的标题相关。
+
+```javascript
+<div id="tabs">
+    <ul>
+        <li><a href="#tabs-1">Nunc tincidunt</a></li>
+        <li><a href="#tabs-2">Proin dolor</a></li>
+        <li><a href="#tabs-3">Aenean lacinia</a></li>
+    </ul>
+    <div id="tabs-1">
+        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+    </div>
+    <div id="tabs-2">
+        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+    </div>
+    <div id="tabs-3">
+        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+    </div>
+</div>
+<script>
+    $( "#tabs" ).tabs();
+</script>
+```
+
+### Tooltip Widget
+
+Tooltip Widget 可自定义的、可主题化的工具提示框，替代原生的工具提示框。
+
+```javascript
+<p>
+    <label for="age">Your age:</label>
+    <input id="age" title="We ask for your age only for statistical purposes.">
+</p>
+<script>
+    $( document ).tooltip();
+</script>
+```
+
+### Menu Widget
+
+Menu Widget 带有鼠标和键盘交互的用于导航的可主题化菜单。
+
+- 禁用页面中默认的鼠标右键功能。
+
+```javascript
+$(document).contextmenu(function (event) {
+	event.preventDefault();
+});
+```
+
+- 自定义鼠标右键菜单。
+
+```javascript
+$(document).mousedown(function (event) {
+	if(event.button == 2){
+		$( "#menu").removeAttr("style").menu().position({
+			my: "left top",
+			at: "left top",
+			of : event,
+			collision: "fit"
+		});
+	}
+});
+```
--- a/JavaScript/jquery2/like-array-object.md
+++ b/JavaScript/jquery2/like-array-object.md
@@ -0,0 +1,43 @@
+类数组对象就是结构上类似于数组的对象，该对象具备数组的一些特性属性或方法，同时具有自己独特的一些属性或方法。
+
+## 数组与类数组对象的区别
+
+- 数组的类型是 Array
+- 类数组对象的类型是 Object
+
+## 类数组的操作
+
+- length属性：获取指定元素的个数。
+- eq(index)：将下标等于index的DOM对象取出来。
+- get(index)：返回一个DOM对象组成的数组。
+- index（obj）：返回DOM或jQuery对象在类数组中的下标。
+
+### 遍历方法
+
+`$(selector).each(callback)` 方法
+
+- callback：回调函数，function(index,domEle){}
+	- index：遍历过程中的索引值
+	- domEle：遍历后得到的DOM对象
+
+```javascript
+$("input").each(function(index,domEle){
+   console.log(domEle.value);
+});
+```
+
+`$.each(obj,callback)` 方法
+
+- obj：需要遍历的对象或数组。
+- callback：回调函数，function(index,domEle){}
+	- index：遍历过程中的索引值
+	- domEle：遍历后得到的DOM对象
+
+```javascript
+$.each($("input"),function(index,domEle){
+    console.log(domEle.value);
+    console.log($(domEle).val());
+    console.log(this.value);
+    console.log($(this).val());
+});
+```