diff --git a/04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md b/04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md
index 2dd366f..079cbe2 100644
--- a/04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md
+++ b/04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md
@@ -4,9 +4,9 @@
- `document.write();` 不常用，因为容易覆盖原来的页面。
-- `innerHTML;` 用的比较多。绑定属性和内容比较方便。(节点套节点)
+- `innerHTML = ();` 用的比较多。绑定属性和内容比较方便。(节点套节点)
-- `document.createElement;` 用得也比较多，指定数量的时候一般用它。
+- `document.createElement();` 用得也比较多，指定数量的时候一般用它。
**1、方式一：**
diff --git a/07-jQuery/01-jQuery的介绍和选择器.md b/07-jQuery/01-jQuery的介绍和选择器.md
index fe6447d..b9baed6 100644
--- a/07-jQuery/01-jQuery的介绍和选择器.md
+++ b/07-jQuery/01-jQuery的介绍和选择器.md
@@ -42,7 +42,7 @@ js库是把我们常用的功能放到一个单独的文件中，我们用的时
- 官网API文档：
-- 汉化API文档：
+- 中文汉化API文档：
### 学习jQuery，主要是学什么
@@ -122,9 +122,22 @@ js库是把我们常用的功能放到一个单独的文件中，我们用的时
### jQuery 的两大特点
-- 链式编程：比如`.show()`和`.html()`可以连写成`.show().html()`。
+（1）**链式编程**：比如`.show()`和`.html()`可以连写成`.show().html()`。
+
+
+链式编程原理：return this。
+
+通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
+
+
+（2）**隐式迭代**：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
+
+如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
+
+
+
+
-- 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。
## jQuery 的使用
diff --git a/07-jQuery/02-jQuery动画详解.md b/07-jQuery/02-jQuery动画详解.md
index c75da9a..784c5bb 100644
--- a/07-jQuery/02-jQuery动画详解.md
+++ b/07-jQuery/02-jQuery动画详解.md
@@ -516,6 +516,82 @@ PS：参数如果都不写，默认两个都是false。实际工作中，直接
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
+
+## 举例：右下角的弹出广告
+
+代码实现：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+我是内容
+
+
+
+
+
+
+
+```
+
+效果如下：
+
+20180205_2000.gif
+
+
## 我的公众号
想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
diff --git a/07-jQuery/03-jQuery操作DOM.md b/07-jQuery/03-jQuery操作DOM.md
index fc0d7ee..8e1f27e 100644
--- a/07-jQuery/03-jQuery操作DOM.md
+++ b/07-jQuery/03-jQuery操作DOM.md
@@ -4,9 +4,7 @@
## 文本主要内容
- 样式和类操作
-
-- jQuery 动画
-
+
- 节点操作
@@ -322,30 +320,658 @@ $(selector).toggleClass(“liItem”); //为指定元素切换类 className
-```javascript
+## jQuery 的节点操作
+
+
+### 动态创建元素
+
+原生 js 有[三种动态创建元素](07-DOM操作练习：innerHTML的方式创建元素.md)的方式。这里我们学一下 jQuery 动态创建元素。**注意，创建的是 jQuery 对象**。
+
+方式一：
+
+```javascript
+ var $spanNode1 = $("我是一个span元素"); // 返回的是 jQuery对象
+```
+
+此方法类似于 原生 js 中的`document.createElement("标签名");`
+
+方式二：（推荐）
+
+
+```javascript
+ var node = $("#box").html("我是li");
+```
+
+此方法类似于 原生 js 中的`innerHTML`。
+
+举例：
+
+```javascript
+ //方式一： $("标签") :类比于js中的document.createElement("li");
+ console.log($("我是li标签"));
+
+ //方式二： $("ul").html(""); :类比innerHTML属性。因为此属性，识别标签。
+ $("ul").html("我是html方法穿件出来的li标签")
+```
+
+
+### 添加元素
+
+jQuery 添加元素的方法非常多，最重要的方法是`append()`。格式如下：
+
+
+```javascript
+// 方式一：在$(selector)中追加$node
+$(selector).append($node); //参数是 jQuery对象
+
+// 方式二：在$(selector)中追加div元素，
+$(selector).append(''); //参数是 htmlString
```
+作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）。
+通俗的解释：**在盒子里的最末尾添加元素**。
+
+- 如果是页面中存在的元素，那调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。
+
+- 如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
+
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+效果：
+
+20180205_2020.gif
+
+
+**其他的添加元素的方法：**
+
+
+方法2：
+
+```javascript
+ $(selector).appendTo(node);
+```
+
+作用：同append()，只不过是反着写的。
+
+方法3：
+
+```javascript
+ $(selector).prepend(node);
+```
+
+作用：在元素的第一个子元素前面追加内容或节点。
+
+方法4：
+
+```javascript
+ $(selector).after(node);
+```
+
+作用：在被选元素之后，作为**兄弟元素**插入内容或节点。
+
+**方法5：**
+
+```javascript
+ $(selector).before(node);
+```
+
+作用：在被选元素之前，作为**兄弟元素**插入内容或节点。
+
+
+### 清空元素
+
+方式一：没有参数
+
+
+```javascript
+ $(selector).empty();
+ $(selector).html("");
+```
+
+
+解释：清空指定元素的所有子元素（光杆司令）。
+
+方式二：
+
+//
+
+
+```javascript
+ $(selector).remove();
+```
+
+解释：“自杀” 。把自己以及所有的内部元素从文档中删除掉。
+
+### 复制元素
+
+
+格式：
+
+
+```javascript
+ 复制的新元素 = $(selector).clone();
+```
+
+解释：复制$(selector)这个元素。是深层复制。
+
+### 总结
+
+推荐使用 `html("")` 方法来创建元素或者 `html("")` 清空元素。
+
+### 案例：选择水果
+
+完整版代码：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+效果：
+
+20180205_2040.gif
+
+### 案例：动态添加表格项
+
+代码如下：
```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 标题 |
+ 地址 |
+ 说明 |
+
+
+
+
+
+
+
+
+
+
+
+
+
```
+实现的效果：
+
+20180205_2045.gif
+
+代码解释：每次生成字符串str之前，记得先把之前的str清空，不然每次点击按钮，都会继续添加表格项。
+
+
+### 将上一个案例进一步提升：点击按钮，添加数据
+
+暂略。
+
+## jQuery 设置和获取属性
+
+jQuery 无法直接操作节点的属性和src等，我们需要借助attr()方法。下面介绍。
+
+### 属性操作
+
+**（1）设置属性：**
+
+```javascript
+ $(selector).attr("title", "生命壹号");
+```
+
+参数解释：第一个参数表示：要设置的属性名称。第二个参数表示：该属性名称对应的值。
+
+**（2）获取属性：**
+
+```javascript
+ $(selector).attr("title");
+```
+
+参数为：要获取的属性的名称，返回指定属性对应的值。
+
+**总结**：两个参数是给属性赋值，单个参数是获取属性值。
+
+
+**（3）移除属性：**
+
+
+```javascript
+ $(selector).removeAttr("title");
+```
+
+参数为：要移除的属性的名称。
+
+（4）form表单中的 `prop()`方法：
+
+针对`checked、selected、disabled`属性，要使用 `prop()`方法，而不是其他的方法。
+
+prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。例如：input和button的disabled特性，以及checkbox的checked特性。
+
+
+总结：细节可以参考：。
+
+以上四项的代码演示：
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+效果：
+
+20180205_2115.gif
+
+**案例：表格案例全选反选**
+
+完整版代码：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+### val()方法和 text()方法
+
+
+```javascript
+ $(selector).val();
+```
+
+作用：设置或返回 form 表单元素的value值，例如：input、select、textarea 的值。
+
+
+```javascript
+ $(selector).text();
+```
+
+作用：设置或获取匹配元素的文本内容。不带参数表示，会把所有匹配到的元素内容拼接为一个**字符串**，不同于其他获取操作。
+
```javascript
-
-
+ $(selector).text(“我是内容”);
```
+作用：设置的内容包含html标签，那么text()方法会把他们当作**纯文本**内容输出。
+
+总结：
+
+- text() 不识别标签。
+
+- html() 识别标签。
+
+举例：
+
+
@@ -353,45 +979,49 @@ $(selector).toggleClass(“liItem”); //为指定元素切换类 className
```html
+
+
+
+
+
+
+
+
+
+
+
+
你好
+
+
+
```
+打印结果：
-
-```javascript
-
-
-```
+20180205_2139.png
-
-
-
-
-
-```html
-
-
-```
-
-
-
-
-```javascript
-
-
-```
-
-
-
-
-
-
-```
-
-```
-
-
diff --git a/07-jQuery/04-jQuery的事件机制和其他知识.md b/07-jQuery/04-jQuery的事件机制和其他知识.md
new file mode 100644
index 0000000..0a38441
--- /dev/null
+++ b/07-jQuery/04-jQuery的事件机制和其他知识.md
@@ -0,0 +1,778 @@
+
+
+
+## jQuery 设置宽度和高度
+
+宽度操作：
+
+```javascript
+ $(selector).height(); //不带参数表示获取高度
+ $(selector).height(200); //带参数表示设置高度
+```
+
+
+宽度操作：
+
+
+```javascript
+ $(selector).width(); //不带参数表示获取宽度
+ $(selector).width(200); //带参数表示设置高宽度
+```
+
+
+**问题**：jQuery的css()获取高度，和jQuery的height获取高度，二者的区别？
+
+答案：
+
+
+```javascript
+ $("div").css(); //返回的是string类型，例如：30px
+
+ $("div").height(); //返回得失number类型，例如：30。常用于数学计算。
+```
+
+如上方代码所示，`$("div").height();`返回的是number类型，常用于数学计算。
+
+
+## jQuery 的坐标操作
+
+
+### offset()方法
+
+
+```javascript
+ $(selector).offset();
+ $(selector).offset({left:100, top: 150});
+```
+
+作用：获取或设置元素相对于 document 文档的位置。参数解释：
+
+- 无参数：表示获取。返回值为：{left:num, top:num}。返回值是相对于document的位置。
+
+- 有参数：表示设置。参数建议使用 number 数值类型。
+
+注意：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative。
+
+### position()方法
+
+```javascript
+ $(selector).position();
+```
+
+作用：获取相对于其最近的**带有定位**的父元素的位置。返回值为对象：`{left:num, top:num}`。
+
+注意：只能获取，不能设置。
+
+
+
+### scrollTop()方法
+
+
+```javascript
+ scrollTop();
+ $(selector).scrollTop(100);
+```
+
+作用：获取或者设置元素被卷去的头部的距离。参数解释：
+
+- 无参数：表示获取偏移。
+
+- 有参数：表示设置偏移，参数为数值类型。
+
+
+### scrollLeft()方法
+
+
+
+```javascript
+ scrollLeft();
+ $(selector).scrollLeft(100);
+```
+
+作用：获取或者设置元素水平方向滚动的位置。参数解释：
+
+- 无参数：表示获取偏移。
+
+- 有参数：表示设置偏移，参数为数值类型。
+
+代码示范：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## jQuery的事件机制
+
+### 常见的事件绑定
+
+- click(handler) 单击事件。
+
+- blur(handler) 失去焦点事件。
+
+- mouseenter(handler) 鼠标进入事件。
+
+- mouseleave(handler) 鼠标离开事件。
+
+- dbclick(handler) 双击事件。
+
+- change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。
+
+- focus(handler) 获得焦点事件。
+
+- keydown(handler) 键盘按下事件。
+
+参考链接：
+
+### on方式绑定事件
+
+最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQuery用on统一了所有的事件处理的方法，此方法兼容zepto(移动端类似于jQuery的一个库)。
+
+格式举例：
+
+
+```javascript
+ $(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
+ console.log(event.data); //event.data获取的就是第三个参数这个json。
+ console.log(event.data.name); //event.data.name获取的是name的值。
+ });
+```
+
+参数解释：
+
+- 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）。上方代码绑定的是单击事件和鼠标进入事件。
+
+- 第二个参数：selector, 执行事件的后代元素。
+
+- 第三个参数：data，传递给事件处理函数的数据，事件触发的时候通过event.data来使用（也就是说，可以通过event拿到data）
+
+- 第四个参数：handler，事件处理函数。
+
+
+简单点的写法：
+
+```javascript
+ $(document).on("click",".box", function () {
+ alert(1);
+ });
+```
+
+### off方式解绑事件
+
+```javascript
+ $(selector).off(); // 解绑匹配元素的所有事件
+
+ $(selector).off("click"); // 解绑匹配元素的所有click事件
+
+ $(selector).off( “click”, "**" ); // 解绑所有代理的click事件，元素本身的事件不会被解绑
+```
+
+## jQuery的事件对象
+
+event.data 传递给事件处理程序的额外数据
+
+event.currentTarget 等同于this，当前DOM对象
+
+event.pageX 鼠标相对于文档左部边缘的位置
+
+event.target 触发事件源，不一定===this
+
+event.stopPropagation()； 阻止事件冒泡
+
+event.preventDefault(); 阻止默认行为
+
+event.type 事件类型：click，dbclick…
+
+event.which 鼠标的按键类型：左1 中2 右3
+
+event.keyCode 键盘按键代码
+
+
+代码演示：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+上方代码中，我们通过event参数，获取了点击事件的各种event里的属性。
+
+
+单击网页后，打印结果为：
+
+20180205_2338.png
+
+
+**举例**：键盘上对的按键按下时，变色
+
+这个时候就要用到event参数，因为要获取event.keyCode，才能知道按下的是键盘上的哪个按键。
+
+代码实现：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
按键改变颜色
+
+ keyCode为：
+ 80
+
+
+ - 1
+ - 2
+ - 3
+ - 4
+ - 5
+ - 6
+ - 7
+ - 8
+ - 9
+ - 10
+
+
+
+
+```
+
+效果如下：
+
+20180206_1110.png
+
+## 多库共存
+
+**多库共存**指的是：jQuery占用了 `$` 和 `jQuery` 这两个变量。当在同一个页面中引用了 jQuery 库以及其他的库（或者其他版本的jQuery库），恰好其他的库中也用到了 `$` 或者`jQuery`变量.那么，要保证每个库都能正常使用，就产生了多库共存的问题。
+
+温馨提示：我们可以通过以下方式获取 jQuery 库的版本号。
+
+```javascript
+ console.log($.fn.jquery); //打印 jQuery 库的版本号
+```
+
+**办法一**：让 jQuery 放弃对 `$` 的使用权：
+
+```javascript
+ $.noConflict();
+```
+
+效果如下：
+
+20180206_1126.png
+
+上图中，代码中同时包含了两个版本的库。1.11.1版本放弃了对 `$` 的使用权，交给了1.8.2版本；但是1.11.1版本并没有放弃对 `jQuery`关键字的使用权。
+
+
+办法二：同时放弃放弃两个符号的使用权，并定义一个新的使用权（如果有三个库时，可以这样用）
+
+```javascript
+ $.noConflict(true); //返回值是新的关键字
+```
+
+效果如下：
+
+20180206_1133.png
+
+
+## jQuery 的插件机制
+
+
+jQuery 库，虽然功能强大，但也不是面面俱到。jQuery 是通过插件的方式，来扩展它的功能：
+
+- 当你需要某个插件的时候，你可以“安装”到jQuery上面，然后使用。
+
+- 当你不再需要这个插件，那你就可以从jQuery上“卸载”它。
+
+
+### 插件之改变颜色
+
+jQuery的自定义动画方法animate()，在执行动画时，是不支持设置背景色这个属性的。这个时候可以借助`jQuery.color.js`这个插件。
+
+
+举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+效果：
+
+20180206_1400.gif
+
+上方代码中，因为加入了一行插件：（注意顺序是放在jQuery插件之后）
+
+```html
+
+```
+
+否则的话，在动画执行的过程中，是无法设置背景色的。
+
+
+
+### 插件之懒加载
+
+懒加载：当打开一个网页时，只有我看到某个部分，再加载那个部分；而不是一下子全部加载完毕。这样可以优化打开的速度。
+
+比如说，我可以设置一张图片为懒加载，于是，这张图片会等我宠幸到它的时候，它再打开。
+
+
+代码举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+![]()
+
+
+```
+
+
+
+```
+