diff --git a/04-JavaScript基础/23-通过style对象设置行内样式.md b/04-JavaScript基础/23-通过style对象设置行内样式.md
deleted file mode 100644
index 67f3ad4..0000000
--- a/04-JavaScript基础/23-通过style对象设置行内样式.md
+++ /dev/null
@@ -1,502 +0,0 @@
-
-
-## style属性的获取和修改
-
-在DOM当中，如果想设置样式，有两种形式：
-
-- className（针对内嵌样式）
-
-- style（针对行内样式）
-
-这篇文章，我们就来讲一下style。
-
-需要注意的是：style是一个对象，只能获取**行内样式**，不能获取内嵌的样式和外链的样式。例如：
-
-```html
-
-
-
-
- Title
-
-
-
-
-
-
-
-
-
-```
-
-打印结果：
-
-
-
-上图显示，因为border属性不是行内样式，所以无法通过style对象获取。
-
-### 通过 js 读取元素的样式
-
-语法：（方式一）
-
-```javascript
- 元素.style.样式名
-```
-
-备注：我们通过style属性读取的样式都是**行内样式**。
-
-语法：（方式二）
-
-```javascript
- 元素.style["属性"]; //格式
-
- box.style["width"]; //举例
-```
-
-方式二最大的优点是：可以给属性传递参数。
-
-### 通过 js 修改元素的样式
-
-语法：
-
-```javascript
- 元素.style.样式名 = 样式值;
-```
-
-举例：
-
-```
- box1.style.width = "300px";
- box1.style.backgroundColor = "red"; // 驼峰命名法
-
-```
-
-备注：我们通过style属性设置的样式都是**行内样式**，而行内样式有较高的优先级。但是如果在样式中的其他地方写了`!important`，则此时`!important`会有更高的优先级。
-
-### style属性的注意事项
-
-style属性需要注意以下几点：
-
-（1）样式少的时候使用。
-
-（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。
-
-（3）值是字符串，没有设置值是“”。
-
-（4）命名规则，驼峰命名。
-
-（5）只能获取行内样式，和内嵌和外链无关。
-
-（6）box.style.cssText = “字符串形式的样式”。
-
-
-`cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：
-
-```html
-
-```
-
-打印结果：
-
-
-
-### style的常用属性
-
-style的常用属性包括：
-
-- backgroundColor
-
-- backgroundImage
-
-- color
-
-- width
-
-- height
-
-- border
-
-- opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx))
-
-注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，`-`不能作为标识符。比如：
-
-- DOM中：backgroundColor
-
-- CSS中：background-color
-
-## style属性的举例
-
-我们针对上面列举的几个style的样式，来举几个例子：
-
-- 举例1、改变div的大小和透明度
-
-- 举例2、当前输入的文本框高亮显示
-
-- 举例3、高级隔行变色、高亮显示
-
-下面来逐一实现。
-
-### 举例1：改变div的大小和透明度
-
-代码举例：
-
-```html
-
-
-
-
-
-```
-
-### 举例2：当前输入的文本框高亮显示
-
-代码实现：
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### 举例3：高级隔行变色、高亮显示
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
- | 序号 |
- 姓名 |
- 课程 |
- 成绩 |
-
-
-
-
- |
- 1
- |
- 生命壹号 |
- 语文 |
- 100 |
-
-
-
- |
- 2
- |
- 生命贰号 |
- 日语 |
- 99 |
-
-
- |
- 3
- |
- 生命叁号 |
- 营销学 |
- 98 |
-
-
- |
- 4
- |
- 生命伍号 |
- 数学 |
- 90 |
-
-
- |
- 5
- |
- 许嵩 |
- 英语 |
- 96 |
-
-
- |
- 6
- |
- vae |
- 体育 |
- 90 |
-
-
-
-
+
+
+
+
+
+
+
+```
+
+实现效果：
+
+
+
+### 举例3：商品放大镜
+
+代码实现：
+
+（1）index.html:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Item 1
+ - Item 2
+ - Item 3
+ - Item 4
+ - Item 5
+ - Item 6
+
+```
+
+
+当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听：
+
+
+```javascript
+ //每个 li 中做的事情
+ function addListeners4Li(liNode){
+ liNode.onclick = function clickHandler(){...};
+ liNode.onmouseover = function mouseOverHandler(){...}
+ }
+
+ window.onload = function(){
+ var ulNode = document.getElementById("parent-list");
+ var liNodes = ulNode.getElementByTagName("Li");
+ for(var i=0, l = liNodes.length; i < l; i++){
+ addListeners4Li(liNodes[i]);
+ }
+ }
+```
+
+但是，上面的做法会消耗内存和性能。
+
+
+因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下：
+
+
+
+```javascript
+ // 获取父节点，并为它注册click事件。 false 表示事件在冒泡阶段触发（默认）
+ document.getElementById("parent-list").addEventListener("click", function (e) {
+ // event.target 代表的是子元素。toUpperCase()方法 指的是转换为大写字母并返回
+ if (e.target && e.target.nodeName.toUpperCase() == "LI") {
+ // 真正的处理过程在这里
+ console.log("List item ", e.target.id, " was clicked!");
+ }
+ }, false);
+
+```
+
+
+上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。
+
+换而言之，事件是在父节点上注册的，参数为false，说明事件是在冒泡阶段触发（往上传递），那就只有父节点能拿到事件，子节点是不可能拿到事件的。
+
+所以事件委托可以减少大量的内存消耗，提高效率。
+
+事件委托的参考链接：
+
+- [荐 | JavaScript事件代理和委托（Delegation）](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html)
+
+- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)
+
+
+
+## 我的公众号
+
+想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+
diff --git a/04-JavaScript基础/31-事件对象Event和冒泡.md b/04-JavaScript基础/31-事件对象Event和冒泡.md
deleted file mode 100644
index 2d271fc..0000000
--- a/04-JavaScript基础/31-事件对象Event和冒泡.md
+++ /dev/null
@@ -1,829 +0,0 @@
-
-
-> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8413602.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
-
-> 以下是正文。
-
-
-## 绑定事件的两种方式/DOM事件的级别
-
-我们在上一篇文章 [DOM操作详解](http://www.cnblogs.com/smyhvae/p/8366012.html) 中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
-
-### DOM0的写法：onclick
-
-
-
-```javascript
- element.onclick = function () {
-
- }
-```
-
-
-举例：
-
-
-```html
-
-
-
-
-
-```
-
-点击按钮后，上方代码的打印结果：
-
-```html
-事件2
-```
-
-我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。
-
-### DOM2的写法：addEventListener
-
-
-
-```javascript
- element.addEventListener('click', function () {
-
- }, false);
-```
-
-
-参数解释：
-
-- 参数1：事件名(注意，没有on)
-
-- 参数2：事件名(执行函数)
-
-- 参数3：**true表示捕获阶段触发，false表示冒泡阶段触发（默认）**。如果不写，则默认为false。【重要】
-
-举例：
-
-```html
-
-
-
-
-```
-
-点击按钮后，上方代码的打印结果：
-
-
-```html
- 事件1
- 事件2
-```
-
-我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。
-
-## 事件对象
-
-在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
-
-所有浏览器都支持event对象，但支持的方式不同。如下。
-
-（1）普通浏览器支持 event。比如：
-
-
-
-（2）ie 678 支持 window.event。
-
-于是，我们可以采取一种兼容性的写法。如下：
-
-```javascript
- event = event || window.event; ////兼容性写法
-```
-
-代码举例：
-
-```html
-
-
-
-
-
-
-
-
-
-
-```
-
-
-### event 属性
-
-event 有很多属性，比如：
-
-
-
-由于pageX 和 pageY的兼容性不好，我们可以这样做：
-
-- 鼠标在页面的位置 = 被卷去的部分+可视区域部分。
-
-## Event举例
-
-### 举例1：鼠标跟随
-
-代码实现：
-
-```html
-
-
-
-
-
-
-
-
-![]()
-
-
-
-
-
-```
-
-实现效果：
-
-
-
-## event应用举例：获取鼠标距离所在盒子的距离
-
-关键点：
-
-```
- 鼠标距离所在盒子的距离 = 鼠标在整个页面的位置 - 所在盒子在整个页面的位置
-```
-
-代码演示：
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-实现效果：
-
-
-
-**举例：商品放大镜**
-
-代码实现：
-
-（1）index.html:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Item 1
- - Item 2
- - Item 3
- - Item 4
- - Item 5
- - Item 6
-
-```
-
-
-当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听：
-
-
-```javascript
- //每个 li 中做的事情
- function addListeners4Li(liNode){
- liNode.onclick = function clickHandler(){...};
- liNode.onmouseover = function mouseOverHandler(){...}
- }
-
- window.onload = function(){
- var ulNode = document.getElementById("parent-list");
- var liNodes = ulNode.getElementByTagName("Li");
- for(var i=0, l = liNodes.length; i < l; i++){
- addListeners4Li(liNodes[i]);
- }
- }
-```
-
-但是，上面的做法会消耗内存和性能。
-
-
-因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下：
-
-
-
-```javascript
- // 获取父节点，并为它注册click事件。 false 表示事件在冒泡阶段触发（默认）
- document.getElementById("parent-list").addEventListener("click", function (e) {
- // event.target 代表的是子元素。toUpperCase()方法 指的是转换为大写字母并返回
- if (e.target && e.target.nodeName.toUpperCase() == "LI") {
- // 真正的处理过程在这里
- console.log("List item ", e.target.id, " was clicked!");
- }
- }, false);
-
-```
-
-
-上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。
-
-换而言之，事件是在父节点上注册的，参数为false，说明事件是在冒泡阶段触发（往上传递），那就只有父节点能拿到事件，子节点是不可能拿到事件的。
-
-所以事件委托可以减少大量的内存消耗，提高效率。
-
-事件委托的参考链接：
-
-- [荐 | JavaScript事件代理和委托（Delegation）](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html)
-
-- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)
-
-
-
-## 我的公众号
-
-想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
-
-扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
-
-
diff --git a/04-JavaScript基础/32-BOM的常见内置方法和内置对象.md b/04-JavaScript基础/BOM的常见内置方法和内置对象.md
similarity index 100%
rename from 04-JavaScript基础/32-BOM的常见内置方法和内置对象.md
rename to 04-JavaScript基础/BOM的常见内置方法和内置对象.md
diff --git a/04-JavaScript基础/52-JS的小知识.md b/04-JavaScript基础/JS的小知识.md
similarity index 100%
rename from 04-JavaScript基础/52-JS的小知识.md
rename to 04-JavaScript基础/JS的小知识.md
diff --git a/04-JavaScript基础/33-原型链.md b/04-JavaScript基础/原型链.md
similarity index 100%
rename from 04-JavaScript基础/33-原型链.md
rename to 04-JavaScript基础/原型链.md
diff --git a/04-JavaScript基础/51-常见代码解读.md b/04-JavaScript基础/常见代码解读.md
similarity index 100%
rename from 04-JavaScript基础/51-常见代码解读.md
rename to 04-JavaScript基础/常见代码解读.md