udate img
This commit is contained in:
qianguyihao
parent
26653bee3f
commit
e48bcf4eac
@ -73,7 +73,8 @@ git branch -d feature_item_recommend
|
||||
### 合并分支时，如果存在分叉
|
||||
|
||||
|
||||
20180610_1650.png
|
||||
|
||||
|
||||
|
||||
比如说上面这张图中，最早的时候，master分支是位于`C2`节点。我基于`C2`节点，new出一个新的分支`iss53`，我在`iss53`上提交了好几个commit。
|
||||
|
||||
@ -97,11 +98,11 @@ Git 没有简单地把分支指针右移，而是对三方合并的结果作一
|
||||
|
||||
值得一提的是Git 可以自己裁决哪个共同祖先才是最佳合并基础；这和CVS 或Subversion（1.5 以后的版本）不同，它们需要开发者手工指定合并基础。所以此特性让Git 的合并操作比其他系统都要简单不少。
|
||||
|
||||
20180610_1710.png
|
||||
|
||||
|
||||
### 解决合并时发生的冲突
|
||||
|
||||
20180610_1740.png
|
||||
|
||||
|
||||
如果 feature1和feature2修改的是同一个文件中**代码的同一个位置**，那么，把feature1合并到feature2时，就会产生冲突。这个冲突需要人工解决。步骤如下：
|
||||
|
||||
@ -124,14 +125,27 @@ git自动合并成功。不管是git自动合并成功，还是在人工解决
|
||||
## 日常操作积累
|
||||
|
||||
|
||||
### 修改已经commit的备注信息
|
||||
### 修改密码（曲线救国）
|
||||
|
||||
|
||||
> 网上查了很久，没找到答案。最终，在cld童鞋的提示下，采取如下方式进行曲线救国。
|
||||
|
||||
```bash
|
||||
# 设置当前仓库的用户名为空
|
||||
git config user.name ""
|
||||
```
|
||||
|
||||
|
||||
然后，当我们再输入`git pull`等命令行时，就会被要求重新输入*新的*账号密码。此时，密码就可以修改成功了。最后，我们还要输入如下命令，还原当前仓库的用户名：
|
||||
|
||||
```
|
||||
git config user.name "smyhvae"
|
||||
```
|
||||
|
||||
|
||||
### 修改已经push的某次commit的作者信息
|
||||
|
||||
已经push的记录，如果要修改作者信息的话，只能 通过--force命令。
|
||||
已经push的记录，如果要修改作者信息的话，只能 通过--force命令。我反正是查了很久，但最终还是不敢用公司的仓库尝试。
|
||||
|
||||
参考链接：
|
||||
|
||||
@ -144,8 +158,6 @@ git自动合并成功。不管是git自动合并成功，还是在人工解决
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 将 `branch1`的某个`commit1`合并到`branch2`当中
|
||||
|
||||
切换到branch2中，然后执行如下命令：
|
||||
@ -159,16 +171,15 @@ git cherry-pick commit1
|
||||
|
||||
20180623时，网上看了下Git客户端的推荐排名：
|
||||
|
||||
20180623_1210.png
|
||||
|
||||
|
||||
上面的Git客户端我基本都用过了，我最推荐的一款Git客户端是：**Tower**。
|
||||
|
||||
### SmartGit
|
||||
**SmartGit**：
|
||||
|
||||
商业用途收费， 个人用户免费：
|
||||
|
||||
20180623_1305.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
27
00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md
Normal file
27
00-前端工具/02-第一次使用VS Code时你应该知道的一切配置.md
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
VS Code 的全称是 Visual Studio Code，是微软推出的一款免费的、开源的跨平台编辑器。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 常用快捷键
|
||||
|
||||
|
||||
### 编辑
|
||||
|
||||
|
||||
**删除文字**：
|
||||
|
||||
|
||||
| 快捷键 | 作用 | 备注 |
|
||||
|:-------------|:-----|:-----|
|
||||
|delete|删除光标的前一个字符|相当于 Windows 键盘上的退格键|
|
||||
|fn + delete|删除光标的后一个字符||
|
||||
|**option + delete**|删除光标之前的一个单词|英文有效|
|
||||
|**command + delete**|删除光标之前的整行内容|【荐】|
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
|
||||
|
||||
## 常见操作
|
||||
|
||||
### 自动保存
|
||||
## 常见配置
|
||||
|
||||
|
||||
**自动保存**：
|
||||
|
||||
```
|
||||
"files.autoSave": "onFocusChange"
|
||||
@ -12,6 +14,16 @@
|
||||
|
||||
|
||||
|
||||
**在新的窗口中打开文件**：
|
||||
|
||||
```json
|
||||
"workbench.editor.enablePreview": false,
|
||||
```
|
||||
|
||||
|
||||
## 常见操作
|
||||
|
||||
|
||||
|
||||
### 如何查看代码结构
|
||||
|
||||
@ -23,12 +35,6 @@
|
||||
|
||||
|
||||
|
||||
### 在新的窗口中打开文件
|
||||
|
||||
```json
|
||||
"workbench.editor.enablePreview": false,
|
||||
```
|
||||
|
||||
### 在本地开启服务器
|
||||
|
||||
```bash
|
||||
@ -140,15 +146,17 @@ Sass 文件格式化。
|
||||
|
||||
在本地开启Node服务器：
|
||||
|
||||
20180611_2230.png
|
||||
|
||||
|
||||
然后在浏览器的地址栏输入`http://localhost/` + 文件的相对路径，就可以通过服务器的形式打开这个文件。
|
||||
|
||||
### Copy Relative Path
|
||||
|
||||
> 这个插件很有用，使用频率很高。
|
||||
|
||||
复制文件的相对路径：（相对于根路径而言）
|
||||
|
||||
20180611_2235.png
|
||||
|
||||
|
||||
|
||||
### open in browser
|
||||
@ -238,10 +246,6 @@ VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧
|
||||
|
||||
|
||||
|
||||
### 代码格式化
|
||||
|
||||
|
||||
|
||||
### 如何同时打开多个窗口
|
||||
|
||||
|
||||
@ -271,7 +275,7 @@ VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧
|
||||
|
||||
### 某网友的VS Code 插件截图
|
||||
|
||||
20180611_2255.png
|
||||
|
||||
|
||||
|
||||
|
||||
@ -29,6 +29,29 @@ whistle安装证书后，可以拦截 https 请求。但是，我现在又不想
|
||||
|
||||
|
||||
|
||||
## 移动端调试神器:eruda
|
||||
|
||||
|
||||
> 手机连接代理时，如何看console.log的日志信息?
|
||||
|
||||
> 现在，代码里有console.log，如果是在电脑浏览器上看，可以直接在控制台查看console.log的内容。但是，如果手机连接代理，在手机上打开网页的话，要怎么查看console.log的内容呢？具体做法如下：
|
||||
|
||||
（1）在 whistle中，新建一个名叫`Eruda H5`的代理，代理中的内容是：
|
||||
|
||||
```
|
||||
http://xxx.com htmlAppend://{eruda.html}
|
||||
```
|
||||
|
||||
|
||||
(2)新建一个values，里面的内容是：
|
||||
|
||||
```html
|
||||
<script src="//cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
|
||||
<script>
|
||||
eruda.init()
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
然后就OK了。
|
||||
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
|
||||
|
||||
|
||||
积累平时看到的一些好的前端文章。
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-08-17
|
||||
|
||||
- [面试分享：一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22)
|
||||
|
||||
在公众号「web前端课程」上看到的文章。作者经历了4面，也是厉害了。另外，作者在gihub上的[博客](https://github.com/jawil/blog)也是出彩的。比如说下面这篇文章就值得推荐：
|
||||
|
||||
- [挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总](https://github.com/jawil/blog/issues/4)
|
||||
|
||||
作者搜集了几百篇在掘金上看到的好文章，让人惊叹。
|
||||
|
||||
|
||||
### 2017-08-16
|
||||
|
||||
- [道阻且长啊TAT(前端面试总结)](https://segmentfault.com/a/1190000010631325?_ea=2359607)
|
||||
|
||||
作者毕业于华科，面的是前端的实习，还拿了不少offer：百度外卖，头条，美团，狗东，其他，最终在美团实习。我最初是在[微信公众号](https://mp.weixin.qq.com/s/_clHr5a6_JzTos9bKpvKrA)上看到的文章。
|
||||
|
||||
|
||||
hello。我看你拿了不少实习offer。有没有推荐的前端学习资料呀？比如说：网站、链接、书籍等。可否分享给我？如果内容较多，欢迎发表成博客。谢啦～～～
|
||||
|
||||
|
||||
### 2017-08-01
|
||||
|
||||
- [资深Web技术专家曹刘阳：2016年前端技术观察](http://geek.csdn.net/news/detail/128912)
|
||||
|
||||
有很多争议，[知乎](https://www.zhihu.com/question/53625757)上都有人评论了。
|
||||
|
||||
|
||||
|
||||
### 2017-07-31
|
||||
|
||||
- [你可能不需要 Vuex](https://github.com/chenbin92/blog/issues/1)
|
||||
|
||||
这篇文章里的流程图画得挺好看的，gif图也很小，只有200多kb。我发邮件问作者用的什么软件，很幸运的是，得到了作者的回复。答案是：
|
||||
|
||||
- 录制 GIF：[licecap](https://github.com/justinfrankel/licecap)
|
||||
|
||||
- 画图：[processon免费在线作图](https://www.processon.com/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-07-13
|
||||
|
||||
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
|
||||
|
||||
在逛公众号「前端大全」的时候发现的，然后顺着找到了对应的GitHub链接。面试题有答案哦。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-01-20
|
||||
|
||||
- [阿里9年，我总结的前端架构演进3大阶段及团队管理心法](http://www.infoq.com/cn/news/2017/01/Ali-9-3)
|
||||
|
||||
伟明的推荐，说是对前端开发的价值观形成有良好的影响。
|
||||
|
||||
|
||||
@ -105,7 +105,7 @@ html是一个纯本文文件（就是用txt文件改名而成），用一些标
|
||||
|
||||
### 2、HTML的历史
|
||||
|
||||
|
||||
|
||||
|
||||
我们专门来对XHTML做一个介绍。
|
||||
|
||||
@ -546,11 +546,11 @@ title也是有助于SEO搜索引擎优化的。
|
||||
|
||||
`<body>`标签另外还有一些属性，这里用个例子来解释：
|
||||
|
||||
|
||||
|
||||
|
||||
上方代码中，当我们对`点我点我`这几个字使用超链时，`link`属性表示默认显示的颜色、`alink`属性表示鼠标点击但是还没有松开时的颜色、`vlink`属性表示点击完成之后显示的颜色。效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
接下来，我们讲一下`<body>`里的各种标签的属性。
|
||||
@ -577,7 +577,7 @@ title也是有助于SEO搜索引擎优化的。
|
||||
- `align="属性值"`：对齐方式。属性值包括left center right。
|
||||
举例：
|
||||
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
@ -635,7 +635,7 @@ div标签的属性：
|
||||
|
||||
效果举例：
|
||||
|
||||
|
||||
|
||||
|
||||
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
|
||||
div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。
|
||||
@ -689,7 +689,7 @@ This <br> is a para<br>graph with line breaks
|
||||
```
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示，**`<p>`标签和`<br>`标签的区别在于**：`<p>`标签会在段落的前后自动插入一个空行，而`<br>`标签没有空行；而且`<br>`标签没有属性。
|
||||
|
||||
@ -702,7 +702,7 @@ This <br> is a para<br>graph with line breaks
|
||||
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
属性：
|
||||
- `align="属性值"`：设定线条置放位置。属性值可选择：left right center。
|
||||
@ -712,7 +712,7 @@ This <br> is a para<br>graph with line breaks
|
||||
- `noshade`：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。
|
||||
属性效果演示：
|
||||
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
@ -721,7 +721,7 @@ This <br> is a para<br>graph with line breaks
|
||||
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
|
||||
到了H5里面，center标签不建议使用。
|
||||
|
||||
@ -734,7 +734,7 @@ This <br> is a para<br>graph with line breaks
|
||||
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，好像红框部分的字体变小了，而且还出现了缩进，好吧， 这个其实是浏览器搞的鬼。
|
||||
为什么要有`<pre>`这个标签呢？答案是：
|
||||
@ -751,7 +751,7 @@ This <br> is a para<br>graph with line breaks
|
||||
标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 字体标签`<font>`（已废弃）
|
||||
@ -768,7 +768,7 @@ This <br> is a para<br>graph with line breaks
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 特殊字符（转义字符）
|
||||
|
||||
@ -791,16 +791,16 @@ This <br> is a para<br>graph with line breaks
|
||||
```
|
||||
正确的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
错误的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
其实我们只要记住前三个符号就行了，其他的在需要的时候查一下就行了。而且，EditPlus软件中是可以直接点击这些符号进行选择的：
|
||||
|
||||
|
||||
http://img.smyhvae.com/2015-10-01-cnblogs_html_13.png)
|
||||
|
||||
来一张表格，方便需要的时候查询：
|
||||
|
||||
@ -831,7 +831,7 @@ http://7sby7r.com1.z0.glb.clouddn.com/2015-10-01-cnblogs_html_13.png)
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -849,7 +849,7 @@ div的主要目的是用来布局，而小装饰却可以用来
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
@ -862,7 +862,7 @@ O<sup>2</sup> 5<sub>3</sub>
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -882,7 +882,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
当然，我们也可以直接点进链接，访问一个网址。举例如下；
|
||||
|
||||
@ -899,7 +899,7 @@ href是英语`hypertext reference`超文本地址的缩写。读作“喝瑞夫
|
||||
指给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
|
||||
首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中解释：
|
||||
|
||||
@ -1131,33 +1131,33 @@ aaa/../bbb/1.jpg
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
`Alt`属性效果演示：
|
||||
|
||||
|
||||
|
||||
|
||||
- 图片的`align`属性：**图片和周围文字的相对位置**。属性取值可以是：bottom（默认）、center、top、left、right。
|
||||
我们来分别看一下这`align`属性的这几个属性值的区别。
|
||||
1、`align=""`，图片和文字低端对齐。即默认情况下的显示效果：
|
||||
|
||||
|
||||
|
||||
|
||||
2、`align="center"`：图片和文字水平方向上居中对齐。显示效果：
|
||||
|
||||
|
||||
|
||||
|
||||
3、`align="top"`：图片与文字顶端对齐。显示效果：
|
||||
|
||||
|
||||
|
||||
|
||||
4、`align="left"`：图片在文字的左边。显示效果：
|
||||
|
||||
|
||||
|
||||
|
||||
5、`align="right"`：图片在文字的右边。显示效果：
|
||||
|
||||
|
||||
|
||||
|
||||
**注意事项：**
|
||||
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
|
||||
@ -1175,23 +1175,23 @@ aaa/../bbb/1.jpg
|
||||
上方代码表明：给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。
|
||||
现在，我只想对图片的局部区域加超链接，该怎么做呢？这里的难点在于坐标的确定，此时需要用到Dreamweaver。
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，切换到“设计”标签，然后：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，点击菜单栏`插入-图像`，导入图片：
|
||||
|
||||
|
||||
|
||||
|
||||
，在图片上点击右键，选择`属性`，弹出属性面板：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，我们可以利用红框部分的`地图`绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式，蓝狂部分的`new`是没有下划线的，它和`_blank`的含义是一样的。
|
||||
|
||||
|
||||
|
||||
局部区域的热点设置完毕后，上图显示，红框部分就是多出的代码，也正是我们需要的代码。多出的代码如下：
|
||||
```html
|
||||
<img src="file:///C|/Users/smyhvae/Desktop/html/1.jpg" alt="" width="488" height="730" usemap="#Map"/>
|
||||
@ -1203,11 +1203,11 @@ aaa/../bbb/1.jpg
|
||||
然后第02至第04行就给出了地图的定义。
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
|
||||
最后，送上妹子的近照一张。楼主已经仁至义尽了。
|
||||
|
||||
|
||||
|
||||
|
||||
怎么？还没看够？且看下文：[HTML标签----图文详解（二）](http://www.cnblogs.com/smyhvae/p/4852863.html)
|
||||
|
||||
@ -1217,7 +1217,7 @@ aaa/../bbb/1.jpg
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
注意：
|
||||
|
||||
@ -52,11 +52,11 @@
|
||||
- `type="属性值"`。属性值可以选： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
不光是`<ul>`标签有`type`属性，`<ul>`里面的`<li>`标签也有`type`属性（虽然说这种写法很少见）。效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
注意：项目符号可以是图片，但是通过CSS设置<li>标记的背景图片来实现(CSS中讲)。
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### ul标签实际应用场景
|
||||
@ -115,7 +115,7 @@
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
**属性：**
|
||||
- `type="属性值"`。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合`start`属性表示`从几开始`。
|
||||
@ -149,7 +149,7 @@
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。
|
||||
|
||||
@ -200,7 +200,7 @@ ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图可以看出，定义列表表达的语义是两层：
|
||||
@ -333,7 +333,7 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中的表格好像没看到边框呀，不急，接下来看看`<table>`标签的属性。
|
||||
|
||||
@ -359,7 +359,7 @@ dt、dd都是容器级标签，想放什么都可以。所以，现在就应该
|
||||
|
||||
单元格带边框的效果：
|
||||
|
||||
|
||||
|
||||
|
||||
备注：表格中很细表格边线的制作：
|
||||
CSS的写法：
|
||||
@ -397,11 +397,11 @@ style="border-collapse:collapse;"
|
||||
- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
|
||||
效果举例：（横向合并）
|
||||
|
||||
|
||||
|
||||
|
||||
效果举例：（纵向合并）
|
||||
|
||||
|
||||
|
||||
|
||||
### `<th>`：加粗的单元格。相当于`<td>` + `<b>`
|
||||
- 属性同`<td>`标签。
|
||||
@ -411,7 +411,7 @@ style="border-collapse:collapse;"
|
||||
- 属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签
|
||||
这三个标签有与没有的区别：
|
||||
@ -459,7 +459,7 @@ style="border-collapse:collapse;"
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
## 框架标签
|
||||
|
||||
@ -482,11 +482,11 @@ style="border-collapse:collapse;"
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，如果删掉页面right.html，显示效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
### `<frame>`：框架
|
||||
一个框架显示一个页面。
|
||||
@ -507,11 +507,11 @@ style="border-collapse:collapse;"
|
||||
利用`name`这个属性，我们可以在框架里进行超链。
|
||||
举例：
|
||||
|
||||
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -528,7 +528,7 @@ style="border-collapse:collapse;"
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
内嵌框架举例：（在内嵌页面中切换显示不同的压面）
|
||||
|
||||
@ -548,7 +548,7 @@ style="border-collapse:collapse;"
|
||||
```
|
||||
|
||||
效果演示：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -640,7 +640,7 @@ POST方式：
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
四种按钮的举例：
|
||||
|
||||
@ -661,7 +661,7 @@ Node.js就是后台语言，到时候我们就知道怎么把表单存储到数
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -718,7 +718,7 @@ select标签和ul、ol、dl一样，都是组标签。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### `<textare>`标签：多行文本输入框
|
||||
|
||||
@ -745,7 +745,7 @@ text就是“文本”，area就是“区域”。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
上图的红框部分表示，我在文本区域进行了换行，所以显示的效果也出现了空白。
|
||||
|
||||
@ -779,7 +779,7 @@ text就是“文本”，area就是“区域”。
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -877,11 +877,11 @@ Flash格式的视频兼容性非常好，Flash格式的文件很小。
|
||||
```
|
||||
IE 8中的运行效果：
|
||||
|
||||
|
||||
|
||||
|
||||
google浏览器中的运行效果：
|
||||
|
||||
|
||||
|
||||
|
||||
注：在HTML5中新增了`<video>`标签播放视频。
|
||||
<br>
|
||||
@ -928,7 +928,7 @@ google浏览器中的运行效果：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -985,4 +985,4 @@ div p h1 span a img ul ol dl input
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -36,8 +36,7 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
|
||||
|
||||
百分比`%`这个相对单位要怎么用呢？这里也举个例子：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 字体属性
|
||||
|
||||
@ -205,7 +204,7 @@ CSS样式中，常见的文本属性有以下几种：
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 列表属性
|
||||
@ -221,15 +220,15 @@ ul li{
|
||||
|
||||
我们来看一下`list-style-image`属性的效果：
|
||||
|
||||
|
||||
|
||||
|
||||
给列表前面的图片加个边距吧，不然显示不完整：
|
||||
|
||||
|
||||
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -294,7 +293,7 @@ ul li{
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -364,12 +363,12 @@ p:hover{
|
||||
|
||||
效果如下：（IE有效果，google浏览器无效果）
|
||||
|
||||
|
||||
|
||||
|
||||
**延伸：**
|
||||
滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧：
|
||||
|
||||
|
||||
|
||||
|
||||
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
|
||||
|
||||
@ -378,7 +377,7 @@ p:hover{
|
||||
|
||||
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
代码：
|
||||
|
||||
@ -432,7 +431,7 @@ p:hover{
|
||||
|
||||
实现效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。
|
||||
|
||||
@ -442,4 +441,4 @@ p:hover{
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
@ -161,17 +161,17 @@ PS:所有用#开头的值，都是16进制的。
|
||||
|
||||
（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
|
||||
|
||||
|
||||
|
||||
|
||||
PS：padding的区域也是有背景图的。
|
||||
|
||||
（2）属性值为`no-repeat`（不要平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
（3）属性值为`repeat-x`（横向平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
|
||||
|
||||
@ -179,7 +179,7 @@ PS：padding的区域也是有背景图的。
|
||||
|
||||
（4）属性值为`repeat-y`（纵向平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### `background-position`属性
|
||||
|
||||
@ -186,7 +186,7 @@ p{color: red;}
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### css代码的注释
|
||||
|
||||
@ -329,7 +329,7 @@ CSS和HTML的结合方式有3种：
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 2、CSS和HTML结合方式二：内嵌样式表
|
||||
|
||||
@ -357,7 +357,7 @@ CSS和HTML的结合方式有3种：
|
||||
</body>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### 3、CSS和HTML结合方式三：引入外部样式表css文件
|
||||
|
||||
@ -380,7 +380,7 @@ p{
|
||||
上方的css代码中，注意像素要带上px这个单位，不然不生效。
|
||||
然后我们在html文件中通过`<link>`标签引入这个css文件就行了。效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这里再讲一个补充的知识：link标签的rel属性
|
||||
**`<link>`标签的rel属性：**
|
||||
@ -431,7 +431,7 @@ div{
|
||||
```
|
||||
上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在IE中打开网页）
|
||||
|
||||
|
||||
|
||||
|
||||
## CSS的四种基本选择器
|
||||
|
||||
@ -466,7 +466,7 @@ p{
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
再比如说，我想让“生命壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用`<span>`标签把“前端”这两个字围起来，然后给`<span>`标签加一个标签选择器。
|
||||
@ -514,7 +514,7 @@ p{
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
id选择器的选择符是“#”。
|
||||
@ -560,7 +560,7 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
和id非常相似，任何的标签都可以携带id属性和class属性。class属性的特点：
|
||||
@ -660,7 +660,7 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -719,17 +719,17 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
或者还有下面这种写法：
|
||||
|
||||
|
||||
|
||||
|
||||
上面的这种写法，`<h3>`标签和`<i>`标签并不是紧挨着的，但他们保持着一种后代关系。
|
||||
|
||||
还有下面这种写法：（含类选择器、id选择器都是可以的）
|
||||
|
||||
|
||||
|
||||
|
||||
我们在开头说了：**后代选择器，描述的是一种祖先结构**。我们举个例子来说明这句话：
|
||||
|
||||
@ -847,7 +847,7 @@ p,h1,#mytitle,.one{
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1035,5 +1035,5 @@ div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -276,7 +276,7 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
利用这个`hover`属性，我们同样对表格做一个样式的设置：
|
||||
表格举例：
|
||||
@ -343,7 +343,7 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##我的公众号
|
||||
|
||||
@ -164,7 +164,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
||||
|
||||
举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
|
||||
|
||||
|
||||
|
||||
|
||||
另外还有两个冲突的情况：
|
||||
|
||||
@ -173,7 +173,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
||||
|
||||
例如：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -44,11 +44,11 @@
|
||||
|
||||
标准盒子模型：
|
||||
|
||||
|
||||
|
||||
|
||||
IE盒子模型：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示：
|
||||
|
||||
@ -114,7 +114,7 @@ CSS盒模型和IE盒模型的区别：
|
||||
|
||||
上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -498,11 +498,11 @@ body{
|
||||
|
||||
这是默认情况下的例子：（div2在上层，div1在下层）
|
||||
|
||||
|
||||
|
||||
|
||||
现在加一个`z-index`属性，要求效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
第五条分析：
|
||||
|
||||
|
||||
126
02-CSS进阶/02.md
Normal file
126
02-CSS进阶/02.md
Normal file
@ -0,0 +1,126 @@
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<style>
|
||||
label {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label,
|
||||
input,
|
||||
select {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mui-switch {
|
||||
width: 52px;
|
||||
height: 31px;
|
||||
position: relative;
|
||||
border: 1px solid #dfdfdf;
|
||||
background-color: #fdfdfd;
|
||||
box-shadow: #dfdfdf 0 0 0 0 inset;
|
||||
border-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
background-clip: content-box;
|
||||
display: inline-block;
|
||||
-webkit-appearance: none;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mui-switch:before {
|
||||
content: '';
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
border-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.mui-switch:checked {
|
||||
border-color: #64bd63;
|
||||
box-shadow: #64bd63 0 0 0 16px inset;
|
||||
background-color: #64bd63;
|
||||
}
|
||||
|
||||
.mui-switch:checked:before {
|
||||
left: 21px;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg {
|
||||
transition: background-color ease 0.4s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg:checked {
|
||||
box-shadow: #dfdfdf 0 0 0 0 inset;
|
||||
background-color: #64bd63;
|
||||
transition: border-color 0.4s, background-color ease 0.4s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-animbg:checked:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim {
|
||||
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim:checked {
|
||||
box-shadow: #64bd63 0 0 0 16px inset;
|
||||
background-color: #64bd63;
|
||||
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
|
||||
}
|
||||
|
||||
.mui-switch.mui-switch-anim:checked:before {
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=mui-switch.css.map */
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<label>
|
||||
<input class="mui-switch" type="checkbox"> 默认未选中</label>
|
||||
<label>
|
||||
<input class="mui-switch" type="checkbox" checked> 默认选中</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-animbg" type="checkbox"> 默认未选中,简单的背景过渡效果,加mui-switch-animbg类即可</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-animbg" type="checkbox" checked> 默认选中</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-anim" type="checkbox"> 默认未选中，过渡效果，加 mui-switch-anim 类即可
|
||||
</label>
|
||||
<label>
|
||||
<input class="mui-switch mui-switch-anim" type="checkbox" checked> 默认选中</label>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
@ -1,701 +0,0 @@
|
||||
## 字面量：数字和字符串
|
||||
|
||||
“字面量”即**常量**，是固定值，不可改变。看见什么，它就是什么。
|
||||
|
||||
简单的字面量有2种：数字、字符串。
|
||||
|
||||
（1）数值的字面量非常简单，写上去就行了，不需要任何的符号。例如：
|
||||
|
||||
```javascript
|
||||
1 alert(886); //886是数字，所以不需要加引号。
|
||||
```
|
||||
|
||||
（2）字符串的字面量也很简单，但一定要加上引号。可以是单词、句子等。
|
||||
|
||||
温馨提示：100是数字，"100"是字符串。
|
||||
|
||||
### 总结
|
||||
|
||||
字面量都可以直接使用，但是我们一般不会直接使用字面量。
|
||||
|
||||
如果直接使用字面量的话，非常麻烦。比如说，多个地方要用到同一个字面量，还不如事先定义一个变量，用来保存字面量。
|
||||
|
||||
变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而不会直接使用字面量。
|
||||
|
||||
## 变量
|
||||
|
||||
|
||||
### 变量的概念
|
||||
|
||||
**变量**：变量可以用来保存字面量，而且变量的值可以任意改变。
|
||||
|
||||
|
||||
### 变量的定义和赋值
|
||||
|
||||
在js中使用`var`关键字来声明一个变量。
|
||||
|
||||
变量举例如下：
|
||||
|
||||
```javascript
|
||||
var a = 100;
|
||||
```
|
||||
|
||||
如下图所示：
|
||||
|
||||
|
||||
|
||||
var是英语“variant”变量的缩写。后面要加一个空格，空格后面的东西就是“变量名”：
|
||||
|
||||
- 定义变量：var就是一个**关键字**，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
|
||||
|
||||
- 变量的赋值：等号表示**赋值**，将等号右边的值，赋给左边的变量。
|
||||
|
||||
- 变量名：我们可以给变量任意的取名字。
|
||||
|
||||
PS：**在JavaScript中，永远都是用var来定义变量**（在ES6 之前），这和C、Java等语言不同。
|
||||
|
||||
变量要先定义，才能使用。比如，我们不设置变量，直接输出：
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
console.log(a);
|
||||
</script>
|
||||
```
|
||||
|
||||
控制台将会报错：
|
||||
|
||||
|
||||
|
||||
正确写法：
|
||||
|
||||
```javascript
|
||||
var a; // 定义
|
||||
a = 100; //赋值
|
||||
console.log(a); //输出100
|
||||
```
|
||||
|
||||
有经验的程序员，会把定义和赋值写在一起：
|
||||
|
||||
```javascript
|
||||
var a = 100; //定义，并且赋值100
|
||||
console.log(a); //输出100
|
||||
```
|
||||
|
||||
### 变量的命名规范
|
||||
|
||||
变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。
|
||||
|
||||
下列的单词，叫做保留字，就是说不允许当做变量名，不用记：
|
||||
|
||||
```
|
||||
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
|
||||
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
|
||||
```
|
||||
|
||||
大写字母是可以使用的，并且大小写敏感。也就是说A和a是两个变量。
|
||||
|
||||
```javascript
|
||||
var A = 250; //变量1
|
||||
var a = 888; //变量2
|
||||
```
|
||||
|
||||
我们来整理一下变量的命名规则：
|
||||
|
||||
1.驼峰命名规则：getElementById/matherAndFather/aaaOrBbbAndCcc
|
||||
|
||||
2.变量命名必须以字母或是下标符号”_”或者”$”为开头。
|
||||
|
||||
3.变量名长度不能超过255个字符。
|
||||
|
||||
4.变量名中不允许使用空格，首个字不能为数字。
|
||||
|
||||
5.不用使用脚本语言中保留的**关键字**及**保留字**作为变量名。
|
||||
|
||||
6.变量名区分大小写。(javascript是区分大小写的语言)
|
||||
|
||||
7.汉语可以作为变量名。但是不建议使用，因为 low
|
||||
|
||||
|
||||
## 标识符
|
||||
|
||||
**标识符**：在JS中所有的可以由我们自主命名的都可以称之为标识符。
|
||||
|
||||
例如：变量名、函数名、属性名都是属于标识符。
|
||||
|
||||
**关键字**：
|
||||
|
||||
|
||||
|
||||
**保留字**：
|
||||
|
||||
|
||||
|
||||
|
||||
**其他不建议使用的标识符**：
|
||||
|
||||
|
||||
|
||||
|
||||
## 变量的数据类型
|
||||
|
||||
变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型。
|
||||
|
||||
数据类型指的就是字面量的类型，**在JS中一共有六种数据类型**：
|
||||
|
||||
|
||||
- **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
|
||||
|
||||
- **引用数据类型（引用类型）**：Object 对象。
|
||||
|
||||
PS：内置对象function、Array、Date、RegExp、Error等都是属于Object。
|
||||
|
||||
基本数据类型：参数赋值的时候，传数值。
|
||||
|
||||
引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。
|
||||
|
||||
接下来，我们详细讲一下基本数据类型。
|
||||
|
||||
## String 字符串
|
||||
|
||||
来看个示例。现有如下代码：
|
||||
|
||||
```javascript
|
||||
var a = "abcde";
|
||||
var b = "生命壹号";
|
||||
var c = "123123";
|
||||
var d = "哈哈哈哈哈";
|
||||
var e = ""; //空字符串
|
||||
|
||||
console.log(typeof a);
|
||||
console.log(typeof b);
|
||||
console.log(typeof c);
|
||||
console.log(typeof d);
|
||||
console.log(typeof e);
|
||||
```
|
||||
|
||||
控制台输出如下：
|
||||
|
||||
```
|
||||
sting
|
||||
sting
|
||||
sting
|
||||
sting
|
||||
sting
|
||||
```
|
||||
|
||||
注意事项：
|
||||
|
||||
（1）在JS中，字符串需要使用引号引起来。使用双引号或单引号都可以，但是不要混着用。比如下面这样写是不可以的：
|
||||
|
||||
```
|
||||
var str = `hello";
|
||||
```
|
||||
|
||||
（2）引号不能嵌套：双引号里不能再放双引号，单引号里不能再放单引号。但是单引号里可以嵌套双引号。
|
||||
|
||||
（3）**转义字符**：在字符串中我们可以使用`\`作为转义字符，当表示一些特殊符号时可以使用`\`进行转义。
|
||||
|
||||
|
||||
- `\"` 表示 `"`
|
||||
|
||||
- `\'` 表示 `'`
|
||||
|
||||
- `\n` 表示换行
|
||||
|
||||
- `\t` 表示制表符
|
||||
|
||||
- `\\` 表示`\`
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
var str1 = "我说:\"今天\t天气真不错！\"";
|
||||
var str2 = "\\\\\\";
|
||||
|
||||
console.log(str1);
|
||||
console.log(str2);
|
||||
```
|
||||
|
||||
|
||||
上方代码的打印结果：
|
||||
|
||||
```
|
||||
我说:"今天 天气真不错！"
|
||||
\\\
|
||||
```
|
||||
|
||||
## 数值型：Number
|
||||
|
||||
在JS中所有的数值都是Number类型，包括整数和浮点数（小数）。
|
||||
|
||||
```javascript
|
||||
var a = 100; //定义了一个变量a，并且赋值100
|
||||
console.log(typeof a); //输出a变量的类型
|
||||
```
|
||||
|
||||
上方代码的输出结果为：
|
||||
|
||||
```
|
||||
number
|
||||
```
|
||||
|
||||
**补充知识：**
|
||||
|
||||
`typeof()`表示“**获取变量的类型**”，返回的是小写，语法为：
|
||||
|
||||
```
|
||||
typeof 变量
|
||||
```
|
||||
|
||||
在JavaScript中，只要是数，就是 number 数值型的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是 number 类型的。
|
||||
|
||||
**数值范围：**
|
||||
|
||||
由于内存的限制，ECMAScript 并不能保存世界上所有的数值。
|
||||
|
||||
- 最大值：`Number.MAX_VALUE`，这个值为： 1.7976931348623157e+308
|
||||
|
||||
- 最小值：`Number.MIN_VALUE`，这个值为： 5e-324
|
||||
|
||||
如果使用Number表示的变量超过了最大值，则会返回Infinity。
|
||||
|
||||
- 无穷大（正无穷）：Infinity
|
||||
|
||||
- 无穷小（负无穷）：-Infinity
|
||||
|
||||
注意，使用`typeof`检查Infinity也会返回number。
|
||||
|
||||
**NaN和isNaN()函数：**
|
||||
|
||||
（1）NaN：是一个特殊的数字，表示Not a Number，非数值。比如：
|
||||
|
||||
```javascript
|
||||
console.log("abc" / 18); //结果是NaN
|
||||
|
||||
console.log("abc" * "abcd"); //按理说，字符串相乘是没有结果的，但如果你非要让JS去算，它就一定会给你一个结果。结果是结果是NaN
|
||||
```
|
||||
|
||||
注意：`typeof NaN`的返回结果是number。
|
||||
|
||||
Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，包括 NaN 本身。
|
||||
|
||||
（2）isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true。
|
||||
|
||||
```javascript
|
||||
isNaN(NaN);// true
|
||||
isNaN("blue"); // true
|
||||
isNaN(123); // false
|
||||
|
||||
```
|
||||
|
||||
**浮点数的运算**：
|
||||
|
||||
在JS中，整数的运算可以很精确，但是**小数的运算，可能会得到一个不精确的结果**。所以，千万不要使用JS进行对精确度要求比较高的运算。
|
||||
|
||||
如下：
|
||||
|
||||
```javascript
|
||||
var a = 0.1 + 0.2;
|
||||
console.log(a); //打印结果：0.30000000000000004
|
||||
```
|
||||
|
||||
上方代码中，打印结果并不是0.3，而是0.30000000000000004。你看，**就连小数的加法运算，都是不精确的**。
|
||||
|
||||
我们知道，所有的运算都要转换成二进制去计算，然而，二进制是无法精确表示1/10的。因此存在小数的计算不精确的问题。
|
||||
|
||||
### 连字符和加号的区别
|
||||
|
||||
键盘上的`+`可能是连字符，也可能是数字的加号。如下：
|
||||
|
||||
```
|
||||
console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了
|
||||
console.log("我+爱+你"); //原样输出
|
||||
console.log(1+2+3); //输出6
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
```
|
||||
我爱你
|
||||
我+爱+你
|
||||
6
|
||||
```
|
||||
|
||||
**总结**：如果加号两边**都是**数值，此时是加。否则，就是连字符（用来连接字符串）。
|
||||
|
||||
举例1：
|
||||
|
||||
```javascript
|
||||
var a = "1";
|
||||
var b = 2;
|
||||
console.log(a + b);
|
||||
```
|
||||
|
||||
控制台输出：
|
||||
|
||||
```
|
||||
12
|
||||
```
|
||||
|
||||
举例2：
|
||||
|
||||
```
|
||||
var a = 1;
|
||||
var b = 2;
|
||||
console.log("a" + b); //"a"就不是变量了！所以就是"a"+2 输出a2
|
||||
|
||||
```
|
||||
|
||||
控制台输出：
|
||||
|
||||
```
|
||||
a2
|
||||
```
|
||||
|
||||
于是我们明白了，在变量中加入字符串进行连接，可以被同化为字符串。【重要】
|
||||
|
||||
|
||||
### 隐式转换
|
||||
|
||||
我们知道，`"2"+1`得到的结果其实是字符串，但是`"2"-1`得到的结果却是数值1，这是因为计算机自动帮我们进行了“**隐式转换**”。
|
||||
|
||||
也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如：
|
||||
|
||||
```javascript
|
||||
var a = "4" + 3 - 6;
|
||||
console.log(a);
|
||||
```
|
||||
|
||||
输出结果：
|
||||
|
||||
```javascript
|
||||
37
|
||||
```
|
||||
|
||||
虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。
|
||||
|
||||
|
||||
## 布尔值：Boolean
|
||||
|
||||
true 和 fase。
|
||||
|
||||
## null和undefined
|
||||
|
||||
### `null`：空值
|
||||
|
||||
**null**：专门用来表示一个为空的**对象**。（注意，专门用来表示**空对象**）
|
||||
|
||||
|
||||
- Null类型的值只有一个，就是null。比如：`var a = null`。
|
||||
|
||||
|
||||
- 使用 typeof 检查一个null值时，会返回object。
|
||||
|
||||
### `undefined`：未定义
|
||||
|
||||
**undefined**：**声明**一个变量，但是没有**赋值**，此时它的值就是undefined。例如：`var a;`
|
||||
|
||||
- Undefined类型的值只有一个，就是undefind
|
||||
|
||||
- 使用 type of 检查一个undefined时，会返回undefined。
|
||||
|
||||
null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。
|
||||
|
||||
但是null === undefined的结果(false)。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。
|
||||
|
||||
- 任何数据类型和undefined运算都是NaN;
|
||||
|
||||
- 任何值和null运算，null可看做0运算。
|
||||
|
||||
## 变量值的传递（赋值）
|
||||
|
||||
语句：
|
||||
|
||||
```
|
||||
a = b;
|
||||
```
|
||||
|
||||
把b的值赋给a，b不变。
|
||||
|
||||
将等号右边的值，赋给左边的变量；等号右边的变量，值不变。
|
||||
|
||||
来做几个题目。
|
||||
|
||||
举例1：
|
||||
|
||||
```
|
||||
//a b c
|
||||
var a = 1; //1
|
||||
var b = 2; //1 2
|
||||
var c = 3; //1 2 3
|
||||
a = b + c; //5 2 3
|
||||
b = c - a; //5 -2 3
|
||||
c = a * b; //5 -2 -10
|
||||
console.log(a);
|
||||
console.log(b);
|
||||
console.log(c);
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
```
|
||||
5
|
||||
-2
|
||||
-10
|
||||
```
|
||||
|
||||
举例2：
|
||||
|
||||
```
|
||||
//a b c
|
||||
var a = 1;
|
||||
var b = 2;
|
||||
var c = 3; //1 2 3
|
||||
a = a + b; //3 2 3
|
||||
b = b + a; //3 5 3
|
||||
c = c + b; //3 5 8
|
||||
console.log(a); //3
|
||||
console.log(b); //5
|
||||
console.log(c); //8
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
```
|
||||
3
|
||||
5
|
||||
8
|
||||
```
|
||||
|
||||
举例3：
|
||||
|
||||
```
|
||||
//a b
|
||||
var a = "1";
|
||||
var b = 2; //"1" 2
|
||||
a = a + b; //"12" 2
|
||||
b = b + a; //"12" "212"
|
||||
console.log(a); //输出12
|
||||
console.log(b); //输出212
|
||||
```
|
||||
|
||||
输出：
|
||||
|
||||
```
|
||||
12
|
||||
212
|
||||
```
|
||||
|
||||
举例4：
|
||||
|
||||
```
|
||||
//a b
|
||||
var a = "1";
|
||||
var b = 2;
|
||||
a = b + a; //"21" 2
|
||||
b = b + a; //"21" "221"
|
||||
console.log(a); //21
|
||||
console.log(b) //221
|
||||
```
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
```
|
||||
21
|
||||
221
|
||||
```
|
||||
|
||||
举例5：（这个例子比较特殊，字符串减去数字）
|
||||
|
||||
```
|
||||
var a = "3";
|
||||
var b = 2;
|
||||
console.log(a-b);
|
||||
```
|
||||
|
||||
|
||||
效果：（注意，字符串 - 数值 = 数值）
|
||||
|
||||
```
|
||||
1
|
||||
```
|
||||
|
||||
## 强制类型转换
|
||||
|
||||
强制类型转换：将一个数据类型强制转换为其他的数据类型。
|
||||
|
||||
类型转换主要指，将其他的数据类型，转换为：String、Number、Boolean。
|
||||
|
||||
### prompt()：用户的输入
|
||||
|
||||
我们在上面的内容里讲过，`prompt()`就是专门用来弹出能够让用户输入的对话框。重要的是：用户不管输入什么，都是字符串。
|
||||
|
||||
### 任何简单类型转换成String
|
||||
|
||||
**方法一**：变量+"" 或者 变量+"abc"
|
||||
|
||||
**方法二**：调用toString()方法。如下：
|
||||
|
||||
```
|
||||
变量.toSting()
|
||||
```
|
||||
|
||||
【重要】该方法**不会影响到原变量**，它会将转换的结果返回。当然我们还可以直接写成`a = a.toString()`，这样的话，就是直接修改原变量。
|
||||
|
||||
注意：null和undefined这两个值没有toString()方法，所以它们不能用方法二。如果调用，会报错。
|
||||
|
||||
**方法三**：调用String()函数。如下：
|
||||
|
||||
```
|
||||
String(变量)
|
||||
```
|
||||
|
||||
使用String()函数做强制类型转换时：
|
||||
|
||||
- 对于Number和Boolean而言，实际上就是调用toString()方法。
|
||||
|
||||
- 但是对于null和undefined，就不会调用toString()方法。它会将 null 直接转换为 "null"。将 undefined 直接转换为 "undefined"。
|
||||
|
||||
### Number()函数：其他的数据类型 --> Number
|
||||
|
||||
情况一：字符串 --> 数字
|
||||
|
||||
- 1.如果字符串中是纯数字，则直接将其转换为数字。
|
||||
|
||||
- 2.如果字符串中有非数字的内容，则转换为NaN。（此处可以看到Number()函数的局限性）
|
||||
|
||||
- 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。
|
||||
|
||||
情况二：布尔 --> 数字
|
||||
|
||||
- true 转成 1
|
||||
|
||||
- false 转成 0
|
||||
|
||||
情况三：null --> 数字
|
||||
|
||||
- 结果为：0
|
||||
|
||||
情况四：undefined --> 数字
|
||||
|
||||
- 结果为：NaN
|
||||
|
||||
### 【重要】`parseInt()`：字符串 --> 整数
|
||||
|
||||
> `parseInt()`是专门用来对付字符串的。
|
||||
|
||||
**parseInt()的作用是将字符串转为数字**。parse表示“转换”，Int表示“整数”（注意`Int`的拼写）。例如：
|
||||
|
||||
```
|
||||
parseInt("5");
|
||||
```
|
||||
|
||||
得到的结果是数字5。
|
||||
|
||||
**parseInt()还具有以下特性**：
|
||||
|
||||
（1）**只保留字符串最开头的数字**，后面的中文自动消失。例如：
|
||||
|
||||
```
|
||||
console.log(parseInt("2017在公众号上写了6篇文章")); //打印结果：2017
|
||||
|
||||
console.log(parseInt("2017.01在公众号上写了6篇文章")); //打印结果仍是：2017 （说明只会取整数）
|
||||
|
||||
console.log(parseInt("aaa2017.01在公众号上写了6篇文章")); //打印结果：NaN
|
||||
```
|
||||
|
||||
（2）自动带有截断小数的功能：**取整，不四舍五入**。
|
||||
|
||||
例1：
|
||||
|
||||
```javascript
|
||||
var a = parseInt(5.8) + parseInt(4.7);
|
||||
console.log(a);
|
||||
```
|
||||
|
||||
控制台输出：
|
||||
|
||||
```
|
||||
9
|
||||
```
|
||||
|
||||
例2：
|
||||
|
||||
```javascript
|
||||
var a = parseInt(5.8 + 4.7);
|
||||
console.log(a);
|
||||
```
|
||||
|
||||
控制台输出：
|
||||
|
||||
```javascript
|
||||
10
|
||||
```
|
||||
|
||||
（3）如果对**非String**使用parseInt()或parseFloat()，它会**先将其转换为String**然后再操作。
|
||||
|
||||
比如：
|
||||
|
||||
```javascript
|
||||
var a = true;
|
||||
console.log(parseInt(a)); //打印结果：NaN （因为是先将a转为字符串"true"，然后然后再操作）
|
||||
|
||||
var b = undefined;
|
||||
console.log(parseInt(b)); //打印结果：NaN （因为是先将b转为字符串"undefined"，然后然后再操作）
|
||||
|
||||
var c = 168.23;
|
||||
console.log(parseInt(c)); //打印结果：168 （因为是先将c转为字符串"168.23"，然后然后再操作）
|
||||
|
||||
```
|
||||
|
||||
（4）带两个参数时，表示进制转换。
|
||||
|
||||
### `parseFloat()`：字符串 --> 浮点数（小数）
|
||||
|
||||
> `parseFloat()`是专门用来对付字符串的。
|
||||
|
||||
道理同上。
|
||||
|
||||
### 转换为Boolean
|
||||
|
||||
将其他的数据类型转换为Boolean，可以使用Boolean()函数。
|
||||
|
||||
1、情况一：数字 --> 布尔
|
||||
|
||||
- 除了0和NaN，其余的都是true
|
||||
|
||||
2、情况二：字符串 ---> 布尔
|
||||
|
||||
- 除了空串，其余的都是true。
|
||||
|
||||
3、情况三：null和undefined都会转换为false
|
||||
|
||||
4、情况四：对象也会转换为true
|
||||
|
||||
## 其他进制的数字
|
||||
|
||||
- 16进制的数字，以`0x`开头
|
||||
|
||||
- 8进制的数字，以`0`开头
|
||||
|
||||
- 2进制的数字，`0b`开头（不是所有的浏览器都支持：chrome和火狐支持，IE不支持）
|
||||
|
||||
比如`070`这个字符串，如果我调用parseInt()转成数字时，有些浏览器会当成8进制解析，有些会当成10进制解析。
|
||||
|
||||
所以，比较建议的做法是：可以在parseInt()中传递第二个参数，来指定数字的进制。例如：
|
||||
|
||||
```javascript
|
||||
a = "070";
|
||||
|
||||
a = parseInt(a,10); //转换成十进制
|
||||
```
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
@ -151,7 +151,7 @@ PS：方法写完之后，我们在方法的前面输入`/**`，然后回车，
|
||||
|
||||
- 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。例如：
|
||||
|
||||
20180314_2030.png
|
||||
|
||||
|
||||
### 函数的返回值
|
||||
|
||||
@ -318,7 +318,7 @@ return的作用是结束方法。
|
||||
```
|
||||
|
||||
|
||||
20180315_0903.png
|
||||
|
||||
|
||||
arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度。
|
||||
|
||||
|
||||
@ -328,7 +328,9 @@ PS：sort方法的功能非常强大，能对数字和字母进行排列。
|
||||
|
||||
PS：第三个参数很少用，这里先不讲。
|
||||
|
||||
（3）获取数据的索引：indexOf()、lastIndexOf()
|
||||
### 数组的indexOf()
|
||||
|
||||
获取数据的索引：indexOf()、lastIndexOf()
|
||||
|
||||
- indexOf()：从前往后索引
|
||||
|
||||
@ -340,7 +342,7 @@ PS：第三个参数很少用，这里先不讲。
|
||||
|
||||
PS：如果没找到返回-1。
|
||||
|
||||
举例：
|
||||
**举例**：
|
||||
|
||||
```javascript
|
||||
var arr = ["a","b","c","d","e","d","c"];
|
||||
@ -353,6 +355,26 @@ PS：第三个参数很少用，这里先不讲。
|
||||
|
||||
|
||||
|
||||
|
||||
**举例**：判断某个值是否在数组中
|
||||
|
||||
```
|
||||
var arr = ["29926392220", "29965620629", 28003663436", "", "28818504366"];
|
||||
|
||||
var str = [
|
||||
{name:'smyh', id: "12334"},
|
||||
|
||||
{name:'vae', id: '28818504366'}
|
||||
];
|
||||
|
||||
str.filter(item => {
|
||||
console.log(arr.indexOf(item.id));
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 数组迭代方法
|
||||
|
||||
数组迭代方法包括：every()、filter()、forEach()、map()、some()
|
||||
|
||||
@ -63,19 +63,20 @@
|
||||
|
||||
效果：
|
||||
|
||||
20180202_2046.gif
|
||||
|
||||
|
||||
|
||||
### 缓慢动画的封装（解决四舍五入的问题）
|
||||
|
||||
我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：
|
||||
|
||||
20180202_2140.png
|
||||
|
||||
|
||||
原因是：JS在取整的运算时，进行了四舍五入。
|
||||
|
||||
我们把打印396.04px这个left值打印出来看看：
|
||||
|
||||
20180202_2150.png
|
||||
|
||||
|
||||
我么发现，通过`div.style.left`获取的值是精确的，通过`div.offsetLeft`获取的left值会进行四舍五入。
|
||||
|
||||
@ -152,14 +153,15 @@
|
||||
|
||||
实现效果：
|
||||
|
||||
20180202_2239.gif
|
||||
|
||||
|
||||
|
||||
## scroll 家族的组成
|
||||
|
||||
当我们用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法。效果如下：（注意看控制台的打印结果）
|
||||
|
||||
20180202_2258.gif
|
||||
|
||||
|
||||
|
||||
### 1、ScrollWidth 和 scrollHeight
|
||||
|
||||
@ -215,7 +217,7 @@ scrollHeight有一个特点：如果文字超出了盒子，高度为内容的
|
||||
|
||||
打印结果：
|
||||
|
||||
20180203_1235.png
|
||||
|
||||
|
||||
### 2、scrollTop 和 scrollLeft
|
||||
|
||||
@ -473,8 +475,7 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
20180203_1619.gif
|
||||
|
||||
|
||||
|
||||
工程文件：
|
||||
@ -674,9 +675,12 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
实现效果：
|
||||
|
||||
|
||||
20180203_1710.gif
|
||||
|
||||
|
||||
小火箭的图片资源：<20180203-Top.jpg>
|
||||
小火箭的图片资源：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -766,7 +770,7 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
实现效果：
|
||||
|
||||
|
||||
20180204_1440.gif
|
||||
|
||||
|
||||
|
||||
### 2、上方的代码改进：清除定时器
|
||||
@ -858,7 +862,7 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
```
|
||||
|
||||
|
||||
实现效果同上。
|
||||
运行效果同上。
|
||||
|
||||
|
||||
**### 3、进一步深入：如果有要同时执行讴多个动画时，就要用到回调函数（重要）**：
|
||||
@ -887,7 +891,7 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
但是这样写的话，第二个动画 json2 会把第一个动画 json1 **层叠掉**。也就是说，第一个动画直接就不执行了。效果如下：
|
||||
|
||||
|
||||
20180204_1526.gif
|
||||
|
||||
|
||||
这显然不是我们想看到的。
|
||||
|
||||
@ -989,8 +993,7 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
效果如下：
|
||||
|
||||
|
||||
20180204_1600.gif
|
||||
|
||||
|
||||
|
||||
|
||||
上方代码中，如果我们要先后完成两个动画，执行的代码是：
|
||||
@ -1133,7 +1136,7 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
|
||||
效果如下：
|
||||
|
||||
20180204_1620.gif
|
||||
|
||||
|
||||
工程文件：
|
||||
|
||||
@ -1159,4 +1162,4 @@ function scroll() { // 开始封装自己的scrollTop
|
||||
```
|
||||
|
||||
|
||||
如何改进呢？赞略。
|
||||
如何改进呢？暂略。
|
||||
|
||||
@ -170,7 +170,9 @@ function client() {
|
||||
|
||||
显示效果：
|
||||
|
||||
20180203_2155.png
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，不管我如何改变浏览器的窗口大小，title栏显示的值永远都是我的显示器分辨率：1920*1080。
|
||||
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
JS的小知识.md
|
||||
|
||||
|
||||
|
||||
|
||||
### 方法的注释
|
||||
|
||||
@ -759,7 +759,9 @@ jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们
|
||||
|
||||
实现效果如下：
|
||||
|
||||
20180205_1030.gif
|
||||
|
||||
|
||||
|
||||
|
||||
**this的用法：**
|
||||
|
||||
|
||||
@ -60,7 +60,7 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
|
||||
|
||||
打开网站<http://iconfont.cn/webfont#!/webfont/index>，如下：
|
||||
|
||||
20180220_1328.png
|
||||
|
||||
|
||||
上图中，比如我想要「思源黑体-粗」这个字体，那我就点击红框中的「本地下载」。
|
||||
|
||||
@ -68,11 +68,11 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
|
||||
|
||||
解压后如下：
|
||||
|
||||
20180220_1336.png
|
||||
|
||||
|
||||
上图中， 我们把箭头处的html文件打开，里面告诉了我们 webfont 的**使用步骤**：
|
||||
|
||||
20180220_1338.png
|
||||
|
||||
|
||||
（1）第一步：使用font-face声明字体
|
||||
|
||||
@ -172,11 +172,11 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
|
||||
|
||||
打开网站<http://iconfont.cn/>，找到想要的图标，加入购物车。然后下载下来：
|
||||
|
||||
20180220_1750.png
|
||||
|
||||
|
||||
压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。
|
||||
|
||||
20180220_1755.png
|
||||
|
||||
|
||||
**举例1**：（图标字体引用）
|
||||
|
||||
@ -224,7 +224,7 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
|
||||
|
||||
效果如下：
|
||||
|
||||
20180220_1800.png
|
||||
|
||||
|
||||
|
||||
**举例2**：（伪元素的方式使用图标字体）
|
||||
@ -290,7 +290,7 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType
|
||||
|
||||
效果如下：
|
||||
|
||||
20180220_1815.png
|
||||
|
||||
|
||||
|
||||
工程文件：
|
||||
@ -331,11 +331,11 @@ SVG素材：
|
||||
|
||||
打开如下网站：<http://www.bootcss.com/p/font-awesome/>。
|
||||
|
||||
20180223_2100.png
|
||||
|
||||
|
||||
如上图所示，下载字体后，进行解压：
|
||||
|
||||
20180223_2105.png
|
||||
|
||||
|
||||
使用步骤如下：
|
||||
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
|
||||
## 拖拽
|
||||
|
||||
20180223_2130.gif
|
||||
|
||||
|
||||
|
||||
如上图所示，我们可以拖拽博客园网站里的图片和超链接。
|
||||
|
||||
@ -49,7 +50,7 @@
|
||||
|
||||
效果如下：
|
||||
|
||||
20180223_2140.gif
|
||||
|
||||
|
||||
上图中，我们给 box1 增加了`draggable="true"` 属性之后，发现 box1 是可以拖拽的。但是拖拽之后要做什么事情呢？这就涉及到**事件监听**。
|
||||
|
||||
@ -117,11 +118,11 @@
|
||||
|
||||
效果如下：
|
||||
|
||||
20180223_2201.gif
|
||||
|
||||
|
||||
打印结果：
|
||||
|
||||
20180223_2213.png
|
||||
|
||||
|
||||
|
||||
### 2、目标元素
|
||||
@ -208,11 +209,11 @@
|
||||
|
||||
效果演示：
|
||||
|
||||
20180223_2240.gif
|
||||
|
||||
|
||||
注意，上方代码中，我们加了`event.preventDefault()`这个方法。如果没有这个方法，后面ondrop()方法无法触发。如下图所示：
|
||||
|
||||
20180223_2245.gif
|
||||
|
||||
|
||||
如上图所示，连光标的形状都提示我们，无法在目标元素里继续操作了。
|
||||
|
||||
@ -309,7 +310,7 @@
|
||||
|
||||
效果如下：
|
||||
|
||||
20180224_2050.gif
|
||||
|
||||
|
||||
## 历史
|
||||
|
||||
@ -368,7 +369,7 @@
|
||||
|
||||
对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息：
|
||||
|
||||
20180224_2110.png
|
||||
|
||||
|
||||
|
||||
### 隐私
|
||||
@ -597,9 +598,9 @@ HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的
|
||||
<script>
|
||||
var box = document.querySelector('.box');
|
||||
document.querySelector('.box').onclick = function () {
|
||||
// box.requestFullscreen(); //直接这样写是没有效果的
|
||||
// box.requestFullscreen(); //直接这样写是没有效果的
|
||||
|
||||
// 开启全屏显示的兼容写法
|
||||
// 开启全屏显示的兼容写法
|
||||
if (box.requestFullscreen) { //如果支持全屏，那就让元素全屏
|
||||
box.requestFullscreen();
|
||||
} else if (box.webkitRequestFullScreen) {
|
||||
@ -616,7 +617,7 @@ HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的
|
||||
|
||||
效果如下：
|
||||
|
||||
20180224_2130.gif
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -129,7 +129,7 @@ sessionStorage 的 API 举例：
|
||||
|
||||
效果如下：
|
||||
|
||||
20180224_2200.gif
|
||||
|
||||
|
||||
如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。
|
||||
|
||||
@ -308,7 +308,8 @@ HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只
|
||||
|
||||
格式举例1：
|
||||
|
||||
20180224_2240.png
|
||||
|
||||
|
||||
|
||||
格式举例2：
|
||||
|
||||
|
||||
@ -509,7 +509,7 @@
|
||||
|
||||
效果如下：
|
||||
|
||||
20180208_1730.png
|
||||
|
||||
|
||||
|
||||
## 爱心
|
||||
@ -565,11 +565,11 @@
|
||||
|
||||
效果如下：
|
||||
|
||||
20180208_1737.png
|
||||
|
||||
|
||||
它其实是下面这两个盒子叠起来的：
|
||||
|
||||
20180208_1738.png
|
||||
|
||||
|
||||
改变 `.heart::after` 的 left值，即可叠起来。
|
||||
|
||||
|
||||
@ -131,12 +131,8 @@ do1(function() {
|
||||
|
||||
如下图所示：
|
||||
|
||||
20180301_2252.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##
|
||||
|
||||
|
||||
|
||||
@ -465,8 +465,7 @@ npm install -g cnpm --registry=https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
|
||||
20180302_2204.png
|
||||
|
||||
|
||||
|
||||
|
||||
如果我们需要通过 cnpm 去安装一个包时，举例如下：
|
||||
@ -504,14 +503,14 @@ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | b
|
||||
|
||||
安装成功的界面：
|
||||
|
||||
20180302_2126.png
|
||||
|
||||
|
||||
完成后，nvm就被安装在了`~/.nvm`下。
|
||||
|
||||
|
||||
如果发现安装失败：
|
||||
|
||||
20180302_2111.png
|
||||
|
||||
|
||||
原因：Xcode 软件进行过更新。
|
||||
|
||||
@ -555,7 +554,7 @@ nvm install 8.10.0
|
||||
|
||||
网速有点慢，要稍等。
|
||||
|
||||
20180302-2148.png
|
||||
|
||||
|
||||
输入 `node -v`，查看当前使用的 node 版本。
|
||||
|
||||
|
||||
@ -252,32 +252,4 @@ define(function (require) {
|
||||
|
||||
打印结果：
|
||||
|
||||
20180412_1955.png
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
（1）在工程文件中新建如下目录：
|
||||
|
||||
|
||||
```
|
||||
```
|
||||
js
|
||||
| src
|
||||
| module1.js
|
||||
@ -50,7 +50,7 @@ js
|
||||
|
||||
|
||||
index.html
|
||||
```
|
||||
```
|
||||
|
||||
（2）在工程的根目录下，新建文件`package.json`，内容如下：
|
||||
|
||||
@ -241,7 +241,7 @@ babel src -d build //build目录会自动生成
|
||||
|
||||
转化成ES5之后，我们发现，如果直接在 index.html 中加载`build`目录下的ES5文件，也是会报错的，因为浏览器不认识`main.js`里的`require`关键字：
|
||||
|
||||
20180414_1410.png
|
||||
|
||||
|
||||
|
||||
于是，我们还要进行一次转换。
|
||||
@ -259,14 +259,15 @@ dist/main.js就是我们需要引入到 index.html 里的文件。
|
||||
|
||||
运行效果：
|
||||
|
||||
20180414_1615.png
|
||||
|
||||
|
||||
|
||||
工程文件：
|
||||
|
||||
- [2018-04-13-ES6Demo.rar](https://download.csdn.net/download/smyhvae/10348940)
|
||||
|
||||
|
||||
## ES6模块化的使用举例（第三方模块）
|
||||
## ES6模块化的使用举例（引入第三方模块）
|
||||
|
||||
下载 jQuery 包：
|
||||
|
||||
|
||||
@ -246,6 +246,10 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
|
||||
|
||||
**作用：** 将源对象的属性复制到目标对象上。
|
||||
|
||||
其实可以理解成：将多个对象**合并**为一个新的对象。
|
||||
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
@ -263,6 +267,8 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
|
||||
|
||||
上图显示，成功将obj1和obj2的属性复制给了obj3。
|
||||
|
||||
|
||||
|
||||
### 扩展3：`__proto__`属性
|
||||
|
||||
举例：
|
||||
|
||||
@ -16,7 +16,7 @@ img
|
||||
比如说，我们在控制台输入`navigator.userAgent`，如下：
|
||||
|
||||
|
||||
20180425_1656.png
|
||||
|
||||
|
||||
上图显示，MacOS上的Chrome浏览器的 UserAgent 是：
|
||||
|
||||
|
||||
@ -204,15 +204,12 @@ let x = 'global'
|
||||
|
||||
|
||||
|
||||
|
||||
### apply、call、bind的区别
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 链式调用
|
||||
|
||||
**问题**：如何实现类似jQuery的链式调用？
|
||||
@ -242,91 +239,3 @@ window.performance这个api可以用来做前端性能监控。其中，timing
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -214,21 +214,3 @@ http状态码分类：
|
||||
|
||||
面试时，不会深究管线化。如果真要问你，就回答：“我没怎么研究过，准备回去看看~”
|
||||
|
||||
面试中，能答出前三条，就已经很好了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -38,7 +38,6 @@ PS：中文名一定要记住。英文全称，如果记不住也拉倒。
|
||||
|
||||
用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。
|
||||
|
||||
|
||||
从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：
|
||||
|
||||
（1）登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
|
||||
@ -49,8 +48,7 @@ PS：中文名一定要记住。英文全称，如果记不住也拉倒。
|
||||
|
||||
温馨提示一下，cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。
|
||||
|
||||
|
||||
举个例子，前端事假你，微博网站有个api接口有漏洞，导致很多用户的粉丝暴增。
|
||||
举个例子，前段时间里，微博网站有个api接口有漏洞，导致很多用户的粉丝暴增。
|
||||
|
||||
### 3、CSRF如何防御
|
||||
|
||||
@ -102,33 +100,24 @@ XSS攻击的核心原理是：不需要你做任何的登录认证，它会通
|
||||
|
||||
- D-doss攻击
|
||||
|
||||
|
||||
### XSS的攻击方式
|
||||
|
||||
|
||||
- 1、反射型
|
||||
|
||||
发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS。
|
||||
|
||||
- 2、存储型
|
||||
|
||||
|
||||
存储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交XSS代码。
|
||||
|
||||
|
||||
|
||||
|
||||
### XSS的防范措施（encode + 过滤）
|
||||
|
||||
|
||||
XSS的防范措施主要有三个：
|
||||
|
||||
|
||||
**1、编码**：
|
||||
|
||||
对用户输入的数据进行`HTML Entity`编码。
|
||||
|
||||
|
||||
如上图所示，把字符转换成 转义字符。
|
||||
|
||||
|
||||
@ -153,8 +142,6 @@ Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最
|
||||
|
||||
- 移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。
|
||||
|
||||
|
||||
|
||||
**3、校正**
|
||||
|
||||
- 避免直接对`HTML Entity`进行解码。
|
||||
@ -166,14 +153,11 @@ Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最
|
||||
|
||||
比较常用的做法是，通过第一步的编码转成文本，然后第三步转成DOM对象，然后经过第二步的过滤。
|
||||
|
||||
|
||||
**还有一种简洁的答案：**
|
||||
|
||||
首先是encode，如果是富文本，就白名单。
|
||||
|
||||
|
||||
|
||||
|
||||
## CSRF 和 XSS 的区别
|
||||
|
||||
面试官还可能喜欢问二者的区别。
|
||||
@ -192,10 +176,8 @@ Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最
|
||||
- XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。
|
||||
|
||||
|
||||
|
||||
## 其他
|
||||
|
||||
|
||||
### XSS
|
||||
|
||||
关于XSS，推荐几个网站：
|
||||
@ -204,7 +186,6 @@ Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最
|
||||
|
||||
里面列出了很多XSS的例子，可以长见识。如果你专门研究XSS，可以看看。
|
||||
|
||||
|
||||
- [FreeBuf网站上的专栏作者：Black-Hole](http://www.freebuf.com/author/black-hole)
|
||||
|
||||
比如，他的第一篇文章就讲到了[XSS的原理分析与解剖](http://www.freebuf.com/articles/web/40520.html)。有句话摘抄如下：弹窗只是测试xss的存在性和使用性。
|
||||
@ -220,6 +201,3 @@ Encode的作用是将`$var`等一些字符进行转化，使得浏览器在最
|
||||
上面的项目都跟安全相关，有些仓库是可以直接运行的。如果你不需要定制，就可以直接用别人的，没必要自己写XSS库、XSS的过滤之类的，避免麻烦。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -168,7 +168,7 @@
|
||||
|
||||
效果：
|
||||
|
||||
20180322_1843.png
|
||||
|
||||
|
||||
### 垂直居中/水平居中（元素的高度未知）
|
||||
|
||||
@ -233,7 +233,9 @@ html代码：
|
||||
|
||||
效果：
|
||||
|
||||
20180322_1833.png
|
||||
|
||||
|
||||
|
||||
|
||||
**方式二：**绝对定位 + `margin:auto`
|
||||
|
||||
|
||||
@ -278,15 +278,69 @@ let temp2 = temp.toFixed(2);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2018-08-15
|
||||
|
||||
flex布局常用的三行代码：
|
||||
|
||||
```
|
||||
display: flex;
|
||||
justify-content: center; // 子元素在横轴的对齐方式 （左右居中）
|
||||
align-items: center; // 子元素在竖轴的对齐方式（上下居中）
|
||||
```
|
||||
|
||||
|
||||
### 2018-08-16
|
||||
|
||||
用CSS3 transition属性实现淡入淡出轮播图：<https://segmentfault.com/a/1190000007648070>
|
||||
|
||||
|
||||
|
||||
### 2018-08-20
|
||||
|
||||
**小程序问题**：
|
||||
|
||||
用小程序调试时，如果出现故障（比如item点击无响应），可能是微信开发者工具IDE的版本太低了。注意，IDE上上虽然提示是最新版，但不一定是官网的最新版。所以，要去官网下载最新版。
|
||||
|
||||
如果还是不行，看看是不是自己的代码写错了。有时候，代码写错了，不一定会有报错提示哦。
|
||||
|
||||
|
||||
**css问题**：
|
||||
|
||||
- css3实现的switch开关按钮：<https://codepen.io/chutou/pen/qdGZQr>
|
||||
|
||||
|
||||
### 2018-08-22
|
||||
|
||||
**两个span之间去空格**
|
||||
|
||||
- html+css如何删除行内元素之间的空白/空隙：<http://www.manongjc.com/article/2171.html>
|
||||
|
||||
方法二亲测有效：让父亲的font-size为0，然后具体设置子元素的font-size
|
||||
|
||||
- 去除inline-block元素间间距的N种方法：<https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/>
|
||||
|
||||
|
||||
|
||||
### 2018-08-28-修改用户的cookie
|
||||
|
||||
```
|
||||
document.cookie="visitkey=98"
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 2018-09-20
|
||||
|
||||
需求：当导航条滚动到屏幕顶部时（举例顶部的距离 < 0时），就设置导航条为fixed。
|
||||
|
||||
实现：如果要设置为导航条为fixed，正确的做法应该是：给导航条这个父亲一个高度进行占位，然后让导航条的儿子为fixed。而不是让父亲为 fixed。
|
||||
|
||||
|
||||
### 2018-09-27
|
||||
|
||||
如何微信小程序禁止下拉_解决小程序下拉出现空白的情况：http://www.fly63.com/article/detial/1069
|
||||
|
||||
我遇到问题的原因是：背景图太大，超出了视图。
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
## MVVM模式
|
||||
|
||||
20180420_2150.png
|
||||
|
||||
|
||||
- Model：负责数据存储
|
||||
|
||||
|
||||
@ -194,14 +194,14 @@ gulp、grunt、webpack三者的区别：
|
||||
|
||||
CSS模块化设计：
|
||||
|
||||
20180308_1101.png
|
||||
|
||||
|
||||
|
||||
比如，两个按钮，都用了一个className。比如，代码怎么复用。
|
||||
|
||||
JS模块化设计：
|
||||
|
||||
20180308_1106.png
|
||||
|
||||
|
||||
|
||||
比如：
|
||||
@ -283,8 +283,7 @@ JS模块化设计：
|
||||
|
||||
目的是：通过浏览器访问当前的页面。效果如下：
|
||||
|
||||
20180308_1145.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
- 先整体后部分，再颗粒化。
|
||||
|
||||
|
||||
20180308_1603.png
|
||||
|
||||
|
||||
上图中，整体指的是“布局”。
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
|
||||
|
||||
20180308_1615.png
|
||||
|
||||
|
||||
上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。
|
||||
|
||||
@ -63,7 +64,7 @@
|
||||
**总结：**
|
||||
|
||||
|
||||
20180308_1620.png
|
||||
|
||||
|
||||
三个模块：
|
||||
|
||||
@ -128,7 +129,7 @@
|
||||
|
||||
常见的dpi：
|
||||
|
||||
20180308_1755.png
|
||||
|
||||
|
||||
|
||||
- **`ppi`**： Pixel per inch，每英寸的像素数。当用于描述显示器设备时ppi与dpi是同一个概念 。
|
||||
@ -142,7 +143,7 @@
|
||||
|
||||
比如苹果的Retina视网膜显示屏，一个px需要两个物理像素来表示：
|
||||
|
||||
20180308_1753.png
|
||||
|
||||
|
||||
说白了，普通的显示器上，一个px对应的是硬件上的真实像素；但是在Retina屏上，比例是1:2（1个逻辑像素 需要 4个物理像素 来表示）。由此得出了**设备像素比**：
|
||||
|
||||
@ -187,8 +188,8 @@ PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就
|
||||
|
||||
**viewport分为三类：**
|
||||
|
||||
20180308_1825.png
|
||||
|
||||
|
||||
|
||||
- layout viewport：可以理解成页面区域
|
||||
|
||||
@ -236,7 +237,7 @@ PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就
|
||||
1、方式一：**History API**（HTML5中新增的）。很优雅，但对浏览器有要求。
|
||||
|
||||
|
||||
20180308_1925.png
|
||||
|
||||
|
||||
必要条件：
|
||||
|
||||
@ -252,14 +253,12 @@ PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就
|
||||
2、方式二：Hash。不是很优雅，但是兼容性好。
|
||||
|
||||
|
||||
20180308_1926.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 构建工具的安装和配置
|
||||
|
||||
20180308_1945.png
|
||||
|
||||
|
||||
|
||||
- `Webpack`：安装、配置。
|
||||
|
||||
@ -24,12 +24,12 @@
|
||||
|
||||
- 导航条
|
||||
|
||||
20180308_1953.png
|
||||
|
||||
|
||||
|
||||
目前，大多数设计稿的尺寸是iPhone5：320*568。
|
||||
|
||||
拿到设计稿后，要先做架构：
|
||||
拿到设计稿后，要先做架构。
|
||||
|
||||
|
||||
### 组件化设计
|
||||
|
||||
@ -34,8 +34,8 @@ PS：文件夹的名字不要起关键字`webpack`，避免冲突。
|
||||
|
||||
（3）创建业务目录：
|
||||
|
||||
20180309_0928.png
|
||||
|
||||
|
||||
|
||||
|
||||
## 文件配置
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
### 动态路由
|
||||
|
||||
20180303_1335.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -4,9 +4,11 @@
|
||||
|
||||
Vue 的基础知识包括：
|
||||
|
||||
20180303_1237.png
|
||||
|
||||
20180303_1238.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
实例 --> 组件 --> 指令 --> 选项 --> 模板渲染 --> 事件绑定 --> 计算属性 --> 内置动画 --> 组件交互 --> 路由等。
|
||||
|
||||
@ -1,7 +1,88 @@
|
||||
|
||||
|
||||
积累平时看到的一些好的前端文章。
|
||||
|
||||
|
||||
|
||||
> 记录平时遇到的好文章，按时间先后排序。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-01-20
|
||||
|
||||
- [阿里9年，我总结的前端架构演进3大阶段及团队管理心法](http://www.infoq.com/cn/news/2017/01/Ali-9-3)
|
||||
|
||||
伟明的推荐，说是对前端开发的价值观形成有良好的影响。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-07-13
|
||||
|
||||
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
|
||||
|
||||
在逛公众号「前端大全」的时候发现的，然后顺着找到了对应的GitHub链接。面试题有答案哦。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-07-31
|
||||
|
||||
- [你可能不需要 Vuex](https://github.com/chenbin92/blog/issues/1)
|
||||
|
||||
这篇文章里的流程图画得挺好看的，gif图也很小，只有200多kb。我发邮件问作者用的什么软件，很幸运的是，得到了作者的回复。答案是：
|
||||
|
||||
- 录制 GIF：[licecap](https://github.com/justinfrankel/licecap)
|
||||
|
||||
- 画图：[processon免费在线作图](https://www.processon.com/)
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-08-01
|
||||
|
||||
- [资深Web技术专家曹刘阳：2016年前端技术观察](http://geek.csdn.net/news/detail/128912)
|
||||
|
||||
有很多争议，[知乎](https://www.zhihu.com/question/53625757)上都有人评论了。
|
||||
|
||||
|
||||
### 2017-08-16
|
||||
|
||||
- [道阻且长啊TAT(前端面试总结)](https://segmentfault.com/a/1190000010631325?_ea=2359607)
|
||||
|
||||
作者毕业于华科，面的是前端的实习，还拿了不少offer：百度外卖，头条，美团，狗东，其他，最终在美团实习。我最初是在[微信公众号](https://mp.weixin.qq.com/s/_clHr5a6_JzTos9bKpvKrA)上看到的文章。
|
||||
|
||||
|
||||
hello。我看你拿了不少实习offer。有没有推荐的前端学习资料呀？比如说：网站、链接、书籍等。可否分享给我？如果内容较多，欢迎发表成博客。谢啦～～～
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-08-17
|
||||
|
||||
- [面试分享：一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22)
|
||||
|
||||
在公众号「web前端课程」上看到的文章。作者经历了4面，也是厉害了。另外，作者在gihub上的[博客](https://github.com/jawil/blog)也是出彩的。比如说下面这篇文章就值得推荐：
|
||||
|
||||
- [挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总](https://github.com/jawil/blog/issues/4)
|
||||
|
||||
作者搜集了几百篇在掘金上看到的好文章，让人惊叹。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 2017-09-15
|
||||
|
||||
- [你所不知道的 CSS 滤镜技巧与细节](http://www.cnblogs.com/coco1s/p/7519460.html)
|
||||
10
README.md
10
README.md
@ -3,7 +3,13 @@
|
||||
前端入门和进阶学习笔记。从零开始学前端，做一个web全栈工程师。持续更新...
|
||||
|
||||
|
||||
维护这个项目的初衷，可以看这篇文章：[裸辞两个月，海投一个月，从Android转战Web前端的求职之路](https://mp.weixin.qq.com/s/fr_NwtghRQagc_3ubk-hKQ)
|
||||
维护这个项目的初衷，可以看这篇文章：[裸辞两个月，海投一个月，从Android转战Web前端的求职之路](https://www.cnblogs.com/smyhvae/p/8732781.html)
|
||||
|
||||
|
||||
另外，欢迎关注本人的公众号「生命团队」，会分享一些技术之外的软技能（和代码完全无关）。公众号里的每篇文章，自认为写得还算用心。“全栈”不应该只是体现在技术上，而是全方位。
|
||||
欢迎关注本人的公众号「千古壹号」，会分享一些技术之外的软技能（和代码完全无关）。公众号里的每篇文章，自认为写得还算用心。“全栈”不应该只是体现在技术上，而是全方位。
|
||||
|
||||
另外，我建了一个“前端学习”的微信交流群，加我微信（bootmei），拉你进群：
|
||||
|
||||
- 进群暗号：前端学习
|
||||
|
||||
- 进群要求：爱分享
|
||||
|
||||
Loading…
Reference in New Issue
Block a user