diff --git a/00-前端工具/01-VS Code的使用.md b/00-前端工具/01-VS Code的使用.md index 957b73b..4218c5c 100644 --- a/00-前端工具/01-VS Code的使用.md +++ b/00-前端工具/01-VS Code的使用.md @@ -966,6 +966,14 @@ CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。 一个超级详细和真诚的前端入门项目。 + +## todo + +- [issues 84](https://github.com/qianguyihao/Web/issues/84) + + + + ## 参考链接 - [VSCode 插件大全｜ VSCode 高级玩家之第二篇](https://juejin.im/post/5ea40c6751882573b219777d) diff --git a/02-CSS基础/01-CSS属性：字体属性和文本属性.md b/02-CSS基础/01-CSS属性：字体属性和文本属性.md index 4300874..3a00e47 100644 --- a/02-CSS基础/01-CSS属性：字体属性和文本属性.md +++ b/02-CSS基础/01-CSS属性：字体属性和文本属性.md @@ -81,9 +81,9 @@ CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直 ### `vertical-align: middle;` 属性 -`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。 +`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。 -主要是用于图片、表格、文本的对齐。代码举例： +代码举例： ```css vertical-align: middle; /*指定行级元素的垂直对齐方式。*/ diff --git a/02-CSS基础/03-CSS样式表和选择器.md b/02-CSS基础/03-CSS样式表和选择器.md index b3ab9f4..bc6881c 100644 --- a/02-CSS基础/03-CSS样式表和选择器.md +++ b/02-CSS基础/03-CSS样式表和选择器.md @@ -1,26 +1,24 @@ -> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 +> 本文最初于 2015-10-03 发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在 GitHub 上关注我，一起入门和进阶前端。 ## 本文主要内容 - - CSS概述 - - CSS和HTML结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表` - - CSS四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` - - CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器` - - CSS样式优先级 +- CSS 概述 +- CSS 和 HTML 结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表` +- CSS 四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` +- CSS 几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器` +- CSS 样式优先级 ## 前言 - - ## CSS 概述 -CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS将网页**内容和显示样式进行分离**，提高了显示功能。 +CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS 将网页**内容和显示样式进行分离**，提高了显示功能。 -css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和css2.1不矛盾，必须先学2.1然后学3。 +css 的最新版本是 css3，**我们目前学习的是 css2.1**。 因为 css3 和 css2.1 不矛盾，必须先学 2.1 然后学 3。 -接下来我们要讲一下为什么要使用CSS。 +接下来我们要讲一下为什么要使用 CSS。 -**HTML的缺陷：** +**HTML 的缺陷：** 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 @@ -32,49 +30,47 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c 1. 使数据和显示分开 2. 降低网络流量 3. 使整个网站视觉效果一致 -4. 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css） +4. 使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css） -比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。 +比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给 css 提供各种各样的样式。 -### CSS的重点知识点 +### CSS 的重点知识点 盒子模型、浮动、定位 ### CSS 整体感知 -我们先来看一段简单的css代码： +我们先来看一段简单的 css 代码： ```html - - - Document - - - -

我是大标题

-

- 我是内容 -

- - + + + Document + + + +

我是大标题

+

+ 我是内容 +

