webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
qianguyihao 2018-02-01 22:58:37 +08:00
parent 7b54634da6
commit 4d8585462c
14 changed files with 3075 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
00-前端工具/WebStorm的使用.md
View File

@ -141,10 +141,10 @@ WebStorm 2017.3.3版本的默认编码方式是 GBK，我们还是统一设置
## tab键的代码补齐 ## 代码的自动补齐
（1）在html文档中，输入`div*10`，弹出的效果如下： （1）在html文档中，输入`div*10`，按tab键后，弹出的效果如下：
```html ```html
<div></div> <div></div>
@ -180,6 +180,23 @@ WebStorm 2017.3.3版本的默认编码方式是 GBK，我们还是统一设置
20180122_1045.png 20180122_1045.png
（3）方法的注释：
方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。
比如：
```javascript
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
```
## 常用快捷键 ## 常用快捷键
@ -202,3 +219,7 @@ WebStorm 2017.3.3版本的默认编码方式是 GBK，我们还是统一设置
``` ```
如果直接按 【ctrl+C】的话，复制的是整行的内容，把前面的空格也包含进去了。如果不想复制空格，有另外一个办法：将光标放在行尾，然后按住【shift+home】，就能选中你想要的内容了。 如果直接按 【ctrl+C】的话，复制的是整行的内容，把前面的空格也包含进去了。如果不想复制空格，有另外一个办法：将光标放在行尾，然后按住【shift+home】，就能选中你想要的内容了。

207
03-JavaScript基础/07-JavaScript基础：DOM操作.md
View File

