diff --git a/01-html/02-html标签图文详解（二）.md b/01-html/02-html标签图文详解（二）.md
index 63516bb..99d5314 100644
--- a/01-html/02-html标签图文详解（二）.md
+++ b/01-html/02-html标签图文详解（二）.md
@@ -97,7 +97,7 @@
-声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。
+声明：ul的儿子，只能是li。但是li是一个容器级标签，**li里面什么都能放，甚至可以再放一个ul**。
### 2、有序列表``，里面的每一项是`- `
diff --git a/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md b/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md
index b66c65d..2417d5e 100644
--- a/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md
+++ b/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md
@@ -7,7 +7,7 @@
## 绑定事件的两种方式
-我们在上一篇文章中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
+我们在上一篇文章 [DOM操作详解](http://www.cnblogs.com/smyhvae/p/8366012.html) 中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
### 方式一：onclick
diff --git a/07-jQuery/01-jQuery的介绍和选择器.md b/07-jQuery/01-jQuery的介绍和选择器.md
new file mode 100644
index 0000000..fe6447d
--- /dev/null
+++ b/07-jQuery/01-jQuery的介绍和选择器.md
@@ -0,0 +1,1157 @@
+
+
+> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8414627.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
+
+> 以下是正文。
+
+
+
+## jQuery 的介绍
+
+### 引入 jQuery 的原因
+
+在用 js 写代码时，会遇到一些问题：
+
+- window.onload 事件有事件覆盖的问题，因此只能写一个事件。
+
+- 代码容错性差。
+
+- 浏览器兼容性问题。
+
+- 书写很繁琐，代码量多。
+
+- 代码很乱，各个页面到处都是。
+
+- 动画效果很难实现。
+
+如下图所示：
+
+
+
+jQuery的出现，可以解决以上问题。
+
+### 什么是 jQuery
+
+jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
+
+js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
+
+以下是jQuery的相关信息：
+
+- 官网：
+
+- 官网API文档：
+
+- 汉化API文档：
+
+### 学习jQuery，主要是学什么
+
+初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功API。
+
+这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
+
+### jQuery初体验
+
+现在用原生 js 来写下面这一段代码：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+如果用 jQuery 来写，保持其他的代码不变，`
+
+```
+
+### jQuery 的两大特点
+
+- 链式编程：比如`.show()`和`.html()`可以连写成`.show().html()`。
+
+- 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
+
+## jQuery 的使用
+
+### 使用 jQuery 的基本步骤
+
+（1）引包
+
+（2）入口函数
+
+（3）功能实现代码（事件处理）
+
+如下图所示：
+
+
+
+主要，导包的代码一定要放在js代码的最上面。
+
+### jQuery 的版本
+
+jQuery 有两个大版本：
+
+- 1.x版本：最新版为 v1.11.3。
+
+- 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。
+
+- 3.x版本。
+
+
+我们以 v1.11.1版本为例，下载下来后发现，里面有两个文件：
+
+
+
+它们的区别是：
+
+- 第一个是未压缩版，第二个是压缩版。
+
+- 平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。
+
+
+## jQuery 的入口函数和 `$` 符号
+
+
+### 入口函数（重要）
+
+原生 js 的入口函数指的是：`window.onload = function() {};` 如下：
+
+```javascript
+ //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
+ //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
+ window.onload = function () {
+ alert(1);
+ }
+```
+
+
+而 jQuery的入口函数，有以下几种写法：
+
+写法一：
+
+
+```javascript
+ //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
+ $(document).ready(function () {
+ alert(1);
+ })
+```
+
+写法二：（写法一的简洁版）
+
+```javascript
+ //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
+ $(function () {
+ alert(1);
+ });
+```
+
+写法三：
+
+```javascript
+ //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
+ $(window).ready(function () {
+ alert(1);
+ })
+```
+
+**jQuery入口函数与js入口函数的区别**：
+
+区别一：书写个数不同：
+
+- Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
+
+- jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
+
+
+区别二：执行时机不同：
+
+- Js的入口函数是在**所有的文件资源加载**完成后，才执行。这些**文件资源**包括：页面文档、外部的js文件、外部的css文件、图片等。
+
+- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的**外部资源**都加载完成。
+
+文档加载的顺序：从上往下，边解析边执行。
+
+### jQuery的`$`符号
+
+jQuery 使用 `$` 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
+
+jQuery占用了我们两个变量：`$` 和 jQuery。当我们在代码中打印它们俩的时候：
+
+
+```html
+
+
+```
+
+打印结果如下：
+
+
+
+从打印结果可以看出，$ 代表的就是 jQuery。
+
+那怎么理解jQuery里面的 `$` 符号呢？
+
+**`$` 实际上表示的是一个函数名** 如下：
+
+
+```html
+ $(); // 调用上面我们自定义的函数$
+
+ $(document）.ready(function(){}); // 调用入口函数
+
+ $(function(){}); // 调用入口函数
+
+ $(“#btnShow”) // 获取id属性为btnShow的元素
+
+ $(“div”) // 获取所有的div标签元素
+
+```
+
+如上方所示，jQuery 里面的 `$` 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。
+
+jQuery这个js库，除了` $` 之外，还提供了另外一个函数：jQuery。jQuery函数跟 `$` 函数的关系：`jQuery === $`。
+
+## js中的DOM对象 和 jQuery对象 比较（重点，难点）
+
+### 二者的区别
+
+通过 jQuery 获取的元素是一个**数组**，数组中包含着原生JS中的DOM对象。举例：
+
+针对下面这样一个div结构：
+
+```html
+
+
+
+
+
+```
+
+通过原生 js 获取这些元素节点的方式是：
+
+```javascript
+ var myBox = document.getElementById("box"); //通过 id 获取单个元素
+ var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是数组
+ var divArr = document.getElementsByTagName("div"); //通过标签获取的是数组
+```
+
+通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）
+
+```javascript
+ //获取的是数组，里面包含着原生 JS 中的DOM对象。
+ var jqBox1 = $("#box");
+ var jqBox2 = $(".box");
+ var jqBox3 = $("div");
+```
+
+我们打印出来看看：
+
+
+
+上图显示，由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。
+
+**总结**：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
+
+### 二者的相互转换
+
+**1、 DOM 对象 转为 jQuery对象**：
+
+```javascript
+ $(js对象);
+```
+
+举例：（拿上一段的代码举例）
+
+```javascript
+ //转换。
+ jqBox1 = $(myBox);
+ jqBox2 = $(boxArr);
+ jqBox3 = $(divArr);
+```
+
+DOM 对象转换成了 jquery 对象之后，皮上面的功能可以直接调用。
+
+**2、jQuery对象 转为 DOM 对象**：
+
+```javascript
+ jquery对象[index]; //方式1（推荐）
+
+ jquery对象.get(index); //方式2
+```
+
+jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：
+
+```javascript
+ //jquery对象转换成 DOM 对象之后
+ jqBox3[0].style.backgroundColor = "black";
+ jqBox3.get(4).style.backgroundColor = "pink";
+```
+
+**总结**：如果想要用哪种方式设置属性或方法，必须转换成该类型。
+
+### 举例：隔行变色
+
+代码如下：
+
+```html
+
+
+
+
+
+
+
+
+
+
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+
+
+
+```
+
+效果如下：
+
+
+
+## jQuery 选择器
+
+我们以前在CSS中学习的选择器有：
+
+
+
+今天来学习一下jQuery 选择器。
+
+jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。
+
+### 1、jQuery 的基本选择器
+
+
+
+解释如下：
+
+
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+效果如下：
+
+
+
+### 2、层级选择器
+
+
+
+解释如下：
+
+
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+ - 111
+ - 222
+ - 333
+
+ - aaa
+ - bbb
+ - ccc
+
+
+
+
+```
+
+效果：
+
+
+
+### 3、基本过滤选择器
+
+
+
+解释：
+
+
+
+举例：
+
+```html
+
+
+```
+
+### 4、属性选择器
+
+
+
+### 5、筛选选择器
+
+
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ 生命壹号，永不止步
+ - 生命壹号，永不止步
+ 生命壹号，永不止步
+ - 生命壹号，永不止步
+ 生命壹号，永不止步
+
+ - 我是ol中的li
+ - 我是ol中的li
+ - 我是ol中的li
+ - 我是ol中的li
+
+
+
+
+
+```
+
+效果：
+
+
+
+
+## 举例
+
+### 举例1：鼠标悬停时，弹出下拉菜单【重要】
+
+完整版代码：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+上方代码中，我们可以看到，用 jQuery来操作，是非常方便的。
+
+实现效果如下：
+
+20180205_1030.gif
+
+**this的用法：**
+
+上方代码中，核心的一行代码是：
+
+```javascript
+ $(this).children("ul").show();
+
+ $(this).children("ul").hide();
+```
+
+如果我把这行代码中的this直接写成 DOM对象：
+
+```javascript
+ jqli.children("ul").show();
+
+ jqli.children("ul").hide();
+```
+
+产生的结果是：（不是我们期望的结果）
+
+
+20180205_1050.gif
+
+
+两张图的对比，可以看出this的作用：谁正在调用函数，this就指的是谁。
+
+### 举例2：鼠标悬停时变色
+
+完整版代码如下：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+ - 生命壹号，永不止步
+
+
+
+
+```
+
+效果如下：
+
+20180205_1100.gif
+
+
+### 举例3：突出显示
+
+要求：鼠标悬停时，突出显示这个li，让其他的li都半透明。
+
+用 jQuery的选择起来实现，会发现非常方便。
+
+完整版代码如下：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+实现的效果：
+
+20180205_1118.gif
+
+注意这里的css布局里，每一个图片都用一个li来存放。设置li的父亲的宽度之后，然后将li设置为浮动，即可自适应地排列成两排。
+
+工程文件：
+
+- [2018-02-05-突出显示.rar]()
+
+
+### 举例4：手风琴效果
+
+完整版代码：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+效果：
+
+20180205_1120.gif
+
+
+注意这里的 选择器的用法：parent、next
+
+### 举例5：淘宝精品服饰广告
+
+完整版代码：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+效果：
+
+20180205_1135.gif
+
+工程文件：
+
+- [2018-02-05-淘宝精品服饰广告.rar]()
+
+
+
+
+
+
+## 我的公众号
+
+想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+
diff --git a/07-jQuery/02-jQuery动画详解.md b/07-jQuery/02-jQuery动画详解.md
new file mode 100644
index 0000000..c75da9a
--- /dev/null
+++ b/07-jQuery/02-jQuery动画详解.md
@@ -0,0 +1,526 @@
+
+
+> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
+
+> 以下是正文。
+
+## 前言
+
+jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
+
+## 显示动画
+
+方式一：
+
+```javascript
+ $("div").show();
+```
+
+解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过`display: block;`实现的。
+
+方式二：
+
+```javascript
+ $("div").show(2000);
+```
+
+解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
+
+效果如下：
+
+
+
+方式三：
+
+```javascript
+ $("div").show("slow");
+```
+
+参数可以是：
+
+- slow 慢：600ms
+
+- normal 正常：400ms
+
+- fast 快：200ms
+
+解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
+
+方式四：
+
+```javascript
+ //show(毫秒值，回调函数;
+ $("div").show(5000,function () {
+ alert("动画执行完毕！");
+ });
+```
+
+解释：动画执行完后，立即执行回调函数。
+
+**总结：**
+
+上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
+
+## 隐藏动画
+
+方式参照上面的show()方法的方式。如下：
+
+
+```javascript
+ $(selector).hide();
+
+ $(selector).hide(1000);
+
+ $(selector).hide("slow");
+
+ $(selector).hide(1000, function(){});
+```
+
+**显示和隐藏的来回切换：**
+
+显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
+
+同样是四种方式：
+
+```javascript
+$(selector).toggle();
+
+```
+
+## 滑入和滑出
+
+**1、滑入动画效果**：（类似于生活中的卷帘门）
+
+
+```javascript
+ $(selector).slideDown(speed, 回调函数);
+```
+
+解释：下拉动画，显示元素。
+
+注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
+
+
+**2 滑出动画效果：**
+
+```javascript
+ $(selector).slideUp(speed, 回调函数);
+```
+
+解释：上拉动画，隐藏元素。
+
+
+**3、滑入滑出切换动画效果：**
+
+```javascript
+ $(selector).slideToggle(speed, 回调函数);
+```
+
+参数解释同show()方法。
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## 淡入淡出动画
+
+1、淡入动画效果：
+
+```javascript
+ $(selector).fadeIn(speed, callback);
+```
+
+作用：让元素以淡淡的进入视线的方式展示出来。
+
+2、淡出动画效果：
+
+```javascript
+ $(selector).fadeOut(1000);
+```
+
+作用：让元素以渐渐消失的方式隐藏起来
+
+3、淡入淡出切换动画效果：
+
+
+```javascript
+ $(selector).fadeToggle('fast', callback);
+```
+
+作用：通过改变透明度，切换匹配元素的显示或隐藏状态。
+
+参数的含义同show()方法。
+
+代码举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## 自定义动画
+
+```javascript
+ $(selector).animate({params}, speed, callback);
+```
+
+作用：执行一组CSS属性的自定义动画。
+
+- 第一个参数表示：要执行动画的CSS属性（必选）
+
+- 第二个参数表示：执行动画时长（可选）
+
+- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
+
+代码举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## 停止动画
+
+```javascript
+ $(selector).stop(true, false);
+```
+
+**里面的两个参数，有不同的含义。**
+
+第一个参数：
+
+- true：后续动画不执行。
+
+- false：后续动画会执行。
+
+第二个参数：
+
+- true：立即执行完成当前动画。
+
+- false：立即停止当前动画。
+
+PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
+
+**效果演示：**
+
+当第二个参数为true时，效果如下：
+
+
+
+当第二个参数为false时，效果如下：
+
+
+
+
+这个**后续动画**我们要好好理解，来看个例子。
+
+**案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）**
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+效果如下：
+
+
+
+上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
+
+如果去掉stop()函数，效果如下：（不是我们期望的效果）
+
+
+
+### stop方法的总结
+
+当调用stop()方法后，队列里面的下一个动画将会立即开始。
+但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
+
+如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
+
+注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
+
+## 我的公众号
+
+想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+
+
diff --git a/07-jQuery/03-jQuery操作DOM.md b/07-jQuery/03-jQuery操作DOM.md
new file mode 100644
index 0000000..fc0d7ee
--- /dev/null
+++ b/07-jQuery/03-jQuery操作DOM.md
@@ -0,0 +1,397 @@
+
+
+
+## 文本主要内容
+
+- 样式和类操作
+
+- jQuery 动画
+
+- 节点操作
+
+
+## 样式操作和类操作
+
+作用：设置或获取元素的样式属性值。
+
+### 样式操作
+
+**1、设置样式：**
+
+```javascript
+
+ //设置单个样式： css(属性，值);
+ $("div").css("background-color","red");
+
+ //设置多个样式： css(json);
+ $("div").css({"width":100,"height":100,"background-color":"pink"});
+
+
+
+```
+
+
+**2、获取样式：**
+
+```javascript
+ //获取样式：css(属性);
+ //获取的时候如果有很多个，那么获取jquery对象中的第一个
+ alert($("div").css("width"));
+```
+
+举例如下：
+
+20180205_1315.png
+
+### 类操作（className）
+
+**1、添加类样式：**
+
+```javascript
+ $(selector).addClass("liItem"); //为指定元素添加类className
+```
+
+注意：此处类名不带点，所有类操作的方法类名都不带点。
+
+
+**2、移除类样式：**
+
+
+```javascript
+ $(selector).removeClass("liItem"); //为指定元素移除类 className
+ $(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类
+```
+
+**3、判断有没有类样式：**
+
+```javascript
+ $(selector).hasClass("liItem"); //判断指定元素是否包含类 className
+```
+
+此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**4、切换类样式：**
+
+```javascript
+$(selector).toggleClass(“liItem”); //为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
+```
+
+解释：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
+
+如果采用采用正常的思路实现上面这句话，代码是：
+
+
+```javascript
+ if($("div").hasClass("current")){
+ //如果有类名，那么删除
+ $("div").removeClass("current")
+ }else{
+ //如果没有类名，那么添加
+ $("div").addClass("current")
+ }
+```
+
+现在有了toggleClass()方法，一行代码即可实现。
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+实现的效果：
+
+20180205_1330.gif
+
+
+### 样式操作和类操作的比较
+
+- 操作的样式非常少，那么可以通过`.css()`实现。
+
+- 操作的样式很多，建议通过使用类 class 的方式来操作。
+
+- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
+
+
+**举例**：addClass+removeClass
+
+代码实现：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+ - 国际大牌◆
+ - 国妆名牌◆
+ - 清洁用品◆
+ - 男士精品
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+