+ ``` @@ -82,120 +78,117 @@ css的最新版本是css3，**我们目前学习的是css2.1**。 因为css3和c ![](http://img.smyhvae.com/20170710_1605.png) -我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程中我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。 +我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。后面的课程中我们将知道，css 也可以写在单独的文件里面，现在我们先写在 style 标签里面。 -如果在sublime中输入` + ``` -type表示“类型”，text就是“纯文本”，css也是纯文本。 +type 表示“类型”，text 就是“纯文本”，css 也是纯文本。 -但是，如果在sublime中输入`st`或者`style`然后按tab键，可以自动生成的格式如下：（不建议） +但是，如果在 sublime 中输入`st`或者`style`然后按 tab 键，可以自动生成的格式如下：（不建议） ```html - + ``` -css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。 +css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。 -## CSS语法 +## CSS 语法 **语法格式：**（其实就是键值对） ```html -选择器{ - 属性名: 属性值; - 属性名: 属性值; -} +选择器{ 属性名: 属性值; 属性名: 属性值; } ``` 或者可以写成： ```css -选择器{ - k:v; - k:v; - k:v; - k:v; +选择器 { + k: v; + k: v; + k: v; + k: v; } -选择器{ - k:v; - k:v; - k:v; - k:v; +选择器 { + k: v; + k: v; + k: v; + k: v; } ``` **解释：** -- 选择器代表页面上的某类元素，选择器后一定是大括号。 -- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。 -- 冒号和属性值之间可以留一个空格（编程习惯的经验）。 -- 如果一个属性有多个值的话，那么多个值用**空格**隔开。 +- 选择器代表页面上的某类元素，选择器后一定是大括号。 +- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。 +- 冒号和属性值之间可以留一个空格（编程习惯的经验）。 +- 如果一个属性有多个值的话，那么多个值用**空格**隔开。 **举例：** ```css -p{color: red;} +p { + color: red; +} ``` **完整版代码举例：** ```html - -

洗白白

-

你懂得

-

我不会就这样轻易的狗带

- + +

洗白白

+

你懂得

+

我不会就这样轻易的狗带

+ ``` + 效果： ![](http://img.smyhvae.com/2015-10-03-css-01.png) -### css代码的注释 +### css 代码的注释 **格式：** ```html ``` -注意：CSS只有`/* */`这种注释，没有`//`这种注释。而且注释要写在` - -

洗白白

-

你懂得

- + +

洗白白

+

你懂得

+ ``` ![](http://img.smyhvae.com/2015-10-03-css-03.png) -### 3、CSS和HTML结合方式三：引入外部样式表css文件 +### 3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件 **引入样式表文件**的方式又分为两种： - - （1）**采用``标签**。例如：`` - - （2）**采用import**，必须写在` - - -

生命壹号学完了安卓，继续学前端哟

- + + + Document + + + +

生命壹号学完了安卓，继续学前端哟

+ ``` 【总结】需要注意的是： -（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input。 +（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。 （2）无论这个标签藏的多深，一定能够被选择上。 （3）选择的所有，而不是一个。 -### 2、ID选择器：规定用`#`来定义 +### 2、ID 选择器：规定用`#`来定义 -针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。 +针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。 举例： ```html -#mytitle{ - border:3px dashed green; -} +#mytitle{ border:3px dashed green; } ``` + 效果： ![](http://img.smyhvae.com/2015-10-03-css-08.png) -id选择器的选择符是“#”。 +id 选择器的选择符是“#”。 -任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是： +任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是： -- （1）只能有字母、数字、下划线。 -- （2）必须以字母开头。 -- （3）不能和标签同名。比如id不能叫做body、img、a。 +- （1）只能有字母、数字、下划线。 +- （2）必须以字母开头。 +- （3）不能和标签同名。比如 id 不能叫做 body、img、a。 -另外，特别强调的是：**HTML页面，不能出现相同的id，哪怕他们不是一个类型**。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！ +另外，特别强调的是：**HTML 页面，不能出现相同的 id，哪怕他们不是一个类型**。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！ -**一个标签可以被多个css选择器选择：** +**一个标签可以被多个 css 选择器选择：** -比如，我们可以同时让标签选择器和id选择器作用于同一个标签。如下： +比如，我们可以同时让标签选择器和 id 选择器作用于同一个标签。如下： ![](http://img.smyhvae.com/20170710_1737.png) @@ -497,41 +488,36 @@ id选择器的选择符是“#”。 ![](http://img.smyhvae.com/20170711_1540.png) -现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？ -实际上，css有着非常严格的计算公式，能够处理冲突. +现在，假设选择器冲突了，比如 id 选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？ +实际上，css 有着非常严格的计算公式，能够处理冲突. -一个标签可以被多个css选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到css基础的第三篇文章里讲）。 +一个标签可以被多个 css 选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到 css 基础的第三篇文章里讲）。 ### 3、类选择器：规定用圆点`.`来定义 、针对**你想要的所有**标签使用。优点：灵活。 - -css中用`.`来表示类。举例如下： +css 中用`.`来表示类。举例如下： ```html -.one{ - width:800px; -} - +.one{ width:800px; } ``` 效果： ![](http://img.smyhvae.com/2015-10-03-css-07.png) +和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点： -和id非常相似，任何的标签都可以携带id属性和class属性。class属性的特点： +- 特性 1：类选择器可以被多种标签使用。 -- 特性1：类选择器可以被多种标签使用。 - -- 特性2：同一个标签可以使用多个类选择器。用**空格**隔开。举例如下：（正确） +- 特性 2：同一个标签可以使用多个类选择器。用**空格**隔开。举例如下：（正确） ```html

我是一个h3啊

``` -初学者常见的错误，就是写成了两个class。举例如下：（错误） +初学者常见的错误，就是写成了两个 class。举例如下：（错误） ```html

我是一个h3啊

@@ -539,34 +525,34 @@ css中用`.`来表示类。举例如下： **类选择器使用的举例：** -类选择器的使用，能够决定一个人的css水平。 +类选择器的使用，能够决定一个人的 css 水平。 比如，我们现在要做下面这样一个页面： ![](http://img.smyhvae.com/20170711_1639.png) -正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应css里的代码如下： +正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应 css 里的代码如下： ```html - + ``` 然后让每个标签去选取自己想要用的类选择器： ```html -

段落1

-

段落2

-

段落3

+

段落1

+

段落2

+

段落3

``` 也就是说： @@ -575,60 +561,59 @@ css中用`.`来表示类。举例如下： （2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。 -问题：到底用id还是用class？ +问题：到底用 id 还是用 class？ -答案：尽可能的用class，除非极特殊的情况可以用id。 +答案：尽可能的用 class，除非极特殊的情况可以用 id。 -原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。 +原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。 举例如下： ![](http://img.smyhvae.com/20170711_1706.png) -上图所示，css和js都在用同一个id，会出现不好沟通的情况。 +上图所示，css 和 js 都在用同一个 id，会出现不好沟通的情况。 -我们记住这句话：**类上样式，id上行为**。意思是说，`class`属性交给css使用，`id`属性交给js使用。 +我们记住这句话：**类上样式，id 上行为**。意思是说，`class`属性交给 css 使用，`id`属性交给 js 使用。 **上面这三种选择器的区别：** -- 标签选择器针对的是页面上的一类标签。 -- ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。 -- 类选择器可以被多种标签使用。 +- 标签选择器针对的是页面上的一类标签。 +- ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。 +- 类选择器可以被多种标签使用。 ### 4、通配符`*`：匹配任何标签 -通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。 +通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。 效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。 举例： ```css -*{ - margin-left:0px; - margin-top:0px; +* { + margin-left: 0px; + margin-top: 0px; } - ``` 效果： ![](http://img.smyhvae.com/2015-10-03-css-09.png) -## CSS的几种高级选择器 +## CSS 的几种高级选择器 **高级选择器：** - - 后代选择器：用空格隔开 - - 交集选择器：选择器之间紧密相连 - - 并集选择器（分组选择器）：用逗号隔开 - - 伪类选择器 +- 后代选择器：用空格隔开 +- 交集选择器：选择器之间紧密相连 +- 并集选择器（分组选择器）：用逗号隔开 +- 伪类选择器 下面详细讲一下这几种高级（扩展）选择器。 ### 1、后代选择器: 定义的时候用空格隔开 -对于`E F`这种格式，表示**所有属于E元素后代的F元素**，有这个样式。空格就表示后代。 +对于`E F`这种格式，表示**所有属于 E 元素后代的 F 元素**，有这个样式。空格就表示后代。 后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。 @@ -636,14 +621,14 @@ css中用`.`来表示类。举例如下： 看定义可能有点难理解，我们来看例子吧。 -举例1： +举例 1： ```html - + ``` 空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。 @@ -653,15 +638,15 @@ css中用`.`来表示类。举例如下： 举例： ```html - + ``` 上方代码的意思是说：定义了`

`标签中的``标签中的``标签的样式。 -同理：h3和b和i标签不一定是连续紧挨着的，只要保持一个后代的关联即可。 +同理：h3 和 b 和 i 标签不一定是连续紧挨着的，只要保持一个后代的关联即可。 效果： @@ -673,7 +658,7 @@ css中用`.`来表示类。举例如下： 上面的这种写法，`

`标签和``标签并不是紧挨着的，但他们保持着一种后代关系。 -还有下面这种写法：（含类选择器、id选择器都是可以的） +还有下面这种写法：（含类选择器、id 选择器都是可以的） ![](http://img.smyhvae.com/2015-10-03-css-13.png) @@ -682,78 +667,76 @@ css中用`.`来表示类。举例如下： ```html - - - Document - - - -
-
-
-
-

我是什么颜色？

-
-
-
-
- + + + Document + + + +
+
+
+
+

我是什么颜色？

+
+
+
+
+ ``` -上面css中的`div div p`，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p元素的祖先列表： +上面 css 中的`div div p`，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p 元素的祖先列表： ![](http://img.smyhvae.com/20170711_1836.png) -讲到这里，我们再提一个sublme的快捷键。 +讲到这里，我们再提一个 sublme 的快捷键。 -在sublime中输入`p#haha`，按tab键后，会生成`

`。 +在 sublime 中输入`p#haha`，按 tab 键后，会生成`

`。 -在sublime中输入`p.haha`，按tab键后，会生成`

`。 +在 sublime 中输入`p.haha`，按 tab 键后，会生成`

`。 ### 2、交集选择器：定义的时候紧密相连 定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。 -如果后一个选择器是类选择器，则写为`div.special`；如果后一个选择器id选择器，则写为`div#special`。 +如果后一个选择器是类选择器，则写为`div.special`；如果后一个选择器 id 选择器，则写为`div#special`。 来看下面这张图就明白了： ![](http://img.smyhvae.com/20170711_1851.png) - ```css -h3.special{ - color:red; +h3.special { + color: red; } ``` -选择的元素要求同时满足两个条件：必须是h3标签，然后必须是special标签。 +选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。 举例： ```html - - - 交集选择器测试 - - - -

标题1

-

我也是标题

-

我是段落

- + + + 交集选择器测试 + + + +

标题1

+

我也是标题

+

我是段落

+ ``` @@ -766,8 +749,8 @@ h3.special{ 交集选择器可以连续交：（一般不要这么写） ```css -h3.special.zhongyao{ - color:red; +h3.special.zhongyao { + color: red; } ``` @@ -780,8 +763,11 @@ h3.special.zhongyao{ 举例： ```css -p,h1,#mytitle,.one{ - color:red; +p, +h1, +#mytitle, +.one { + color: red; } ``` @@ -795,21 +781,21 @@ p,h1,#mytitle,.one{ ### 浏览器的兼容性问题 -> 我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。 +> 我们可以用`IETester`这个软件测一下 CSS 在各个版本 IE 浏览器上的显示效果。 -IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下： +IE： 微软的浏览器，随着操作系统安装的。所以每个 windows 都有 IE 浏览器。各版本如下： -- windows xp 操作系统安装的IE6 -- windows vista 操作系统安装的IE7 -- windows 7 操作系统安装的IE8 -- windows 8 操作系统安装的IE9 -- windows10 操作系统安装的edge +- windows xp 操作系统安装的 IE6 +- windows vista 操作系统安装的 IE7 +- windows 7 操作系统安装的 IE8 +- windows 8 操作系统安装的 IE9 +- windows10 操作系统安装的 edge -浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。 +浏览器兼容问题，要出，就基本上就是出在 IE6、7 身上，这两个浏览器是非常低级的浏览器。 -为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接： +为了测试浏览器 CSS 3 的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接： -- +- 测试结果如下： @@ -817,134 +803,128 @@ IE： 微软的浏览器，随着操作系统安装的。所以每个windows都 我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率： -- IE9 5.94% -- IE8 21.19% -- IE7 4.79% -- IE6 4.11% +- IE9 5.94% +- IE8 21.19% +- IE7 4.79% +- IE6 4.11% 我们可以在中查看 ![](http://img.smyhvae.com/20170711_1948.png) -我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。 +我们要知道典型的 IE6 兼容问题（面试要问），但是做项目我们兼容到 IE8 即可。不解决 IE8 以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟 IE6 较劲。 -我们可以用「IETester」软件看看css在各个浏览器中的显示效果。 +我们可以用「IETester」软件看看 css 在各个浏览器中的显示效果。 ### 1.子代选择器，用符号`>`表示 -> IE7开始兼容，IE6不兼容。 +> IE7 开始兼容，IE6 不兼容。 ```css -div>p{ - color:red; +div > p { + color: red; } ``` -div的儿子p。和div的后代p的截然不同。 +div 的儿子 p。和 div 的后代 p 的截然不同。 能够选择： ```html -
-

我是div的儿子

-
+
+

我是div的儿子

+
``` 不能选择： ```html -
-
    -
  • -

    我是div的重孙子

    -
    • -
-
+
+
    +
  • +

    我是div的重孙子

    +
    • +
+
``` ### 2.序选择器 -> IE8开始兼容；IE6、7都不兼容 +> IE8 开始兼容；IE6、7 都不兼容 设置无序列表`
    `中的第一个`
  • `为红色： ```html - + ``` 设置无序列表`
      `中的最后一个`
    • `为红色： ```css - ul li:last-child{ - color:blue; - } +ul li:last-child { + color: blue; +} ``` 序选择器还有更复杂的用法，以后再讲。 -由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名： +由于浏览器的更新需要过程，所以现在如果公司还要求兼容 IE6、7，那么就要自己写类名： ```html -
        -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      • 项目
        • -
      +
        +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      • 项目
        • +
      ``` 用类选择器来选择第一个或者最后一个： ```html - ul li.first{ - color:red; - } - - ul li.last{ - color:blue; - } +ul li.first{ color:red; } ul li.last{ color:blue; } ``` ### 3.下一个兄弟选择器 -> IE7开始兼容，IE6不兼容。 +> IE7 开始兼容，IE6 不兼容。 `+`表示选择下一个兄弟 ```html - + ``` -上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。 +上方的选择器意思是：选择的是 h3 元素后面紧挨着的第一个兄弟。 ```html -

      我是一个标题

      -

      我是一个段落

      -

      我是一个段落

      -

      我是一个段落

      -

      我是一个标题

      -

      我是一个段落

      -

      我是一个段落

      -

      我是一个段落

      -

      我是一个标题

      -

      我是一个段落

      -

      我是一个段落

      -

      我是一个段落

      -

      我是一个标题

      +

      我是一个标题

      +

      我是一个段落

      +

      我是一个段落

      +

      我是一个段落

      +

      我是一个标题

      +

      我是一个段落

      +

      我是一个段落

      +

      我是一个段落

      +

      我是一个标题

      +

      我是一个段落

      +

      我是一个段落

      +

      我是一个段落

      +

      我是一个标题

      ``` 效果如下： diff --git a/04-JavaScript基础/09-流程控制语句：选择结构（if和switch）.md b/04-JavaScript基础/09-流程控制语句：选择结构（if和switch）.md index 753802f..88033f5 100644 --- a/04-JavaScript基础/09-流程控制语句：选择结构（if和switch）.md +++ b/04-JavaScript基础/09-流程控制语句：选择结构（if和switch）.md @@ -300,7 +300,7 @@ switch (true) { switch 语句中的`break`可以省略，但一般不建议（对于新手而言）。否则结果可能不是你想要的，会出现一个现象：**case 穿透**。 -当然，如果你能利用好 case 穿透，会让代码些得十分优雅。 +当然，如果你能利用好 case 穿透，会让代码写得十分优雅。 **举例 1**：（case 穿透的情况） @@ -469,7 +469,7 @@ function handleRetCode(retCode) { } ``` -上面的写法 2，是比较推荐的写法：直接通过 return 的方式，让 function 里的代码不再继续往下走，这就达到目的了。对了，因为要用到 return ，所以需要单独封装到一个 function 里面。 +上面的写法 2，是比较推荐的写法：直接通过 return 的方式，让 function 里的代码不再继续往下走，这就达到目的了。对了，因为要用到 return ，所以整段代码是封装到一个 function 里的。 如果你以后看到有前端小白采用的是**写法 1**，请一定要把**写法 2**传授给他：不需要那么多的 if else，直接用 return 返回就行了。 diff --git a/04-JavaScript基础/17-数组的常见方法.md b/04-JavaScript基础/17-数组的常见方法.md index 1974e77..fa9bf26 100644 --- a/04-JavaScript基础/17-数组的常见方法.md +++ b/04-JavaScript基础/17-数组的常见方法.md @@ -15,9 +15,9 @@ | 方法 | 描述 | 备注 | | :-------- | :------------------------------------------------------------------------- | :------------- | -| push() | 向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | +| push() | 向数组的**最后面**插入一个或多个元素，返回结果为新数组的**长度** | 会改变原数组 | | pop() | 删除数组中的**最后一个**元素，返回结果为**被删除的元素** | 会改变原数组 | -| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度** | 会改变原数组 | +| unshift() | 在数组**最前面**插入一个或多个元素，返回结果为新数组的**长度** | 会改变原数组 | | shift() | 删除数组中的**第一个**元素，返回结果为**被删除的元素** | 会改变原数组 | | | | | | slice() | 从数组中**提取**指定的一个或多个元素，返回结果为**新的数组** | 不会改变原数组 | @@ -183,7 +183,7 @@ console.log(arr); // 打印结果是数组：[1, "abc", true] ### push() -`push()`：向数组的**最后面**插入一个或多个元素，返回结果为**新数组的长度**。 +`push()`：向数组的**最后面**插入一个或多个元素，返回结果为新数组的**长度**。会改变原数组，因为原数组变成了新数组。 语法： @@ -227,7 +227,7 @@ console.log(JSON.stringify(arr)); // 打印结果：["王一","王二"] ### unshift() -`unshift()`：在数组**最前面**插入一个或多个元素，返回结果为**新数组的长度**。插入元素后，其他元素的索引会依次调整。 +`unshift()`：在数组**最前面**插入一个或多个元素，返回结果为新数组的**长度**。会改变原数组，因为原数组变成了新数组。插入元素后，其他元素的索引会依次调整。 语法： diff --git a/05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md b/05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md index 7aab2f2..c3e4028 100644 --- a/05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md +++ b/05-JavaScript之ES6语法/07-剩余参数和扩展运算符.md @@ -42,7 +42,7 @@ fn(1, 2, 3); //方法的定义中了四个参数，但调用函数时只使用 打印结果： -``` +```bash 1 2 undefined @@ -80,6 +80,7 @@ const sum = (...args) => { }; console.log(sum(10, 20, 30)); ``` + 打印结果：60 ### 剩余参数和解构赋值配合使用 @@ -104,7 +105,7 @@ console.log(s2); // ['李四', '王五'] ```js const arr = [10, 20, 30]; -...arr // 10, 20, 30 注意，这一行是伪代码 +...arr // 10, 20, 30 注意，这一行是伪代码，这里用到了扩展运算符 console.log(...arr); // 10 20 30 console.log(10, 20, 30); // 10 20 30 @@ -116,10 +117,17 @@ console.log(10, 20, 30); // 10 20 30 我们把`...arr` 打印出来，发现打印结果竟然是 `10 20 30`，为啥逗号不见了呢？因为逗号被当作了 console.log 的参数分隔符。如果你不信，可以直接打印 `console.log(10, 20, 30)` 看看。 +接下来，我们看一下扩展运算符的应用。 -**举例**：数组赋值的问题 +### 举例1：数组赋值 -我们来分析一段代码：（将数组 arr1 赋值给 arr2） +数组赋值的代码举例： + +```js +let arr2 = [...arr1]; // 将 arr1 赋值给 arr2 +``` + +为了理解上面这行代码，我们先来分析一段代码：（将数组 arr1 赋值给 arr2） ```javascript let arr1 = ['www', 'smyhvae', 'com']; @@ -128,7 +136,7 @@ console.log('arr1:' + arr1); console.log('arr2:' + arr2); console.log('---------------------'); -arr2.push('你懂得'); //往arr2 里添加一部分内容 +arr2.push('你懂得'); //往 arr2 里添加一部分内容 console.log('arr1:' + arr1); console.log('arr2:' + arr2); ``` @@ -139,11 +147,11 @@ console.log('arr2:' + arr2); 上方代码中，我们往往 arr2 里添加了`你懂的`，却发现，arr1 里也有这个内容。原因是：`let arr2 = arr1;`其实是让 arr2 指向 arr1 的地址。也就是说，二者指向的是同一个内存地址。 -如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助扩展运算符来做： +如果不想让 arr1 和 arr2 指向同一个内存地址，我们可以借助**扩展运算符**来做： ```javascript let arr1 = ['www', 'smyhvae', 'com']; -let arr2 = [...arr1]; //arr2 会重新开辟内存地址 +let arr2 = [...arr1]; //【重要代码】arr2 会重新开辟内存地址 console.log('arr1:' + arr1); console.log('arr2:' + arr2); console.log('---------------------'); @@ -155,6 +163,40 @@ console.log('arr2:' + arr2); 运行结果： -![](http://img.smyhvae.com/20180304_1951.png) +```bash +arr1:www,smyhvae,com +arr2:www,smyhvae,com +--------------------- +arr1:www,smyhvae,com +arr2:www,smyhvae,com,你懂得 +``` 我们明白了这个例子，就可以避免开发中的很多业务逻辑上的 bug。 + +### 举例2：合并数组 + +代码举例： + +```js +let arr1 = ['王一', '王二', '王三']; +let arr2 = ['王四', '王五', '王六']; +// ...arr1 // '王一','王二','王三' +// ...arr2 // '王四','王五','王六' + +// 方法1 +let arr3 = [...arr1, ...arr2]; +console.log(arr3); // ["王一", "王二", "王三", "王四", "王五", "王六"] + +// 方法2 +arr1.push(...arr2); +console.log(arr1); // ["王一", "王二", "王三", "王四", "王五", "王六"] +``` + +### 举例3：将伪数组或者可遍历对象转换为真正的数组 + +代码举例： + +```js +const myDivs = document.getElementsByClassName('div'); +const divArr = [...myDivs]; // 利用扩展运算符，将伪数组转为真正的数组 +``` diff --git a/README.md b/README.md index 8618822..8e879e6 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ 项目地址： -前端入门和进阶学习笔记。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有： +前端入门到进阶图文教程。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有： - 1、网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位前端入门者的同理心。即使你完全不懂前端，甚至不懂编程，通过这个教程，也能让小白入门。 @@ -37,6 +37,7 @@ 扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/20190101.png) +![](http://img.smyhvae.com/20200101.png) +