@ -1,5 +1,5 @@
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 > 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。 > 以下是正文。
@ -224,6 +224,7 @@ JavaScript基础分为三个部分：
position: relative; position: relative;
} }
img { img {
display: block;
width: 1210px; width: 1210px;
height: 80px; height: 80px;
background-color: blue; background-color: blue;
@ -266,8 +267,8 @@ JavaScript基础分为三个部分：
//3.书写事件驱动程序 //3.书写事件驱动程序
//类控制 //类控制
// topBanner.className += " hide"; //保留原类名，添加新类名 // topBanner.className += " hide"; //保留原类名，添加新类名
topBanner.className = "hide";//替换旧类名 topBanner.className = "hide";//替换旧类名（方式一）
// topBanner.style.display = "none"; // topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
} }
</script> </script>
@ -301,16 +302,14 @@ JavaScript基础分为三个部分：
//1.获取事件源 //1.获取事件源
var img = document.getElementById("box"); var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件) //2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
img.onmouseover = function () { img.onmouseover = function () {
//3.书写事件驱动程序(修改src) //3.书写事件驱动程序(修改src)
img.src = "image/jd2.png"; img.src = "image/jd2.png";
// this.src = "image/jd2.png"; // this.src = "image/jd2.png";
} }
//1.获取事件源 //2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () { img.onmouseout = function () {
//3.书写事件驱动程序(修改src) //3.书写事件驱动程序(修改src)
img.src = "image/jd1.png"; img.src = "image/jd1.png";
@ -322,7 +321,6 @@ JavaScript基础分为三个部分：
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/> <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html> </html>
``` ```
@ -331,7 +329,7 @@ JavaScript基础分为三个部分：
### 什么是DOM ### 什么是DOM
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。 DOM就是由节点组成的。
@ -527,17 +525,8 @@ JS中的**父子兄**访问关系：
子节点数组 = 父节点.children; //获取所有节点。用的最多。 子节点数组 = 父节点.children; //获取所有节点。用的最多。
``` ```
### nodeType
这里讲一下nodeType。 ## DOM节点的操作（重要）
- **nodeType == 1 表示的是元素节点**（标签） 。记住：元素就是标签。
- nodeType == 2 表示是属性节点 了解
- nodeType == 3 是文本节点 了解
## DOM节点操作（重要）
上一段的内容：节点的**访问关系**都是**属性**。 上一段的内容：节点的**访问关系**都是**属性**。
@ -591,7 +580,7 @@ JS中的**父子兄**访问关系：
解释： 解释：
- 在参考节点前插入一个新的节点。 - 在参考节点前插入一个新的节点。
- 如果参考节点为null，那么他将在父节点最后插入一个子节点。 - 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。
![](http://img.smyhvae.com/20180127_1257.png) ![](http://img.smyhvae.com/20180127_1257.png)
@ -603,6 +592,31 @@ JS中的**父子兄**访问关系：
我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。 我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。
**特别强调：**
关于方式1的appendChild方法，这里要强调一下。比如，现在有下面这样一个div结构：
```html
<div class="box11">
<div class="box12">生命壹号</div>
</div>
<div class="box21">
<div class="box22">永不止步</div>
</div>
```
上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法`box11.appendChild(box22)`，**最后产生的结果是：box22会跑到box11中**（也就是说，box22不在box21里面了）。这是一个很神奇的事情：
20180129_2125.png
### 删除节点 ### 删除节点
格式如下： 格式如下：
@ -682,7 +696,7 @@ JS中的**父子兄**访问关系：
![](http://img.smyhvae.com/20180127_1340.png) ![](http://img.smyhvae.com/20180127_1340.png)
方式2：（推荐） 方式2：
```javascript ```javascript
元素节点.getAttribute("属性名称"); 元素节点.getAttribute("属性名称");
@ -711,7 +725,7 @@ JS中的**父子兄**访问关系：
myNode.className = "image2-box"; //修改class的name myNode.className = "image2-box"; //修改class的name
``` ```
方式2：（推荐） 方式2：
```javascript ```javascript
元素节点.setAttribute(属性名, 新的属性值); 元素节点.setAttribute(属性名, 新的属性值);
@ -725,6 +739,7 @@ JS中的**父子兄**访问关系：
myNode.setAttribute("id","你好"); myNode.setAttribute("id","你好");
``` ```
### 3、删除节点的属性 ### 3、删除节点的属性
格式： 格式：
@ -741,6 +756,154 @@ JS中的**父子兄**访问关系：
``` ```
**总结：**
获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的。
- 方式一的`元素节点.属性`和`元素节点[属性]`:绑定的属性值不会出现在标签上。
- 方式二的`get/set/removeAttribut`: 绑定的属性值会出现在标签上。
这其实很好理解，方式一操作的是属性而已，方式二操作的是标签本身。
另外，需要注意的是：**这两种方式不能交换使用**，get值和set值必须使用用一种方法。
举例：
```html
<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
var div = document.getElementById("box");
//采用方式一进行set
div.aaaa = "1111";
console.log(div.aaaa); //打印结果：1111。可以打印出来，但是不会出现在标签上
//采用方式二进行set
div.setAttribute("bbbb","2222"); //bbbb作为新增的属性，会出现在标签上
console.log(div.getAttribute("aaaa")); //打印结果：null。因为方式一的set，无法采用方式二进行get。
console.log(div.bbbb); //打印结果：undefined。因为方式二的set，无法采用方式一进行get。
</script>
</body>
```
## DOM对象的属性
DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。
### innerHTML和innerText的区别
- value：标签的value属性。
- **innerHTML**：双闭合标签里面的内容（识别标签）。
- **innerText**：双闭合标签里面的内容（不识别标签）。（老版本的火狐用textContent）
**获取内容举例：**
如果我们想获取innerHTML和innerText里的内容，看看会如何：
![](http://img.smyhvae.com/20180127_1652.png)
上图显示，因为innerText识别不出标签，所以把标签也给获取到了。
**修改内容举例：**
![](http://img.smyhvae.com/20180127_1657.png)
上图显示，因为innerText识别不出标签，所以把标签也给添加进去了。
### nodeType属性
这里讲一下nodeType属性。
- **nodeType == 1 表示的是元素节点**（标签） 。记住：元素就是标签。
- nodeType == 2 表示是属性节点。
- nodeType == 3 是文本节点。
### nodeType、nodeName、nodeValue
我们那下面这个标签来举例：
```html
<div id="box" value="111">
生命壹号
</div>
```
上面这个标签就包含了三种节点：
- 元素节点（标签）
- 属性节点
- 文本节点
获取这三个节点的方式如下：
```javascript
var element = document.getElementById("box1"); //获取元素节点（标签）
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild; //获取box1的文本节点
var value = element.getAttribute("id"); //获取id的属性值
console.log(element);
console.log("--------------");
console.log(attribute);
console.log("--------------");
console.log(txt);
console.log("--------------");
console.log(value);
```
打印结果如下：
![](http://img.smyhvae.com/20180128_1935.png)
既然这三个都是节点，如果我想获取它们的nodeType、nodeName、nodeValue，代码如下：
```javascript
var element = document.getElementById("box1"); //获取元素节点（标签）
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild; //获取box1的文本节点
//获取nodeType
console.log(element.nodeType); //1
console.log(attribute.nodeType); //2
console.log(txt.nodeType); //3
console.log("--------------");
//获取nodeName
console.log(element.nodeName); //DIV
console.log(attribute.nodeName); //id
console.log(txt.nodeName); //#text
console.log("--------------");
//获取nodeValue
console.log(element.nodeValue); //null
console.log(attribute.nodeValue); //box1
console.log(txt.nodeValue); //生命壹号
```
打印结果如下：
![](http://img.smyhvae.com/20180128_1939.png)
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。

281
03-JavaScript基础/08-JavaScript基础：BOM的常见内置方法和内置对象.md Normal file
View File

@ -0,0 +1,281 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8401662.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## BOM的介绍
### JavaScript的组成
JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- **DOM**：文档对象模型，操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
- **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。
### 什么是BOM
BOM：Browser Object Model，浏览器对象模型。
**BOM的结构图：**
![](http://img.smyhvae.com/20180201_2052.png)
从上图也可以看出：
- **window对象是BOM的顶层(核心)对象**，所有对象都是通过它延伸出来的，也可以称为window的子对象。
- DOM越是BOM的一部分。
**window对象：**
- **window对象是JavaScript中的顶级对象**。
- 全局变量、自定义函数也是window对象的属性和方法。
- window对象下的属性和方法调用时，可以省略window。
下面讲一下 **BOM 的常见内置方法和内置对象**。
## 弹出系统对话框
比如说，`alert(1)`是`window.alert(1)`的简写，因为它是window的子方法。
系统对话框有三种：
```javascript
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用
```
## 打开窗口、关闭窗口
1、打开窗口：
```
window.open(url,target,param)
```
**参数解释：**
- url：要打开的地址。
- target：新窗口的位置。可以是：`_blank` 、`_self`、 `_parent` 父框架。
- param：新窗口的一些设置。
- 返回值：新窗口的句柄。
**param**这个参数，可以填各种各样的参数（），比如：
- name：新窗口的名称，可以为空
- featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
- fullscreen= { yes/no/1/0 } 是否全屏，默认no
- channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
- toolbar= { yes/no/1/0 } 是否显示工具条，默认no
- location= { yes/no/1/0 } 是否显示地址栏，默认no。（有的浏览器不一定支持）
- directories = { yes/no/1/0 } 是否显示转向按钮，默认no
- status= { yes/no/1/0 } 是否显示窗口状态条，默认no
- menubar= { yes/no/1/0 } 是否显示菜单，默认no
- scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
- resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
- width=number 窗口宽度（像素单位）
- height=number 窗口高度（像素单位）
- top=number 窗口离屏幕顶部距离（像素单位）
- left=number 窗口离屏幕左边距离（像素单位）
各个参数之间用逗号隔开就行，但我们最好是把它们统一放到json里。
2、关闭窗口：window.close()
（1）和（2）的代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:;">点击我打开一个新的页面</a>
<a href="javascript:;">点击我关闭本页面</a>
<script>
//新窗口 = window.open(地址,是否开新窗口,新窗口的各种参数);
var a1 = document.getElementsByTagName("a")[0];
var a2 = document.getElementsByTagName("a")[1];
a1.onclick = function () {
//举例1： window.open("http://www.jd.com","_blank");
var json = {
"name": "helloworld",
"fullscreen": "no",
"location": "no",
"width": "100px",
"height": "100px",
"top": "100px",
"left": "100px"
};
window.open("http://www.baidu.com", "_blank", json); //举例2
}
//关闭本页面
a2.onclick = function () {
window.close();
}
</script>
</body>
</html>
```
3、新窗口相关：
- 新窗口.moveTo(5,5)
- 新窗口.moveBy()
- 新窗口.resizeTo()
- window.resizeBy()
代码举例：
```javascript
var newWin = window.open("demo.html", "_blank", json);
newWin.moveTo(500, 500);
```
## location对象
`window.location`可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
### location对象的属性
- **href**：跳转
- hash 返回url中#后面的内容，包含#
- host 主机名，包括端口
- hostname 主机名
- pathname url中的路径部分
- protocol 协议 一般是http、https
- search 查询字符串
**location.href属性举例**：
**举例1：**点击盒子时，进行跳转。
```html
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
```
**举例2：5秒后自动跳转到百度**。
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：
```html
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
```
### location对象的方法
- location.assign()：改变浏览器地址栏的地址，并记录到历史中
设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转。
- location.replace()：替换浏览器地址栏的地址，不会记录到历史中
- location.reload()：重新加载
## navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
- userAgent：系统，浏览器)
- platform：浏览器支持的系统，win/mac/linux
举例：
```javascript
console.log(navigator.userAgent);
console.log(navigator.platform);
```
效果如下：
![](http://img.smyhvae.com/20180201_2140.png)
## history对象
1、历史记录管理
2、后退：
- history.back()
- history.go(-1)：0是刷新
3、前进：
- history.forward()
- history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮：
![](http://img.smyhvae.com/20180201_2146.png)
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

715
04-前端基础练习/03-DOM操作练习：基础练习.md Normal file
View File

@ -0,0 +1,715 @@
## DOM操作练习
### 举例1：点击按钮时，显示和隐藏盒子。
代码实现：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div>
生命壹号
</div>
<script>
//需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var btn = document.getElementById("btn");
var div1 = document.getElementsByTagName("div")[0];
//2.绑定事件
btn.onclick = function () {
//3.书写事件驱动程序
//判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
//反之，则显示，并修改按钮内容为隐藏
if (this.innerHTML === "隐藏") {
div1.className = "hide";
//修改按钮上的文字（innerHTML）
btn.innerHTML = "显示";
} else {
div1.className = "show";
//修改按钮上的文字（innerHTML）
btn.innerHTML = "隐藏";
}
}
</script>
</body>
</html>
```
代码解释：
当盒子是显示状态时，就设置为隐藏；当盒子是隐藏状态时，就设置为显示。注意这里的逻辑判断。
另外，这里用到了`innerHTHL`属性，它可以修改按钮上显示的文字。
代码最终显示的效果如下：
20180127_1518.gif
### 举例2：美女相册
这里推荐一个网站：
- 占位图片生成的在线网站：<https://placeholder.com/>
好处是：素材做出来之前，先留出空位，方便以后换图。比如<http://via.placeholder.com/400x300>这个链接可以生成400*300的占位图片。
需求：
- （1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
- （2）让p标签的innnerHTML属性值，变成a标签的title属性值。
为了实现美女相册，代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<a href="#">注册</a>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="美女A">
<img src="image/1-small.jpg" width="100" alt="美女1"/>
</a>
</li>
<li>
<a href="image/2.jpg" title="美女B">
<img src="image/2-small.jpg" width="100" alt="美女2"/>
</a>
</li>
<li>
<a href="image/3.jpg" title="美女C">
<img src="image/3-small.jpg" width="100" alt="美女3"/>
</a>
</li>
<li>
<a href="image/4.jpg" title="美女D">
<img src="image/4-small.jpg" width="100" alt="美女4"/>
</a>
</li>
</ul>
<div style="clear:both"></div>
<img id="image" src="image/placeholder.png" width="450px"/>
<p id="des">选择一个图片</p>
<script>
//需求：
//（1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
//（2）让p标签的innnerHTML属性值，变成a标签的title属性值。
//1.获取事件源和相关元素
//利用元素获取其下面的标签。
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a"); //获取ul中的超链接<a>
// console.log(aArr[0]);
var img = document.getElementById("image");
var des = document.getElementById("des");
//2.绑定事件
//以前是一个一个绑定，但是现在是一个数组。我们用for循环绑定
for (var i = 0; i < aArr.length; i++) {
aArr[i].onclick = function () {
//3.【核心代码】书写事件驱动程序：修改属性值
img.src = this.href; //this指的是函数调用者，和i并无关系，所以不会出错。
// img.src = aArr[i].href; 注意，上面这一行代码不要写成这样
des.innerHTML = this.title;
return false; //retrun false表示：阻止继续执行下面的代码。
}
}
</script>
</body>
</html>
```
代码解释：
（1）获取事件源：我们通过`ul.getElementsByTagName("a")`来获取ul里面的a元素。
（2）绑定事件：因为要绑定一个数组，所以这里用for循环来绑定
（3）【重要】书写事件驱动程序：这里是用`img.src = this.href`，而不是用`img.src = aArr[i].href`。因为this指的是函数的调用者。如果写成后者，等i变成了4，就会一直是4。显然不能达到效果。
（4）代码的最后一行：`retrun false`表示：阻止继续执行下面的代码。
实现的效果如下：
20180127_1630.gif
工程文件：
- [2018-01-27-美女相册demo.rar](http://download.csdn.net/download/smyhvae/10227161)
### 举例3：鼠标悬停时，显示二维码大图
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.code {
width: 50px;
height: 50px;
}
.code a {
display: block;
width: 50px;
height: 50px;
background: url(http://img.smyhvae.com/20180127_QRcode_small.png) no-repeat -159px -51px;
position: relative;
}
.code-big {
position: absolute;
top: 10px;
left: 80px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script>
window.onload = function () {
//需求：鼠标放到a链接上，显示二维码（添加show类名，去掉hide类名）
// 鼠标移开a链接，隐藏二维码（添加hide类名，去掉show类名）
//1.获取事件源和相关元素
var a = document.getElementsByTagName("a")[0];
var div = document.getElementsByClassName("code-big")[0];
//2.绑定事件
a.onmouseover = fn1; //鼠标悬停时
a.onmouseout = fn2; //鼠标离开时
//定义方法
function fn1() {
//3.书写事件驱动程序
div.className = "code-big show";
//div.className = div.className.replace("hide", "show");
}
function fn2() {
div.className = "code-big hide";
//了解,字符串操作，把字符串中的hide替换成show。
// div.className = div.className.replace("show","hide");
}
}
</script>
</head>
<body>
<div class="code">
<a href="#"></a>
<img src="http://img.smyhvae.com/2016040102.jpg" alt="" class="code-big hide"/>
</div>
</body>
</html>
```
实现效果：
20180127_1800.gif
## 表单元素的属性
表单元素的属性包括：type、value、checked、selected、disabled等。
### 举例1：禁用文本框/解禁文本框
```html
<body>
账号: <input type="text" value="生命壹号..."/><button>禁用</button><button>解禁</button><br><br>
密码: <input type="password" value="aaabbbccc"/>
<script>
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
btn1.onclick = function () {
inp.disabled = "no"; //禁用文本框。属性值里随便写什么字符串都行，但不能为空。
}
btn2.onclick = function () {
inp.disabled = false; //解禁文本框。让disabled属性消失即可。
// inp.removeAttribute("disabled");
}
</script>
</body>
```
当文本框被禁用之后，文本框只读，不能编辑，光标点不进去。
上方代码可以看到，**禁用文本框**的代码是：
```javascript
inp.disabled = "no"; //让disabled属性出现，即可禁用
```
我们的目的时让`disabled`这个属性出现，即可禁用。所以，属性值里可以写数字，可以写任意一个字符串，但不能写0，不能写false，不能为空。一般我们写no。
**解禁文本框**的代码是：
```javascript
inp.disabled = false; // 方法1：让disabled属性消失，即可解禁。
inp.removeAttribute("disabled"); //方法2：推荐
```
我们的目的是删除`disabled`属性，即可解禁。属性值可以是false，可以是0。但我们一般采用方式2进行解禁。
实现效果：
### 举例2：文本框获取焦点/失去焦点
细心的读者会发现，京东和淘宝的搜索框，获取焦点时，提示文字的体验是不同的。
京东：
20180127_2000.gif
淘宝：
20180127_2005.gif
其实，**淘宝的提示文字，是用一个绝对定位的单独的标签来做的**。
京东是判断输入框是否获取焦点；淘宝是判断输入框内是否有用户输入的文字。
我们现在来实现一下。代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label {
position: absolute;
top: 82px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
京东: <input id="inp1" type="text" value="微单相机"/><br><br>
淘宝: <label for="inp2">电动牙刷</label><input id="inp2" type="text"/><br><br>
placeholder: <input type="text" placeholder="我是placeholder"/>
<script>
//需求：京东的input按钮获取焦点后，立刻删除内容。失去后光标显示文字。
var inp1 = document.getElementById("inp1");
inp1.onfocus = function () {
//判断，如果input里面的内容是“微单相机”，那么把值赋值为“”；
if (this.value === "微单相机") {
inp1.value = "";
inp1.style.color = "#000";
}
}
//失去焦点事件
inp1.onblur = function () {
//判断：如果input内容为空，那么把内容赋值为微单相机。
if (this.value === "") {
inp1.value = "微单相机";
inp1.style.color = "#ccc";
}
}
//需求：在input中输入文字，label标签隐藏；当里面的文字变成空字符串，label显示。
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label")[0];
//2.绑定事件(输入文字、和删除文字时，都会触动这个事件)
inp2.oninput = function () {
//判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
if (this.value === "") {
lab.className = "show";
} else {
lab.className = "hide";
}
}
</script>
</body>
</html>
```
实现效果如下：
20180127_2010.gif
如上方所示，我们还可以用placeholder来做，但是IE678并不支持，所以不建议使用。
### 举例3：用户注册信息错误时，输入框失去焦点后，高亮显示。
代码实现：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrong {
border: 2px solid red;
}
.right {
border: 2px solid #91B81D;
}
</style>
</head>
<body>
账号：<input type="text" onblur="fn(this)"/><br><br>
密码：<input type="password" onblur="fn(this)"/>
<script>
//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
function fn(aaa){
//html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window
// console.log(this)
//只有传递的this才指的是标签本身。
// console.log(aaa)
// console.log(this.value)
if(aaa.value.length < 6 || aaa.value.length>12){
aaa.className = "wrong";
}else{
aaa.className = "right";
}
}
</script>
</body>
</html>
```
代码解释：这次我们是在标签内调用function的，此时是先通过window调用的function。所以行内调用的时候要带this。
实现效果：
20180127_2035.gif
### 举例4：全选和反选
对应的代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.my-table {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script>
window.onload = function () {
//需求1：点击上面的的input，下面全选或者反选。
//思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。
var topInp = document.getElementById("title");
var tbody = document.getElementById("content");
var botInpArr = tbody.getElementsByTagName("input");
//绑定事件
topInp.onclick = function () {
//费劲版
// for(var i=0;i<botInpArr.length;i++){
// if(topInp.checked === true){
// botInpArr[i].checked = true;
// }else{
// botInpArr[i].checked = false;
// }
// }
//优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值）
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].checked = this.checked;
}
}
//需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
//思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
// checked属性值是否全部都是true，如果有一个是false，
// 那么上面的input的checked属性也是false;都是true，topInp的checked就是true；
for(var i=0;i<botInpArr.length;i++){
botInpArr[i].onclick = function () { //每一个input都要绑定事件
//开闭原则（用开关来控制）
var bool = true;
//检测每一个input的checked属性值。
for(var j=0;j<botInpArr.length;j++){
if(botInpArr[j].checked === false){
bool = false;
}
}
topInp.checked = bool;
}
}
}
</script>
</head>
<body>
<div class="my-table">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="title" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="content">
<tr>
<td>
<input type="checkbox" />
</td>
<td>菜品1</td>
<td>木屋烧烤</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>菜品2</td>
<td>蒸菜馆</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>菜品3</td>
<td>海底捞火锅</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>菜品4</td>
<td>面点王</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
```
注意代码中的注释，需求2是比较难的地方，这里用到了两次for循环。第一次for循环是因为，要给每个input都要进行绑定事件。
实现的效果如下：
20180127_2320.gif
```javascript
```

453
04-前端基础练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md Normal file
View File

@ -0,0 +1,453 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8371782.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
京东网页上，可以看到下面这种tab栏的切换：
![](http://img.smyhvae.com/20180128_1750.gif)
我们把模型抽象出来，实现一下。
## 举例引入：鼠标悬停时，current元素的背景变色
> 本段我们先举一个例子，因为这里用到了**排他思想**（先干掉 all，然后保留我一个）。对于理解tab切换，很有帮助。
完整的代码实现：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseover = function () {
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
}
//鼠标离开current时，还原背景色
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
this.className = "";
}
}
</script>
</body>
</html>
```
代码解释：
鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：
```javascript
//排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
```
实现的效果如下：
![](http://img.smyhvae.com/20180128_1740.gif)
## tab切换：初步的代码
代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
//绑定索引值（新增一个自定义属性：index属性）
liArr[i].index = i;
liArr[i].onmouseover = function () {
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要代码】
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
</body>
</html>
```
实现效果如下：
![](http://img.smyhvae.com/20180128_1610.gif)
上方代码的核心部分是：
```javascript
for(var i=0;i<liArr.length;i++){
//绑定索引值（新增一个自定义属性：index属性）
liArr[i].index = i;
liArr[i].onmouseover = function () {
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要代码】
}
}
```
这段代码中，我们是通过给 `liArr[i]`一个index属性：` liArr[i].index = i`，然后让下方的span对应的index也随之对应显示：`spanArr[this.index].className = "show"`。
这样做比较难理解，其实还有一种容易理解的方法是：**给liArr[i]增加index属性时，通过attribute的方式**，因为这种方式增加的属性是可以显示在标签上的。也就有了下面这样的代码：
```javascript
for(var i=0;i<liArr.length;i++){
//绑定索引值(自定义属性)，通过Attribute的方式【重要】
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
```
显示的效果是一样的，不同的地方在于，我们审查元素发现，li标签中确实新增了自定义的index属性：
![](http://img.smyhvae.com/20180128_1625.gif)
本段中，我们的目的已经达到了，不足的地方在于，**本段中的代码是通过document获取的的标签**，如果网页中有很多个这种tab选项卡，必然互相影响。
为了多个tab栏彼此独立，我们就需要通过**封装函数**的方式把他们抽取出来，于是就有了下面的改进版代码。
## tab切换：改进版代码（函数封装）
### 方式一：给current标签设置index值【推荐的代码】
完整版代码实现：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，下方对应的span也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。
//1、获取所有的box
var boxArr = document.getElementsByClassName("box");
//让每一个box都调用函数
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
}
function fn(element) {
var liArr = element.getElementsByTagName("li"); //注意，是element获取事件源，不是document获取事件源
var spanArr = element.getElementsByTagName("span");
//2.绑定事件（循环绑定）
for (var i = 0; i < liArr.length; i++) {
//绑定索引值（新增一个自定义属性：index属性）
liArr[i].index = i;
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for (var j = 0; j < liArr.length; j++) {
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要】核心代码
}
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
</body>
</html>
```
注意，通过函数fn的封装之后，我们是通过参数element获取元素，而不再是document了。这样可以达到“抽象性”的作用，各个tab栏之间相互独立。
上方代码中，我们是通过给 liArr[i]一个index属性：` liArr[i].index = i`，然后让下方的span对应的index也随之对应显示：`spanArr[this.index].className = "show"`。
这样做比较难理解，根据上一段的规律，当然还有一种容易理解的方法是：**给liArr[i]增加index属性时，通过attribute的方式**，因为这种方式增加的属性是可以显示在标签上的。也就有了下面的方式二。
### 方式二：通过attribute设置index的值
基于上面方式一中的代码，我们修改一下js部分的代码，其他部分的代码保持不变。js部分的代码如下：
```html
<script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，下方对应的span也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。
//1、获取所有的box
var boxArr = document.getElementsByClassName("box");
//让每一个box都调用函数
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
}
function fn(element) {
var liArr = element.getElementsByTagName("li"); //注意，是element获取事件源，不是document获取事件源
var spanArr = element.getElementsByTagName("span");
//2.绑定事件（循环绑定）
for (var i = 0; i < liArr.length; i++) {
//绑定索引值(自定义属性)
liArr[i].setAttribute("index", i);
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for (var j = 0; j < liArr.length; j++) {
liArr[j].removeAttribute("class"); //注意，这里是class，不是className
spanArr[j].removeAttribute("class");
}
this.setAttribute("class", "current");
spanArr[this.getAttribute("index")].setAttribute("class", "show");
}
}
}
}
</script>
```
不过，方式一的写法应该比方式二更常见。
**总结**：通过函数封装的形式，可以保证各个tab栏之间的切换互不打扰。最终实现效果如下：
![](http://img.smyhvae.com/20180128_1651.gif)
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

206
04-前端基础练习/05-DOM操作练习：访问关系的封装.md Normal file
View File

@ -0,0 +1,206 @@
## 访问关系的函数封装
（1）函数封装
新建一个文件名叫`tools.js`，然后在里面封装访问关系。代码如下。
tools.js:
```javascript
/**
* Created by smyhvae on 2018/01/28.
*/
function getEle(id){
return document.getElementById(id);
}
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
/**
* 功能：给定元素查找他的最后一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getLastNode(ele){
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getNextNode(ele){
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：给定元素查找他的上一个兄弟元素节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getPrevNode(ele){
return ele.previousElementSibling || ele.previousSibling;
}
/**
* 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
* @param ele 元素节点
* @param index 索引值
* @returns {*|HTMLElement}
*/
function getEleOfIndex(ele,index){
return ele.parentNode.children[index];
}
/**
* 功能：给定元素查找他的所有兄弟元素，并返回数组
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定义一个新数组，装所有的兄弟元素，将来返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判断：对同级的所有元素节点进行遍历，如果不是传递过来的元素自身，那就是兄弟元素，于是添加到新数组中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}
```
上方代码中，我们单独来重视一下最后一个方法：获取指定元素的兄弟元素：
```javascript
/**
* 功能：给定元素查找他的所有兄弟元素，并返回数组
* @param ele
* @returns {Array}
*/
function getAllSiblings(ele){
//定义一个新数组，装所有的兄弟元素，将来返回
var newArr = [];
var arr = ele.parentNode.children;
for(var i=0;i<arr.length;i++){
//判断：对同级的所有元素节点进行遍历，如果不是传递过来的元素自身，那就是兄弟元素，于是添加到新数组中。
if(arr[i]!==ele){
newArr.push(arr[i]);
}
}
return newArr;
}
```
（2）函数的调用举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li id="box"></li>
<li></li>
<li></li>
</ul>
<script src="tools.js"></script>
<script>
//获取box改为red
var box = getEle("box");
box.style.backgroundColor = "red"
//获取第一个和最后一个子节点
var parent = box.parentNode;
getFirstNode(parent).style.backgroundColor = "yellow";
getLastNode(parent).style.backgroundColor = "yellow";
//获取上一个和下一个兄弟节点
getNextNode(box).style.backgroundColor = "blue";
getPrevNode(box).style.backgroundColor = "blue";
//指定兄弟节点
getEleOfIndex(box,0).style.backgroundColor = "green";
getEleOfIndex(box,1).style.backgroundColor = "green";
//获取所有的兄弟节点（返回值是数组，所以用for循环操作）
var arr = getAllSiblings(box);
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "green";
}
</script>
</body>
</html>
```
注意：上方代码中，我们引用到了`tools.js`这个工具类。
```
```
```
```
```
```

408
04-前端基础练习/06-DOM操作练习：通过style对象设置样式.md Normal file
View File

@ -0,0 +1,408 @@
## style属性的设置和获取
在DOM当中，如果想设置样式，有两种形式：
- className（针对内嵌样式表）
- style（针对行内样式）
这一段就来讲一下style。
需要注意的是：style是一个对象，只能获取**行内样式**，不能获取内嵌的样式和外链的样式。例如：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 6px solid red;
}
</style>
</head>
<body>
<div class="box1" style="width: 200px;height: 100px;background-color: pink;"></div>
<script>
var box1 = document.getElementsByTagName("div")[0];
console.log(box1.style.backgroundColor);
console.log(box1.style.border); //没有打印结果，因为这个属性不是行内样式
console.log(typeof box1.style); //因为是对象，所以打印结果是Object
console.log(box1.style); //打印结果是对象
</script>
</body>
</html>
```
打印结果：
20180129_1407.png
上图显示，因为border属性不是行内样式，所以无法通过style对象获取。
## style属性的注意事项
style属性需要注意以下几点：
- （1）样式少的时候使用。
- （2）style是对象。
我们在上方已经打印出来，typeof的结果是Object。
- （3）值是字符串，没有设置值是“”。
- （4）命名规则，驼峰命名。和css不一样。
- （5）只能获取行内样式，和内嵌和外链无关。
本段最开始的时候讲到的。
- （6）box.style.cssText = “字符串形式的样式”。
`cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：
```html
<script>
var box1 = document.getElementsByTagName("div")[0];
//通过cssText一次性设置行内样式
box1.style.cssText = "width: 300px;height: 300px;background-color: green;";
console.log(box1.style.cssText); //这一行更加可以理解,style是对象
</script>
```
打印结果：
20180129_1410.png
## 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、高级隔行变色、高亮显示
- 4、百度皮肤
- （继续下面PPT）
- 显示隐藏/关闭广告/显示二维码（隐藏方法）
- 提高层级
下面来逐一实现。
### 举例1：改变div的大小和透明度
代码举例：
```html
<body>
<div style="width: 100px;height: 100px;background-color: pink;"></div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onmouseover = function () {
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "black";
div.style.opacity = "0.2"; //设置背景色的透明度。单位是0.1
div.style.filter = "alpha(opacity=20)"; //上一行代码的兼容性写法。注意单位是百进制
}
</script>
</body>
```
### 举例2：当前输入的文本框高亮显示
代码实现：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
display: block;
}
</style>
</head>
<body>
<ul>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</ul>
<script>
//需求：让所有的input标签获取焦点后高亮显示
//1.获取事件源
var inpArr = document.getElementsByTagName("input");
//2.绑定事件
//3.书写事件驱动程序
for (var i = 0; i < inpArr.length; i++) {
//获取焦点后，所有的input标签被绑定onfocus事件
inpArr[i].onfocus = function () {
this.style.border = "2px solid red";
this.style.backgroundColor = "#ccc";
}
//绑定onblur事件，取消样式
inpArr[i].onblur = function () {
this.style.border = "";
this.style.backgroundColor = "";
}
}
</script>
</body>
</html>
```
### 举例3：高级隔行变色、高亮显示
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 500px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
cursor: pointer;
}
.current {
background-color: red !important;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>课程</th>
<th>成绩</th>
</tr>
</thead>
<tbody id="target">
<tr>
<td>
1
</td>
<td>生命壹号</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>
2
</td>
<td>生命贰号</td>
<td>日语</td>
<td>99</td>
</tr>
<tr>
<td>
3
</td>
<td>生命叁号</td>
<td>营销学</td>
<td>98</td>
</tr>
<tr>
<td>
4
</td>
<td>生命伍号</td>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td>
5
</td>
<td>许嵩</td>
<td>英语</td>
<td>96</td>
</tr>
<tr>
<td>
6
</td>
<td>vae</td>
<td>体育</td>
<td>90</td>
</tr>
</tbody>
</table>
</div>
<script>
//需求：让tr各行变色，鼠标放入tr中，高亮显示。
//1.隔行变色。
var tbody = document.getElementById("target");
var trArr = tbody.children;
//循环判断并各行赋值属性（背景色）
for (var i = 0; i < trArr.length; i++) {
if (i % 2 !== 0) {
trArr[i].style.backgroundColor = "#a3a3a3";
} else {
trArr[i].style.backgroundColor = "#ccc";
}
//鼠标进入高亮显示
//难点：鼠标移开的时候要回复原始颜色。
//计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
var myColor = "";
trArr[i].onmouseover = function () {
//赋值颜色之前，先记录颜色
myColor = this.style.backgroundColor;
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = myColor;
}
}
</script>
</body>
</html>
```
实现的效果如下：
20180129_1520.gif
代码解释：
上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码）
```html
<script>
//需求：让tr各行变色，鼠标放入tr中，高亮显示。
//1.隔行变色。
var tbody = document.getElementById("target");
var trArr = tbody.children;
//循环判断并各行赋值属性（背景色）
for (var i = 0; i < trArr.length; i++) {
if (i % 2 !== 0) {
trArr[i].style.backgroundColor = "#a3a3a3";
} else {
trArr[i].style.backgroundColor = "#ccc";
}
//鼠标进入高亮显示
//难点：鼠标移开的时候要回复原始颜色。
//计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
trArr[i].onmouseover = function () {
this.style.backgroundColor = "#fff";
}
trArr[i].onmouseout = function () {
this.style.backgroundColor = "#a3a3a3";
}
}
</script>
```
这种错误的代码，实现的效果却是：（未达到效果）
20180129_1525.gif

510
04-前端基础练习/07-DOM操作练习：innerHTML的方式创建元素.md Normal file
View File

@ -0,0 +1,510 @@
## 动态创建DOM元素的三种方式
- `document.write();` 不常用，因为容易覆盖原来的页面。
- `innerHTML;` 用的比较多。绑定属性和内容比较方便。(节点套节点)
- `document.createElement;` 用得也比较多，指定数量的时候一般用它。
**1、方式一：**
```javascript
document.write();
```
这种方式的好处是：比较随意，想创建就创建，可以直接在`write`里写属性都行。但是会把原来的标签给覆盖掉。所以不建议。
举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
smyhvae
</ul>
<script>
//第一种创建方式：document.write();
document.write("<li class='hehe'>我是document.write创建的</li>");
</script>
</body>
</html>
```
效果如下：
20180129_1908.png
**方式二：**innerHTML
举例如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
smyhvae
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
//第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>" //注意，是用符号“+=”，不是“=”
</script>
</body>
</html>
```
注意，上方代码中，是用是用符号`+=`，不是`=`，前者是在原来的基础之上增加，后者是替换。
效果如下：
20180129_2017.png
**3、方式三：**利用DOM的api创建
利用DOM的api创建节点，有很多种：
比如：
- createElement()
- appendChild()
- removeChild()
- insertBefore()
- replaceChild()
这个我们在上一篇文章的`DOM节点的操作`这一段中已经讲到了。
```html
```
## innerHTML举例：在线用户的获取
现在要做下面这样一个页面：
20180129_2151.png
上图的意思是，每次刷新页面，都从服务器获取最新的在线人数的名单（我们先用本地的数组来模拟服务器上的数据）。
它的结构是：div > ul > li。每一个li就是一个头像。
如果在本地直接添加几个头像的话，代码是：
```html
//往ul中添加li元素以及li元素中的内容
ul.innerHTML += '<li>'+
'<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>'+
'<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>'+
'</li>';
ul.innerHTML += '<li>'+
'<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>'+
'<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>'+
'</li>';
ul.innerHTML += '<li>'+
'<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>'+
'<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>'+
'</li>';
```
上方代码有两点比较重要：
- 我们是通过`ul.innerHTML += 元素节点`的方式来不停地往ul里面加内容，比`createElement`的方式要方便。
- 元素的内容本身有双引号`"`，所以我们要用单引号`'`进行字符串的连接。
但是，当我们从服务器获取在线用户的时候，头像和用户的昵称是动态变化的，所以每个字符串要用变量进行表示：
```html
ul.innerHTML += '<li>'+
'<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
'<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
'</li>';
```
这里我们暂时用本地的数组来代表服务器的数据，最终的完整版代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
word-wrap: break-word;
}
.wp {
width: 730px;
margin: 0px auto;
}
.mtn {
margin-top: 5px !important;
}
#ct .frame {
margin: 0;
border: none;
}
.xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
background-color: #A90000;
background-position: 0 -99px;
}
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
color: #FFF !important;
}
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
border: none;
background: transparent url(images/mu.png) repeat-x 0 95;
}
.title {
padding: 0 10px;
height: 32px;
font-size: 14px;
font-weight: 700;
line-height: 32px;
overflow: hidden;
}
.block {
margin: 10px 10px 0;
}
ul, menu, dir {
display: block;
list-style: none;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 25px;
}
.mls li {
padding: 0 0 5px;
width: 66px;
height: 85px;
}
.ml li {
float: left;
text-align: center;
overflow: hidden;
}
a {
color: #333;
text-decoration: none;
font: 12px/1.5 Tahoma, 'Microsoft Yahei', 'Simsun';
}
.mls p {
margin-top: 5px;
}
.ml p, .ml span {
display: block;
width: 100%;
height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mls img {
width: 48px;
height: 48px;
}
.ml img {
display: block;
margin: 0 auto;
}
a img {
border: none;
}
</style>
</head>
<body>
<div class="wp mtn">
<div id="diy3" class="area">
<div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1">
<div
class="title frame-title"><span class="titletext">当前在线用户</span></div>
<div id="frameipq7f2_left"
class="column frame-1-c">
<div
id="frameipq7f2_left_temp" class="move-span temp"></div>
<div id="portal_block_695"
class="block move-span">
<div
id="portal_block_695_content" class="dxb_bc">
<div class="module cl ml mls" id="users">
<ul>
<!--<li>-->
<!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>-->
<!--<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>-->
<!--</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//模拟从服务器获取数据
var users = [
{"name": "smyhvae", "icon": "images/noavatar_small.gif"},
{"name": "smyh", "icon": "images/noavatar_small.gif"},
{"name": "smyh02", "icon": "images/75_avatar_small.jpg"},
{"name": "vae", "icon": "images/89_avatar_small.jpg"},
{"name": "today", "icon": "images/noavatar_small.gif"},
{"name": "enen", "icon": "images/noavatar_small.gif"},
{"name": "oyey", "icon": "images/noavatar_small.gif"},
{"name": "dongxiaojie", "icon": "images/noavatar_small.gif"},
{"name": "qishi", "icon": "images/noavatar_small.gif"},
{"name": "qqtang", "icon": "images/noavatar_small.gif"},
{"name": "wawawa", "icon": "images/noavatar_small.gif"},
{"name": "haha", "icon": "images/noavatar_small.gif"},
{"name": "robot", "icon": "images/noavatar_small.gif"},
{"name": "heheda", "icon": "images/noavatar_small.gif"},
{"name": "smyhvae1", "icon": "images/noavatar_small.gif"},
{"name": "lihaile", "icon": "images/noavatar_small.gif"}
];
//需求：页面显示所有的在线用户。
//思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
//赋值要求：li标签的内容。
//步骤：(获取元素)
var div = document.getElementById("users");
var ul = div.firstElementChild || div.firstChild;
// var ul = div.children[0];
//1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
//数组中有多少元素，我们就创建多少个li标签
for (var i = 0; i < users.length; i++) {
//2.模拟实验的操作方式。
ul.innerHTML += '<li>' +
'<a href="#" target="blank"><img src="' + users[i].icon + '" width="48" height="48" alt="' + users[i].name + '"></a>' +
'<p><a href="#" title="' + users[i].name + '" target="_blank">' + users[i].name + '</a></p>' +
'</li>';
}
</script>
</body>
</html>
```
## innerHTML举例2：模拟百度搜索的下方提示
要求实现的效果如下：
20180201_2030.gif
在这之前，我们先实现这样一个例子：**判断字符串以某个字符串为开头**。
**判断字符串是否以某个字符串为开头：**
```javascript
var str = "smyhvae";
//判断str是否以sm为开头？（给定字符串，然后他的索引值为0）
var num = str.indexOf("sm");
//只有返回值为0，那么字符串才是以参数为开头
//如果在任何位置都查询不到参数，则返回值为-1；
```
代码解释：我们可以通过`indexOf("参数")`来实现。如果返回的索引值为0，说明字符串就是以这个参数开头的。
为了实现上方gif图的搜索功能，完整版代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
margin: 200px auto;
}
ul {
width: 392px;
padding: 5px;
list-style: none;
border: 1px solid red;
}
li:hover {
background-color: red;
}
input {
width: 400px;
}
button {
width: 70px;
}
</style>
</head>
<body>
<div class="box">
<input type="text"/>
<button>搜索</button>
<!--<ul>-->
<!--<li>aaaa</li>-->
<!--<li>bbb</li>-->
<!--<li>ccc</li>-->
<!--</ul>-->
</div>
<script>
//需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
//1.获取事件源
//模拟服务器获取内容
var arr = ["a", "ab", "abc", "abcd", "aa", "aaa"];
var box = document.getElementsByTagName("div")[0];
var inp = box.children[0];
// var inp = document.getElementsByTagName("input")[0];
//2.绑定事件(输入内容(输入事件，键盘弹起事件))
inp.onkeyup = function () {
//创建一个字符串，里面添加满了li和对应的内容。
var newArr = [];
//遍历老数组arr，然后判断每一项，只要是以input的内容为开头的，就添加到新数组newArr中，然后转成字符串。
for (var i = 0; i < arr.length; i++) {
//获取输入内容input标签的value属性值。
if (arr[i].indexOf(this.value) === 0) { //【重要】判断老数组arr中的每一项，是否以input的内容为开头
newArr.push("<li>" + arr[i] + "</li>");
}
}
var str = newArr.join("");
//Bug1：每次创建新的ul之前，如果有就的ul，就先删除旧的ul
if (box.getElementsByTagName("ul")[0]) {
//只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
box.removeChild(box.children[2]);
}
//Bug2.如果input的内容为空，那么就不能再生成ul了。
//如果input为空，那就切断函数
//Bug3.如果arr数组中找不到以input为开头的元素。那就切断函数
//newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
if (this.value.length === 0 || newArr.length === 0) { //fix bug2、fix bug3
//切断函数，直接return
return;
}
//3.书写事件驱动程序
var ul = document.createElement("ul");
//把创建好的内容添加到ul中。
ul.innerHTML = str;
box.appendChild(ul);
}
</script>
</body>
</html>
```
## 动态操作表格
方式1：
```
createElement()
```
方式2：
- rows (只读，table和textarea能用)
- insertRow() (只有table能调用)
- deleteRow() (只有table能调用)
- cells (只读，table和textarea能用)
- insertCell() (只有tr能调用)
- deleteCell() (只有tr能调用)
PS：括号里可以带index。用的不多。

214
04-前端基础练习/08-JavaScript基础：定时器.md Normal file
View File

@ -0,0 +1,214 @@
## 定时器的常见方法
- setInterval()：循环定时器。周而复始的执行（循环执行）
- setTimeout()：定时炸弹。用完以后立刻报废（只执行一次）
### 定义定时器的方式
**方式一：**匿名函数
每间隔一秒打印一次：
```javascript
setInterval(function () {
console.log(1);
},1000);
```
**方式二：**
每间隔一秒打印一次：
```javascript
setInterval(fn,1000);
function fn(){
console.log(1);
}
```
### 定时器高级：清除定时器
定时器的返回值可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。
setTimeout()的道理是一样的。
代码举例：
```html
<script>
var num = 1;
var timer = setInterval(function () {
console.log(num); //每间隔一秒，打印一次num的值
num ++;
if(num ===5) { //打印四次之后，就清除定时器
clearInterval(timer);
}
}, 1000);
</script>
```
## 定时器举例
### 举例一：5秒后关闭网页两侧的广告栏
假设网页两侧的广告栏为两个img标签，它们的样式为：
```html
<style>
...
...
</style>
```
5秒后关闭广告栏的js代码为：
```html
<script>
window.onload = function () {
//获取相关元素
var imgArr = document.getElementsByTagName("img");
//设置定时器：5秒后关闭两侧的广告栏
setTimeout(fn,5000);
function fn(){
imgArr[0].style.display = "none";
imgArr[1].style.display = "none";
}
}
</script>
```
### 举例二：关闭京东顶部广告栏（带动画效果关闭）
我们在[之前的文章](https://github.com/smyhvae/Web/blob/master/03-JavaScript%E5%9F%BA%E7%A1%80/07-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9ADOM%E6%93%8D%E4%BD%9C.md)中做过这道题。但是现在，要求广告栏在关闭的时候，带动画效果：**点击关闭按钮后，顶部广告栏慢慢地变透明，直到全部关闭。**
我们可以用定时器来做。完整版代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.top-banner {
background-color: pink;
height: 80px;
}
.w {
width: 1210px;
margin: 10px auto;
position: relative;
}
img {
display: block;
width: 1210px;
height: 80px;
background-color: blue;
}
a {
position: absolute;
top: 5px;
right: 5px;
color: #fff;
background-color: #000;
text-decoration: none;
width: 20px;
height: 20px;
font: 700 14px/20px "simsum";
text-align: center;
}
.hide {
display: none !important;
}
.search {
width: 1210px;
height: 80px;
background-color: green;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner" style="opacity: 1">
<div class="w">
<img src="blue" alt=""/>
<a href="#" id="closeBanner">×</a>
</div>
</div>
<div class="search">
</div>
<script>
//需求：点击关闭按钮，先让top-banner这个盒子透明度变为0，紧接着display：none;
//1.获取事件源和相关元素
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//定义定时器
var timer = null;
//2.绑定事件
closeBanner.onclick = function () {
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
timer = setInterval(function () {
topBanner.style.opacity -= 0.1;
if (topBanner.style.opacity < 0) {
topBanner.style.display = "none";
clearInterval(timer);
}
}, 50);
}
</script>
</body>
</html>
```
代码解释：
注意，我们要实现给顶部的div加一个行内样式`style="opacity: 1"`，然后才能通过定时器判断`topBanner.style.opacity`的值。
定时器的返回值其实是number类型的，但我们习惯性地设置初始值为null。
实现效果：
20180201_2240.gif

6
05-CSS进阶/01-CSS的一些小知识.md
View File

@ -1,8 +1,7 @@
## CSS
### 隐藏盒子的几种方式 ## 隐藏盒子的几种方式
隐藏盒子，有以下几种方式： 隐藏盒子，有以下几种方式：
@ -25,6 +24,8 @@ display: none; 隐藏盒子，而且不占位置(用的最多)
``` ```
visibility: hidden; //隐藏盒子，占位置。 visibility: hidden; //隐藏盒子，占位置。
visibility: visible; //让盒子重新显示
``` ```
（4）方式四： （4）方式四：
@ -48,7 +49,6 @@ margin-left: 1000px;
### 设置盒子的半透明 ### 设置盒子的半透明
方式一：`pacity: 0.4`。优点是方便。缺点是：里面的内容也会半透明 方式一：`pacity: 0.4`。优点是方便。缺点是：里面的内容也会半透明

24
05-CSS进阶/02-JS的小知识.md
View File

@ -6,7 +6,29 @@ JS的小知识.md
### 方法的注释 ### 方法的注释
方法写完之后，我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。 方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。
比如：
```javascript
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
```
### 断点调试 ### 断点调试

25
推荐链接.md
View File

@ -107,4 +107,29 @@
一般阿里社招都是招3-5年的P6+高级工程师。面试官明知道作者只有一年工作经验，在面了这么多轮之后却来一句：“我们只要高工”。这是不是太欺负人了？ 一般阿里社招都是招3-5年的P6+高级工程师。面试官明知道作者只有一年工作经验，在面了这么多轮之后却来一句：“我们只要高工”。这是不是太欺负人了？
### 2018-01-28
- [WEB前端工作五年了，我来告诉你如何系统的学习现在的JAVASCRIPT](http://www.cnblogs.com/gongyue/p/8073235.html)
### 2018-01-29
- [最棒的 JavaScript 学习指南（2018版）](https://www.cnblogs.com/lhb25/p/8361799.html)
- [我们为什么选择Vue.js而不是React](http://www.infoq.com/cn/news/2016/12/why-Vue-js-no-react)
- [【长文慎入】通信十年—通信行业分析与跳槽之路](【长文慎入】通信十年—通信行业分析与跳槽之路)
- [我在深圳南山写代码：是在改变世界还是养家糊口](https://news.cnblogs.com/n/588481/)
### 2018-01-31
- [我所理解的前端](https://www.cnblogs.com/Smiled/p/8377188.html)

8
面试相关/个人感悟.md Normal file
View File

@ -0,0 +1,8 @@
### 2018-01-29
长期写博客的人，最少能证明他是一个善于思考和总结的人。
这句话的来源：[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html)

20
面试相关/面经/面经链接推荐.md
View File

@ -12,3 +12,23 @@
八年前的面经，咋记得这么清楚？ 八年前的面经，咋记得这么清楚？
### 2018-01-27
- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html)