-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
201 lines (96 loc) · 913 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>前端为什么需要模块打包工具</title>
<link href="/2022/02/17/%E5%89%8D%E7%AB%AF%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7/"/>
<url>/2022/02/17/%E5%89%8D%E7%AB%AF%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E6%A8%A1%E5%9D%97%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7/</url>
<content type="html"><![CDATA[<p> 随着项目的复杂度升级，代码规范和管理就必须要同步提升，于是，编程社区中提出了多种模块化规范。服务端选择了 CommonJS 规范，客户端选择 AMD 规范较多，但是，两种模块化规范也都存在一定的问题。他们都是 JS 编程，有两个不同的模块化规范，在 JS 语言层面还是不够的。</p><p> 终于在ES6中，ECMA 委员会推出了语言层面模块系统：<strong>ESModules 规范</strong>。</p><p> 在目前的编程实践中，前端编程得益于构建工具的发展，编码过程中使用 ESModules 规范进行编码是非常广泛的，但是后端依然使用 CommonJS 规范较多，不过 NodeJS 方面已经做出改变，逐渐趋向于 ESModules 规范。</p><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/webpack.png" alt="webpack"></p><p> <strong>ESModules</strong>的语法特性</p><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220217225321545.png" alt="image-20220217225321545"></p><p> 模块化可以帮助我们更好地解决复杂应用开发过程中的代码组织问题，但是随着模块化思想的引入，我们的前端应用又会产生了一些新的问题，比如：</p><blockquote><p>我们所使用的 ES Modules 模块系统本身就存在<strong>环境兼容问题</strong>。尽管现如今主流浏览器的最新版本都支持这一特性，但是目前还无法保证用户的浏览器使用情况。所以我们还需要解决兼容问题。</p></blockquote><blockquote><p>模块化的方式划分出来的模块文件过多，而前端应用又运行在浏览器中，每一个文件都需要单独从服务器请求回来。零散的模块文件必然会导致浏览器的频繁发送网络请求，<strong>影响应用的工作效率</strong>。</p></blockquote><blockquote><p>在实现 JS 模块化的基础上的<strong>发散</strong>。随着应用日益复杂，在前端应用开发过程中不仅仅只有 JavaScript 代码需要模块化，HTML 和 CSS 这些资源文件也会面临需要被模块化的问题。而且从宏观角度来看，这些文件也都应该看作前端应用中的一个模块，只不过这些模块的种类和用途跟 JavaScript 不同。</p></blockquote><p> 对于开发过程而言，模块化肯定是必要的，所以我们需要在前面所说的模块化实现的基础之上引入更好的方案或者工具，去解决上面提出的 3 个问题，让我们的应用在开发阶段继续享受模块化带来的优势，又不必担心模块化对生产环境所产生的影响。</p><p> 这就是 Webpack 等一系列打包工具出现的原因，上面的问题，就是这类工具核心要解决的问题。</p><p> 本质上，Webpack 是一个现代 JavaScript 应用程序的<strong>静态模块打包器</strong> (module bundler)。</p>]]></content>
<categories>
<category> Webpack </category>
</categories>
<tags>
<tag> Webpack </tag>
</tags>
</entry>
<entry>
<title>vscode插件版本更新</title>
<link href="/2022/01/30/vscode%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0/"/>
<url>/2022/01/30/vscode%E6%8F%92%E4%BB%B6%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0/</url>
<content type="html"><![CDATA[<p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/34.jpg" alt="34"></p><span id="more"></span><p>书接上文，上次我们上传了vscode主题插件，这次来更新一下，就添加一个主题。</p><p>这时候我们只需要改动两个文件。</p><ol><li>在themes文件夹下新添加一个主题文件，⚠️注意：它一定要是文件名以-color-theme结尾的json文件,该文件中的name(主题名称改一下)、type(主题深浅看个人喜好)、然后就是colors(前景色，背景色…)了，修修改改又是一个主题，最后就是tokenColors(代码块颜色)了</li></ol><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103010123694.png" alt="image-20220103010123694"></p><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103010942915.png" alt="image-20220103010942915"></p><ol start="2"><li>在package.json文件contributes配置项的themes主题数组中把我们添加的主题文件引入进来</li></ol><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103011216974.png" alt="image-20220103011216974"></p><ol start="3"><li>然后我们再用vsce发布工具执行一次打包,然后我们就可以在我们本地的vscode拓展文件夹看到多出来一个版本，这时候我们可以更新一下我们的git repository</li></ol><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103011504239.png" alt="image-20220103011504239"></p><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103011801943.png" alt="image-20220103011801943"></p><ol start="4"><li>最后一步，我们去到vscode marketplace的发布者个人中心将我们打包好的版本文件拖拽进去更新我们的插件 发布者中心：<a href="https://marketplace.visualstudio.com/manage/publishers/">https://marketplace.visualstudio.com/manage/publishers/</a></li></ol><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103012352621.png" alt="image-20220103012352621"></p><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103012552486.png" alt="image-20220103012552486"></p><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103012840554.png" alt="image-20220103012840554"></p><ol start="5"><li>当然了我们直接在控制台执行``vsce publish`就可以直接发布了(更简便)</li></ol><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103014945323.png" alt="image-20220103014945323"></p><p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/image-20220103015027418.png" alt="image-20220103015027418"></p>]]></content>
<categories>
<category> Web </category>
</categories>
</entry>
<entry>
<title>JS高级</title>
<link href="/2021/08/27/JavaScript%E9%AB%98%E7%BA%A7/"/>
<url>/2021/08/27/JavaScript%E9%AB%98%E7%BA%A7/</url>
<content type="html"><</p><p><font color=red>我们希望所有的对象使用同一个函数,这样就比较节省内存</font></p><hr><h4 id="构造函数原型prototype"><a href="#构造函数原型prototype" class="headerlink" title="构造函数原型prototype"></a>构造函数原型prototype</h4><p>==构造函数通过原型分配的函数(构造函数里的方法)是所有对象所共享的==(所以每次实例化对象不会重新开辟新的内存空间)</p><p>JavaScript规定,<font color=red>每一个构造函数都有一个prototype属性</font>指向另一个对象,注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有</p><p>==原型是什么==?</p><p>原型是构造函数的一个属性,它是一个对象,我们称它为<font color=red>原型对象</font></p><p>==原型的主要作用是什么==?</p><p>共享方法,通过构造函数实例化对象不需要在开辟新的内存空间了</p><p>一般情况下,我们的公共属性定义到构造函数里面,公共的方法我们放到原型对象身上</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Star</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name = name;</span><br><span class="line"> <span class="built_in">this</span>.age = age;</span><br><span class="line"> Star.prototype.sing = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ <span class="comment">//把构造函数里的方法放到原型对象里</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'我会唱歌'</span>); </span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h4 id="对象原型-proto"><a href="#对象原型-proto" class="headerlink" title="对象原型__proto__"></a>对象原型<code>__proto__</code></h4><p><font color=red>对象都会有一个属性<code>__proto__</code></font>指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有<code>__proto__</code>的存在</p><ul><li><code>__proto__</code>对象原型和原型对象prototype是等价的</li><li>方法查找规则:首先看实例对象身上是否有sing方法,如果有就执行这个对象上的sing,如果没有,那么因为有<code>__proto__</code>的存在,就去构造函数原型对象prototype身上去查找sing这个方法</li></ul><p></p><hr><h4 id="constructor构造函数"><a href="#constructor构造函数" class="headerlink" title="constructor构造函数"></a>constructor构造函数</h4><p><font color=red>对象原型(<strong>proto</strong>)</font>和<font color=red>构造函数(prototype)原型对象</font>里面都有一个==属性==constructor属性,constructor我们称为构造函数,因为它指回构造函数本身</p><p>constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数</p><p><font color=red>很多情况下,我们需要手动的利用constructor这个属性指回原来的构造函数</font></p><p>==当我们将多个方法以下面这种方式同时存储到prototype对象里 prototype对象和–proto–里的constructor属性将会被覆盖(将没有该属性)==,我们没有办法指回原来的构造函数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Star</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name=name;</span><br><span class="line"> <span class="built_in">this</span>.age=age;</span><br><span class="line">}</span><br><span class="line">Star.prototype = {</span><br><span class="line"> <span class="attr">sing</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},</span><br><span class="line"> <span class="attr">move</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> ldh = <span class="keyword">new</span> Star();</span><br><span class="line"><span class="built_in">console</span>.log(Star.prototype); <span class="comment">// 没有了constructor属性</span></span><br><span class="line"><span class="built_in">console</span>.log(ldh.__proto__); <span class="comment">// 没有了constructor属性</span></span><br></pre></td></tr></table></figure><p>==问题解决==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Star</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name=name;</span><br><span class="line"> <span class="built_in">this</span>.age=age;</span><br><span class="line">}</span><br><span class="line">Star.prototype = {</span><br><span class="line"> <span class="attr">constructor</span>: Star, <span class="comment">//手动指回</span></span><br><span class="line"> <span class="attr">sing</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},</span><br><span class="line"> <span class="attr">move</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> ldh = <span class="keyword">new</span> Star();</span><br><span class="line"><span class="built_in">console</span>.log(Star.prototype); <span class="comment">// 可以看到constructor属性</span></span><br><span class="line"><span class="built_in">console</span>.log(ldh.__proto__); <span class="comment">// 可以看到constructor属性</span></span><br><span class="line"><span class="built_in">console</span>.log(Star.prototype.constructor); <span class="comment">//输出Star 构造函数 </span></span><br><span class="line"><span class="built_in">console</span>.log(ldh.__proto__.constructor); <span class="comment">// 输出Star 构造函数 </span></span><br></pre></td></tr></table></figure><hr><h4 id="构造函数-实例-原型对象关系"><a href="#构造函数-实例-原型对象关系" class="headerlink" title="构造函数,实例,原型对象关系"></a>构造函数,实例,原型对象关系</h4><p></p><hr><h4 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h4><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/%E5%8E%9F%E5%9E%8B%E9%93%BE.png" alt="原型链"></p><p><code>--proto--指向构造函数的prototype原型对象</code>,通过原型对象我们可以找到它某个实例来自哪个构造函数(顺着原型链查找)</p><hr><h4 id="JS成员查找机制-规则"><a href="#JS成员查找机制-规则" class="headerlink" title="JS成员查找机制(规则)"></a>JS成员查找机制(规则)</h4><ol><li>当访问一个对象的属性(包括方法)时,首先查找这个<font color=red>对象自身有没有该属性或方法</font></li><li>如果没有就查找它的原型(也就是<code>__proto__</code>指向的<font color=red>prototype原型对象</font>);</li><li>如果还没有就查找原型对象的原型(<font color=red>Object原型对象</font>)</li><li>以此类推一直找到Object为止(<font color=red>null</font>l)</li></ol><hr><h4 id="原型对象prototype的this指向"><a href="#原型对象prototype的this指向" class="headerlink" title="原型对象prototype的this指向"></a>原型对象prototype的this指向</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Star</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name=name;</span><br><span class="line"> <span class="built_in">this</span>.age=age;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> that;</span><br><span class="line">Stat.prototype = {</span><br><span class="line"> <span class="attr">constructor</span>: Stat,</span><br><span class="line"> sing <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> that = <span class="built_in">this</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> shili = <span class="keyword">new</span> Star();</span><br><span class="line">shili.sing();</span><br><span class="line"><span class="built_in">console</span>.log(that===shili); <span class="comment">//输出true </span></span><br><span class="line"><span class="comment">//原型对象函数里面的this指向的是 实例对象</span></span><br></pre></td></tr></table></figure><hr><h4 id="原型对象的应用"><a href="#原型对象的应用" class="headerlink" title="原型对象的应用"></a>原型对象的应用</h4><p>==扩展内置对象方法==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.sum = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ <span class="comment">//求和方法</span></span><br><span class="line"> <span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i<<span class="built_in">this</span>.length; i++) {</span><br><span class="line"> sum+= <span class="built_in">this</span>[i];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> sum;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>] <span class="comment">//Array的实例对象</span></span><br><span class="line">conlose.log(arr.sum()); <span class="comment">// 6</span></span><br></pre></td></tr></table></figure><p><font color=red>注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {},只能是Array.prototype.xxx = function() { }</font></p><hr><h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><p>ES6之前并没有给我们提供extends继承,我们可以通过<font color=red>构造函数+原型对象</font>模拟继承,被称为<font color=red>组合继承</font></p><h3 id="call"><a href="#call" class="headerlink" title="call()"></a>call()</h3><p>调用这个函数,并且修改函数运行是的this指向</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x,y</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> x+y;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'andy'</span></span><br><span class="line">}</span><br><span class="line">fn(<span class="number">1</span>,<span class="number">1</span>); <span class="comment">//this指向window 输出2</span></span><br><span class="line">fn.call(obj,<span class="number">1</span>,<span class="number">1</span>) <span class="comment">//this指向obj 输出2 </span></span><br></pre></td></tr></table></figure><hr><h3 id="借用构造函数继承父类型属性"><a href="#借用构造函数继承父类型属性" class="headerlink" title="借用构造函数继承父类型属性"></a>借用构造函数继承父类型属性</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params">name,age</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name = name;</span><br><span class="line"> <span class="built_in">this</span>.age = age;</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Son</span>(<span class="params">name,age</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.score = score; <span class="comment">//子构造函数自己的属性</span></span><br><span class="line"> Father.call(<span class="built_in">this</span>,name,age); </span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> son = <span class="keyword">new</span> Son(<span class="string">'张三'</span>,<span class="number">19</span>);</span><br><span class="line"><span class="built_in">console</span>.log(son);</span><br></pre></td></tr></table></figure><p>==核心原理==:通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性</p><hr><h3 id="借助原型对象继承方法"><a href="#借助原型对象继承方法" class="headerlink" title="借助原型对象继承方法"></a>借助原型对象继承方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Father</span>(<span class="params">name,age</span>) </span>{</span><br><span class="line"></span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Son</span>(<span class="params">name,age</span>) </span>{</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line">Son.prototype = <span class="keyword">new</span> Father();</span><br><span class="line"><span class="comment">//如果利用对象的形式修改了原型对象,别忘了利用constructor指回原来的构造函数</span></span><br><span class="line">Son.prototype.constructor = Son;</span><br><span class="line"><span class="comment">//这个是只构造函数自己的方法</span></span><br><span class="line">Son.prototype.exam = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><hr><h2 id="ES5新增方法"><a href="#ES5新增方法" class="headerlink" title="ES5新增方法"></a>ES5新增方法</h2><h3 id="数组方法"><a href="#数组方法" class="headerlink" title="数组方法"></a>数组方法</h3><p>==forEach()==:迭代(遍历数组) map()方法和这个方法差不多 </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">array.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">currentValue, [index], [arr]</span>) </span>{})</span><br><span class="line"><span class="comment">//currentValue:数组当前项的值</span></span><br><span class="line"><span class="comment">//index:数组当前项的索引 可省略</span></span><br><span class="line"><span class="comment">//arr:数组对象本身 可省略</span></span><br><span class="line"><span class="comment">//遇到return 不会终止迭代</span></span><br><span class="line"><span class="comment">//返回值 undefined</span></span><br></pre></td></tr></table></figure><p>==filter()==:元素筛选(也是迭代,遍历)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">array.filter(<span class="function"><span class="keyword">function</span>(<span class="params">currentValue, [index], [arr]</span>)</span>{})</span><br><span class="line"><span class="comment">//filter()方法创建一个新的数组,新数组中的元素是通过检查特定数组中符合条件的所有元素,主要用于筛选数组</span></span><br><span class="line"><span class="comment">//*它直接返回一个新数组</span></span><br><span class="line"><span class="comment">//currentValue:数组当前项的值</span></span><br><span class="line"><span class="comment">//index:数组当前项的索引 可省略</span></span><br><span class="line"><span class="comment">//arr:数组对象本身 可省略</span></span><br><span class="line"><span class="comment">//遇到return 不会终止迭代</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">23</span>,<span class="number">45</span>,<span class="number">2</span>,<span class="number">56</span>,<span class="number">76</span>];</span><br><span class="line"><span class="keyword">var</span> newArr = arr.filter(<span class="function"><span class="keyword">function</span>(<span class="params">ele,index</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> ele > <span class="number">30</span>;</span><br><span class="line">})</span><br><span class="line"><span class="built_in">console</span>.log(newArr); <span class="comment">//[45,,56,76]</span></span><br></pre></td></tr></table></figure><p>==some()==:查找数组中是否有满足条件的元素 every()方法和这个方法差不多</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">array.some(<span class="function"><span class="keyword">function</span>(<span class="params">currentValue, [index], [arr]</span>) </span>{})</span><br><span class="line"><span class="comment">//*它返回一个布尔值,如果找到这个元素,就返回true,找不到就返回false</span></span><br><span class="line"><span class="comment">//如果找到第一个满足条件的元素,者终止循环,不再继续查找</span></span><br><span class="line"><span class="comment">//currentValue:数组当前项的值</span></span><br><span class="line"><span class="comment">//index:数组当前项的索引 可省略</span></span><br><span class="line"><span class="comment">//arr:数组对象本身 可省略</span></span><br><span class="line"><span class="comment">//遇到return true 终止迭代</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">23</span>,<span class="number">46</span>,<span class="number">34</span>,<span class="number">7</span>,<span class="number">86</span>];</span><br><span class="line"><span class="keyword">var</span> flag = arr.some(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> value > <span class="number">50</span>;</span><br><span class="line">})</span><br><span class="line"><span class="built_in">console</span>.log(flag); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><hr><h3 id="字符串方法"><a href="#字符串方法" class="headerlink" title="字符串方法"></a>字符串方法</h3><p>==trim()==:从一个字符串的两端删除空白字符</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">str.trim()</span><br><span class="line"><span class="comment">//trim()方法不影响字符串本身,它返回的是一个新的字符串</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">' str '</span>;</span><br><span class="line"><span class="keyword">var</span> neeStr = str.trim();</span><br><span class="line"><span class="built_in">console</span>.log(newStr); <span class="comment">//str</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> str = input.value.trim();</span><br><span class="line"> <span class="keyword">if</span>(str === <span class="string">''</span>) {</span><br><span class="line"> alert(<span class="string">'请输入内容'</span>);</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">console</span>.log(str.length);</span><br><span class="line"> <span class="built_in">console</span>.log(str);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==数组转换为对象==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="string">'啦啦'</span>,<span class="string">'呵呵'</span>,<span class="string">'哥哥'</span>,<span class="string">'嗯嗯'</span>];</span><br><span class="line"><span class="keyword">let</span> obj = {...arr}</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.assign({ },[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>])</span><br></pre></td></tr></table></figure><p>==对象转换为数组==</p><hr><h3 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h3><p>==Object.keys()==:用于获取对象自身所有属性</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.keys(obj)</span><br><span class="line"><span class="comment">//效果类似于for...in</span></span><br><span class="line"><span class="comment">//返回一个由属性名组成的数组</span></span><br></pre></td></tr></table></figure><p>==Object.defineProperty()==:定义新属性或修改原有属性</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineproperty(obj,prop,descriptor)</span><br><span class="line"><span class="comment">//obj:目标对象.必需</span></span><br><span class="line"><span class="comment">//prop:需要定义或修改的属性的名字 必需</span></span><br><span class="line"><span class="comment">//descriptor: 目标属性所拥有的特性 必需</span></span><br><span class="line"><span class="comment">//descriptors属性说明: 以对象形式{} 书写</span></span><br><span class="line">descripots {</span><br><span class="line"> <span class="attr">value</span>:设置属性的值 默认为<span class="literal">undefined</span></span><br><span class="line"> <span class="attr">writable</span>:值是否可以重写</span><br><span class="line"> <span class="attr">enumerable</span>:目标属性否可以枚举<span class="literal">true</span>|<span class="literal">false</span> 默认为<span class="literal">false</span> (是否允许被遍历出来) </span><br><span class="line"> <span class="attr">configurable</span>:目标属性是否可以被删除或是否可以在此修改特性<span class="literal">true</span>|<span class="literal">false</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h2 id="ES5函数进阶"><a href="#ES5函数进阶" class="headerlink" title="ES5函数进阶"></a>ES5函数进阶</h2><h3 id="函数的定义"><a href="#函数的定义" class="headerlink" title="函数的定义"></a>函数的定义</h3><p>==自定义函数==(命名函数)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{ }</span><br></pre></td></tr></table></figure><p>==函数表达式==(匿名函数)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fun = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ }</span><br></pre></td></tr></table></figure><p>==new Function()==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">'参数1'</span>,<span class="string">'参数2'</span>,<span class="string">'函数体'</span>)</span><br><span class="line"><span class="comment">//Function里面的参数都必需是字符串格式</span></span><br><span class="line"><span class="comment">//这种方式执行效率低,也不方便书写,因此比较少用</span></span><br><span class="line"><span class="comment">//所有函数都是Function的实例(对象)</span></span><br><span class="line"><span class="comment">//函数也属于对象</span></span><br></pre></td></tr></table></figure><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/%E5%87%BD%E6%95%B0%E7%9A%84%E5%AE%9A%E4%B9%89.png" alt="image-20210828035438588"></p><hr><h3 id="函数的调用"><a href="#函数的调用" class="headerlink" title="函数的调用"></a>函数的调用</h3><p>==普通函数==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{ }</span><br><span class="line">fn();</span><br><span class="line">fn.call();</span><br></pre></td></tr></table></figure><p>==对象的方法==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'张三'</span>,</span><br><span class="line"> <span class="attr">say</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">obj.say();</span><br></pre></td></tr></table></figure><p>==构造函数==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Star</span>(<span class="params"></span>) </span>{ }</span><br><span class="line"><span class="keyword">new</span> Star();</span><br></pre></td></tr></table></figure><p>==绑定事件绑定==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ }</span><br><span class="line"><span class="comment">//点击调用(事件触发调用)</span></span><br></pre></td></tr></table></figure><p>==定时器函数==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ },<span class="number">1000</span>) </span><br><span class="line"><span class="comment">//这个函数是定时器自动1秒中调用一次</span></span><br></pre></td></tr></table></figure><p>==立即执行函数==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ })()</span><br><span class="line"><span class="comment">//自动调用</span></span><br></pre></td></tr></table></figure><hr><h3 id="函数内this的指向"><a href="#函数内this的指向" class="headerlink" title="函数内this的指向"></a>函数内this的指向</h3><ul><li>这些this的指向,是当我们调用函数的时候确定的,调用方式的不同决定了this的指向不同</li><li>一般指向调用者</li></ul><table><thead><tr><th>调用方式</th><th>this指向</th></tr></thead><tbody><tr><td>普通函数调用</td><td>window</td></tr><tr><td>构造函数调用</td><td>实例对象 原型对象里面的方法也指向实例对象</td></tr><tr><td>对象方法调用</td><td>该方法所属对象</td></tr><tr><td>事件绑定方法</td><td>绑定事件对象</td></tr><tr><td>定时器函数</td><td>window</td></tr><tr><td>立即执行函数</td><td>window</td></tr></tbody></table><hr><h3 id="改变函数内部this指向"><a href="#改变函数内部this指向" class="headerlink" title="改变函数内部this指向"></a>改变函数内部this指向</h3><p>==call()==: 调用一个函数,可以改变函数的this指向。(多用于继承)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fun.call(thisArg,参数<span class="number">1</span>,参数<span class="number">2</span>,....)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x,y</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> x+y;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'andy'</span></span><br><span class="line">}</span><br><span class="line">fn(<span class="number">1</span>,<span class="number">1</span>); <span class="comment">//this指向window 输出2</span></span><br><span class="line">fn.call(obj,<span class="number">1</span>,<span class="number">1</span>) <span class="comment">//this指向obj 输出2 </span></span><br></pre></td></tr></table></figure><p>==apply()==:调用一个函数,简单理解为调用函数的方式,但是他可以改变函数的this指向</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">fun.apply(thisArg, [argsArray])</span><br><span class="line"><span class="comment">//thisArg: 在fun函数运行时指定的this值</span></span><br><span class="line"><span class="comment">//argsArray:传递的值,必须包含在数组里</span></span><br><span class="line"><span class="comment">//返回值就是函数的返回值,因为它就是调用函数</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//apply的应用 借助其他对象的方法对数组进行操作 比如:借助数学内置对象求最大值</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">2</span>,<span class="number">45</span>,<span class="number">67</span>,<span class="number">789</span>];</span><br><span class="line"><span class="keyword">var</span> max = <span class="built_in">Math</span>.max.apply(<span class="built_in">Math</span>,arr); <span class="comment">//这里不需要改变this指向,写max的调用者</span></span><br><span class="line"><span class="built_in">console</span>.log(max); <span class="comment">// 789</span></span><br></pre></td></tr></table></figure><p>==bind方法==:此方法不会调用函数,但是能改变函数内部this指向</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">fun.bind(thisArg, arg1, arg2,...)</span><br><span class="line"><span class="comment">//thisArg: 在妇女函数运行时指定的this值</span></span><br><span class="line"><span class="comment">//arg1、arg2:传递的其他参数</span></span><br><span class="line"><span class="comment">//返回由指定的this值和初始化参数改造的原函数拷贝</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">x,y</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> x+y;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'andy'</span></span><br><span class="line">}</span><br><span class="line">fn.bind(obj,<span class="number">1</span>,<span class="number">1</span>) <span class="comment">//this指向改为obj 但不会调用原函数fn</span></span><br><span class="line"><span class="keyword">var</span> f = fn.bind(obj,<span class="number">1</span>,<span class="number">1</span>) <span class="comment">//会返回一个改变了this指向的新函数</span></span><br><span class="line">f(); <span class="comment">//调用</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">bind应用实例</span><br><span class="line"><span class="comment">//如果有的函数我们不需要立即调用,但又想改变这个函数内部的this指向,此时用bind();</span></span><br><span class="line"><span class="comment">//我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒后开启这个按钮</span></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">'button'</span>);</span><br><span class="line">btn.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.disabled = <span class="literal">true</span>; <span class="comment">//这个this指向 btn这个按钮</span></span><br><span class="line"> <span class="comment">// var that = this; 这样是可以的 但写起来麻烦 并且占内存</span></span><br><span class="line"> <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">// this.disabled = false; 这个this指向window window没有disabled属性</span></span><br><span class="line"> <span class="comment">// that.disabled = false; 这样是可以的 但写起来麻烦 并且占内存</span></span><br><span class="line"> }.bind(<span class="built_in">this</span>),<span class="number">3000</span>)</span><br><span class="line"> <span class="comment">// 因为bind()在定时器函数的外面 所以这里的this指向是btn</span></span><br><span class="line"> })</span><br></pre></td></tr></table></figure><hr><h3 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式</h3><h4 id="什么是严格模式"><a href="#什么是严格模式" class="headerlink" title="什么是严格模式"></a>什么是严格模式</h4><p>JavaScript除了提供正常模式外，还提供了严格模式（strict mode）。ES5的严格模式是采用具有限制性JavaScript变体的一种方式，即在严格的条件下运行JS代码。</p><p>严格模式在IE10以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。</p><p>严格模式对正常的JavaScript语义做了一些更改：</p><p>1.消除了Javascript语法的一些不合理、不严谨之处，减少了一些怪异行为。</p><p> 2、消除代码运行的一些不安全之处，保证代码运行的安全。</p><p>3.提高编译器效率，增加运行速度。</p><p>4.禁用了在ECMAScript的未来版本中可能会定义的一些语法，为未来新版本的Javascript做好铺垫。比如一些保留字如：class，enum，export，extends，import，super不能做变量名</p><hr><h4 id="开启严格模式"><a href="#开启严格模式" class="headerlink" title="开启严格模式"></a>开启严格模式</h4><p>严格模式可以应用到<font color=red>整个脚本</font>或<font color=red>个别函数</font>中.因此在使用时,我们可以将严格模式分为<font color=red>为脚本开启严格模式</font>和<font color=red>为函数开启严格模式</font>两种情况</p><p>==为整个脚本文件开启严格模式==</p><ul><li>为整个脚本文件开启严格模式,需要<font color=red>在所有语句之前放一个特定语句’use strict’;</font></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> <span class="string">'use strict'</span>;</span><br><span class="line"></script></span><br><span class="line"><span class="comment">//因为'use strict'加了引号,所以老版本的浏览器会把它当作一个普通字符串忽略</span></span><br></pre></td></tr></table></figure><ul><li>有的script基本还是严格模式,有的script脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即指向的匿名函数中,这样独立创建一个作用域而不影响其他脚本文件</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><script></span><br><span class="line"> (<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta"> 'use strict'</span>;</span><br><span class="line">})()</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><p>==为整个函数开启严格模式==</p><ul><li>要给某个函数开启严格模式,需要把’<font color=red>use strict’声明放在函数体所在语句之前</font></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta"> 'use strict'</span>; <span class="comment">//给函数fn开启严格模式</span></span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>{ <span class="comment">//fun函数还是普通模式</span></span><br><span class="line"> </span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h4 id="严格模式中的变化"><a href="#严格模式中的变化" class="headerlink" title="严格模式中的变化"></a>严格模式中的变化</h4><p>==变量规定==</p><ol><li>在正常模式中,如果一个变量没有声明就赋值,默认是全局变量.严格模式禁止这种用法,变量都必需var命令声明,然后再使用.</li><li>我们不能随意删除已经定义好的变量</li></ol><p>==严格模式下this指向问题==</p><ol><li>以前在全局作用域函数中的this指向window对象</li><li><font color=red>严格模式下全局作用域中函数中的this是undefined</font></li><li>以前构造函数时不加new也可以调用,当普通函数,this指向全局对象</li><li>严格模式下,如果构造函数不加new调用,this会报错</li><li>new实例化的构造函数还是指向创建的实例对象</li><li>定时器this还是指向window</li><li>事件、对象还是指向调用者</li></ol><p>==函数变化==</p><ol><li>不能有重名的参数</li><li>函数必须声明在顶层.新版本的JS(ES6)会引入‘块级作用域’.为了与新版本接轨,不允许在非函数的代码块内声明函数</li></ol><hr><h3 id="高阶函数"><a href="#高阶函数" class="headerlink" title="高阶函数"></a>高阶函数</h3><p><font color=red>高阶函数</font>是对其他函数进行操作的函数,它<font color=red>接受函数作为参数</font>或<font color=red>将函数作为返回值输出</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">callback</span>) </span>{</span><br><span class="line"> callback&&callback();</span><br><span class="line">}</span><br><span class="line">fn(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{alert(<span class="string">'hi'</span>)});</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ }</span><br><span class="line">}</span><br><span class="line">fn();</span><br></pre></td></tr></table></figure><p>函数也是一种数据类型,同样可以作为参数,传递给另外一个函数使用,最典型的就是作为回调函数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">a,b,callback</span>) </span>{ <span class="comment">//fn就是高阶函数</span></span><br><span class="line"> callback&&callback(); </span><br><span class="line">}</span><br><span class="line">fn(<span class="number">1</span>, <span class="number">2</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ <span class="comment">//callback作为参数 是回调函数</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'我是最后调用的'</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><p>==变量作用域==</p><ol><li>函数内部可以使用全局变量</li><li>函数外部不可以使用局部变量</li><li>当函数执行完毕,本作用域内的局部变量会销毁</li></ol><p>==什么是闭包?==</p><p><font color=red>闭包(closure)</font>指有权访问另一个函数作用域中变量的<font color=red>函数</font></p><p>简单理解: <font color=red>一个作用域可以访问另一个函数内部的局部变量</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>{ <span class="comment">//此时fun函数访问了fn函数作用域内的num变量,产生了闭包fn</span></span><br><span class="line"> <span class="built_in">console</span>.log(num);</span><br><span class="line"> }</span><br><span class="line"> fun();</span><br><span class="line">}</span><br><span class="line">fn(); <span class="comment">// 10</span></span><br></pre></td></tr></table></figure><p>==闭包的作用==:延伸变量的作用范围</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"> <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(num);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> f = fn(); </span><br><span class="line">f();</span><br></pre></td></tr></table></figure><p>==闭包案例1==: 点击小li输出索引号</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//普通写法</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i= <span class="number">0</span>;i<lis.length;i++) {</span><br><span class="line"> lis[i].index = i;</span><br><span class="line"> lis[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(index);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//闭包写法</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i= <span class="number">0</span>;i<lis.length;i++) {</span><br><span class="line"> <span class="comment">//利用for循环创建了4个立即执行函数</span></span><br><span class="line"> (<span class="function"><span class="keyword">function</span>(<span class="params">i</span>) </span>{</span><br><span class="line"> lis[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ </span><br><span class="line"> <span class="built_in">console</span>.log(i);</span><br><span class="line"> }</span><br><span class="line"> })(i);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==闭包案例2==:3秒钟后,打印所有小li的内容</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//普通写法</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i<lis.length; i++ ) {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(lis[i].innerHTML); </span><br><span class="line"> },<span class="number">3000</span>)</span><br><span class="line"> </span><br><span class="line">} <span class="comment">//这样写是不行的 因为定时器里的回调函数是异步任务,触发了才会执行 for循环是同步任务 同步任务先执行 </span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//闭包写法</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i =<span class="number">0</span>; i<lis.length; i++) {</span><br><span class="line"> (<span class="function"><span class="keyword">function</span>(<span class="params">i</span>) </span>{</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(lis[i].innerHTML);</span><br><span class="line"> },<span class="number">3000</span>)</span><br><span class="line"> })(i)</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==闭包案例3==:计算打车价格</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> car = (<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> start = <span class="number">13</span>;</span><br><span class="line"> <span class="keyword">var</span> total = <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> <span class="attr">normal</span> : <span class="function"><span class="keyword">function</span>(<span class="params">distance</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(distance <= <span class="number">3</span>) {</span><br><span class="line"> <span class="keyword">return</span> total = start;</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> total = start+(distance-<span class="number">3</span>)*<span class="number">5</span>;</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">yd</span>: <span class="function"><span class="keyword">function</span>(<span class="params">flag</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> flag ? total = total + <span class="number">10</span> : total = total;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })();</span><br><span class="line"> <span class="built_in">console</span>.log(car.normal(<span class="number">6</span>));</span><br><span class="line"> <span class="built_in">console</span>.log(car.yd(<span class="literal">true</span>));</span><br></pre></td></tr></table></figure><hr><h3 id="递归"><a href="#递归" class="headerlink" title="递归"></a>递归</h3><p>如果<font color=red>一个函数在内部可以调用其本身</font>,那么这个函数就是<font color=red>递归函数</font></p><p>由于递归很容易发生‘栈溢出’错误(stack overflow),所以<font color=red>必须要加退出条件return</font></p><p>==递归案例1==:求1~n的阶乘</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(n==<span class="number">1</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> n * fn(n - <span class="number">1</span>)</span><br><span class="line">}</span><br><span class="line">fn(<span class="number">8</span>);</span><br></pre></td></tr></table></figure><p>==递归案例2==:求斐波那契序列(兔子序列) 1、1、2、3、5、8、13、21….</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用户输入一个数字n 就可以求出这个数字对应的兔子序列值</span></span><br><span class="line"><span class="comment">//我们只需要知道用户输入的n前面两项(n-1 n-2)就可以计算出n对应的序列值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fb</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(n===<span class="number">1</span>||n===<span class="number">2</span>) {</span><br><span class="line"> <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> fb(n-<span class="number">1</span>) + fb(n-<span class="number">2</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h3 id="深拷贝与浅拷贝"><a href="#深拷贝与浅拷贝" class="headerlink" title="深拷贝与浅拷贝"></a>深拷贝与浅拷贝</h3><p>==浅拷贝==:浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用(地址).</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'andy'</span>,</span><br><span class="line"> <span class="attr">msg</span>: {</span><br><span class="line"> <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> = o {};</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> obj) {</span><br><span class="line"> o[k] = obj[k];</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(o); </span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//ES6浅拷贝新方法 Object.assign(target,..soures)</span></span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'andy'</span>,</span><br><span class="line"> <span class="attr">msg</span>: {</span><br><span class="line"> <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">var</span> o = {};</span><br><span class="line"><span class="built_in">Object</span>.assign(o,obj);</span><br><span class="line"><span class="built_in">console</span>.log(o);</span><br></pre></td></tr></table></figure><p>==深拷贝==:拷贝多层,每一级别的数据都会拷贝 改变新对象的值,不会影响原对象</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepCopy</span>(<span class="params">newobj,oldobj</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> oldobj) { </span><br><span class="line"> <span class="comment">//判断我们属性值属于哪种数据类型</span></span><br><span class="line"> <span class="keyword">var</span> item = oldobj[k];</span><br><span class="line"> <span class="comment">//要先判断是否为数组,因为数组也属于O</span></span><br><span class="line"> <span class="keyword">if</span>(item <span class="keyword">instanceof</span> <span class="built_in">Array</span>) {</span><br><span class="line"> newobj[k] = [];</span><br><span class="line"> deepCopy(newobj[k],item);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(item <span class="keyword">instanceof</span> <span class="built_in">Object</span>) {</span><br><span class="line"> newobj[k] = {};</span><br><span class="line"> deepCopy(newobj[k],item);</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> newobj[k] = item;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line"> <span class="keyword">return</span> newobj;</span><br></pre></td></tr></table></figure><hr><h2 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h2><h4 id="什么是正则表达式"><a href="#什么是正则表达式" class="headerlink" title="什么是正则表达式"></a>什么是正则表达式</h4><p><font color=red>正则表达式(Refular Expression)</font>是用于匹配字符串中字符组合的模式.在JS中,正则表达式也是对象</p><p>正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文<font color=red>（匹配）</font>。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词<font color=red>（替换）</font>，或从字符串中获取我们想要的特定部分<font color=red>（提取）</font>等。</p><p>其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript正则表达式完成<font color=red>表单验证</font>。</p><hr><h4 id="正则的特点"><a href="#正则的特点" class="headerlink" title="正则的特点"></a>正则的特点</h4><ol><li>灵活性、逻辑性和功能性非常强</li><li>可以迅速地极简单的方式达到字符串的复杂控制</li><li>验证邮箱:^\w+([-+.]\w+)*@\w+([-.]\w+)<em>.\w+([-.]\w+)</em>$</li></ol><hr><h4 id="创建正则表达式"><a href="#创建正则表达式" class="headerlink" title="创建正则表达式"></a>创建正则表达式</h4><p>在JS中,可以通过两种方式创建正则表达式</p><ul><li><strong>通过调用RegExp对象的构造函数创建</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="regexp">/表达式/</span>);</span><br></pre></td></tr></table></figure><ul><li><strong>通过字面量创建</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> 变量名 = <span class="regexp">/表达式/</span>;</span><br></pre></td></tr></table></figure><h4 id="测试正则表达式方法"><a href="#测试正则表达式方法" class="headerlink" title="测试正则表达式方法"></a>测试正则表达式方法</h4><p>test()正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false,其参数是测试字符串.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">regexObj.test(str);</span><br><span class="line"><span class="comment">//regexObj是写的正则表达式</span></span><br><span class="line"><span class="comment">//str我们要检测的文本</span></span><br><span class="line"><span class="comment">//就是检测str文本是否符合我们写的正则表达式</span></span><br></pre></td></tr></table></figure><hr><h4 id="正则表达式的组成"><a href="#正则表达式的组成" class="headerlink" title="正则表达式的组成"></a>正则表达式的组成</h4><p>一个正则表达式<font color=red>可以由简单的字符构成</font>,比如/abc/, <font color=red>也可以是简单和特殊字符的组合</font>,比如/ab*c/.其中特殊字符也被称为<font color=red>元字符</font>在正则表达式中式具有<font color=red>特殊</font>意义的专用<font color=red>符号</font>,如^、$、+等</p><hr><h4 id="特殊字符"><a href="#特殊字符" class="headerlink" title="特殊字符"></a>特殊字符</h4><p>==边界符==</p><p>正则表达式中的边界符(位置符)用来<font color=red>提示字符所处的位置</font>,主要有两个字符</p><table><thead><tr><th>边界符</th><th>说明</th></tr></thead><tbody><tr><td>^</td><td>表示匹配行首的文本(以谁开始)</td></tr><tr><td>$</td><td>表示匹配捍卫的文本(以谁结束)</td></tr></tbody></table><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^abc$/</span> <span class="comment">//表示表达式里只能有abc这3个字符</span></span><br><span class="line">rg.test(<span class="string">'abcabc'</span>); <span class="comment">// false</span></span><br></pre></td></tr></table></figure><p>==字符类==</p><p>[]:表示有一系列字符可供选择,只要匹配其中一个就可以了</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/[abc]/</span>; <span class="comment">//只要包含有a 或者b 或者c 都返回true</span></span><br><span class="line">rg.test(<span class="string">'andy'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'baby'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'color'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'red'</span>); <span class="comment">//false</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^[abc]$/</span>; <span class="comment">//三选一 只有三种情况返回true</span></span><br><span class="line">rg.test(<span class="string">'a'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'b'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'c'</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><p>-:表示链接</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^[a-z]$/</span>; <span class="comment">//只有单个a到z的小写字母返回true</span></span><br></pre></td></tr></table></figure><p>==字符组合==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/[a-zA-Z0-9_-]/</span>; <span class="comment">//26个英文字母(大小写都可)数字_和-任何一个字符都返回true</span></span><br></pre></td></tr></table></figure><p>==取反==</p><p>如果中括号里面有^表示取反(不包含)的意思 千万和边界符^ 别混淆</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^[^a-zA-Z0-9_-]/</span>;</span><br></pre></td></tr></table></figure><p>==量词符==</p><p>量词符用来设定某个模式出现的次数</p><table><thead><tr><th>量词</th><th>说明</th></tr></thead><tbody><tr><td>*</td><td>重复零次或更多次</td></tr><tr><td>+</td><td>重复一次或更多次</td></tr><tr><td>?</td><td>重复零次或一次</td></tr><tr><td>{n}</td><td>重复n次</td></tr><tr><td>{n,}</td><td>重复n次或更多次</td></tr><tr><td>{n,m}</td><td>重复n到m次 书写的时候n和m之间不能有空格</td></tr></tbody></table><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">*</span><br><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^a*$/</span>; <span class="comment">//a可以出现0次或者很多次</span></span><br><span class="line">rg.test(<span class="string">''</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'a'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'aaaa'</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">+</span><br><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^a+$/</span>; <span class="comment">//a可以出现1次或很多次</span></span><br><span class="line">rg.test(<span class="string">''</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'a'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'aaaa'</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">?</span><br><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^a?$/</span>; <span class="comment">//a可以出现0次或1次</span></span><br><span class="line">rg.test(<span class="string">''</span>); <span class="comment">//frue</span></span><br><span class="line">rg.test(<span class="string">'a'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'aaaa'</span>); <span class="comment">//false</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{n}</span><br><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^a{3}$/</span>; <span class="comment">//a重复3次</span></span><br><span class="line">rg.test(<span class="string">''</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'a'</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'aaaa'</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'aaa'</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{n,}</span><br><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^a{3,}$/</span>; <span class="comment">//a重复3次或3次以上</span></span><br><span class="line">rg.test(<span class="string">''</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'a'</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'aaaa'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'aaa'</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{n,m}</span><br><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^a{3,8}$/</span>; <span class="comment">//a重复3次到8次</span></span><br><span class="line">rg.test(<span class="string">''</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'a'</span>); <span class="comment">//false</span></span><br><span class="line">rg.test(<span class="string">'aaaa'</span>); <span class="comment">//true</span></span><br><span class="line">rg.test(<span class="string">'aaa'</span>); <span class="comment">//true</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^[a-zA-Z0-9_-]{6,16}$/</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><p>==小括号==:小括号表示优先级</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> rg = <span class="regexp">/^(abc){3}$/</span>; <span class="comment">//让abc重复3次</span></span><br></pre></td></tr></table></figure><hr><h4 id="括号总结"><a href="#括号总结" class="headerlink" title="括号总结"></a>括号总结</h4><ol><li>大括号 量词符. 里面表示重复次数</li><li>中括号 字符集合.匹配方括号中的任意字符</li><li>小括号 表示优先级</li></ol><p>在线测试: <a href="http://c.runoob.com/">http://c.runoob.com/</a></p><hr><h4 id="预定义类"><a href="#预定义类" class="headerlink" title="预定义类"></a>预定义类</h4><p>预定义类指的是<font color=red>某些常见模式的简写方式</font></p><table><thead><tr><th>预定义类</th><th>说明</th></tr></thead><tbody><tr><td>\d</td><td>匹配0-9之间的任一数字,相当于[0-9]</td></tr><tr><td>\D</td><td>匹配所有0-9以外的字符,相当于 [^ 0-9]</td></tr><tr><td>\w</td><td>匹配任意的字母、数字和下划线,相当于 [A-Za-z0-9_]</td></tr><tr><td>\W</td><td>除所有字符、数字和下划线以外的字符,相当于[^A-Za-z0-9_]</td></tr><tr><td>\s</td><td>匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\v\f]</td></tr><tr><td>\S</td><td>匹配非空格的字符,相当于[^\t\r\n\v\f]</td></tr></tbody></table><hr><h4 id="正则表达式参数"><a href="#正则表达式参数" class="headerlink" title="正则表达式参数"></a>正则表达式参数</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/表达式/[<span class="keyword">switch</span>]</span><br><span class="line"><span class="comment">//switch(也称为修饰符)按照什么样的模式来匹配,有三种值</span></span><br><span class="line"><span class="comment">//g: 全局搜索</span></span><br><span class="line"><span class="comment">//i: 忽略大小写</span></span><br><span class="line"><span class="comment">//gi: 全局匹配+忽略大小写</span></span><br></pre></td></tr></table></figure><hr><h4 id="replace替换"><a href="#replace替换" class="headerlink" title="replace替换"></a>replace替换</h4><p>replace()方法可以实现替换字符串的操作,用来替换的参数可以是一个字符串伙食一个正则表达式</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">stringObject.replace(regexp/substr,replacement)</span><br><span class="line"><span class="comment">//第一个参数;被替换的字符串或者正则表达式</span></span><br><span class="line"><span class="comment">//第二个参数替换为的字符串</span></span><br><span class="line"><span class="comment">//返回值是一个替换完毕的新字符串</span></span><br></pre></td></tr></table></figure><hr><h2 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h2><h3 id="ES6新增语法"><a href="#ES6新增语法" class="headerlink" title="ES6新增语法"></a>ES6新增语法</h3><h4 id="let"><a href="#let" class="headerlink" title="let"></a>let</h4><p><strong>作用</strong>:声明变量</p><ul><li>let声明的变量只在所处的块级作用域有效</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">10</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">// a is a not defined</span></span><br></pre></td></tr></table></figure><p><font color=red>优势:</font></p><ol><li><p>防止业务比较复杂的时候,作用域内部变量覆盖外部变量</p></li><li><p>防止循环变量变成全局变量</p></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i<<span class="number">2</span>; i++) {</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(i); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>; i<<span class="number">2</span>; i++) {</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(i); <span class="comment">// i is not defined</span></span><br></pre></td></tr></table></figure><p><font color=red>注意:</font>使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性</p><ul><li>使用let关键字声明的变量没有变量提升 (只能先声明再使用)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(a);<span class="comment">// a is a not defined</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="number">20</span>;</span><br></pre></td></tr></table></figure><ul><li>使用let声明的变量具有暂时性死区特性 (let声明的变量会所在和块级作用域整体绑定)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">if</span>(<span class="literal">true</span>) {</span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//这里的输出语句不会去查找全局作用域里的num变量 num is not defined</span></span><br><span class="line"> <span class="keyword">let</span> num = <span class="number">20</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h4 id="const"><a href="#const" class="headerlink" title="const"></a>const</h4><p>**作用:**声明常量,常量就是值(内存地址)不能变化的量</p><ul><li>const声明的常量具有块级作用域</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">const</span> a = <span class="number">10</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(a) <span class="comment">//a is not defined</span></span><br></pre></td></tr></table></figure><ul><li>声明常量时必须赋值</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> PI; <span class="comment">//Missing initializer in const declaration</span></span><br></pre></td></tr></table></figure><ul><li>常量赋值后,普通数据类型的值不能修改</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> PI = <span class="number">3.14</span>;</span><br><span class="line">PI = <span class="number">100</span>; <span class="comment">//Assignment to constant variable</span></span><br></pre></td></tr></table></figure><ul><li>常量赋值后,复杂数据类型的值可以修改,因为不能改变的是内存地址,不能直接重新赋值</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [<span class="number">100</span>,<span class="number">200</span>];</span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">'a'</span>;</span><br><span class="line">arr[<span class="number">1</span>] = <span class="string">'b'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">//['a','b'];</span></span><br><span class="line">arr = [<span class="string">'a'</span>,<span class="string">'b'</span>]; <span class="comment">//Assigment to constant variable 这是将arr赋值给一个新数组</span></span><br></pre></td></tr></table></figure><hr><h4 id="let、const、var"><a href="#let、const、var" class="headerlink" title="let、const、var"></a>let、const、var</h4><ol><li>使用var声明的变量,其作用域为<font color=red>该语句所在的函数内,且存在变量提升现象</font></li><li>使用let声明的变量,其作用域为<font color=red>该语句所在的代码块内,不存在变量提升</font></li><li>使用const声明的是常量,在后面出现的代码中<font color=red>不能再修改常量的值</font></li></ol><table><thead><tr><th>var</th><th>let</th><th>const</th></tr></thead><tbody><tr><td>函数级作用域</td><td>块级作用域</td><td>块级作用域</td></tr><tr><td>变量提升</td><td>不存在变量提升</td><td>不存在变量提升</td></tr><tr><td>值可更改</td><td>值可更改</td><td>值不可更改</td></tr></tbody></table><hr><h4 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h4><p><strong>ES6中允许从数组中提取值,按照对应的位置,对变量赋值.对象也可以实现解构</strong></p><p>==数组解构==将数组中的元素赋值给对应变量</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> [a,b,c] = arr;</span><br><span class="line"><span class="built_in">console</span>.log(a,b,c); <span class="comment">// 1,2,3 解构成功</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [foo] = []; <span class="comment">//undefined 结构不成功，变量的值为undefined</span></span><br><span class="line"><span class="keyword">let</span> [bar,foo] = [<span class="number">1</span>]; <span class="comment">// 1 undefined 结构不成功，变量的值为undefined</span></span><br></pre></td></tr></table></figure><p>==对象结构== 将对象的属性赋值给同名变量</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = {<span class="attr">name</span>: <span class="string">'zhangsan'</span>,<span class="attr">age</span>: <span class="number">20</span>};</span><br><span class="line"><span class="keyword">let</span> {name, age} = person;</span><br><span class="line"><span class="built_in">console</span>.log(name); <span class="comment">//'zhangsan' </span></span><br><span class="line"><span class="built_in">console</span>.log(age); <span class="comment">// 20 </span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = {<span class="attr">name</span>: <span class="string">'zhangsan'</span>,<span class="attr">age</span>: <span class="number">20</span>};</span><br><span class="line"><span class="keyword">let</span> {age, name} = person;</span><br><span class="line"><span class="built_in">console</span>.log(name); <span class="comment">//'zhangsan'</span></span><br><span class="line"><span class="built_in">console</span>.log(age); <span class="comment">// 20 </span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = {<span class="attr">name</span>: <span class="string">'zhangsan'</span>,<span class="attr">age</span>: <span class="number">20</span>};</span><br><span class="line"><span class="keyword">let</span> {name, sex} = person;</span><br><span class="line"><span class="built_in">console</span>.log(name); <span class="comment">//'zhangsan'</span></span><br><span class="line"><span class="built_in">console</span>.log(age); <span class="comment">// undefined </span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = {<span class="attr">name</span>: <span class="string">'zhangsan'</span>,<span class="attr">age</span>: <span class="number">20</span>};</span><br><span class="line"><span class="keyword">let</span> {<span class="attr">name</span>:myName, <span class="attr">age</span>:myAge} = person; <span class="comment">//左侧的name和age只用于匹配person对象中的属性名，person对象中属性的值赋值给myName和myAge变量</span></span><br><span class="line"><span class="built_in">console</span>.log(myName); <span class="comment">// 'zhangsan'</span></span><br></pre></td></tr></table></figure><hr><h4 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h4><ul><li>箭头函数是用来简化函数定义语法的</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">() => {}</span><br><span class="line"><span class="keyword">const</span> fn = <span class="function">() =></span> {}</span><br></pre></td></tr></table></figure><ul><li>函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">num1,num2</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> num1+num2;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> sum = <span class="function">(<span class="params">num1,num2</span>) =></span> num1+num2;</span><br></pre></td></tr></table></figure><ul><li>如果形参只有一个,可以省略小括号</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">v</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> v;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> fn = <span class="function"><span class="params">v</span> =></span> v;</span><br></pre></td></tr></table></figure><ul><li>箭头函数不绑定this,箭头函数没有自己的this关键字,如果在箭头函数中使用this,this关键字将指向箭头函数定义所在作用域中的this</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> obj = {<span class="attr">name</span>: <span class="string">'zhangsan'</span>};</span><br><span class="line"><span class="keyword">const</span> resFn = fn.call(obj);</span><br><span class="line">resFn();</span><br></pre></td></tr></table></figure><hr><h4 id="剩余参数"><a href="#剩余参数" class="headerlink" title="剩余参数"></a>剩余参数</h4><ul><li>剩余参数语法允许我们将一个不定数量的参数表示为一个数组 (实参数量大于形参)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span> (<span class="params">first,...args</span>) </span>{ <span class="comment">//args是一个存放多余实参的数组</span></span><br><span class="line"> <span class="built_in">console</span>.log(first); <span class="comment">//10</span></span><br><span class="line"> <span class="built_in">console</span>.log(args); <span class="comment">// [20,30]</span></span><br><span class="line">}</span><br><span class="line">sum(<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>) </span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sum = <span class="function">(<span class="params">...args</span>) =></span> { <span class="comment">//箭头函数不能用arguments</span></span><br><span class="line"> <span class="keyword">let</span> total = <span class="number">0</span>;</span><br><span class="line"> args.forEach(<span class="function"><span class="params">item</span> =></span> total += item;)</span><br><span class="line"> <span class="keyword">return</span> total;</span><br><span class="line">}</span><br><span class="line">;</span><br><span class="line"><span class="built_in">console</span>.log(sum(<span class="number">10</span>,<span class="number">20</span>)); <span class="comment">// 30</span></span><br><span class="line"><span class="built_in">console</span>.log(sum(<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>)); <span class="comment">// 60 </span></span><br></pre></td></tr></table></figure><ul><li>剩余参数和解构配合使用</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> students = [<span class="string">'zhangsan'</span>,<span class="string">'lisi'</span>,<span class="string">'wangwu'</span>];</span><br><span class="line"><span class="keyword">let</span> [s1,...s2] = students;</span><br><span class="line"><span class="built_in">console</span>.log(s1); <span class="comment">//'zhangsan'</span></span><br><span class="line"><span class="built_in">console</span>.log(s2); <span class="comment">//['lisi','wangwu']</span></span><br></pre></td></tr></table></figure><hr><h3 id="内置对象扩展"><a href="#内置对象扩展" class="headerlink" title="内置对象扩展"></a>内置对象扩展</h3><h4 id="Array的扩展方法"><a href="#Array的扩展方法" class="headerlink" title="Array的扩展方法"></a>Array的扩展方法</h4><p>==扩展运算符(展开语法)==:扩展运算符可以将数组或对象转为用逗号分隔的参数序列</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">...arr <span class="comment">// 1,2,3</span></span><br><span class="line"><span class="built_in">console</span>.log(...arr); <span class="comment">// 1 2 3 逗号被当作condole.log的输出分割符了,所以没有逗号</span></span><br></pre></td></tr></table></figure><p>==扩展运算符应用==：合并数组</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法1</span></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line"><span class="keyword">let</span> arr3 = [...arr1,...arr2];</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">方法<span class="number">2</span></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>];</span><br><span class="line">arr.push(...arr2)</span><br></pre></td></tr></table></figure><p>==扩展运算符应用==：将伪数组转换成真正的数组</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> oDivs = <span class="built_in">document</span>.getElementByTagName(<span class="string">'div'</span>); <span class="comment">//div元素集合是一个伪数组</span></span><br><span class="line">oDivs = [...oDivs];</span><br></pre></td></tr></table></figure><p>==构造函数方法：Array.from()==:将伪数组或可遍历对象转换为真正的数组</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arratLike = { <span class="comment">//伪数组</span></span><br><span class="line"> <span class="string">'0'</span>:<span class="string">'a'</span>,</span><br><span class="line"> <span class="string">'1'</span>:<span class="string">'b'</span>,</span><br><span class="line"> <span class="string">'2'</span>:<span class="string">'c'</span>,</span><br><span class="line"> <span class="attr">length</span>: <span class="number">3</span></span><br><span class="line">};</span><br><span class="line"><span class="keyword">let</span> arr = <span class="built_in">Array</span>.from(arrayLike); <span class="comment">// ['a','b','c']</span></span><br></pre></td></tr></table></figure><p>==构造函数方法：Array.from()==:该方法还可以接受第二个参数，作用类似于数组中的map()方法，用来对每个元素进行处理，将处理后的值放入返回的数组</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arrayLike = { <span class="comment">//伪数组</span></span><br><span class="line"> <span class="string">'0'</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="string">'1'</span>: <span class="number">2</span>, </span><br><span class="line"> <span class="string">'length'</span>: <span class="number">2</span></span><br><span class="line">} <span class="comment">//数组中有多少个元素，函数就会被调用多少次</span></span><br><span class="line"><span class="keyword">let</span> newArray = <span class="built_in">Array</span>.from(arryLike,<span class="function"><span class="params">item</span> =></span> item * <span class="number">2</span>)</span><br></pre></td></tr></table></figure><p>==实例方法：find()==:用于找出一个符合条件的数组成员，如果没有找到返回undefined</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [{</span><br><span class="line"> <span class="attr">id</span>: <span class="number">1</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'张三'</span></span><br><span class="line">},{</span><br><span class="line"> <span class="attr">id</span>: <span class="number">2</span>,</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'李四'</span></span><br><span class="line">}]；</span><br><span class="line"><span class="keyword">let</span> target = arr.find(<span class="function">(<span class="params">item,index</span>) =></span> item.id == <span class="number">2</span>)</span><br></pre></td></tr></table></figure><p>==实例方法：findIndex()==:用于找出<font color=red>第一个</font>符合条件的数组成员的位置，如果没有找到返回-1</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">5</span>,<span class="number">10</span>,<span class="number">15</span>];</span><br><span class="line"><span class="keyword">let</span> target = arr.findIndex(<span class="function"><span class="params">item</span> =></span> item > <span class="number">9</span>);</span><br><span class="line"><span class="built_in">console</span>.log(index); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure><p>==实例方法：includes()==：判断某个数组是否包含给定的值，返回布尔值</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">23</span>,<span class="number">4</span>].includes(<span class="number">2</span>) <span class="comment">//false</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].includes(<span class="number">3</span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure><hr><h4 id="String的扩展方法"><a href="#String的扩展方法" class="headerlink" title="String的扩展方法"></a>String的扩展方法</h4><p>==模版字符串==：ES6新增的创建字符串的方式，使用反引号定义</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">`张三`</span>；</span><br></pre></td></tr></table></figure><p>==模版字符串解析变量==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> name = <span class="string">'张三'</span></span><br><span class="line"><span class="keyword">let</span> sayHello = <span class="string">`hello,my name is <span class="subst">${name}</span>`</span>; <span class="comment">//hello,my name is 张三</span></span><br></pre></td></tr></table></figure><p>==模版字符串可以换行==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> result = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'zhangsan'</span>,</span><br><span class="line"> <span class="attr">age</span>: <span class="number">20</span>,</span><br><span class="line"> <span class="attr">sex</span>: <span class="string">'男'</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> html = <span class="string">`<div></span></span><br><span class="line"><span class="string"><span><span class="subst">${result.name}</span></span></span></span><br><span class="line"><span class="string"><span><span class="subst">${result.age}</span></span></span></span><br><span class="line"><span class="string"><span><span class="subst">${result.sex}</span></span></span></span><br><span class="line"><span class="string"></div>`</span>;</span><br></pre></td></tr></table></figure><p>==模版字符串中可以调用函数==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sayHello = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'哈哈哈哈哈哈哈哈哈哈'</span>；</span><br><span class="line">}；</span><br><span class="line"><span class="keyword">let</span> greet = <span class="string">`<span class="subst">${sayHello()}</span>`</span>;</span><br><span class="line"><span class="built_in">console</span>.log(greet); <span class="comment">//哈哈哈哈哈哈哈哈哈哈</span></span><br></pre></td></tr></table></figure><p>==实例方法 startsWith()==:判断参数字符串是否在原字符的头部，返回布尔值</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">'hello world!'</span>;</span><br><span class="line">str.startsWith(<span class="string">'hello'</span>) <span class="comment">//true</span></span><br></pre></td></tr></table></figure><p>==实例方法 endsWith()==:判断参数字符串是否在原字符串的尾部，返回布尔值</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">'hello world!'</span>;</span><br><span class="line">str.endsWith(<span class="string">'!'</span>) <span class="comment">//true</span></span><br></pre></td></tr></table></figure><p>==实例方法 repeat()==：将原字符串重复n次，返回一个新字符串</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'x'</span>.repeat(<span class="number">3</span>) <span class="comment">// 'xxx'</span></span><br><span class="line"><span class="string">'hello'</span>.repeat(<span class="number">2</span>) <span class="comment">//'hellohello'</span></span><br></pre></td></tr></table></figure><hr><h4 id="Set数据结构"><a href="#Set数据结构" class="headerlink" title="Set数据结构"></a>Set数据结构</h4><p>ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是<font color=red>唯一</font>的，没有重复的值</p><ul><li><strong>创建Set数据结构</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s1 = <span class="keyword">new</span> <span class="built_in">Set</span>();</span><br><span class="line"><span class="built_in">console</span>.log(s1.size); <span class="comment">// 0 size是Set数据结构的一个属性 它表示Set数据结构里面有多少个值</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s2 = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'a'</span>,<span class="string">'b'</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(s2.size); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure><ul><li><strong>用Set数据结构数组去重</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s3 = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">'a'</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'b'</span>]);</span><br><span class="line"><span class="keyword">const</span> arr = [...s1];</span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">// ['a','b'];</span></span><br></pre></td></tr></table></figure><ul><li><strong>Set数据结构实例方法</strong></li></ul><p>==add(value)==:添加某个值，返回Set结构本身</p><p>==delete(value)==:删除某个值，返回一个布尔值，表示删除是否成功</p><p>==has(value)==:返回一个布尔值，表示该值是否为Set成员</p><p>==clear()==:清除所有成员，没有返回值</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s = <span class="keyword">new</span> <span class="built_in">Set</span>();</span><br><span class="line">a.add(<span class="number">1</span>).add(<span class="number">2</span>).add(<span class="number">3</span>); <span class="comment">//向set结构中添加值</span></span><br><span class="line">s.delete(<span class="number">2</span>)<span class="comment">//删除set结构中的2值</span></span><br><span class="line">s.has(<span class="number">1</span>)<span class="comment">//判断set结构中是否有1这个值 返回布尔值</span></span><br><span class="line">s.clear()<span class="comment">//清除set结构中的所有值</span></span><br></pre></td></tr></table></figure><ul><li><p><strong>遍历</strong></p><p>Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值</p></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">s.forEach(<span class="function"><span class="params">value</span> =></span> <span class="built_in">console</span>.log(value))</span><br></pre></td></tr></table></figure><hr><h2 id="Node"><a href="#Node" class="headerlink" title="Node"></a>Node</h2><h3 id="Node简介"><a href="#Node简介" class="headerlink" title="Node简介"></a>Node简介</h3><h4 id="为什么要学习服务端开发基础"><a href="#为什么要学习服务端开发基础" class="headerlink" title="为什么要学习服务端开发基础"></a>为什么要学习服务端开发基础</h4><ul><li>能够和后端程序猿更加紧密的配合</li><li>网站业务逻辑前置，学习前端技术需要后端技术支撑（Ajax）</li><li>扩展知识视野，能够站在更高的角度审视整个项目</li></ul><hr><h4 id="服务器端开发要做哪些事情"><a href="#服务器端开发要做哪些事情" class="headerlink" title="服务器端开发要做哪些事情"></a>服务器端开发要做哪些事情</h4><ul><li>实现网站的业务逻辑</li><li>数据的增删改查</li></ul><hr><h4 id="为什么选择Node"><a href="#为什么选择Node" class="headerlink" title="为什么选择Node"></a>为什么选择Node</h4><ul><li>使用JS语法开发后端应用</li><li>一些公司要求前端工程师掌握Node开发</li><li>生态系统活跃，有大量开源库可以使用</li><li>前端开发工具大多基于Node开发</li></ul><hr><h4 id="Node是什么"><a href="#Node是什么" class="headerlink" title="Node是什么"></a>Node是什么</h4><p>Node是一个基于Chrome V8引擎的JS代码运行环境</p><p>==运行环境==</p><ul><li>浏览器（软件）能够运行JS代码，浏览器就是JS代码的运行环境</li><li>Node（软件）能够运行JS代码，Node就是JS代码的运行环境</li></ul><hr><h4 id="Node-js运行环境安装"><a href="#Node-js运行环境安装" class="headerlink" title="Node.js运行环境安装"></a>Node.js运行环境安装</h4><p>官网：<a href="https://nodejs.org/en/">https://nodejs.org/en/</a></p><hr><h4 id="PATH环境变量"><a href="#PATH环境变量" class="headerlink" title="PATH环境变量"></a>PATH环境变量</h4><p>存储系统中的目录，在命令行中执行命令的时候系统会自动去这些目录中查找命令的位置。</p><hr><h4 id="Node-js的组成"><a href="#Node-js的组成" class="headerlink" title="Node.js的组成"></a>Node.js的组成</h4><ul><li>JavaScript由三部分组成，ECMAScript，DOM，BOM</li><li>Node.js是由ECMAScript及Node环境提供的一些附加API组成的，包括文件、网络、路径等等一些更加强大的API</li></ul><hr><h3 id="Node-js模块化开发"><a href="#Node-js模块化开发" class="headerlink" title="Node.js模块化开发"></a>Node.js模块化开发</h3><h4 id="JavaScript开发弊端"><a href="#JavaScript开发弊端" class="headerlink" title="JavaScript开发弊端"></a>JavaScript开发弊端</h4><p>JS在使用时存在两大问题，<font color=red>文件依赖</font>和<font color=red>命名冲突</font></p><hr><h4 id="Node-js中模块化开发规范"><a href="#Node-js中模块化开发规范" class="headerlink" title="Node.js中模块化开发规范"></a>Node.js中模块化开发规范</h4><ul><li><p>Node.js规定一个<font color=red>JavaScript文件</font>就是一个模块，模块<font color=red>内部定义的变量和函数</font>默认情况下在<font color=red>外部无法得到</font></p></li><li><p>模块内部可以使用<font color=red>exports对象进行成员导出</font>，使用<font color=red>require方法</font>导入其他模块</p></li></ul><p>==模块成员导出==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//a.js</span></span><br><span class="line"><span class="comment">//在模块内部定义变量</span></span><br><span class="line"><span class="keyword">let</span> version =<span class="number">1.0</span>;</span><br><span class="line"><span class="comment">//在模块内部定义方法</span></span><br><span class="line"><span class="keyword">const</span> sayHi = <span class="function"><span class="params">name</span> =></span> <span class="string">`您好，<span class="subst">${name}</span>`</span>；</span><br><span class="line"><span class="comment">//向模块外部到处数据</span></span><br><span class="line"><span class="built_in">exports</span>.version = version;</span><br><span class="line"><span class="built_in">exports</span>.sayHi = sayHi;</span><br></pre></td></tr></table></figure><p>==模块成员导出的另一种方式==:<font color=red>exports</font>是<font color=red>module.exports</font>的别名<font color=red>(地址引用关系)</font>，<font color=red>导出对象最终以module.exports为准</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在模块内部定义变量</span></span><br><span class="line"><span class="keyword">let</span> version =<span class="number">1.0</span>;</span><br><span class="line"><span class="comment">//在模块内部定义方法</span></span><br><span class="line"><span class="keyword">const</span> sayHi = <span class="function"><span class="params">name</span> =></span> <span class="string">`您好，<span class="subst">${name}</span>`</span>；</span><br><span class="line"><span class="built_in">module</span>.exports.version = version;</span><br><span class="line"><span class="built_in">module</span>.exporrs.sayHi = sayHi;</span><br></pre></td></tr></table></figure><p>==模块导出两种方式的联系与区别==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> greeting = <span class="function"><span class="params">name</span> =></span> <span class="string">`hello <span class="subst">${name}</span>`</span>;</span><br><span class="line"><span class="built_in">module</span>.exports.greeting = greeting;</span><br><span class="line"><span class="comment">//当exports对象和module.exports对象指向的不是同一个对象时，以module.exports为准</span></span><br><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'zhangsan'</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==模块成员导入==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//b.js</span></span><br><span class="line"><span class="comment">//在b.js模块中导入模块a</span></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">require</span>(<span class="string">'./b.js'</span>); <span class="comment">//.js可以省略</span></span><br><span class="line"><span class="comment">//输出a模块中的version变量</span></span><br><span class="line"><span class="built_in">console</span>.log(a.version);</span><br><span class="line"><span class="comment">//调用a模块中的sayHi方法 并输出其返回值</span></span><br><span class="line"><span class="built_in">console</span>.log(a.sayHi(<span class="string">'哈哈哈哈'</span>))；</span><br></pre></td></tr></table></figure><hr><h3 id="系统模块"><a href="#系统模块" class="headerlink" title="系统模块"></a>系统模块</h3><h4 id="什么是系统模块"><a href="#什么是系统模块" class="headerlink" title="什么是系统模块"></a>什么是系统模块</h4><p>Node运行环境提供的API。因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提供的API为系统模块</p><hr><h4 id="系统模块fs文件操作"><a href="#系统模块fs文件操作" class="headerlink" title="系统模块fs文件操作"></a>系统模块fs文件操作</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>); <span class="comment">//f:file 文件，s:system系统， 文件操作系统</span></span><br></pre></td></tr></table></figure><p>==读取文件方法==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fs.readFile(<span class="string">'文件路径/文件名称'</span>[,<span class="string">'文件编码'</span>]，callback)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//读取文件案例</span></span><br><span class="line"><span class="comment">//导入fs模块</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line">fs.readFile(<span class="string">'../css/base.css'</span>,<span class="string">'utf-8'</span>, <span class="function">(<span class="params">err,doc</span>) =></span> {</span><br><span class="line"> <span class="comment">//如果文件读取发生了错误 参数err的值为错误对象 否则err的值为null</span></span><br><span class="line"> <span class="comment">//doc参数为文件内容</span></span><br><span class="line"> <span class="keyword">if</span>(err == <span class="literal">null</span>) {</span><br><span class="line"> <span class="comment">//在控制台中输出文件内容</span></span><br><span class="line"> <span class="built_in">console</span>.log(doc);</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>==写入内容操作==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fs.writeFile(<span class="string">'文件路径/文件名称'</span>,<span class="string">'数据'</span>, callback);</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="keyword">const</span> content = <span class="string">'我要写入的内容，如果路径里没有demo.txt，系统会自动创建'</span></span><br><span class="line">fs.writeFile(<span class="string">'./demo.txt'</span>,content,<span class="function"><span class="params">err</span> =></span> {</span><br><span class="line"> <span class="keyword">if</span>(err != <span class="literal">null</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(err);</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'文件写入成功'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="系统模块path路径操作"><a href="#系统模块path路径操作" class="headerlink" title="系统模块path路径操作"></a>系统模块path路径操作</h4><p>==为什么要进行路径拼接==</p><ul><li>不同操作系统的路径分隔符不统一</li><li>/public/uploads/avatar</li><li>Windows上是\ / 都可以</li><li>Linux上只能是 /</li></ul><p>==路径拼接语法==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">path.join(<span class="string">'路径'</span>，<span class="string">'路径'</span>,...) <span class="comment">//最后一个参数是文件 ，路径数量不固定</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//导入path模块</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">//路径拼接</span></span><br><span class="line"><span class="keyword">let</span> finialPath = path.join(<span class="string">'itcast'</span>,<span class="string">'a'</span>,<span class="string">'b'</span>,<span class="string">'index.css'</span>);</span><br><span class="line"><span class="comment">//因为path.join不是耗时操作，所以可以通过它的返回值来接收拼接的结果</span></span><br><span class="line"><span class="built_in">console</span>.log(finialPath); <span class="comment">// itcast\a\b\index.css</span></span><br></pre></td></tr></table></figure><p>==相对路径和绝对路径==</p><ul><li>大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前工作目录</li><li>在读取文件或者设置文件路径时都会选择绝对路径</li><li>使用__dirname获取当前文件所在的绝对路径</li><li>require比较特殊，它当中的相对路径就是当前文件的相对路径 所以可以写相对路径</li></ul><hr><h3 id="第三方模块"><a href="#第三方模块" class="headerlink" title="第三方模块"></a>第三方模块</h3><h4 id="什么是第三方模块"><a href="#什么是第三方模块" class="headerlink" title="什么是第三方模块"></a>什么是第三方模块</h4><ul><li>别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包</li></ul><hr><h4 id="第三方模块有两种存在形式"><a href="#第三方模块有两种存在形式" class="headerlink" title="第三方模块有两种存在形式"></a>第三方模块有两种存在形式</h4><ul><li><p>以JS文件形式存在，提供实现项目具体功能的API接口</p></li><li><p>以命令行工具存在，辅助项目开发</p></li></ul><hr><h4 id="获取第三方模块"><a href="#获取第三方模块" class="headerlink" title="获取第三方模块"></a>获取第三方模块</h4><ul><li><p>npmjs.com: 第三方模块的存储和分发仓库</p></li><li><p>npm(node package manager): node的第三方模块管理工具</p></li><li><p>实际上npm也是node的第三方模块，只是每个使用node的使用者都要安装，所以安装node时已被集成</p></li><li><p>通过npm下载其他第三方模块：npm install 模块名称(默认下载到命令行工具的当前工作目录下)</p></li><li><p>卸载其他第三方模块：npm uninstall package 模块名称</p></li></ul><p>全局安装与本地安装</p><ul><li>命令行工具： 全局安装 （任何项目都可以使用）</li><li>库文件：本地安装 （限本项目使用）</li></ul><hr><h4 id="第三方模块nodemon"><a href="#第三方模块nodemon" class="headerlink" title="第三方模块nodemon"></a>第三方模块nodemon</h4><p>nodemon是一个命令行工具，用以辅助项目开发<br>在node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐<br>它可以监控文件的保存操作，文件保存它就会帮我们执行文件</p><ul><li>使用步骤</li></ul><ol><li>使用 npm install nodemon -g 下载它 （Mac要加sudo su或者sudo）</li><li>在命令行工具中用nodemon命令替代node命令执行文件</li></ol><hr><h4 id="第三方模块nrm"><a href="#第三方模块nrm" class="headerlink" title="第三方模块nrm"></a>第三方模块nrm</h4><p>nrm(arm registry manager): npm下载地址切换工具</p><p>npm默认的下载地址在国外，国内下载速度慢</p><ul><li>使用步骤</li></ul><ol><li>使用 npm install nrm -g</li><li>查询可用下载地址列表 nrm ls</li><li>切换npm下载地址nrm use 下载地址名称</li></ol><hr><h4 id="第三方模块Gulp"><a href="#第三方模块Gulp" class="headerlink" title="第三方模块Gulp"></a>第三方模块Gulp</h4><p>基于node平台开发的前端构建工具<br>将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动化执行了<br>用机器代替手工，提高开发效率。</p><p>==Gulp能做什么==</p><ul><li>项目上线，HTML、CSS、JS文件压缩合并</li><li>语法转换(es6、less)</li><li>公共文件抽离</li><li>修改文件浏览器自动刷新</li></ul><p>==Gulp使用==</p><ol><li>使用npm install gulp 下载gulp库文件</li><li>在项目根目录下建立gulpfile.js文件</li><li>重构项目的文件夹结构src目录放置源代码文件 dist目录放置构建后的文件</li><li>在gulp.js文件中编写任务</li><li>在命令行工具中执行gulp任务</li></ol><p>==Gulp中提供的方法==</p><ul><li>gulp.src(): 获取任务要处理的文件</li><li>gulp.dest(): 输出文件 相当于复制</li><li>gulp.task(): 建立gulp任务 第一个参数是要建立的任务名字 第二个参数回调函数</li><li>gulp.watch(): 监控文件的变化</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="comment">//使用gulp.task()方法建立任务</span></span><br><span class="line">gulp.tast(<span class="string">'first'</span>, <span class="function">() =></span> { </span><br><span class="line"> <span class="comment">//获取要处理的文件</span></span><br><span class="line"> gulp.src(<span class="string">'./src/css/base.css'</span>)</span><br><span class="line"> <span class="comment">//将要处理的文件输出到dist目录</span></span><br><span class="line"> .pipe(gulp.dest(<span class="string">'./dist/css'</span>)) <span class="comment">//pipe就是处理的意思</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>==Gulp插件==</p><ul><li>gulp-htmlmin: html文件压缩</li><li>gulp-csso: 压缩css</li><li>gulp-babel: JS语法转化</li><li>gulp-less: less语法转化</li><li>gulp-uglify: 压缩混淆的JS</li><li>gulp-file-include 公共文件包含</li><li>browsersync 浏览器实时同步</li></ul><hr><h4 id="node-mondules文件夹的问题"><a href="#node-mondules文件夹的问题" class="headerlink" title="node_mondules文件夹的问题"></a>node_mondules文件夹的问题</h4><ol><li>文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢</li><li>复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错</li></ol><hr><h4 id="package-json文件的作用"><a href="#package-json文件的作用" class="headerlink" title="package.json文件的作用"></a>package.json文件的作用</h4><p>项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等</p><p>使用<font color=red>npm init -y</font>命令生成</p><p><font color=red>开发环境</font>接受到项目的人 只需要在命令行输入 npm install 就会根据package.json下载相应的依赖（所有依赖）</p><p><font color=red>运营环境</font>接受到项目的人 只需要在命令行输入 npm install –production就会根据package.json下载相应的依赖（项目依赖） production生产环境 即线上运营环境只需要项目依赖</p><hr><h4 id="Package-lock-json文件的作用"><a href="#Package-lock-json文件的作用" class="headerlink" title="Package-lock.json文件的作用"></a>Package-lock.json文件的作用</h4><ul><li>锁定包的版本，确保再次下载时不会因为包版本不同而产生问题</li><li>加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作</li></ul><hr><h4 id="项目依赖"><a href="#项目依赖" class="headerlink" title="项目依赖"></a>项目依赖</h4><ul><li>在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖</li><li>使用npm install包命令下载的文件会默认添加到package.json文件的dependencies字段中</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//例如</span></span><br><span class="line">{</span><br><span class="line"> <span class="string">'dependencies'</span>: {</span><br><span class="line"> <span class="string">'jquery'</span>: <span class="string">'^3.3.1'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h4 id="开发依赖"><a href="#开发依赖" class="headerlink" title="开发依赖"></a>开发依赖</h4><ul><li>在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖</li><li>使用npm install 包名 –save -dev命令将包添加到package.json文件的devDependencies字段中</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//例如</span></span><br><span class="line">{</span><br><span class="line"> <span class="string">'devDependencies'</span>: {</span><br><span class="line"> <span class="string">'gulp'</span>: <span class="string">'^3,9,1'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h3 id="Node-js中模块的加载机制"><a href="#Node-js中模块的加载机制" class="headerlink" title="Node.js中模块的加载机制"></a>Node.js中模块的加载机制</h3><h4 id="当模块拥有路径当没有后缀时"><a href="#当模块拥有路径当没有后缀时" class="headerlink" title="当模块拥有路径当没有后缀时"></a>当模块拥有路径当没有后缀时</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">'./find.js'</span>);</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">'./find'</span>);</span><br></pre></td></tr></table></figure><ol><li>require方法根据模块路径查找模块，如果是完整路径，直接引入模块。</li><li>如果模块后缀省略，先找同名JS文件再找同名JS文件夹</li><li>如果找到了同名文件夹，找文件夹中的index.js</li><li>如果文件夹中没有indexjs就会去当前文件夹中的package.js文件中查找main选项中的入口文件5.如果找指定的入口文件不存在或者没有指定入口文件就会报错，模块没有被找到</li></ol><hr><h4 id="当模块没有路径且没有后缀"><a href="#当模块没有路径且没有后缀" class="headerlink" title="当模块没有路径且没有后缀"></a>当模块没有路径且没有后缀</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">'find'</span>);</span><br></pre></td></tr></table></figure><ol><li>Node.js会假设它是系统模块</li><li>Nodejs会去node_modules文件夹中</li><li>首先看是否有该名字的JS文件</li><li>再看是否有该名字的文件夹</li><li>如果是文件夹看里面是否有indexjs</li><li>如果没有indexjs查看该文件夹中的package.json中的main选项确定模块入口文件</li><li>否则找不到报错</li></ol><hr><h3 id="服务器基础概念"><a href="#服务器基础概念" class="headerlink" title="服务器基础概念"></a>服务器基础概念</h3><h4 id="Node网站服务器"><a href="#Node网站服务器" class="headerlink" title="Node网站服务器"></a>Node网站服务器</h4><p>能够提供网站访问服务的机器就是网站服务器，它能够接收客户端的<font color=red>请求</font>，能够对请求作出<font color=red>响应</font></p><hr><h4 id="IP地址"><a href="#IP地址" class="headerlink" title="IP地址"></a>IP地址</h4><p>互联网中设备的唯一标识。<br>IP是Internet Protocol Address的简写，代表互联网协议地址。</p><hr><h4 id="域名"><a href="#域名" class="headerlink" title="域名"></a>域名</h4><p>由于IP地址难于记忆，所以产生了域名的概念，所谓域名就是平时<font color=red>上网说使用的地址</font></p><p>虽然在地址栏中输入的是网址，但是最终还是会将域名转换为ip才能访问到指定的网站服务器</p><hr><h4 id="端口"><a href="#端口" class="headerlink" title="端口"></a>端口</h4><p>端口是计算机与外界通讯交流的出口，用来区分服务器电脑中提供的不同的服务</p><hr><h4 id="URL"><a href="#URL" class="headerlink" title="URL"></a>URL</h4><p>统一资源定位符，是专为标识Internet网上资源位置而设的一种编址方式，我们平时所说的网页地址指的就是URL</p><p>==URL的组成==</p><p><font color=red>传输协议:</font>//服务器IP或域名:/<font color=red>资源所在位置标识</font></p><p><font color=red>http:</font>//<a href="http://www.itcast.cn/">www.itcast.cn</a><font color=red>/new/20181018/09152238514.html</font></p><p>http:超文本传输协议，提供了一种发布和接收HTML页面的方法</p><hr><h3 id="创建web服务器"><a href="#创建web服务器" class="headerlink" title="创建web服务器"></a>创建web服务器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引用系统模块</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">'http'</span>);</span><br><span class="line"><span class="comment">//创建web服务器</span></span><br><span class="line"><span class="keyword">const</span> app = http.creatServer();</span><br><span class="line"><span class="comment">//当客户端发送请求的时候</span></span><br><span class="line">app.on(<span class="string">'request'</span>,<span class="function">(<span class="params">req,res</span>) =></span> {</span><br><span class="line"> <span class="comment">//响应</span></span><br><span class="line"> res.end(<span class="string">'<h2></h2>'</span>);</span><br><span class="line">});</span><br><span class="line"><span class="comment">//监听3000端口</span></span><br><span class="line">app.listen(<span class="number">3000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'网站服务器启动成功'</span>)；</span><br></pre></td></tr></table></figure><hr><h3 id="HTTP协议"><a href="#HTTP协议" class="headerlink" title="HTTP协议"></a>HTTP协议</h3><p><font color=red>超文本传输协议</font>规定了如何从网站服务器传输超文本到本地浏览器，它基于客户端服务器架构工作，是客户端(用户)和服务器(网站)请求和应答的标准</p><h4 id="报文"><a href="#报文" class="headerlink" title="报文"></a>报文</h4><p>在HTTP请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式</p><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/HTTP%E5%8D%8F%E8%AE%AE%E6%8A%A5%E6%96%87.png" alt="image-20210830203327388"></p><hr><h4 id="请求报文"><a href="#请求报文" class="headerlink" title="请求报文"></a>请求报文</h4><ol><li>请求方式（Request Method）</li></ol><ul><li>GET 请求数据</li><li>POST 发送数据 </li></ul><ol start="2"><li>请求地址（Request URL）</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">app.on(<span class="string">'request'</span>,<span class="function">(<span class="params">req,res</span>) =></span> {</span><br><span class="line"> req.hesders <span class="comment">//获取请求报文</span></span><br><span class="line"> req.url <span class="comment">// 获取请求地址</span></span><br><span class="line"> req.method <span class="comment">// 获取请求方法</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="响应报文"><a href="#响应报文" class="headerlink" title="响应报文"></a>响应报文</h4><ol><li>HTTP状态码</li></ol><ul><li>200请求成功</li><li>404请求的资源没有被找到</li><li>500服务器端错误</li><li>400客户端请求有语法错误</li></ul><ol start="2"><li>内容类型</li></ol><ul><li>text/html</li><li>text/css</li><li>application/javascript</li><li>image/jpeg</li><li>application/json</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">res.writeHead(status,{</span><br><span class="line"> <span class="string">'content-type'</span>: <span class="string">'text/html;charset=utf8'</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="GET请求参数"><a href="#GET请求参数" class="headerlink" title="GET请求参数"></a>GET请求参数</h4><ul><li>参数被放置在浏览器地址栏中，例如：<a href="http://localhost:3000/?name=zhangsan&age=20">http://localhost:3000/?name=zhangsan&age=20</a></li></ul><p>==服务器获取GET请求参数==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> url = <span class="built_in">require</span>(<span class="string">'url'</span>);</span><br><span class="line"><span class="keyword">let</span> param = url.parse(req.url,<span class="literal">true</span>).query;</span><br><span class="line"><span class="built_in">console</span>.log(query.name);</span><br><span class="line"><span class="built_in">console</span>.log(query.age);</span><br></pre></td></tr></table></figure><hr><h4 id="POST请求参数"><a href="#POST请求参数" class="headerlink" title="POST请求参数"></a>POST请求参数</h4><ul><li>参数被放置在请求体(请求报文)中传输</li><li>获取POST参数需要使用data事件和end事件</li><li>使用querystring系统模块将参数转换为对象格式</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入系统模块处理请求参数模块</span></span><br><span class="line"><span class="keyword">const</span> querystring. = <span class="built_in">require</span>(<span class="string">'querystring'</span>);</span><br><span class="line">app.on(<span class="string">'requst'</span>,<span class="function">(<span class="params">req,res</span>) =></span> {</span><br><span class="line"> <span class="keyword">let</span> postData = <span class="string">''</span>;</span><br><span class="line"> <span class="comment">//监听参数传输事件 data事件 chunk是每次传输的数据</span></span><br><span class="line"> req.on(<span class="string">'data'</span>,<span class="function">(<span class="params">chunk</span>) =></span> postData += chunk);</span><br><span class="line"> <span class="comment">//监听参数传输完毕事件 end事件</span></span><br><span class="line"> req.on(<span class="string">'end'</span>,<span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(querystring.parse(postData));</span><br><span class="line"> })；</span><br><span class="line"> res.end(<span class="string">'ok'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h4><p>路由是指客户端请求地址与服务器端程序代码的对应关系。简单点说，就是请求什么响应什么</p><p><a href="http://localhost:300/index">http://localhost:300/index</a></p><p><a href="http://localhost:3000/login">http://localhost:3000/login</a></p><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/%E8%B7%AF%E7%94%B1.png" alt="image-20210831100327671"></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入系统模块http</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">'http'</span>);</span><br><span class="line"><span class="comment">//引入系统模块url</span></span><br><span class="line"><span class="keyword">const</span> url = <span class="built_in">require</span>(<span class="string">'url'</span>);</span><br><span class="line"><span class="comment">//创建服务器对象</span></span><br><span class="line"><span class="keyword">const</span> app = http.createServer();</span><br><span class="line"><span class="comment">//监听客服端请求事件</span></span><br><span class="line">app.on(<span class="string">'request'</span>,<span class="function">(<span class="params">req,res</span>) =></span> {</span><br><span class="line"> <span class="comment">//响应报文处理</span></span><br><span class="line"> res.writeHead(<span class="number">200</span>,{</span><br><span class="line"> <span class="string">'content-type'</span>: <span class="string">'text/html;charset=utf8'</span></span><br><span class="line"> })</span><br><span class="line"> <span class="comment">//获取请求地址</span></span><br><span class="line"> <span class="keyword">const</span> pathname = url.parse(req.url).pathname;</span><br><span class="line"> <span class="comment">//获取请求方式</span></span><br><span class="line"> <span class="keyword">const</span> method = req.method.toLowerCase();</span><br><span class="line"> <span class="keyword">if</span>(method == <span class="string">'get'</span>) {</span><br><span class="line"> <span class="keyword">if</span>(pathname == <span class="string">'/'</span> || pathname == <span class="string">'/index'</span>) {</span><br><span class="line"> res.end(<span class="string">'欢迎来到首页'</span>);</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(pathname == <span class="string">'/list'</span>) {</span><br><span class="line"> res.end(<span class="string">'欢迎来到列表页'</span>);</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> res.end(<span class="string">'您请求的页面不存在'</span>);</span><br><span class="line"> }</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(method == <span class="string">'post'</span>) {</span><br><span class="line"> }</span><br><span class="line">})</span><br><span class="line"><span class="comment">//监听端口</span></span><br><span class="line">app.listen(<span class="number">3000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'网站服务器启动成功'</span>);</span><br></pre></td></tr></table></figure><hr><h4 id="静态资源"><a href="#静态资源" class="headerlink" title="静态资源"></a>静态资源</h4><p>服务器端不需要处理，可以直接响应给客户端的资源就是静态资源，例如CSS、JS、image文件</p><p><a href="http://www.itcast.cn/images/logo.png">http://www.itcast.cn/images/logo.png</a></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//静态文件访问</span></span><br><span class="line"><span class="comment">//引入系统模块http</span></span><br><span class="line"><span class="keyword">const</span> http = <span class="built_in">require</span>(<span class="string">'http'</span>);</span><br><span class="line"><span class="comment">//引入系统模块url</span></span><br><span class="line"><span class="keyword">const</span> url = <span class="built_in">require</span>(<span class="string">'url'</span>);</span><br><span class="line"><span class="comment">//引入系统模块path</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"><span class="comment">//引入系统模块fs</span></span><br><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="comment">//引入第三方模块mime</span></span><br><span class="line"><span class="keyword">const</span> mime = <span class="built_in">require</span>(<span class="string">'mime'</span>);</span><br><span class="line"><span class="comment">//创建服务器对象</span></span><br><span class="line"><span class="keyword">const</span> app = http.createServer();</span><br><span class="line"><span class="comment">//监听客户端请求事件</span></span><br><span class="line">app.on(<span class="string">'request'</span>,<span class="function">(<span class="params">req,res</span>) =></span> {</span><br><span class="line"> <span class="comment">//获取客户端请求路径</span></span><br><span class="line"> <span class="comment">// const pathname = url.parse(req.url).pathname;</span></span><br><span class="line"> <span class="keyword">const</span> data = <span class="keyword">new</span> URL(<span class="string">`<span class="subst">${req.url}</span>`</span>,<span class="string">'http://localhost:3000/'</span>);</span><br><span class="line"> <span class="keyword">let</span> pathname = data.pathname;</span><br><span class="line"> <span class="comment">// console.log(data);</span></span><br><span class="line"> pathname = pathname == <span class="string">'/'</span> ? <span class="string">'/index.html'</span> : pathname;</span><br><span class="line"> <span class="comment">//将用户请求路径转换为服务器硬盘路径</span></span><br><span class="line"> <span class="keyword">const</span> realPath = path.join(__dirname, <span class="string">'public'</span> + pathname);</span><br><span class="line"></span><br><span class="line"> <span class="comment">//获取资源类型</span></span><br><span class="line"> <span class="keyword">let</span> type = mime.getType(realPath);</span><br><span class="line"></span><br><span class="line"> <span class="comment">//读取文件</span></span><br><span class="line"> fs.readFile(realPath,<span class="function">(<span class="params">error,doc</span>) =></span> {</span><br><span class="line"> <span class="comment">//如果读取失败</span></span><br><span class="line"> <span class="keyword">if</span>(error != <span class="literal">null</span>) {</span><br><span class="line"> <span class="comment">//响应头处理</span></span><br><span class="line"> res.writeHead(<span class="number">404</span>,{</span><br><span class="line"> <span class="string">'content-type'</span>:<span class="string">'text/html;charset=utf8'</span></span><br><span class="line"> })</span><br><span class="line"> res.end(<span class="string">'文件读取失败'</span>);</span><br><span class="line"> <span class="keyword">return</span>;</span><br><span class="line"> }</span><br><span class="line"> res.writeHead(<span class="number">200</span>,{</span><br><span class="line"> <span class="string">'content-type'</span>: type <span class="comment">//低版本浏览器必须要指定文本类型</span></span><br><span class="line"> })</span><br><span class="line"> res.end(doc);</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"><span class="comment">//监听服务器端口</span></span><br><span class="line">app.listen(<span class="number">3000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'服务器启动成功'</span>);</span><br></pre></td></tr></table></figure><hr><h4 id="动态资源"><a href="#动态资源" class="headerlink" title="动态资源"></a>动态资源</h4><p>相同的请求地址不同的响应资源，这种资源就是动态资源</p><hr><h3 id="Node-js异步编程"><a href="#Node-js异步编程" class="headerlink" title="Node.js异步编程"></a>Node.js异步编程</h3><h4 id="同步API，异步API"><a href="#同步API，异步API" class="headerlink" title="同步API，异步API"></a>同步API，异步API</h4><p>==同步API==：只有当前API执行完成后，才能继续执行下一个API</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">'before'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'after'</span>);</span><br></pre></td></tr></table></figure><p>==异步API==: 当前API的执行不会阻塞后续代码的执行</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">'before'</span>);</span><br><span class="line"><span class="built_in">setTimeout</span>(</span><br><span class="line"><span class="function">() =></span> { <span class="built_in">console</span>.log(<span class="string">'last'</span>);</span><br><span class="line">},<span class="number">2000</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'after'</span>);</span><br></pre></td></tr></table></figure><p>==同步API与异步API区别==（获取返回值）</p><ul><li>同步API可以从返回值中拿到API执行的结果，但是异步API是不可以的(只能通过回调函数来拿)</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//同步</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">n1,n2</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> n1=n2;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> result = sum(<span class="number">10</span>,<span class="number">20</span>);</span><br><span class="line"><span class="built_in">console</span>.log(result); <span class="comment">// 30</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//异步</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMsg</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> {<span class="attr">msg</span>: <span class="string">'hello Node.js'</span>}</span><br><span class="line"> },<span class="number">2000</span>); <span class="comment">//这里会返回undefined 因为异步API不会阻塞后续代码的执行</span></span><br><span class="line"> <span class="comment">//这里 默认return undefined</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> msg = getMsg();</span><br><span class="line"><span class="built_in">console</span>.log(msg); <span class="comment">//undefined</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//回调函数获取异步API返回值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getData</span>(<span class="params">callback</span>) </span>{</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> a = b = <span class="number">1</span>;</span><br><span class="line"> <span class="keyword">let</span> sum = a + b;</span><br><span class="line"> callback(sum); <span class="comment">//将异步API执行的结果通过参数的形式传递出来</span></span><br><span class="line"> },<span class="number">2000</span>)</span><br><span class="line">}</span><br><span class="line">getData(<span class="function"><span class="params">data</span> =></span> <span class="built_in">console</span>.log(data)); </span><br></pre></td></tr></table></figure><p>==回调函数==：自己定义函数让别人去调用</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//getData函数定义</span></span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>) <span class="title">getData</span> (<span class="params">callback</span>) </span>{}</span><br><span class="line"><span class="comment">//getData函数调用</span></span><br><span class="line">gerData(<span class="function">() =></span> {})</span><br></pre></td></tr></table></figure><p>==同步API与异步API区别==（代码执行顺序）</p><p>同步API从上到下依次执行，前面代码会阻塞后面代码的执行</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>; i< <span class="number">100000</span>; i++) {</span><br><span class="line"> <span class="built_in">console</span>.log(i);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'for循环后面的代码'</span>)；</span><br></pre></td></tr></table></figure><p>异步API不会等待API执行完成后再向下执行代码</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="string">'代码开始执行'</span>)；</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =></span> <span class="built_in">console</span>.log(<span class="string">'2秒后执行的代码'</span>),<span class="number">2000</span>);</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =></span> <span class="built_in">console</span>.log(<span class="string">'0秒后执行的代码'</span>)，<span class="number">0</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'代码结束执行'</span>)；</span><br></pre></td></tr></table></figure><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F.png" alt="image-20210831170107089"></p><hr><h4 id="Node-js中的异步API"><a href="#Node-js中的异步API" class="headerlink" title="Node.js中的异步API"></a>Node.js中的异步API</h4><ol><li>读取文件API</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fs.readFile(<span class="string">'./demo.txt'</span>,<span class="function">(<span class="params">err,result</span>) =></span> {});</span><br></pre></td></tr></table></figure><ol start="2"><li>监听事件API</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> server = http.createServer();</span><br><span class="line">server.on(<span class="string">'request'</span>, <span class="function">(<span class="params">req,res</span>) =></span> {});</span><br></pre></td></tr></table></figure><p>如果异步API后面的代码的执行依赖当前异步API的执行结果，但实际上后续代码在执行的时候异步API还没有返回结果，这个问题要怎么解决呢？</p><p>比如</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">fs.readFile(<span class="string">'./demo.txt'</span>,<span class="function">(<span class="params">err,result</span>) =></span> {});</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'文件读取结果'</span>)；</span><br><span class="line"><span class="comment">//需求： 依次读取A，B，C三个文件</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"><span class="comment">//回调地狱</span></span><br><span class="line">fs.readFile(<span class="string">'./1.txt'</span>,<span class="string">'utf8'</span>,<span class="function">(<span class="params">err,doc</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(doc);</span><br><span class="line"> fs.readFile(<span class="string">'./2.txt'</span>,<span class="string">'utf8'</span>,<span class="function">(<span class="params">err,doc</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(doc);</span><br><span class="line"> fs.readFile(<span class="string">'./3.txt'</span>,<span class="string">'utf8'</span>,<span class="function">(<span class="params">err,doc</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(doc);</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h4><p>Promise出现的目的是解决Node.js异步编程中回调地狱的问题</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> promise = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">if</span>(<span class="literal">true</span>) {</span><br><span class="line"> resolve({<span class="attr">name</span>: <span class="string">'zhangsan'</span>})</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> reject(<span class="string">'失败了'</span>)</span><br><span class="line"> }</span><br><span class="line"> },<span class="number">2000</span>);</span><br><span class="line">});</span><br><span class="line">promise.then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(result);)<span class="comment">// {name: 'zhangsan'}</span></span><br><span class="line"> .catch(<span class="function"><span class="params">error</span> =></span> <span class="built_in">console</span>.log(error);)<span class="comment">// 失败了</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> p1 = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =></span> {</span><br><span class="line"> fs.readFile(<span class="string">'./1.txt'</span>,<span class="string">'utf8'</span>,<span class="function">(<span class="params">err,result1</span>) =></span> {</span><br><span class="line"> resolve(result1);</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> p2 = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =></span> {</span><br><span class="line"> fs.readFile(<span class="string">'./2.txt'</span>,<span class="string">'utf8'</span>,<span class="function">(<span class="params">err,result2</span>) =></span> {</span><br><span class="line"> resolve(result2);</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> p3 = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>) =></span> {</span><br><span class="line"> fs.readFile(<span class="string">'./3.txt'</span>,<span class="string">'utf8'</span>,<span class="function">(<span class="params">err,result3</span>) =></span> {</span><br><span class="line"> resolve(result3);</span><br><span class="line"> })</span><br><span class="line"> })</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">p1().then(<span class="function">(<span class="params">r1</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(r1);</span><br><span class="line"> <span class="keyword">return</span> p2();</span><br><span class="line">})</span><br><span class="line">.then(<span class="function">(<span class="params">r2</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(r2);</span><br><span class="line"> <span class="keyword">return</span> p3();</span><br><span class="line">})</span><br><span class="line">.then(<span class="function">(<span class="params">r3</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(r3);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="异步函数-ES7"><a href="#异步函数-ES7" class="headerlink" title="异步函数(ES7)"></a>异步函数(ES7)</h4><p>异步函数是异步编程语法的终极解决方案，它可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fn = <span class="keyword">async</span>() => {};</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{};</span><br></pre></td></tr></table></figure><p>==async关键字==</p><ol><li>普通函数定义前加async关键字 普通函数变成异步函数</li><li> <font color=red>异步函数默认返回promise对象</font></li><li>在异步函数内部使用return关键字进行结果返回 结果会被包裹的promise对象中 return关键字代替了resolve方法</li><li>在异步函数内部使用throw关键字抛出程序异常</li><li>调用异步函数在链式调用then方法获取异步函数执行结果</li><li>调用异步函数再链式调用catch方法获取异步函数执行的错误信息</li></ol><p>==await关键字==</p><ol><li>await关键字只能出现在异步函数中</li><li>await promise await后面只能写promise对象 写其他类型的API是不可以的</li><li>await关键字可是暂停异步函数向下执行 直到promise返回结果</li></ol><hr><h3 id="Node-js全局对象global"><a href="#Node-js全局对象global" class="headerlink" title="Node.js全局对象global"></a>Node.js全局对象global</h3><p>在<font color=red>浏览器</font>中全局对象是<font color=red>window</font>，在<font color=red>Node</font>中全局对象是<font color=red>global</font></p><p>Node中全局对象下有以下方法，可以在任何地方使用，global可以省略</p><ul><li>console.log(). 在控制台输出</li><li>setTimeout() 设置超时定时器</li><li>clearTimeout() 清除超时定时器</li><li>setInterval() 设置间歇定时器</li><li>clearInterval() 清除间歇定时器</li></ul><hr><h2 id="数据库"><a href="#数据库" class="headerlink" title="数据库"></a>数据库</h2><h3 id="为什么要使用数据库"><a href="#为什么要使用数据库" class="headerlink" title="为什么要使用数据库"></a>为什么要使用数据库</h3><ul><li>动态网站中的数据都是存储在数据库中的</li></ul><h3 id="什么是数据库"><a href="#什么是数据库" class="headerlink" title="什么是数据库"></a>什么是数据库</h3><p>数据库即存储数据的仓库，可以将数据进行有序的分门别类的存储。它是独立于语言之外的软件，可以通过API去操作它</p><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/%E6%95%B0%E6%8D%AE%E5%BA%93.png" alt="image-20210831210836826"></p><hr><h3 id="数据库相关概念"><a href="#数据库相关概念" class="headerlink" title="数据库相关概念"></a>数据库相关概念</h3><p>在一个数据库软件中可以包含多个数据仓库，在每个数据仓库中可以包含多个数据集合，每个数据集合中可以包含多条文档(具体的数据)。</p><table><thead><tr><th>术语</th><th>解释说明</th></tr></thead><tbody><tr><td>database</td><td>数据库，mongoDB数据库软件中可以建立多个数据库</td></tr><tr><td>collection</td><td>集合，一组数据的集合，可以理解为JavaScript中的数组。表</td></tr><tr><td>document</td><td>文档，一条具体的数据，可以理解为JS中的对象。</td></tr><tr><td>field</td><td>字段，文档中的属性名称，可以理解为JS的对象属性</td></tr></tbody></table><hr><h3 id="Mongoose第三方包"><a href="#Mongoose第三方包" class="headerlink" title="Mongoose第三方包"></a>Mongoose第三方包</h3><ul><li>使用Node.js操作MongoDB数据库需要依赖Node.js第三方包mongoose</li><li>使用npm install mongose命令下载</li></ul><hr><h3 id="创建数据库"><a href="#创建数据库" class="headerlink" title="创建数据库"></a>创建数据库</h3><p>在MongoDB中<font color=red>不需要显式创建数据库</font>，如果正在使用的数据库不存在，<font color=red>mongoDB会自动创建</font></p><hr><h3 id="数据库增删改查"><a href="#数据库增删改查" class="headerlink" title="数据库增删改查"></a>数据库增删改查</h3><p>==创建表==</p><p>创建表分为两步，一是对<font color=red>表设定规则</font>,二是<font color=red>创建表</font>,创建mongoose.Schema构造函数的实例即可创建表</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设定表规则</span></span><br><span class="line"><span class="keyword">const</span> courseSchema = <span class="keyword">new</span> mongoose.Schema({</span><br><span class="line"> <span class="attr">name</span>: <span class="built_in">String</span>,</span><br><span class="line"> <span class="attr">author</span>: <span class="built_in">String</span>,</span><br><span class="line"> <span class="attr">isPublished</span>: <span class="built_in">Boolean</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">//创建表并应用规则</span></span><br><span class="line"><span class="keyword">const</span> Course = mongoose.model(<span class="string">'Course'</span>, courseSchema); <span class="comment">//courses</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建表实例并插入数据</span></span><br><span class="line"><span class="keyword">const</span> course = <span class="keyword">new</span> Course({</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'zhangsan'</span>,</span><br><span class="line"> <span class="attr">author</span>: <span class="string">'法外狂徒'</span>,</span><br><span class="line"> <span class="attr">isPublished</span>: <span class="literal">true</span></span><br><span class="line">});</span><br><span class="line"><span class="comment">//将数据保存到数据库中</span></span><br><span class="line">course.save();</span><br></pre></td></tr></table></figure><p>==插入数据第二种方式==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Course.create({<span class="attr">name</span>: <span class="string">'zhangsan'</span>,<span class="attr">author</span>: <span class="string">'法外狂徒'</span>,<span class="attr">isPublished</span>: <span class="literal">true</span>},<span class="function">(<span class="params">err,doc</span>) =></span> {</span><br><span class="line"> <span class="comment">//错误对象</span></span><br><span class="line"> <span class="built_in">console</span>.log(err)</span><br><span class="line"> <span class="comment">//当前插入数据</span></span><br><span class="line"> <span class="built_in">console</span>.log(doc)</span><br><span class="line">});</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Course.create({<span class="attr">name</span>: <span class="string">'zhangsan'</span>,<span class="attr">author</span>: <span class="string">'法外狂徒'</span>,<span class="attr">isPublished</span>: <span class="literal">true</span>})</span><br><span class="line">.then(<span class="function"><span class="params">doc</span> =></span> <span class="built_in">console</span>.log(doc))</span><br><span class="line">.catch(<span class="function"><span class="params">err</span> =></span> <span class="built_in">console</span>.log(err)) <span class="comment">//这个异步API返回promise对象所以支持异步函数的语法</span></span><br></pre></td></tr></table></figure><p>==mongoDB数据库导入数据==</p><p>mongoimport -d 数据库名称 -c 表名 –file 要导入的数据文件</p><p>找到mongodb数据库的安装目录，将安装目录下的bin目录放置在环境变量中</p><p>==查询数据==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//使用规则创建表</span></span><br><span class="line"><span class="keyword">const</span> User = mongoose.model(<span class="string">'User'</span>,userSchema);</span><br><span class="line"><span class="comment">//查询用户表中的所有数据 返回数组</span></span><br><span class="line">User.find().then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(result));</span><br><span class="line"><span class="comment">//find方法通过_id字段查询数据 返回数组</span></span><br><span class="line">User.find({<span class="string">'_id'</span>: <span class="string">'34jk4534j54'</span>}).then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(result))</span><br><span class="line"></span><br><span class="line"><span class="comment">//findOne方法查询数据 返回一条数据（对象）</span></span><br><span class="line">User.findOne({<span class="attr">name</span>: <span class="string">'李四'</span>}).then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(result))</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//匹配大于 小于</span></span><br><span class="line">User.find({<span class="attr">age</span>: {<span class="attr">$gt</span>: <span class="number">20</span>, <span class="attr">$lt</span>: <span class="number">50</span>}}).then(<span class="function"><span class="params">result</span> =></span> {<span class="built_in">console</span>.log(redult)})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//匹配包含 返回promise对象</span></span><br><span class="line">User.find({<span class="attr">hobbies</span>: {<span class="attr">$in</span>: [<span class="string">'足球'</span>]}}).then(<span class="function"><span class="params">result</span> =></span> {<span class="built_in">console</span>.log(result)})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//选择要查询的字段 返回promise对象</span></span><br><span class="line">User.find().select(<span class="string">'name email'</span>).then(<span class="function"><span class="params">result</span> =></span>...)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//将数据按照年龄进行排序 返回promise对象</span></span><br><span class="line">User.find().sort(<span class="string">'age'</span>).then(<span class="function"><span class="params">result</span> =></span>...) <span class="comment">//升序</span></span><br><span class="line">User.find().sort(<span class="string">'-age'</span>).then(<span class="function"><span class="params">result</span> =></span>...) <span class="comment">//降序 </span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//skip 跳过多少条数据 limit限制查询数量 返回promise对象</span></span><br><span class="line">User.find().skip(<span class="number">2</span>).limit(<span class="number">2</span>).then(<span class="function"><span class="params">result</span> =></span>...) <span class="comment">//跳过前两条 并且只显示两条</span></span><br></pre></td></tr></table></figure><p>==删除数据==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//删除单个 返回第一个匹配到的符合条件数据 返回promise对象</span></span><br><span class="line">Course.findOneAndDelete({<span class="string">'查询条件'</span>}).then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(result))</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//删除多个 返回 一个对象 {删除了几条数据:ok} 返回promise对象</span></span><br><span class="line">User.deleteMany({<span class="string">'查询条件'</span>}).then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(result))</span><br></pre></td></tr></table></figure><p>==更新数据==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//更新单个 返回promise对象</span></span><br><span class="line">User.updataOne({<span class="string">'查询条件'</span>},{<span class="string">'要修改的值'</span>}).then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(r))</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//更新多个</span></span><br><span class="line">User.updataMany({<span class="string">'查询条件'</span>}，{<span class="string">'要修改的值'</span>}).then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log())</span><br></pre></td></tr></table></figure><hr><h3 id="mongoose验证"><a href="#mongoose验证" class="headerlink" title="mongoose验证"></a>mongoose验证</h3><p>在创建集合规则时，可以设置当前字段的验证规则，验证失败就输入插入失败</p><ul><li>required：true 必传字段</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> postSchema = <span class="keyword">new</span> mongoose.Schema({</span><br><span class="line"> <span class="attr">title</span>: {</span><br><span class="line"> <span class="attr">type</span>: <span class="built_in">String</span>,</span><br><span class="line"> <span class="attr">required</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line"><span class="keyword">const</span> Post = mongoose.model(<span class="string">'Post'</span>,postSchema);</span><br><span class="line">Post.create({ }).then(<span class="function"><span class="params">result</span> =></span> <span class="built_in">console</span>.log(result)) <span class="comment">//报错</span></span><br></pre></td></tr></table></figure><ul><li>Required: [true, ‘请传入文章标题’]</li><li>Minlength: [2, ‘文章长度不能小于2’]</li><li>maxlength: [5, ‘文章长度最大不能’]</li><li>trim：true</li><li>min: 2 数值最小为2</li><li>max: 100 数值最大为100</li><li>type：Date. 事件类型</li><li>default: Date.now. 默认值</li><li>enum: [‘a’,’b’,’c’]. 列举出当前字段可以传的一些值. 里面有两个属性 value和message</li><li>validate: 自定义验证器</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">author: {</span><br><span class="line"> <span class="attr">type</span>: <span class="built_in">String</span>,</span><br><span class="line"> <span class="attr">validate</span>: {</span><br><span class="line"> <span class="attr">validator</span>: <span class="function"><span class="params">v</span> =></span> {</span><br><span class="line"> <span class="comment">//返回布尔值</span></span><br><span class="line"> <span class="comment">// v 要验证的值</span></span><br><span class="line"> <span class="keyword">return</span> v && v.length > <span class="number">4</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">message</span>: <span class="string">'传入的值不符合验证规则'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==拿错误信息==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.catch(<span class="function"><span class="params">error</span> =></span> {</span><br><span class="line"> <span class="comment">//获取错误信息对象</span></span><br><span class="line"> <span class="keyword">const</span> err = error.errors;</span><br><span class="line"> <span class="comment">//循环错误信息对象</span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> attr <span class="keyword">in</span> err) {</span><br><span class="line"> <span class="comment">//将错误信息打印到控制台</span></span><br><span class="line"> <span class="built_in">console</span>.log(err[attr][<span class="string">'message'</span>])</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h3 id="表关联"><a href="#表关联" class="headerlink" title="表关联"></a>表关联</h3><p> 通常<font color=red>不同表的数据之间是有关系的，</font>例如文章信息和用户信息存储在不同的集合中，但文章是某个用户发表的，要查询文章的所有信息包括发表用户，就需要用到表关联。</p><ul><li>使用id对表进行关联</li><li>使用populate方法进行关联表查询</li></ul><p>==表关联实现==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//用户表</span></span><br><span class="line"><span class="keyword">const</span> User = mongoose.model(<span class="string">'User'</span>,<span class="keyword">new</span> mongoose.Schema({</span><br><span class="line"> <span class="attr">name</span>:{<span class="attr">type</span>: <span class="built_in">String</span>}));</span><br><span class="line"><span class="comment">//文章表</span></span><br><span class="line"><span class="keyword">const</span> Post = mongoose.model(<span class="string">'Post'</span>,<span class="keyword">new</span> mongoose.Schema({</span><br><span class="line"><span class="attr">title</span>: {<span class="attr">type</span>: <span class="built_in">String</span>},</span><br><span class="line"><span class="comment">//使用ID将文章表和作者表进行关联</span></span><br><span class="line"><span class="attr">author</span>: {<span class="attr">type</span>: mongoose.Schema.Types.ObjectId, <span class="attr">ref</span>: <span class="string">'User'</span>}</span><br><span class="line">}));</span><br><span class="line"></span><br><span class="line"><span class="comment">//联合查询</span></span><br><span class="line">Post.find()</span><br><span class="line">.populate(<span class="string">'author'</span>)</span><br><span class="line">.then(<span class="function">(<span class="params">errr,result</span>) =></span> {<span class="built_in">console</span>.log(result)});</span><br><span class="line"></span><br></pre></td></tr></table></figure><hr><h2 id="模版引擎"><a href="#模版引擎" class="headerlink" title="模版引擎"></a>模版引擎</h2><p>模版引擎是Node.js的第三方模块</p><p>让开发者以更友好的方式拼接字符串，使项目代码更加清晰、更加易于维护</p><h4 id="art-template模版引擎"><a href="#art-template模版引擎" class="headerlink" title="art-template模版引擎"></a>art-template模版引擎</h4><ol><li>使用npm下载</li><li>使用const template = require(‘art-template’)引入模版引擎</li><li>告诉模版引擎要拼接的数据和模版在哪const html = template(‘模版路径’，数据)；</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//导入模版引擎模块</span></span><br><span class="line"><span class="keyword">const</span> template = <span class="built_in">require</span>(<span class="string">'art=template'</span>);</span><br><span class="line"><span class="comment">//将特定模版与特定数据进行拼接</span></span><br><span class="line"><span class="keyword">const</span> html = template(<span class="string">'./view/index.art'</span>,{</span><br><span class="line"> <span class="attr">data</span>: {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'zhangsan'</span>,</span><br><span class="line"> <span class="attr">age</span>: <span class="number">20</span></span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><div></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">span</span>></span>{{data.name}}<span class="tag"></<span class="name">span</span>></span></span></span><br><span class="line"><sapn>{{data.age}}</span></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><hr><h4 id="模版语法"><a href="#模版语法" class="headerlink" title="模版语法"></a>模版语法</h4><ul><li>art-template同时支持两种模版语法：<font color=red>标准语法</font>和<font color=red>原始语法</font></li><li>标准语法可以让模版更容易读写，原始语法具有强大的逻辑处理能力</li><li>标准语法： </li><li>原始语法：<%= 数据 %></li></ul><p>==输出==</p><p>将某项数据输出在模版中，标准语法和原始语法如下：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//标准语法</span></span><br><span class="line">{{数据}}</span><br><span class="line"><span class="comment">//原始语法</span></span><br><span class="line"><%= 数据 %></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//原文输出 解析标签</span></span><br><span class="line">{{@ 数据 }}</span><br><span class="line"><%- 数据 %></span><br></pre></td></tr></table></figure><p>==条件判断==</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">//标准语法</span><br><span class="line">{{if age > 18}}</span><br><span class="line">年龄大于18</span><br><span class="line">{{else if age <15 }}</span><br><span class="line">年龄小于15</span><br><span class="line">{{else}}</span><br><span class="line"> 年龄不符合要求</span><br><span class="line">{{/if}}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">//原始语法</span><br><span class="line"><%if(age > 18){ %></span><br><span class="line"> 年龄大于18</span><br><span class="line"><% }else if(age < 15){ %></span><br><span class="line"> 年龄小于15</span><br><span class="line"><% } else { %></span><br><span class="line"> 年龄不符合要求</span><br><span class="line"><% } %></span><br></pre></td></tr></table></figure><p>==循环==</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//标准语法</span><br><span class="line">{{each target}}</span><br><span class="line">{{$index}} {{$value}}</span><br><span class="line">{{/each}}</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//原始语法</span><br><span class="line"><% for(var i = 0; i<target.length; i++) { %></span><br><span class="line"><%= i %><%= target[i] %></span><br><span class="line"><% } %></span><br></pre></td></tr></table></figure><p>==子模版==</p><p>使用子模版可以将网站公共区块(头部、底部)抽离到单独的文件中</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//标准语法</span></span><br><span class="line">{{include <span class="string">'./header.art'</span>}}</span><br><span class="line"><span class="comment">//原始语法</span></span><br><span class="line"><% include(<span class="string">'./header.art'</span>) %></span><br></pre></td></tr></table></figure><p>==模版继承==</p><p>使用模版集成可以将网站HTML骨架抽离到单独的文件中，其他页面模版可以继承骨架文件</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><!doctype <span class="meta-keyword">html</span>></span></span><br><span class="line"><span class="tag"><<span class="name">html</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">'utf-8'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">title</span>></span>HTML骨架模版<span class="tag"></<span class="name">title</span>></span></span><br><span class="line"> {{block 'head'}} {{/block}}</span><br><span class="line"> <span class="tag"></<span class="name">head</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> {{block 'content'}} {{/block}}</span><br><span class="line"> <span class="tag"></<span class="name">body</span>></span></span><br><span class="line"><span class="tag"></<span class="name">html</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">//index.art 首页模版</span><br><span class="line">{{extend './layout.art'}}</span><br><span class="line">{{block 'head'}} <span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">'stylesheet'</span> <span class="attr">href</span>=<span class="string">'custom.css'</span>></span> {{/block}}</span><br></pre></td></tr></table></figure><p>==模版设置==</p><ol><li>向模版中导入变量 template.defaults.imports.变量名 = 变量值。处理时间</li></ol><hr><h2 id="Express框架"><a href="#Express框架" class="headerlink" title="Express框架"></a>Express框架</h2><h3 id="Express框架是什么"><a href="#Express框架是什么" class="headerlink" title="Express框架是什么"></a>Express框架是什么</h3><p>Express是一个基于<font color=red>Node平台</font>的<font color=red>web应用开发框架</font>,它提供了一系列的强大特性，帮助你创建各种web应用，我们可以使用 npm install express 命令下载</p><hr><h3 id="Express特性"><a href="#Express特性" class="headerlink" title="Express特性"></a>Express特性</h3><ul><li>提供了方便简洁的路由定义方式</li><li>对获取http请求参数进行了简化处理</li><li>对模版引擎支持程度高，方便渲染动态HTML页面</li><li>提供了中间件机制有效控制HTTP请求</li><li>拥有大量第三方中间件对功能进行扩展</li></ul><hr><h3 id="中间件"><a href="#中间件" class="headerlink" title="中间件"></a>中间件</h3><p>中间件就是一堆方法，可以接受客户端发来的请求、可以对请求作出响应，也可以将请求继续交给下一个中间件继续处理<img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/%E4%B8%AD%E9%97%B4%E4%BB%B6.png" alt="image-20210902160437524"></p><ul><li>中间件主要由两部分构成，<font color=red>中间件方法</font>以及<font color=red>请求处理函数</font></li><li>中间件方法由Express提供，负责拦截请求，请求处理函数由开发人员提供，负责处理请求</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">app.get(<span class="string">'请求路径'</span>,<span class="string">'处理函数'</span>) <span class="comment">//接收并处理get请求</span></span><br><span class="line">app.post(<span class="string">'请求路径'</span>,<span class="string">'处理函数'</span>) <span class="comment">//接收并处理post请求</span></span><br></pre></td></tr></table></figure><ul><li>可以针对同一个请求设置多个中间件，对同一个请求进行多次处理</li><li>默认情况下，请求从上到下一次匹配中间件，一旦匹配成功，终止匹配</li><li>可以调用next方法将请求的控制权交给下一个中间件，知道遇到结束请求的中间件</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">app.get(<span class="string">'/request'</span>,<span class="function">(<span class="params">req, res, next</span>) =></span> {</span><br><span class="line"> req.name = <span class="string">'zhangsan'</span>;</span><br><span class="line"> next();</span><br><span class="line">})</span><br><span class="line">app.get(<span class="string">'/request'</span>,<span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line"> res.send(req.name);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="app-use中间件用法"><a href="#app-use中间件用法" class="headerlink" title="app.use中间件用法"></a>app.use中间件用法</h4><p>app.use匹配所有的请求方式，可以直接传入请求处理函数，代表接收所有的请求</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">app.use(<span class="function">(<span class="params">req, res, next</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(req.url);</span><br><span class="line"> next();</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>app.use第一个参数页可以传入请求地址，代表不论什么请求方式，只要是这个请求地址就接收这个请求</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">app.use(<span class="string">'/admin'</span>,<span class="function">(<span class="params">req, res, next</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(req.url);</span><br><span class="line"> next();</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="中间件应用"><a href="#中间件应用" class="headerlink" title="中间件应用"></a>中间件应用</h4><ol><li>路由保护，客户端在访问需要登录的页面时，可以先使用中间件判断用户登录状态，用户如果未登录，则拦截请求，直接响应，禁止用户进入需要登录的页面</li><li>网站维护公告，在所有路由的最上面定义接收所有请求的中间件，直接为客户端作出响应</li><li>定义404页面</li></ol><hr><h4 id="错误处理中间件"><a href="#错误处理中间件" class="headerlink" title="错误处理中间件"></a>错误处理中间件</h4><p>在程序执行的过程中，不可避免的会出现一些无法预料的错误，比如文件读取失败，数据库连接失败。</p><p>错误处理中间件是一个集中处理错误的地方。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">app.get(<span class="string">'/'</span>,<span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line"> <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'程序发生未知错误'</span>); <span class="comment">//因为这里是同步代码所以可以直接触发下面的错误处理中间件</span></span><br><span class="line"> <span class="comment">// res.send('程序正常执行'); </span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">app.use(<span class="function">(<span class="params">err, req, res, next</span>) =></span> {</span><br><span class="line"> res.status(<span class="number">500</span>).send(err.message); </span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>当程序出错时(异步API)，调用next()方法，并且将错误信息通过参数的形式传递给next()方法，即可触发错误处理中间件</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">app.get(<span class="string">'/index'</span>,<span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line"> fs.readFile(<span class="string">'xxxx.txt'</span>,<span class="function">(<span class="params">err, data</span>) =></span> {</span><br><span class="line"> <span class="keyword">if</span>(err) { </span><br><span class="line"> next(err);</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">app.use(<span class="function">(<span class="params">err, req, res, next</span>) =></span> {</span><br><span class="line"> res.status(<span class="number">500</span>).send(err.message);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="捕获错误"><a href="#捕获错误" class="headerlink" title="捕获错误"></a>捕获错误</h4><p>在node.js中，异步API的错误信息都是通过回调函数获取的，支持promise对象的异步API发生错误可以直接通过catch方法捕获。</p><p>异步函数执行如果发生错误要如何捕获错误呢？</p><p>try catch 可以捕获异步函数以及其他同步代码在执行过程中发生的错误，但是不能捕获其他类型API发生的错误</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">app.get(<span class="string">'/'</span>, <span class="keyword">async</span> (req, res, next) => {</span><br><span class="line"> <span class="keyword">try</span> {</span><br><span class="line"> <span class="keyword">await</span> User.find({<span class="attr">name</span>: <span class="string">'zhangsan'</span>})</span><br><span class="line"> }<span class="keyword">catch</span>(ex) {</span><br><span class="line"> next(ex);</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="构建模块化路由"><a href="#构建模块化路由" class="headerlink" title="构建模块化路由"></a>构建模块化路由</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>)</span><br><span class="line"><span class="keyword">const</span> home = express.Route();</span><br><span class="line"><span class="comment">//将路由和请求路径进行匹配</span></span><br><span class="line">app.use(<span class="string">'/home'</span>,home);</span><br><span class="line"><span class="comment">//在hoome路由下继续创建路由 二级路由</span></span><br><span class="line">home.get(<span class="string">'/index'</span>, <span class="function">() =></span> {</span><br><span class="line"> <span class="comment">// /home/index</span></span><br><span class="line"> res.send(<span class="string">'欢迎来到博客展示页面'</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="GET参数的获取"><a href="#GET参数的获取" class="headerlink" title="GET参数的获取"></a>GET参数的获取</h4><p>Express框架中使用<font color=red>req.query</font>即可获取GET参数，框架内部会将GET请求参数转换为对象并返回</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//接收地址栏中问号后面的参数</span></span><br><span class="line"><span class="comment">//例如：http://localhost:3000/?name=zhangsan&age=30</span></span><br><span class="line">app.get(<span class="string">'/'</span>, <span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(req.qurey); <span class="comment">// {'name': 'zhangsan', 'age': 20}</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="POST参数的获取"><a href="#POST参数的获取" class="headerlink" title="POST参数的获取"></a>POST参数的获取</h4><p>Express中接收post请求参数需要借助第三方包 body-parser</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> bodyParser = <span class="built_in">require</span>(<span class="string">'body-parser'</span>);</span><br><span class="line"><span class="comment">//创建网站服务器</span></span><br><span class="line"><span class="keyword">const</span> app = express();</span><br><span class="line"></span><br><span class="line"><span class="comment">//ues方法拦截所有请求</span></span><br><span class="line"><span class="comment">//extended: false 方法内部使用queryString模块处理请求参数的格式</span></span><br><span class="line"><span class="comment">//extended: true 方法内部使用第三方模块qs处理请求参数的格式</span></span><br><span class="line">app.use(bodyParser.urlencoded({<span class="attr">extended</span>: <span class="literal">false</span>}));</span><br><span class="line"></span><br><span class="line"><span class="comment">//请求接收</span></span><br><span class="line">app.post(<span class="string">'/add'</span>,<span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line"> <span class="comment">//接收请求参数</span></span><br><span class="line"> res.send(req.body);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="Express路由参数"><a href="#Express路由参数" class="headerlink" title="Express路由参数"></a>Express路由参数</h4><p>另外一种传递以及获取参数的方式 ：是占位符</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">app.get(<span class="string">'/index/:id/:name/:age'</span>, <span class="function">(<span class="params">req, res,</span>) =></span> {</span><br><span class="line"> res.send(req.params); <span class="comment">// {id: 1, name: 'zhangsan', age: 20}</span></span><br><span class="line">})</span><br><span class="line"><span class="attr">localhost</span>:<span class="number">3000</span>/index/<span class="number">1</span>/zhangsan/<span class="number">20</span></span><br></pre></td></tr></table></figure><hr><h4 id="静态资源的处理"><a href="#静态资源的处理" class="headerlink" title="静态资源的处理"></a>静态资源的处理</h4><p>通过Express内置的<font color=red>express.static</font>>可以方便的托管静态文件，例如img、css、js文件等</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">app.use(express.static(<span class="string">'public'</span>));</span><br></pre></td></tr></table></figure><p>现在，public目录下面的文件就可以访问了</p><ul><li><a href="http://localhost:3000/images/kitten.jpg">http://localhost:3000/images/kitten.jpg</a> </li><li><a href="http://localhost:3000/css/style.css">http://localhost:3000/css/style.css</a> </li><li><a href="http://localhost:3000js/app.js">http://localhost:3000js/app.js</a></li><li><a href="http://localhost:3000/images/bg.png">http://localhost:3000/images/bg.png</a> </li><li><a href="http://localhost:3000/hello.html">http://localhost:3000/hello.html</a></li></ul><hr><h4 id="模版引擎-1"><a href="#模版引擎-1" class="headerlink" title="模版引擎"></a>模版引擎</h4><ul><li>为了使art-template模版更好的和Express框架配合，模版引擎官方在原art-templata模版引擎的基础上封装了express-art-template</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//当渲染后缀为art的模版时 使用express-art-template</span></span><br><span class="line">app.engine(<span class="string">'art'</span>,<span class="built_in">require</span>(<span class="string">'express-art-template'</span>));</span><br><span class="line"><span class="comment">//设置模版存放目录</span></span><br><span class="line">app.set(<span class="string">'views'</span>, path.join(__dirname,<span class="string">'views'</span>));</span><br><span class="line"><span class="comment">//渲染模版时不写后缀 默认拼接art后缀</span></span><br><span class="line">app.set(<span class="string">'view engine'</span>, <span class="string">'art'</span>);</span><br><span class="line">app.get(<span class="string">'/'</span>, <span class="function">(<span class="params">req, res</span>) =></span> {</span><br><span class="line"> <span class="comment">//渲染模版</span></span><br><span class="line"> res.render(<span class="string">'index'</span>, {</span><br><span class="line"> <span class="attr">msg</span>: <span class="string">'sdfsdfsdfd'</span></span><br><span class="line"> });</span><br><span class="line"> <span class="comment">//1. render方法会帮我们拼接模版后缀</span></span><br><span class="line"> <span class="comment">//2. render方法会帮我们告诉art-template哪一个模版和哪一个数据拼接</span></span><br><span class="line"> <span class="comment">//3. 返回拼接好的结果并直接响应给客户端</span></span><br><span class="line"> <span class="comment">//4. 第二个参数是为模版准备的数据</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li><p>app.locals对象</p><p>将变量设置到app.locals对象下面，这个数据在所有的模版中都可以获取到</p></li></ul><hr><h4 id="密码加密bcrypt"><a href="#密码加密bcrypt" class="headerlink" title="密码加密bcrypt"></a>密码加密bcrypt</h4><p>哈希加密是单程加密方式： 1234 => abcd</p><p>在加密的密码中加入随机字符串可以增加密码被破解的难度</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//导入bcrypt模块</span></span><br><span class="line"><span class="keyword">const</span> bcrypt = <span class="built_in">require</span>(<span class="string">'bcrypr'</span>);</span><br><span class="line"><span class="comment">//生成随机字符串 gen => generate 生成salt盐</span></span><br><span class="line"><span class="keyword">let</span> salt = awiait bcrypt.genSalt(<span class="number">10</span>);</span><br><span class="line"><span class="comment">//使用随机字符串对密码进行加密</span></span><br><span class="line"><span class="keyword">let</span> pass = <span class="keyword">await</span> bcrypt.hash(<span class="string">'明文密码'</span>, salt);</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//密码比对</span></span><br><span class="line"><span class="keyword">let</span> isEqual = <span class="keyword">await</span> bcrypt.compare(<span class="string">'明文密码'</span>，<span class="string">'加密密码'</span>)；</span><br></pre></td></tr></table></figure><hr><h2 id="cookie与session"><a href="#cookie与session" class="headerlink" title="cookie与session"></a>cookie与session</h2><p>==cookie==：浏览器在电脑硬盘中开辟的一块空间，主要供服务器端存储数据</p><ul><li>cookie中的数据是以域名的形式进行区分的</li><li>cookie中的数据是有过期时间的，超过时间数据就会被浏览器自动删除(关闭浏览器也会删除)</li><li>cookie中的数据会随着请求被自动发送到服务器端</li></ul><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/cookie.png" alt="image-20210905093844710"></p><p>==session==：实际上就是一个对象，存储在服务器端的内存中，在session对象中也可以存储多条数据，每一条数据都有一个sessionid作为唯一标识</p><p>==cookie与session实现登录==</p><p><img src="/Users/stefan/Desktop/Typora%E5%9B%BE%E7%89%87/JS%E9%AB%98%E7%BA%A7/cookie%E4%B8%8Esession.png" alt="image-20210905094345513"></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> session = <span class="built_in">require</span>(<span class="string">'express-session'</span>);</span><br><span class="line">app.use(session({<span class="attr">secret</span>: <span class="string">'secret key'</span>}));</span><br></pre></td></tr></table></figure><hr><h2 id="项目包含的知识点"><a href="#项目包含的知识点" class="headerlink" title="项目包含的知识点"></a>项目包含的知识点</h2><h3 id="数据分页"><a href="#数据分页" class="headerlink" title="数据分页"></a>数据分页</h3><p>当数据库中的数据非常多时，数据需要分批次显示，这时就需要用到数据分页功能</p><p>分页功能核心要素：</p><ol><li>当前页，用户通过点击上一页或者页码产生，客户端通过get参数传递到服务器</li><li>总页数，根据总页数判断当前页是否为最后一页，根据判断结果做响应操作</li></ol><table><thead><tr><th>中数据条数</th><th>每页显示数据条数</th><th>总页数</th></tr></thead><tbody><tr><td>50</td><td>5</td><td>10</td></tr><tr><td>52</td><td>5</td><td>11</td></tr></tbody></table><p>总页数：Math.ceil(总数据条数/每页显示数据条数)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">limit(<span class="number">2</span>) <span class="comment">//limit限制查询数量 传入每页显示的数据数量</span></span><br><span class="line">skip(<span class="number">1</span>) <span class="comment">//skip跳过多少条数据 传入显示数据的开始位置</span></span><br></pre></td></tr></table></figure><p> 数据开始查询位置= （当前页-1）x 每页显示的数据条数</p><hr><h3 id="formodable第三方包"><a href="#formodable第三方包" class="headerlink" title="formodable第三方包"></a>formodable第三方包</h3><p>作用：解析表单，支持get请求参数，post请求参数、文件上传</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入formidable模块</span></span><br><span class="line"><span class="keyword">const</span> formidable = <span class="built_in">require</span>(<span class="string">'formidable'</span>);</span><br><span class="line"><span class="comment">//创建表单解析对象</span></span><br><span class="line"><span class="keyword">const</span> form = <span class="keyword">new</span> formidable.IncomingForm();</span><br><span class="line"><span class="comment">//设置文件上传路径</span></span><br><span class="line">form.uploadDir = <span class="string">'/my/dir'</span>;</span><br><span class="line"><span class="comment">//是否保留表单上传文件的扩展名</span></span><br><span class="line">form.keepExtensions = <span class="literal">true</span>;</span><br><span class="line"><span class="comment">//对表单进行解析</span></span><br><span class="line">form.parse(req, <span class="function">(<span class="params">err, fields, files</span>) =></span> {</span><br><span class="line"> <span class="comment">//fields 存储普通请求参数</span></span><br><span class="line"> <span class="comment">//files 存储上传的文件信息</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h3 id="数据分页mongoose-sex-page"><a href="#数据分页mongoose-sex-page" class="headerlink" title="数据分页mongoose-sex-page"></a>数据分页mongoose-sex-page</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> pagination = <span class="built_in">require</span>(<span class="string">'mongoose-sex-page'</span>);</span><br><span class="line">pagination(集合构造函数).page(<span class="number">1</span>).size(<span class="number">20</span>).display(<span class="number">8</span>).exec();</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> JS </category>
</categories>
<tags>
<tag> JS </tag>
</tags>
</entry>
<entry>
<title>CSS</title>
<link href="/2021/07/31/CSS/"/>
<url>/2021/07/31/CSS/</url>
<content type="html"><</p><p>解决方案：</p><ol><li>可以为父元素定义上边框</li><li>可以为父盒子定义内边距</li><li>可以为父盒子添加overflow：hidden</li></ol><p><font color=red>浮动、固定、绝对定位的盒子不会有塌陷问题</font></p><p><strong>清除内外边距</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">* {</span><br><span class="line"> <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><font color=red>注意：</font>行内元素为了照顾兼容性，尽量只设置左右内外边距(上下不起效果)，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。</p><p><font color=red>总结：</font></p><p>什么时候用padding什么时候用margin？</p><p>padding会撑大盒子，用的时候要注意。</p><hr><p><strong>CSS3增加属性属性</strong></p><ul><li><p><strong>圆角边框(border-radius)</strong></p><p><font color=red>radius半径(圆的半径)原理:</font>(椭圆)与边框的交集形成圆角效果</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">border-radius</span>:length;</span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">50%</span>; //如果盒子是正方形，得到一个圆形</span><br></pre></td></tr></table></figure><p></p><ul><li>参数值可以为<font color=red>数值</font>或<font color=red>百分比</font>的形式</li><li>如果是<font color=red>正方形</font>，想要设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%</li><li><font color=red>如果是个矩形，设置为高度的一半就可以做圆角矩形</font></li><li>该属性是一个简写属性，可以跟四个值，分别代表<font color=red>左上角、右上角、右下角、左下角</font></li><li>分开写：border-top-left-radius、border-top-right-radius、border-bottom-rigth-radius和badder-bottom-left-radius</li></ul></li><li><p><strong>盒子阴影(box-shadow)</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">box-shadow</span>:h-shadow v-shadow blur spread color inset;</span><br></pre></td></tr></table></figure><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>h-shadow</td><td>必需。水平阴影的位置，允许负值。</td></tr><tr><td>v-shadow</td><td>必需。垂直阴影的位置，允许负值。</td></tr><tr><td>blur</td><td>可选。模糊距离。</td></tr><tr><td>spread</td><td>可选。阴影的尺寸。</td></tr><tr><td>color</td><td>可选。阴影的颜色。</td></tr><tr><td>inset</td><td>可选。将外部阴影(outset)改为内部阴影。</td></tr></tbody></table><p><font color=red>注意：</font></p><ol><li>默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效</li><li><font color=red>盒子阴影不占用空间，不会影响其他盒子排列</font></li></ol></li><li><p><strong>文字阴影（text-shadow）</strong></p></li></ul><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>h-shadow</td><td>必需。水平阴影的位置。允许负值。</td></tr><tr><td>v-shadow</td><td>必需。垂直阴影的位置。允许负值</td></tr><tr><td>blur</td><td>可选。模糊距离</td></tr><tr><td>color</td><td>可选。阴影颜色。</td></tr></tbody></table><hr><h2 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h2><p><strong>CSS提供了三种传统布局方式(简单说，就是盒子如何进行排列顺序)</strong></p><ol><li><p>普通流(标准流)</p></li><li><p>浮动</p></li><li><p>定位</p></li></ol><ul><li><font color=red>标准流(普通流/文档流)</font></li></ul><p>所谓标准流：就是标签按照规定好默认方式排列(块级元素从上到下，行内元素从左到右碰到父元素边缘自动换行)</p><ul><li><strong>为什么需要浮动</strong></li></ul><p>总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签认的排列方式。</p><p>浮动最典型的应用：可以让多个块级元素一行内排列显示</p><p>网页布局第一准则：<font color=red>多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动</font></p><ul><li><strong>什么是浮动</strong></li></ul><p><font color=red>float</font>属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含或另一个浮动框边缘</p><p>选择器</p><ul><li><strong>浮动特性</strong></li></ul><ol><li><p>浮动元素会脱离标准流(脱标)</p><p><font color=red>浮动的盒子不再保留原来的位置</font></p><p></p></li><li><p>浮动的元素会一行内显示并且元素顶部对齐</p></li></ol><p></p><p><font color=red>注意：如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。</font></p><ol start="3"><li>浮动的元素会具有行内块元素的特性</li></ol><p>任何元素都可以浮动，不管它先前是什么模式的元素，添加浮动之后具有行内块元素相似的特性。</p><p><font color=red>如果块级盒子没有设置宽度，默认宽度和父级宽度一样宽，但是添加浮动后，它的大小根据内容来决定。</font></p><p><font color=red>浮动的盒子中间是没有缝隙的，是紧挨着一起的。</font></p><ul><li><strong>浮动布局注意点</strong></li></ul><ol><li><p>先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置</p></li><li><p>一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动</p><p><font color=red>浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流</font>(因为前面的盒子独占一行，浮动的盒子自身不占有原来的位置，后面的盒子就会跑到下面)</p></li></ol><ul><li><p><strong>为什么要清除浮动</strong></p><p>由于父级盒子很多情况下，不方便给高度(需要子盒子撑开父盒子)，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。</p><ol><li>父级没高度</li><li>子盒子浮动了</li><li>影响下面布局了</li></ol></li><li><p><strong>清除浮动</strong></p><ul><li>如何父盒子本身有高度，则不需要清除浮动。</li><li>清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。</li><li>清除浮动就是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 {<span class="attribute">clear</span>：属性值} <span class="attribute">clear</span>：both；</span><br></pre></td></tr></table></figure></li><li><p><strong>清除浮动的方法</strong></p></li></ul><ol><li><p>额外标签法也成隔墙法</p><p>在浮动元素末尾添加一个空的标签。或者其他标签。<font color=red>必须是块级元素</font></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">"clear:both"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></li><li><p>给父级添加overflow属性</p><p>给父级添加overflow属性，属性值设为hidden、auto或scll。</p><p><font color=red>缺点时无法显示溢出部分。</font></p></li><li><p>父级添加after伪元素</p><p>:after方式时额外标签法的升级版，也是给父元素添加</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span>:after {</span><br><span class="line"> content:<span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>:block;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">0</span>;</span><br><span class="line"> <span class="attribute">clear</span>:both;</span><br><span class="line"> visbility:hidden;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span> { </span><br><span class="line"> *zoom:<span class="number">1</span>; //为了兼容 ie6 ie7</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>父级添加双伪元素</p><p>也是给父元素添加</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clearfix</span>:before,.clearfix:after {</span><br><span class="line"> content:<span class="string">''</span>;</span><br><span class="line"> <span class="attribute">display</span>:table;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span>:after {</span><br><span class="line"> clear:both;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span> {</span><br><span class="line"> *zoom:<span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><hr><h2 id="CSS属性书写顺序-重点"><a href="#CSS属性书写顺序-重点" class="headerlink" title="CSS属性书写顺序(重点)"></a>CSS属性书写顺序(重点)</h2><ol><li>布局定位属性：display / position / float / clear / visibility / overflow</li><li>自身属性: width / height / margin / padding / border / background</li><li>文本属性: color / font / text-decoration / text-align / vertical-align / white-space / break-word</li><li>其他属性(CSS3): content / cursor / border-radius / box-shadow / text-shadow / background:linear-fradient</li></ol><hr><h2 id="CSS页面布局整体思路"><a href="#CSS页面布局整体思路" class="headerlink" title="CSS页面布局整体思路"></a>CSS页面布局整体思路</h2><ol><li>必需确定页面的版心(可视区)</li><li>分析页面中的行模块，以及每个模块中的列模块。其实页面布局第一准则</li><li>一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则</li><li>制作HTML结构。我们只是遵循，先有结构，后有样式的原则。结构永远最重要。</li><li>先理清楚布局结构，在写代码尤为重要，这需要我们多写多积累</li></ol><hr><h2 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h2><p><strong>为什么需要定位</strong></p><p>总结：定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。</p><ul><li><p><strong>定义</strong></p><p>将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。</p></li><li><p><strong>定位的组成</strong></p><p><strong>定位=定位模式+边偏移</strong></p><p><font color=red>定位模式</font>用于指定一个元素在文档中的定位方式。边偏移则巨鼎了该元素的最终位置。</p></li><li><p><strong>定位模式</strong></p></li></ul><table><thead><tr><th>值</th><th>语意</th></tr></thead><tbody><tr><td>static</td><td>静态定位</td></tr><tr><td>relative</td><td>相对定位</td></tr><tr><td>absolute</td><td>绝对定位</td></tr><tr><td>fixd</td><td>固定定位</td></tr></tbody></table><ul><li><p><strong>静态定位static</strong></p><p>静态定位时元素的默认定位方式，无定位的意思。</p><p>语法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 {<span class="attribute">position</span>：static；}</span><br></pre></td></tr></table></figure><ul><li>静态定位按照标准流的特性摆放位置，它没有偏移量</li><li>静态定位在布局时很少用到</li></ul></li><li><p><strong>相对定位relative</strong></p><p>相对定位时元素在移动位置的时候，是相对以它原来的位置来说的。</p><p>语法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 {<span class="attribute">position</span>:relative;}</span><br></pre></td></tr></table></figure><ul><li>它是相对于自己原来的位置来移动的(<font color=red>移动位置的时候参照点事自己原来的位置</font>)</li><li>原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(<font color=red>不脱标，继续保留原来的位置</font>)</li><li>相对定位并没有脱标，它最典型的应用是给绝对定位当爹(限制固定定位)</li></ul></li><li><p><strong>绝对定位absolute</strong></p><p>绝对定位是元素在移动位置的时候，是相对它祖先元素来说的</p><p>语法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 {<span class="attribute">position</span>:absolute;}</span><br></pre></td></tr></table></figure><ul><li>如果<font color=red>如果没有祖先元素</font>或者<font color=red>祖先元素没有定位</font>，则以浏览器为准定位(Document文档)</li><li>如果祖元素有定位(<font color=red>相对、绝对、固定定位</font>)，则以<font color=red>最近一级</font>的有定位祖元素为参考点移动位置。</li><li><font color=red>绝对定位不再占有原来的位置</font>(脱标)</li></ul></li><li><p><strong>子绝父相的由来</strong></p><ol><li>子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子。</li><li>父盒子需要加固定定位限制子盒子在父盒子内显示。</li><li>父盒子布局时，需要占有位置，因此父亲只能是相对定位。</li></ol></li><li><p><strong>固定定位</strong></p><p>固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。</p><p>语法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器：{<span class="attribute">position</span>:fixed;}</span><br></pre></td></tr></table></figure><ul><li><strong>以浏览器的可视窗口为参照点移动元素。</strong></li><li>跟父元素没有任何关系。</li><li>不随滚动条滚动。</li><li><strong>不占有原来的位置(脱标)。</strong></li><li>固定定位可以看作是一种特殊的绝对定位。</li></ul><p><font color=red>固定定位小技巧:固定在版心右侧位置。</font></p><p>小算法：</p><ol><li>让固定定位的盒子left:50% 走到浏览器可视区(也可看作版心)一半的位置。</li><li>让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置。</li><li>就可以让固定定位的盒子贴着版心右侧对齐了。</li></ol></li><li><p><strong>粘性定位sticky</strong></p><p>粘性定位可以被认为是相对定位和固定定位的混合。sticky 粘性的</p><p>语法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 {<span class="attribute">position</span>:sticky; <span class="attribute">top</span>:<span class="number">10px</span>;}</span><br></pre></td></tr></table></figure><ul><li>以浏览器可视窗口为参照点移动元素(固定定位特点)</li><li>粘性定位<font color=red>占有原来的位置</font>(相对定位特点)</li><li>必需添加top、left、right、bottom其中一个才有效</li></ul></li><li><p><strong>定位总结</strong></p></li></ul><table><thead><tr><th>定位模式</th><th>是否脱标</th><th>移动位置</th><th>是否常用</th></tr></thead><tbody><tr><td>static 静态定位</td><td>否(占有位置)</td><td>不能使用边偏移</td><td>很少</td></tr><tr><td>relative 相对定位</td><td>否(占有位置)</td><td>相对自身位置移动</td><td>常用</td></tr><tr><td>absolute 绝对定位</td><td>是(不占有位置)</td><td>带有定位的父级</td><td>常用</td></tr><tr><td>fixed 固定定位</td><td>是(不占有位置)</td><td>浏览器可视区</td><td>常用</td></tr><tr><td>sticky 粘性定位</td><td>否(占有位置)</td><td>浏览器可视区</td><td>很少</td></tr></tbody></table><ul><li><p><strong>定位叠放顺序</strong></p><p>在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用<font color=red>z-index</font>来控制盒子的前后次序(z轴)</p><p>语法：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">选择器 {<span class="attribute">z-index</span>:<span class="number">1</span>;}</span><br></pre></td></tr></table></figure><ul><li>数值可以时正整数、负整数或0，默认时auto，数值越大，盒子月靠上。</li><li>如果属性值相同，则按照书写顺序，后来居上。</li><li>数字后面不能加单位</li><li>只有定位的盒子才有z-index属性</li></ul></li><li><p><strong>定位的拓展</strong></p><ol><li><font color=red>绝对定位的盒子水平居中</font></li></ol><p>加了绝对定位的盒子不能通过<font color=red>margin:0 auto</font>水平居中，但是可以通过一下计算方法实现水平和垂直居中</p><p><code>1 </code> left:50%; 让盒子的左侧移动到父级元素的水平中心位置</p><p><code>2</code> margin-left:-100px; 让盒子想左移动自身宽度的一半</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">position</span>:absolute;</span><br><span class="line"> <span class="attribute">left</span>:<span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">margin-left</span>:-<span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">top</span>:<span class="number">50%</span>;</span><br><span class="line"> <span class="attribute">margin-top</span>:<span class="number">100px</span>;</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line"> heigth:<span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background</span>:yellow;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ol start="2"><li><p><font color=red>定位特殊特性</font></p><p><strong>绝对定位和固定定位也和浮动类似。</strong></p></li></ol><p><code>1</code> 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度。</p><p><code>2</code> 块级元素添加距对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小</p><ol start="3"><li><font color=red>脱标的盒子不会触发外边距塌陷</font></li></ol><p><strong>浮动元素、绝对定位(固定定位元素都不会触发外边距合并的问题</strong></p><ol start="4"><li><font color=red>绝对定位(固定定位)会完全压住盒子</font></li></ol><ul><li><p>浮动的元素不会压住下面标准流的文字</p><p>浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果。</p></li><li><p>绝对定位(固定定位)会压住下面标准流的所有内容</p></li></ul></li></ul><hr><h2 id="网页布局总结"><a href="#网页布局总结" class="headerlink" title="网页布局总结"></a>网页布局总结</h2><p> 1.标准流</p><p> 可以让盒子是给你下排列或者左右排列，<font color=red>垂直的块级盒子显示记忆用标准流布局</font></p><p> 2.浮动</p><p> 可以让多个块级元素一行显示或者左右对齐盒子，<font color=red>多个块级盒子水平显示就用浮动布局</font></p><p> 3.定位</p><p> 定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。<font color=red>如果元素自由在某个盒子内移动就用定位布局。</font></p><hr><h2 id="元素的显示与隐藏"><a href="#元素的显示与隐藏" class="headerlink" title="元素的显示与隐藏"></a>元素的显示与隐藏</h2><ul><li><strong>display属性</strong><ul><li>display属性用于设置一个元素应如何显示。</li><li>display：none；隐藏对象</li><li>display：block；除了转换为块级元素之外，同时还有显示元素的意思。</li><li><font color=red>display隐藏元素后，不再占有原来的位置</font></li></ul></li><li><strong>visibility可见性</strong><ul><li>visibility属性用于指定一个元素应可见还是隐藏。</li><li>visibility：visiable；元素可视</li><li>visibility：hidden；元素隐藏</li><li><font color=red>visibility隐藏元素后，继续占有原来的位置</font></li></ul></li><li><strong>overflow溢出</strong><ul><li>overflow属性指定如果内容溢出一个元素的框(超出器指定高度及宽度)时，会发生什么。</li><li>如果有定位的盒子(定位一般有故意超出部分)，慎用overflow：hidden 因为它会隐藏多余的部分。</li><li><font color=red>overflow:hidden隐藏的超出部分不占有位置</font></li></ul></li></ul><table><thead><tr><th>属性值</th><th>描述</th></tr></thead><tbody><tr><td>visiable</td><td>不剪切内容也不添加滚动条</td></tr><tr><td>hidden</td><td>不限时超过对象尺寸的内容，超出的部分隐藏掉</td></tr><tr><td>scroll</td><td>不管超出内容否，总是显示滚动条</td></tr><tr><td>auto</td><td>超出自动显示滚动条，不超出不显示滚动条</td></tr></tbody></table><hr><h2 id="CSS高阶技巧"><a href="#CSS高阶技巧" class="headerlink" title="CSS高阶技巧"></a>CSS高阶技巧</h2><h3 id="精灵图"><a href="#精灵图" class="headerlink" title="精灵图"></a>精灵图</h3><ul><li><p><strong>为什么要学习精灵图？</strong></p><p><font color=red>为了有效的减少服务器接收和发送请求的次数，提高也买呢的加载速度。</font></p><p><font color=red>核心原理:</font>将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。</p></li><li><p><strong>精灵图(sprites)的使用</strong></p><ol><li>精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图中。</li><li>这个大图片也称为sprites 精灵图 或者 雪碧图。</li><li>移动背景图片位置(<font color=red>默认显示大图左上角</font>)，此时可以使用background-position。</li><li>移动的距离就是这个目标图片的x和y坐标</li><li>因为一般情况下都是往上往左移动，所以数值是负值。</li><li>使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。</li></ol></li></ul><hr><h3 id="字体图标"><a href="#字体图标" class="headerlink" title="字体图标"></a>字体图标</h3><ul><li><p><strong>字体图标的下载</strong></p><p><a href="http://icomoon.io/">http://icomoon.io</a></p><p><a href="http://www.iconfont.cn/">http://www.iconfont.cn</a></p></li><li><p><strong>字体图标的引入</strong></p><p>1.在CSS样式中全局声明字体:简单理解把这些字体文件通过CSS引入到页面中.</p><p>一定要注意字体的路径问题</p><p>2.在需要字体图标的html标签中写入字体图标</p><p>3.给写入字体图标的html标签写CSS样式</p></li><li><p><strong>字体图标的追加</strong></p><p>把压缩包里面的selecton.json从新上传,然后下载新的压缩包,并替换原来的文件即可</p></li></ul><hr><h3 id="CSS中三角做法"><a href="#CSS中三角做法" class="headerlink" title="CSS中三角做法"></a>CSS中三角做法</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">0</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">0</span>;</span><br><span class="line"> <span class="attribute">border</span>:<span class="number">10px</span> solid transparent;</span><br><span class="line"> <span class="attribute">border-top-color</span>:pink;</span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">100px</span> auto;</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><hr><h3 id="什么是界面样式"><a href="#什么是界面样式" class="headerlink" title="什么是界面样式?"></a>什么是界面样式?</h3><p> 所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验</p><ul><li><p><strong>更改用户的鼠标样式</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">li</span> {<span class="attribute">cursor</span>:pointer;}</span><br></pre></td></tr></table></figure><table><thead><tr><th>属性值</th><th>描述</th></tr></thead><tbody><tr><td>default</td><td>小白箭头(默认)</td></tr><tr><td>pointer</td><td>小手</td></tr><tr><td>move</td><td>移动</td></tr><tr><td>text</td><td>文本</td></tr><tr><td>not-allowed</td><td>禁止</td></tr></tbody></table></li><li><p><strong>表单轮廓</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span>,<span class="selector-tag">textarea</span> {</span><br><span class="line"> <span class="attribute">outline</span>:none;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p><strong>防止拖拽文本域</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">textarea</span> {</span><br><span class="line"> <span class="attribute">resize</span>:none;</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><hr><h3 id="Vertical-align属性应用"><a href="#Vertical-align属性应用" class="headerlink" title="Vertical-align属性应用"></a>Vertical-align属性应用</h3><ul><li><p><strong>使用场景</strong></p><p>经常用于设置图片或者表单(行内块元素)和文字垂直对齐.</p><p>用于设置一个元素的==垂直对齐方式==,但是它只针对于==行内元素或者行内块元素有效==</p><p><code>vartical-align:baseline | top | middle | bottom</code></p><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>baseline</td><td>默认.元素放置在父元素的基线上.</td></tr><tr><td>top</td><td>把元素的顶端于行中最高元素的顶端对齐.</td></tr><tr><td>middle</td><td>把此元素放置在父元素的中部,</td></tr><tr><td>botom</td><td>把元素的顶端于行中最低的元素的顶端对齐.</td></tr></tbody></table></li><li><p><strong>解决图片底部默认空白缝隙问题</strong></p><p>bug:图片底册会有一个空白缝隙,原因是行内块元素和文字的基线对齐.</p><p>主要解决方案两种:</p><p>1.给图片添加==vertical-align:middle|top|bottom==等</p><p>2.把图片改为块级元素<code>display:block</code></p></li></ul><hr><h3 id="溢出的文字省略号显示"><a href="#溢出的文字省略号显示" class="headerlink" title="溢出的文字省略号显示"></a>溢出的文字省略号显示</h3><ul><li><p><strong>单行文本溢出显示省略号</strong> </p><!--必需满足是三个条件--></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*1.先强制一行显示文本*/</span></span><br><span class="line"><span class="attribute">white-space</span>:nowrap;(默认<span class="attribute">normal</span>自动换行)</span><br><span class="line"><span class="comment">/*2.超出的部分隐藏*/</span></span><br><span class="line"><span class="attribute">overflow</span>:hidden;</span><br><span class="line"><span class="comment">/*3.文字用省略号代替超出部分*/</span></span><br><span class="line"><span class="attribute">text-overflow</span>:ellipsis;</span><br></pre></td></tr></table></figure><ul><li><p><strong>多行文本溢出显示省略号</strong></p><!--多行文本溢出显示省略号,有较大兼容性问题,适合于webkit浏览器或移动端(移动端大部分是webkit内核)--></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">overflow</span>:hidden;</span><br><span class="line"><span class="attribute">text-overflow</span>:ellipsis;</span><br><span class="line"><span class="comment">/*弹性伸缩盒子密性显示*/</span></span><br><span class="line"><span class="attribute">display</span>:-webkit-box;</span><br><span class="line"><span class="comment">/*限制在一个块元素显示的文本行树*/</span></span><br><span class="line">-webkit-line-clamp:<span class="number">2</span>;</span><br><span class="line"><span class="comment">/*设置或检索伸缩盒对象的子元素的排列方式*/</span></span><br><span class="line">-webkit-box-orient:vertical;</span><br></pre></td></tr></table></figure><h3 id="常见布局技巧"><a href="#常见布局技巧" class="headerlink" title="常见布局技巧"></a>常见布局技巧</h3><ol><li><strong>margin负值的巧妙运用</strong></li></ol><!--给每个盒子加细线边框--><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-class">.father</span> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">200px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">300px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin-left</span>:-<span class="number">1px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>:<span class="number">1px</span> solid green;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'father'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'son1'</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'son2'</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure><!--鼠标经过每一个盒子出现四个方向的细线边框--><!--1.如果盒子没有定位,则鼠标经过添加相对定位即可--><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">200px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">300px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin-left</span>:-<span class="number">1px</span>;</span></span><br><span class="line"><span class="css"> boder:<span class="number">1px</span> solid green;</span></span><br><span class="line"><span class="css"> <span class="attribute">list-style</span>:none;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">position</span>:relative;</span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>:<span class="number">1px</span> solid pink;</span></span><br><span class="line"><span class="css"> <span class="attribute">box-shadow</span>:<span class="number">0</span> <span class="number">0</span> <span class="number">20px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>1<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>2<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>3<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>4<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure><!--2.如果li都有定位,则利用z-index提高层级--><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-tag">ul</span> <span class="selector-tag">li</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">position</span>:relative;</span></span><br><span class="line"><span class="css"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">200px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">300px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin-left</span>:-<span class="number">1px</span>;</span></span><br><span class="line"><span class="css"> boder:<span class="number">1px</span> solid green;</span></span><br><span class="line"><span class="css"> <span class="attribute">list-style</span>:none;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>1<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>2<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>3<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>4<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure><hr><p>2.<strong>文字围绕浮动元素</strong></p><!--巧妙运用浮动元素不会压住文字的特性--><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> * {</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">padding</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">300px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">70px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">background-color</span>:pink;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>:<span class="number">0</span> auto;</span></span><br><span class="line"><span class="css"> <span class="attribute">padding</span>:<span class="number">5px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-class">.pic</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">120px</span>;</span></span><br><span class="line"><span class="css"> heigth:<span class="number">70px</span></span></span><br><span class="line"><span class="css"> margin-right:<span class="number">5px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.pic</span> <span class="selector-tag">img</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">100%</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'box'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'pic'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'images/img.png'</span> <span class="attr">alt</span>=<span class="string">''</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>[但是]父水电费水电费水电费水电费水电费父水电费的<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><p>3,<strong>行内块元素的巧妙运用</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> * {</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-tag">a</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">45px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">36px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#dee0dd</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">background-color</span>: <span class="number">#f7f9f6</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">line-height</span>: <span class="number">36px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">text-decoration</span>: none;</span></span><br><span class="line"><span class="css"> <span class="attribute">outline</span>: none;</span></span><br><span class="line"><span class="css"> <span class="attribute">color</span>:<span class="number">#ccc</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-class">.prev</span>,</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-class">.next</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">80px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-class">.current</span>,</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-class">.ellipsis</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>: none;</span></span><br><span class="line"><span class="css"> <span class="attribute">background-color</span>: <span class="number">#ffffff</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-tag">input</span>,</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> <span class="selector-class">.btn</span>{</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">60px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">36px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"prev"</span>></span><span class="symbol">&lt;</span><span class="symbol">&lt;</span>上一页<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"current"</span>></span>2<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>3<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>4<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>5<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span>6<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"ellipsis"</span>></span>...<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">class</span>=<span class="string">"next"</span>></span><span class="symbol">&gt;</span><span class="symbol">&gt;</span>下一页<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> 到第<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>></span>页</span><br><span class="line"> <span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn"</span>></span>确定<span class="tag"></<span class="name">button</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><p>4.<strong>CSS三角强化</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">height</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">border-color</span>:transparent red transparent transparent;</span><br><span class="line"><span class="attribute">border-style</span>:solid;</span><br><span class="line"><span class="attribute">border-width</span>:<span class="number">22px</span> <span class="number">8px</span> <span class="number">0</span> <span class="number">0</span>;</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> * {</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.price</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">160px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">24px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span></span><br><span class="line"><span class="css"> <span class="attribute">line-height</span>: <span class="number">25px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.price</span> <span class="selector-class">.miaosha</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">position</span>: relative;</span></span><br><span class="line"><span class="css"> <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">80px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="css"> <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">font-weight</span>: <span class="number">700</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.miaosha</span> <span class="selector-tag">i</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css"> <span class="attribute">right</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">border-style</span>: solid; </span></span><br><span class="line"><span class="css"> <span class="attribute">border-width</span>: <span class="number">24px</span> <span class="number">10px</span> <span class="number">0</span> <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">border-color</span>: transparent <span class="number">#fff</span> transparent transparent;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.price</span> <span class="selector-class">.origin</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">color</span>:gray;</span></span><br><span class="line"><span class="css"> <span class="attribute">text-decoration</span>: line-through;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span> </span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"price"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"miaosha"</span>></span>¥1650</span><br><span class="line"> <span class="tag"><<span class="name">i</span>></span><span class="tag"></<span class="name">i</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">'origin'</span>></span>¥5650<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span> </span><br></pre></td></tr></table></figure><hr><h2 id="CSS初始化"><a href="#CSS初始化" class="headerlink" title="CSS初始化"></a>CSS初始化</h2><ul><li>不同浏览器对有些标签默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化.</li><li>CSS初始化是指重设浏览器的样式.(也称为CSS reset)</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">* {</span><br><span class="line"> <span class="comment">/*把我们所有标签的内外边距清零*/</span></span><br><span class="line"> <span class="attribute">margin</span>:<span class="number">0</span>;</span><br><span class="line"> <span class="attribute">padding</span>:<span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">em</span>,</span><br><span class="line"><span class="selector-tag">i</span> {</span><br><span class="line"> <span class="comment">/*em 和 i 斜体的文字不倾斜*/</span></span><br><span class="line"> <span class="attribute">font-style</span>:normal; </span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">li</span> {</span><br><span class="line"> <span class="comment">/*去掉li的小圆点*/</span></span><br><span class="line"> <span class="attribute">list-style</span>:none;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">img</span> {</span><br><span class="line"> <span class="comment">/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题*/</span></span><br><span class="line"> <span class="attribute">border</span>:<span class="number">0</span>;</span><br><span class="line"> <span class="comment">/*取消图片底侧有空白缝隙的问题*/</span></span><br><span class="line"> <span class="attribute">vertical-align</span>:middle;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">button</span> {</span><br><span class="line"> <span class="comment">/*当我们鼠标经过 button 按钮的时候,鼠标变成小手*/</span></span><br><span class="line"> <span class="attribute">cursor</span>:pointer;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">a</span> {</span><br><span class="line"> <span class="comment">/*给链接文字改变颜色*/</span></span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#666</span>;</span><br><span class="line"> <span class="comment">/*取消链接下划线*/</span></span><br><span class="line"> <span class="attribute">text-decoration</span>:none;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="comment">/*鼠标经过改变颜色*/</span></span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#c81623</span></span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">button</span>,</span><br><span class="line"><span class="selector-tag">input</span> {</span><br><span class="line"> <span class="comment">/*改变字体*/</span></span><br><span class="line"> <span class="attribute">font-family</span>:Microsoft YaHei,Heiti SC,tahoma,arial,Hirgino Sans GB,<span class="string">"\5B8B\4F53"</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line"> <span class="comment">/*CSS3 抗锯齿性 让文字显示的更加清晰*/</span></span><br><span class="line"> -webkit-<span class="attribute">font-smoothing</span>:antialiased;</span><br><span class="line"> <span class="attribute">background-color</span>:<span class="number">#fff</span>;</span><br><span class="line"> <span class="attribute">font</span>:<span class="number">12px</span>/<span class="number">1.5</span> Microsoft YaHei,SC,tahoma,arial,Hirgino Sans GB,<span class="string">"\5B8B\4F53"</span>;</span><br><span class="line"> <span class="attribute">color</span>:<span class="number">#666</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.hide</span>,</span><br><span class="line"><span class="selector-class">.none</span> {</span><br><span class="line"> <span class="comment">/*隐藏元素*/</span></span><br><span class="line"> <span class="attribute">display</span>:none;</span><br><span class="line">}</span><br><span class="line"><span class="comment">/*伪元素清除浮动*/</span></span><br><span class="line"><span class="selector-class">.clearfix</span>:after {</span><br><span class="line"> visibility:hidden;</span><br><span class="line"> <span class="attribute">clear</span>:both;</span><br><span class="line"> <span class="attribute">display</span>:block;</span><br><span class="line"> <span class="attribute">content</span>:<span class="string">"."</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">0</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.clearfix</span> {</span><br><span class="line"> *zoom: <span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li><p><strong>Unicode编码字体</strong></p><p>把中文的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码是出现乱码.</p><p>黑体==\9ED1\4F53==</p><p>宋体==\5B8B\4F53==</p><p>微软雅黑==\5FAE\8F6F\96C5\9ED1==</p></li></ul><hr><h1 id="HTML5和CSS3提高"><a href="#HTML5和CSS3提高" class="headerlink" title="HTML5和CSS3提高"></a>HTML5和CSS3提高</h1><h2 id="HTML5新特性"><a href="#HTML5新特性" class="headerlink" title="HTML5新特性"></a>HTML5新特性</h2><ul><li>增加了一些<font color=red>新的标签</font>、<font color=red>新的表单</font>、<font color=red>新的表单属性</font>等.</li></ul><h3 id="HTML5新增的语意化标签"><a href="#HTML5新增的语意化标签" class="headerlink" title="HTML5新增的语意化标签"></a>HTML5新增的语意化标签</h3><ol><li><p><code><header></code>:头部标签</p></li><li><p><code><nav></code>:导航栏标签</p></li><li><p><code><article></code>:内容标签</p></li><li><p><code><section>:</code>定义文档某个区域</p></li><li><p><code><aside></code>:侧边栏标签</p></li><li><p><code><footer></code>:尾部标签</p></li></ol><p> <font color=red>注意:</font></p><ul><li>这种语意化标准主要是针对==搜索引擎==的</li><li>这些新标签页面中可以使用==多次==</li><li>在IE9中,需要把这些元素转换为==块级元素==</li><li>其实,我们移动端更喜欢这些标签(移动端没有兼容问题)</li><li>HTML5还增加了很多其他标签,我们后面慢慢学</li></ul><hr><h3 id="HTML5新增的多媒体标签"><a href="#HTML5新增的多媒体标签" class="headerlink" title="HTML5新增的多媒体标签"></a>HTML5新增的多媒体标签</h3><ol start="2"><li>视频:==<video>==</li></ol><table><thead><tr><th>浏览器</th><th>MP4</th><th>WebM</th><th>Ogg</th></tr></thead><tbody><tr><td>IE</td><td>yes</td><td>no</td><td>no</td></tr><tr><td>Chrome</td><td>yes</td><td>yes</td><td>yes</td></tr><tr><td>Firefox</td><td>yes</td><td>yes</td><td>yes</td></tr><tr><td>Safari</td><td>yes</td><td>no</td><td>no</td></tr><tr><td>Opera</td><td>yes</td><td>yes</td><td>yes</td></tr></tbody></table><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">src</span>=<span class="string">'文件地址'</span> <span class="attr">controls</span>=<span class="string">'controls'</span>></span><span class="tag"></<span class="name">video</span>></span></span><br><span class="line"></span><br><span class="line"><span class="comment"><!--解决兼容性写法--></span></span><br><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">controls</span>=<span class="string">'controls'</span> <span class="attr">width</span>=<span class="string">'300'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">'move.ogg'</span> <span class="attr">type</span>=<span class="string">'video/ogg'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">'move.mp4'</span> <span class="attr">type</span>=<span class="string">'video/mp4'</span>></span></span><br><span class="line"> 您的浏览器暂不支持<span class="tag"><<span class="name">video</span>></span>标签播放视频</span><br><span class="line"><span class="tag"></<span class="name">video</span>></span></span><br></pre></td></tr></table></figure><p>视频==<video>==标签常见属性</p><table><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td>autoplay</td><td>autoplay</td><td>视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)</td></tr><tr><td>cotntrols</td><td>controls</td><td>向用户显示播放控件</td></tr><tr><td>width</td><td>pixels(像素)</td><td>设置播放器宽度</td></tr><tr><td>height</td><td>pixels(像素)</td><td>设置播放器高度</td></tr><tr><td>loop</td><td>loop</td><td>是否循环播放</td></tr><tr><td>preload</td><td>auto(预先加载视频)none(不加载视频)</td><td>是否预加载(如果有autoplay属性,就忽略该属性)</td></tr><tr><td>src</td><td>url</td><td>视频url地址</td></tr><tr><td>poster</td><td>imgurl</td><td>加载等待的画面图片</td></tr><tr><td>muted</td><td>muted</td><td>静音播放</td></tr></tbody></table><hr><ol start="2"><li>音频:==<audio>==</li></ol><table><thead><tr><th>浏览器</th><th>MP3</th><th>Wav</th><th>Ogg</th></tr></thead><tbody><tr><td>IE</td><td>yes</td><td>no</td><td>no</td></tr><tr><td>Chrome</td><td>yes</td><td>yes</td><td>yes</td></tr><tr><td>Firefox</td><td>yes</td><td>yes</td><td>yes</td></tr><tr><td>Safari</td><td>yes</td><td>yes</td><td>no</td></tr><tr><td>Opera</td><td>yes</td><td>yes</td><td>Yes</td></tr></tbody></table><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">audio</span> <span class="attr">src</span>=<span class="string">'文件地址'</span> <span class="attr">controls</span>=<span class="string">'controls'</span>></span><span class="tag"></<span class="name">audio</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="name">audio</span> <span class="attr">controls</span>=<span class="string">'controls'</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">'happy.mp3'</span> <span class="attr">type</span>=<span class="string">"audio/mp3"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"happy.ogg"</span> <span class="attr">type</span>=<span class="string">'audio/ogg'</span>></span></span><br><span class="line"> 您的浏览器暂不支持<span class="tag"><<span class="name">audio</span>></span>标签</span><br><span class="line"><span class="tag"></<span class="name">audio</span>></span></span><br></pre></td></tr></table></figure><p>音频==<audio>==标签常见属性</p><table><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody><tr><td>autoplay</td><td>autoplay</td><td>如果出现该属性,则音频在就绪后马上播放</td></tr><tr><td>controls</td><td>controls</td><td>如果出现该属性,则向用户显示控件,比如播放按钮</td></tr><tr><td>loop</td><td>loop</td><td>是否循环播放</td></tr><tr><td>src</td><td>url</td><td>要播放的音频的url</td></tr></tbody></table><hr><h3 id="HTML5新增的input类型"><a href="#HTML5新增的input类型" class="headerlink" title="HTML5新增的input类型"></a>HTML5新增的input类型</h3><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>type=’email’</td><td>限制用户输入必须为Email类型</td></tr><tr><td>type=’url’</td><td>限制用户输入必须是URL类型</td></tr><tr><td>type=’date’</td><td>限制用户输入必须是日期类型</td></tr><tr><td>type=’time’</td><td>限制用户输入必须是事件类型</td></tr><tr><td>type=’month’</td><td>限制用户输入必须是月类型</td></tr><tr><td>type=’week’</td><td>限制用户输入必须是周类型</td></tr><tr><td>type=’number’</td><td>限制用户输入必须是数字类型</td></tr><tr><td>type=’tel’</td><td>手机号码</td></tr><tr><td>type=’search’</td><td>搜索框</td></tr><tr><td>type=’color’</td><td>生成一个颜色选择表单</td></tr></tbody></table><h3 id="HTML新增的表单属性"><a href="#HTML新增的表单属性" class="headerlink" title="HTML新增的表单属性"></a>HTML新增的表单属性</h3><table><thead><tr><th>属性</th><th>值</th><th>说明</th></tr></thead><tbody><tr><td>required</td><td>required</td><td>表单拥有该属性表示其内容不能为空,必填</td></tr><tr><td>placeholder</td><td>提示文本</td><td>表单的提示信息,存在默认值将不显示</td></tr><tr><td>autofocus</td><td>autofocus</td><td>自动聚焦属性,页面加载完成自动聚焦到指定表单</td></tr><tr><td>autocomplete</td><td>Off/on</td><td>当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项.(默认已经打开,需要放在表单内,同时加上name属性,同时成功提交)</td></tr><tr><td>multiple</td><td>multiple</td><td>可以多选文件提交(搭配type=‘file)</td></tr></tbody></table><hr><h2 id="CSS3新特性"><a href="#CSS3新特性" class="headerlink" title="CSS3新特性"></a>CSS3新特性</h2><h3 id="CSS3新增选择器"><a href="#CSS3新增选择器" class="headerlink" title="CSS3新增选择器"></a>CSS3新增选择器</h3><p>==类选择器、属性选择器、结构伪类选择器权重都为10==</p><h4 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a><strong>属性选择器</strong></h4><table><thead><tr><th>选择符</th><th>简介</th></tr></thead><tbody><tr><td>E[att]</td><td>选择具有att属性的E元素</td></tr><tr><td>E[att=’val’]</td><td>选择具有att属性且属性值等于val的E元素</td></tr><tr><td>E[att^=’val’]</td><td>匹配具有att属性且值以val开头的E元素</td></tr><tr><td>E[att$=’val’]</td><td>匹配具有att属性且值以val结尾的E元素</td></tr><tr><td>E[att*=’val’]</td><td>匹配具有att属性且值中含有val的E元素</td></tr></tbody></table><hr><h4 id="结构伪类选择器"><a href="#结构伪类选择器" class="headerlink" title="结构伪类选择器"></a><strong>结构伪类选择器</strong></h4><table><thead><tr><th>选择符</th><th>简介</th></tr></thead><tbody><tr><td>E:first-child</td><td>匹配父元素中的第一个子元素E</td></tr><tr><td>E:last-child</td><td>匹配父元素中最后一个E元素</td></tr><tr><td>==E:nth-child(n)==</td><td>匹配父元素中第n个子元素E</td></tr><tr><td>E:fist-of-type</td><td>指定类型E的第一个</td></tr><tr><td>E:last-of-type</td><td>指定类型E的最后一个</td></tr><tr><td>E:nth-of-type(n)</td><td>指定类型E的第n个</td></tr></tbody></table><hr><p>==E:nth-child(n)==:选择某个父元素的一个或多个特定的子元素</p><ul><li>n可以是数字,关键字和公式</li><li>n如果是数字,就是选择第n个元素,里面数字从1开始</li><li>n可以时关键字:even偶数,odd奇数</li><li>n可以是公式:(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素个数会被忽略)</li></ul><table><thead><tr><th>公式</th><th>取值</th></tr></thead><tbody><tr><td>2n</td><td>偶数</td></tr><tr><td>2n+1</td><td>奇数</td></tr><tr><td>5n</td><td>5 10 15…</td></tr><tr><td>n+5</td><td>从第5个开始(包含第五个),到最后</td></tr><tr><td>-n+5</td><td>前5个(包含第5个)</td></tr></tbody></table><p>==nth-child和nth-of-type的区别==</p><ol><li>nth-child对父元素里面所有的孩子排序选择(序号是固定的),先找到第n个孩子,然后看看是否和E匹配</li><li>nth-of-type对父元素里面指定子元素进行排序选择,然后再根据E找第n个孩子</li></ol><hr><h4 id="伪元素选择器"><a href="#伪元素选择器" class="headerlink" title="伪元素选择器"></a>伪元素选择器</h4><p>==伪元素选择器可以利用CSS创建新的标签元素==,而不需要HTML标签,简化HTML结构</p><table><thead><tr><th>选择符</th><th>简介</th></tr></thead><tbody><tr><td>:before</td><td>在元素内部的前面插入内容</td></tr><tr><td>:after</td><td>在元素内部的后面插入标签</td></tr></tbody></table><p><font color=red>注意:</font></p><ul><li>==before==和==after==创建一个元素,但是属于==行内元素==</li><li>新创建的这个元素在文档树中是找不到的,所以我们称为伪元素</li><li>语法:<code>element:before{}</code></li><li>before和after必须有contnet属性</li><li>before在父元素内容的前面创建元素,after在父元素的后面插入元素</li><li>==伪元素选择器==和==标签选择器==一样,权重为1</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">::before</span> {</span><br><span class="line"> <span class="attribute">position</span>: absolute;</span><br><span class="line"> <span class="attribute">right</span>:<span class="number">20px</span>;</span><br><span class="line"> <span class="attribute">top</span>:<span class="number">10px</span>;</span><br><span class="line"> <span class="attribute">content</span>:<span class="string">'\e91e'</span>;</span><br><span class="line"> <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h3 id="CSS盒子模型-1"><a href="#CSS盒子模型-1" class="headerlink" title="CSS盒子模型"></a>CSS盒子模型</h3><p>CSS3中可以通过==box-sizing==来指定盒模型,有2个值:即指定为==content-box==、==border-box==,这样我们计算盒子大小的方式就发生了改变</p><ol><li>box-sizing:content-box盒子大小为width+padding+border(以前默认的)</li><li>box-sizing:border-box盒子大小为width</li><li>如果盒子模型我们改为box-sizing:border-box,那paddign和border就不会撑大盒子(前提padding和border不会超过width宽度)</li></ol><hr><h3 id="CSS3其他特性"><a href="#CSS3其他特性" class="headerlink" title="CSS3其他特性"></a>CSS3其他特性</h3><h4 id="CSS3滤镜filter"><a href="#CSS3滤镜filter" class="headerlink" title="CSS3滤镜filter:"></a><strong>CSS3滤镜filter:</strong></h4><p><strong>filter CSS属性将模糊或颜色偏移等图形效果应用于元素</strong></p><p>==语法:==<code>filter:函数();</code></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-tag">img</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">filter</span>:<span class="built_in">blur</span>(<span class="number">5px</span>);</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">''</span> <span class="attr">alt</span>=<span class="string">''</span>></span></span><br></pre></td></tr></table></figure><hr><h4 id="CSS3-calc-函数"><a href="#CSS3-calc-函数" class="headerlink" title="CSS3 calc 函数"></a>CSS3 calc 函数</h4><p><strong>calc()次CSS函数让你在声明CSS属性值时执行一些计算</strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">width</span>:<span class="built_in">calc</span>(<span class="number">100%</span> - <span class="number">30px</span>);</span><br><span class="line"><span class="attribute">height</span>:<span class="built_in">calc</span>(<span class="number">100px</span> * <span class="number">3px</span>);</span><br></pre></td></tr></table></figure><hr><h3 id="CSS3过渡-重点"><a href="#CSS3过渡-重点" class="headerlink" title="CSS3过渡(重点)"></a>CSS3过渡(重点)</h3><p>**过渡动画:**是从一个状态 渐渐的过渡到另一个状态</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transition</span>:要过渡的属性 花费时间 运动曲线 何时开始;</span><br></pre></td></tr></table></figure><p>1.==属性==:想变化的CSS属性,宽度高度 背景颜色 内外边距..all是过渡所有属性</p><p>2.==花费时间==:单位是 秒(必须写单位)</p><p>3.==运动曲线==:默认是 ease(==可以省略==) linear(匀速) ease-in(加速) ease-out(减速) ease-in-out(先加速后减速)</p><p>4.==何时开始==:单位是 秒(必须写单位) 可以设置延迟触发时间 默认是0s (==可省略==)</p><!--同时过渡宽高--> ==口诀:谁做过渡给谁加==<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">200px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">background-color</span>:red;</span></span><br><span class="line"><span class="css"> <span class="attribute">transition</span>:width .<span class="number">5s</span> ease <span class="number">0s</span>,height .<span class="number">5s</span> ease <span class="number">0s</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span><span class="selector-pseudo">:hover</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">400px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">200px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><h3 id="CSS32D转换"><a href="#CSS32D转换" class="headerlink" title="CSS32D转换"></a>CSS32D转换</h3><p><font color=red>转换(transform)</font>是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果.(可以简单理解为变形)</p><h4 id="移动-translate"><a href="#移动-translate" class="headerlink" title="移动:translate"></a>移动:translate</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">translate</span>(x,y); <span class="comment">/*或者分开写*/</span></span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">translateX</span>(n);</span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">translateY</span>(n);</span><br></pre></td></tr></table></figure><p><font color=red>注意:</font></p><ol><li>定义2D转换中的移动,沿着X和Y轴移动元素</li><li>translate最大的优点:==不会影响到其他元素的位置==</li><li>translate中的==百分比单位==是==相对于自身元素的translate(50%,50%)==;</li><li>对行内标签没有效果</li></ol><hr><h4 id="旋转-rotate"><a href="#旋转-rotate" class="headerlink" title="旋转:rotate"></a>旋转:rotate</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">rotate</span>(度数)</span><br></pre></td></tr></table></figure><p><font color=red>注意:</font></p><ol><li>rotate里面跟度数,单位是deg 比如 rotate(45deg)</li><li>角度为正时,顺时针,负时,为逆时针</li><li>默认旋转的中心点事元素的中心点</li></ol><p><strong>CSS小三角案例</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="xml"></span></span><br><span class="line"><span class="xml"> * {</span></span><br><span class="line"><span class="xml"> margin: 0;</span></span><br><span class="line"><span class="xml"> padding: 0;</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml"> .box {</span></span><br><span class="line"><span class="xml"> position: relative;</span></span><br><span class="line"><span class="xml"> width: 249px;</span></span><br><span class="line"><span class="xml"> height: 30px;</span></span><br><span class="line"><span class="xml"> margin:100px auto;</span></span><br><span class="line"><span class="xml"> border: 1px solid #000;</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml"> .box::after {</span></span><br><span class="line"><span class="xml"> position: absolute;</span></span><br><span class="line"><span class="xml"> top: 8px;</span></span><br><span class="line"><span class="xml"> right: 15px;</span></span><br><span class="line"><span class="xml"> content:"";</span></span><br><span class="line"><span class="xml"> width: 10px;</span></span><br><span class="line"><span class="xml"> height: 10px;</span></span><br><span class="line"><span class="xml"> border-right:1px solid #000;</span></span><br><span class="line"><span class="xml"> border-bottom:1px solid #000;</span></span><br><span class="line"><span class="xml"> transform:rotate(45deg);</span></span><br><span class="line"><span class="xml"> transition:all 0.3s;</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml"> .box:hover::after {</span></span><br><span class="line"><span class="xml"> transform:rotate(225deg);</span></span><br><span class="line"><span class="xml"> top:12px;</span></span><br><span class="line"><span class="xml"> }</span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure><p><strong>2D转换中心点 <font color=red>transform-origin</font></strong></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform-origin</span>:x y;</span><br></pre></td></tr></table></figure><p><font color=red>注意:</font></p><ol><li>注意后面的参数x和y用空格隔开</li><li>x y默认转换的中心点事元素的中心点(50% 50%)</li><li>还可以给x y设置 ==像素==或者 方位名词(top bottom right left center)</li></ol><p><strong>旋转中心案例</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">overflow</span>: hidden;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>:<span class="number">100px</span> auto;</span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>:<span class="number">1px</span> solid green;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span><span class="selector-pseudo">::after</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">content</span>:<span class="string">""</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">display</span>: block;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">100%</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">100%</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">background-color</span>:purple;</span></span><br><span class="line"><span class="css"> <span class="attribute">transform</span>:<span class="built_in">rotate</span>(<span class="number">90deg</span>);</span></span><br><span class="line"><span class="css"> <span class="attribute">transform-origin</span><span class="selector-pseudo">:left</span> <span class="attribute">bottom</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">transition</span>:all <span class="number">0.25s</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-class">.box</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::after</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">transform</span>:<span class="built_in">rotate</span>(<span class="number">0</span>);</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><h4 id="缩放-scale"><a href="#缩放-scale" class="headerlink" title="缩放:scale"></a>缩放:scale</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">scale</span>(x,y);</span><br></pre></td></tr></table></figure><p><font color=red>注意:</font></p><ol><li>Transform:scle(1,1):宽度和高度都放大一倍,相当于没有放大</li><li>Transform:scale(2,2):宽度和高度都放大了2倍</li><li>Transform:scale(2):只写一个参数,宽和高都放大2倍</li><li>Transform:scale(0.5,0.5)缩小</li><li>scale缩放最大的优势:可以设置转换中心,==而且不影响其他盒子==</li></ol><p><strong>图片放大案例</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">overflow</span>: hidden;</span></span><br><span class="line"><span class="css"> <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">629px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> <span class="selector-tag">img</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">transition</span>: all .<span class="number">3s</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> <span class="selector-pseudo">:hover</span> <span class="selector-tag">img</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.1</span>);</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/a1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/a1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"images/a1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">a</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><p><strong>分页按钮案例</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"> <span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> * {</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">box-sizing</span>: border-box;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">margin</span>:<span class="number">100px</span> auto;</span></span><br><span class="line"><span class="css"> <span class="attribute">padding</span>:<span class="number">30px</span> <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#000</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">text-align</span>:center;</span></span><br><span class="line"><span class="css"> <span class="attribute">line-height</span>:<span class="number">40px</span>;</span></span><br><span class="line"><span class="css"> <span class="comment">/* font-size:0; */</span></span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> <span class="selector-tag">li</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="css"> <span class="comment">/* float: left; */</span></span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">padding</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css"> <span class="comment">/* margin:0 auto; */</span></span></span><br><span class="line"><span class="css"> <span class="comment">/* margin-left:-5px; */</span></span></span><br><span class="line"><span class="css"> <span class="attribute">border</span>: <span class="number">1px</span> solid green;</span></span><br><span class="line"><span class="css"> <span class="attribute">border-radius</span>:<span class="number">20px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">list-style</span>:none;</span></span><br><span class="line"><span class="css"> <span class="attribute">transition</span>:all .<span class="number">2s</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">font-size</span>:<span class="number">12px</span>;</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span>{</span></span><br><span class="line"><span class="css"> <span class="attribute">transform</span>:<span class="built_in">scale</span>(<span class="number">1.1</span>);</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> </span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>1<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>2<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>3<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>4<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>5<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>6<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>7<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><h4 id="2D转换综合写法"><a href="#2D转换综合写法" class="headerlink" title="2D转换综合写法"></a>2D转换综合写法</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">translate</span>() <span class="built_in">rotate</span>() <span class="built_in">scale</span>()..等</span><br></pre></td></tr></table></figure><p><font color=red>注意:</font></p><ol><li>其顺序会影响转换的效果.(先旋转会改变坐标轴方向)</li><li>当我们同时有位移和其他属性的时候,记得要将位移放到最前.</li></ol><hr><h3 id="CSS3动画"><a href="#CSS3动画" class="headerlink" title="CSS3动画"></a>CSS3动画</h3><p><font color=red>动画(animation)</font>是CSS3中最具颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果.</p><p>相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果</p><h4 id="动画的基本使用"><a href="#动画的基本使用" class="headerlink" title="动画的基本使用"></a>动画的基本使用</h4><ol><li>定义动画</li><li>调用动画</li></ol><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--定义动画--></span></span><br><span class="line"><span class="tag"><<span class="name">style</span>></span><span class="css"></span></span><br><span class="line"><span class="css"> <span class="keyword">@keyframes</span> move {</span></span><br><span class="line"><span class="css"> <span class="number">0%</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">transform</span>:<span class="built_in">translate</span>(<span class="number">0px</span>);</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="number">100%</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">transform</span>:<span class="built_in">translate</span>(<span class="number">1000px</span>);</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> }</span></span><br><span class="line"><span class="css"> <span class="selector-tag">div</span> {</span></span><br><span class="line"><span class="css"> <span class="attribute">width</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">height</span>:<span class="number">100px</span>;</span></span><br><span class="line"><span class="css"> <span class="attribute">animation-name</span>:move;</span></span><br><span class="line"><span class="css"> <span class="attribute">animation-duration</span>: <span class="number">2s</span>;</span></span><br><span class="line"><span class="css">}</span></span><br><span class="line"><span class="css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><h4 id="动画序列"><a href="#动画序列" class="headerlink" title="动画序列"></a>动画序列</h4><ol><li>0%是动画的开始,100%是动画的完成.这样的规则就是动画序列.</li><li>在<font color=red>@keyframes</font>中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果</li><li>动画是使元素从一种样式状态变化为另一种样式的效果,您可以改变人以多的样式任意多的次数</li><li>请用百分比来规定变化发生的时间,或用关键词<font color=red>from</font>和<font color=red>to</font>,等同于0%和100%</li><li>可以做多个状态的变化 keyframe 关键帧</li><li>里面的百分比要是整数</li><li>里面的百分比是 ==总的时间的划分==</li></ol><hr><h4 id="动画的常用属性"><a href="#动画的常用属性" class="headerlink" title="动画的常用属性"></a>动画的常用属性</h4><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>@keyframes</td><td>规定动画</td></tr><tr><td>animation</td><td>所有动画属性的简写属性,除了animation-play-state属性</td></tr><tr><td>animation-name</td><td>规定@keyframes动画的名称.==(必须的)==</td></tr><tr><td>animation-duration</td><td>规定动画完成一个周期所花费的秒或毫秒.默认是0 ==(必须的)==</td></tr><tr><td>animation-timing-function</td><td>规定动画的速度曲线,默认书 “ease”</td></tr><tr><td>animation-delay</td><td>规定动画何时开始,默认是0.</td></tr><tr><td>animation-iteration-count</td><td>规定动画播放的次数,默认是1,还有==infinite==</td></tr><tr><td>animation-direction</td><td>规定动画是否在下一周期逆向播放,默认是normal, ==altermate==逆播放</td></tr><tr><td>animation-play-state</td><td>规定动画是否在运行或暂停.默认是“running”,还有“paused” (常用与hover搭配)</td></tr><tr><td>animation-fill-mode</td><td>规定动画结束后状态,保持==forwards==回到起始==backwards==</td></tr></tbody></table><p><font color=red>动画属性简写</font></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">animation</span>:name duration timing-function delay iteration-count direction fill-mode</span><br></pre></td></tr></table></figure><hr><h4 id="速度曲线细节"><a href="#速度曲线细节" class="headerlink" title="速度曲线细节"></a>速度曲线细节</h4><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>linear</td><td>匀速</td></tr><tr><td>ease</td><td>默认.动画以低速开始,然后加快,在结束前变慢</td></tr><tr><td>ease-in</td><td>动画以低速开始</td></tr><tr><td>ease-out</td><td>动画以低速结束</td></tr><tr><td>Ease-in-out</td><td>动画以低速开始和结束</td></tr><tr><td>steps()</td><td>指定了时间函数中的间隔数量 (步长). ==动画分几步完成==</td></tr></tbody></table><!--step写法--><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">animation</span>: name duration <span class="built_in">steps</span>(<span class="number">10</span>) forwards;</span><br></pre></td></tr></table></figure><hr><h3 id="CSS3D转换"><a href="#CSS3D转换" class="headerlink" title="CSS3D转换"></a>CSS3D转换</h3><h4 id="3D转换-tanslate3d"><a href="#3D转换-tanslate3d" class="headerlink" title="3D转换:tanslate3d"></a>3D转换:tanslate3d</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">translateX</span>(<span class="number">100px</span>);</span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">translateY</span>(<span class="number">100px</span>);</span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">translateZ</span>(<span class="number">100px</span>); ⚠️:translateZ一般用px单位 /*值越大看到的盒子越小*/</span><br><span class="line">transform:<span class="built_in">translate3d</span>(x,y,z);⚠️:x,y,z不能省略,如果没有就写<span class="number">0</span></span><br></pre></td></tr></table></figure><hr><h4 id="透视-视距-perspective"><a href="#透视-视距-perspective" class="headerlink" title="透视(视距):perspective"></a>透视(视距):perspective</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">perspective</span>(<span class="number">100px</span>); <span class="comment">/*值越小，看到的盒子越大*/</span></span><br></pre></td></tr></table></figure><p><font color=red>透视写在被观察元素的父盒子上面</font></p><hr><h4 id="3D旋转-rotate3d"><a href="#3D旋转-rotate3d" class="headerlink" title="3D旋转:rotate3d"></a>3D旋转:rotate3d</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>:<span class="built_in">rotateX</span>();</span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">rotateY</span>();</span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">rotateZ</span>();<span class="comment">/*和平面旋转一样*/</span></span><br><span class="line"><span class="attribute">transform</span>:<span class="built_in">rotate3d</span>(x,y,z,deg);<span class="comment">/*xyz表示旋转轴的矢量，表示是否希望沿着该轴旋转*/</span></span><br></pre></td></tr></table></figure><hr><h4 id="3D呈现-transform-style"><a href="#3D呈现-transform-style" class="headerlink" title="3D呈现:transform-style"></a>3D呈现:transform-style</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform-style</span>:flat; <span class="comment">/*子元素不开启3d立体空间*/</span> 默认</span><br><span class="line">tranform-style:preserve-<span class="number">3</span>d; <span class="comment">/*子元素开启立体空间*/</span></span><br></pre></td></tr></table></figure><ul><li>控制子元素是否开启三位立体环境</li><li>代码写给父级，但是影响的是子盒子</li><li>这个属性很重要，后面必用</li></ul><hr><h3 id="浏览器私有前缀"><a href="#浏览器私有前缀" class="headerlink" title="浏览器私有前缀"></a>浏览器私有前缀</h3><p><strong>浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加</strong></p><h4 id="私有前缀"><a href="#私有前缀" class="headerlink" title="私有前缀"></a>私有前缀</h4><ul><li>-moz-:代表firefox浏览器私有属性</li><li>-ms-:代表ie浏览器私有属性</li><li>-webkit:代表safari、chrome私有属性</li><li>-o-:代表Opera私有属性</li></ul><h4 id="提倡写法"><a href="#提倡写法" class="headerlink" title="提倡写法"></a>提倡写法</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">-moz-<span class="attribute">border-radius</span>:<span class="number">10px</span>;</span><br><span class="line">-webkit-<span class="attribute">border-radius</span>:<span class="number">10px</span>;</span><br><span class="line">-o-<span class="attribute">border-radius</span>:<span class="number">10px</span>;</span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">10px</span>;</span><br></pre></td></tr></table></figure><h1 id="移动WEB开发之流式布局"><a href="#移动WEB开发之流式布局" class="headerlink" title="移动WEB开发之流式布局"></a>移动WEB开发之流式布局</h1><h2 id="视口"><a href="#视口" class="headerlink" title="视口"></a>视口</h2><p><font color=red>视口(viewport)</font>就是浏览器显示页面内容的屏幕区域。视口可以分为==布局视口==、==视觉视口==、==理想视口==。</p><h3 id="布局视口-layout-viewport"><a href="#布局视口-layout-viewport" class="headerlink" title="布局视口 layout viewport"></a>布局视口 <font color=red>layout viewport</font></h3><ul><li>一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面再手机上显示的问题。</li><li>IOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。</li></ul><h3 id="视觉视口-visual-viewport"><a href="#视觉视口-visual-viewport" class="headerlink" title="视觉视口 visual viewport"></a>视觉视口 <font color=red>visual viewport</font></h3><ul><li><p>字面意思，它是用户正在看到的网站的区域。<font color=red>注意:是网站的区域</font></p></li><li><p>我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。</p></li></ul><h3 id="理想视口-ideal-viewport"><a href="#理想视口-ideal-viewport" class="headerlink" title="理想视口 ideal viewport"></a>理想视口 <font color=red>ideal viewport</font></h3><ul><li>为了使网站在移动端有最理想的浏览和阅读宽度而设定</li><li>理想视口，对设备来讲，是最理想的视口尺寸</li><li>需要手动添写==meta视口标签==通知浏览器操作</li><li>mata视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽</li></ul><hr><h3 id="meta视口标签"><a href="#meta视口标签" class="headerlink" title="meta视口标签"></a>meta视口标签</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0,user-scalable=no"</span>></span></span><br></pre></td></tr></table></figure><table><thead><tr><th>属性</th><th>解释说明</th></tr></thead><tbody><tr><td>width</td><td>宽度设置的是viewport宽度，可以设置device-width特殊值(设备宽度)</td></tr><tr><td>Initial-scale</td><td>初始缩放比，大于0的数字</td></tr><tr><td>maximum-scale</td><td>最大缩放比，大于0的数字</td></tr><tr><td>minimum-scale</td><td>最小缩放比，大于0的数字</td></tr><tr><td>user-scalable</td><td>用户是否可以缩放，yes或no(1或0)</td></tr></tbody></table><hr><h2 id="二倍图"><a href="#二倍图" class="headerlink" title="二倍图"></a>二倍图</h2><h3 id="物理像素-amp-物理像素比"><a href="#物理像素-amp-物理像素比" class="headerlink" title="物理像素&物理像素比"></a>物理像素&物理像素比</h3><ul><li>物理像素点指的是屏幕显示的最小颗粒，是物理真是存在的。这是厂商在出厂时就设置好了，比如iphone6\7\8 是 750*1334</li><li>我们开发的时候的1px不是一定等于1个物理像素的</li><li>PC端页面，1个px等于1个物理像素的，但是移动端不尽相同</li><li>一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比</li></ul><h3 id="多倍图"><a href="#多倍图" class="headerlink" title="多倍图"></a>多倍图</h3><ul><li>对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊</li><li>在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题</li><li>通常使用二倍图，因为iphone6\7\8的影响，但是现在还存在3倍图4倍图的情况。</li><li>背景图片，注意缩放问题</li></ul><!--二倍图用法--><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*在iphone8下面*/</span></span><br><span class="line"><span class="selector-tag">img</span> {</span><br><span class="line"> <span class="comment">/*原始图片100px*100px*/</span></span><br><span class="line"> <span class="attribute">width</span>:<span class="number">50px</span>;</span><br><span class="line"> heigth:<span class="number">50px</span>;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">/*背景图设置*/</span></span><br><span class="line"><span class="selector-class">.box</span> {</span><br><span class="line"> <span class="comment">/*原始图片 100px*100px*/</span></span><br><span class="line"> <span class="attribute">background-size</span>:<span class="number">50px</span> <span class="number">50px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h3 id="背景缩放-background-size"><a href="#背景缩放-background-size" class="headerlink" title="背景缩放 background-size"></a>背景缩放 background-size</h3><ul><li>单位：像素｜百分比｜cover｜contain；</li><li>cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域(==可能有部分背景显示不全==)</li><li>contain把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域(高度和宽度等比例拉伸 当宽度或者高度铺满盒子就不再拉伸，==可能有部分空白区域==)</li></ul><hr><h2 id="移动端开发选择"><a href="#移动端开发选择" class="headerlink" title="移动端开发选择"></a>移动端开发选择</h2><h3 id="单独移动端页面-主流"><a href="#单独移动端页面-主流" class="headerlink" title="单独移动端页面(主流)"></a>单独移动端页面(主流)</h3><p>通常情况下，网址域名前面加==m(mobile)==可以打开移动端。通过判断设备，如果是移动设备打开，则跳转到<font color=red>移动端页面</font></p><h3 id="响应式兼容PC移动端"><a href="#响应式兼容PC移动端" class="headerlink" title="响应式兼容PC移动端"></a>响应式兼容PC移动端</h3><p>通过判断屏幕宽度来改变样式，以适应不同终端</p><p><font color=red>缺点:</font>制作麻烦，需要花很大精力去调兼容性问题。</p><hr><h2 id="移动端技术解决方案"><a href="#移动端技术解决方案" class="headerlink" title="移动端技术解决方案"></a>移动端技术解决方案</h2><h3 id="移动端浏览器"><a href="#移动端浏览器" class="headerlink" title="移动端浏览器"></a>移动端浏览器</h3><p>移动端浏览器基本以webkit内核为主，因此我们就考虑webkit兼容性问题。我们可以放心使用H5标签和CSS3样式。<br>同时我们浏览器的私有前缀我们只需要考虑添加webkit即可</p><hr><h3 id="CSS初始化-nomalize-css"><a href="#CSS初始化-nomalize-css" class="headerlink" title="CSS初始化 nomalize.css"></a>CSS初始化 <font color=red>nomalize.css</font></h3><ul><li>移动端CSS初始化推荐使用normalize.css</li><li>Normalize.css:保护了有价值的默认值</li><li>Normalize.css:修复了浏览器的bug</li><li>Normalize.css:是模块化的</li><li>Normalize.css:拥有详细的文档</li><li><a href="http://necolas.github.io/nomalize.css/">http://necolas.github.io/nomalize.css/</a></li></ul><hr><h3 id="特殊样式"><a href="#特殊样式" class="headerlink" title="特殊样式"></a>特殊样式</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*css3盒子模型*/</span></span><br><span class="line"><span class="attribute">box-sizing</span>:border-box;</span><br><span class="line">-webkit-<span class="attribute">box-sizing</span>:border-box;</span><br><span class="line"><span class="comment">/*点击时背景高亮我们需要清除 设置为transpatent 完全透明*/</span></span><br><span class="line">-webkit-tap-highlight-<span class="attribute">color</span>:transparent;</span><br><span class="line"><span class="comment">/*在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式*/</span></span><br><span class="line">-webkit-appearance:none;</span><br><span class="line"><span class="comment">/*禁用长按页面时的弹出菜单*/</span></span><br><span class="line"><span class="selector-tag">img</span>,<span class="selector-tag">a</span> {-webkit-touch-callout:none;}</span><br></pre></td></tr></table></figure><hr><h2 id="移动端常见布局"><a href="#移动端常见布局" class="headerlink" title="移动端常见布局"></a>移动端常见布局</h2><h3 id="移动端技术选型"><a href="#移动端技术选型" class="headerlink" title="移动端技术选型"></a>移动端技术选型</h3><ul><li><p>单独制作移动端页面(主流）</p><ol><li>流式布局(百分比布局)</li><li>flex弹性布局(强烈推荐)</li><li>less+rem+媒体查询布局</li><li>混合布局</li></ol></li><li><p>响应式页面兼容移动端(其次)</p><ol><li>媒体查询</li><li>bootstarp</li></ol></li></ul><hr><h3 id="流式布局-百分比布局"><a href="#流式布局-百分比布局" class="headerlink" title="流式布局(百分比布局)"></a>流式布局(百分比布局)</h3><ul><li>流式布局,就是百分比布局,也称为非固定像素布局</li><li>通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充</li><li>流式布局方式是移动web开发使用的比较常见的 布局方式</li><li>==max-width== 最大宽度(max-height 最大高度)</li><li>==min-width== 最小宽度(max-height 最小高度)</li></ul><!--二倍精灵图做法--><ul><li>在firework或者ps里面把精灵图等比例缩放为原来的一半</li><li>之后根据大小测量坐标</li><li>注意代码里面background-size也要写:精灵图原来宽度的一半</li></ul><hr><h3 id="Flex布局"><a href="#Flex布局" class="headerlink" title="Flex布局"></a>Flex布局</h3><h4 id="布局原理"><a href="#布局原理" class="headerlink" title="布局原理"></a>布局原理</h4><ul><li>flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局</li><li><strong>当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效.</strong></li><li>伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局</li><li>采用flex布局的元素,称为flex容器(flex container) ,简称“容器”.它的所有子元素自动称为容器成员,称为flex项目(flex item),简称“项目”</li><li>==通过给父盒子添加flex属性,来控制子盒子的位置和排列方式==.</li></ul><hr><h4 id="常见父项属性"><a href="#常见父项属性" class="headerlink" title="常见父项属性"></a>常见父项属性</h4><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>flex-direction</td><td>设置主轴的方向</td></tr><tr><td>justify-content</td><td>设置主轴上的子元素排列方式</td></tr><tr><td>flex-wrap</td><td>设置子元素是否换行 ==nowrap== ==wrap==</td></tr><tr><td>align-content</td><td>设置侧轴的子元素的排列方式(多行)</td></tr><tr><td>align-items</td><td>设置侧轴上的子元素排列方式(单行)</td></tr><tr><td>flex-flow</td><td>复合属性,相当于同时设置了flex-direction和flex-wrap</td></tr></tbody></table><p>==flex-direction==</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>row</td><td>沿X轴(主轴)从左到右 ==默认==</td></tr><tr><td>row-reverse</td><td>沿X轴(主轴)从右到左</td></tr><tr><td>column</td><td>沿Y轴(主轴)从上到下</td></tr><tr><td>column-reverse</td><td>沿Y轴(主轴)从上到下</td></tr></tbody></table><p>==justify-content==</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>flex-start</td><td>默认值 从头部开始 如果主轴是X轴,则从左到右</td></tr><tr><td>flex-end</td><td>从尾部开始排列</td></tr><tr><td>center</td><td>在主轴居中对齐(如果主轴是X轴则 ==水平居中==)</td></tr><tr><td>space-around</td><td>平分剩余空间</td></tr><tr><td>space-between</td><td>先两边贴边 再平分剩余空间(==重要==)</td></tr></tbody></table><p>==align-items==</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>flex-start</td><td>从上到下</td></tr><tr><td>flex-end</td><td>从下到上</td></tr><tr><td>center</td><td>挤在一起居中(垂直居中)</td></tr><tr><td>strech</td><td>拉伸(==默认==) 不给子盒子高度可看到拉伸效果</td></tr></tbody></table><p>==align-content==</p><table><thead><tr><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>flex-start</td><td>默认值在侧轴的头部开始排列</td></tr><tr><td>flex-end</td><td>在侧轴的尾部开始排列</td></tr><tr><td>center</td><td>在侧轴中间显示</td></tr><tr><td>Space-around</td><td>子项在侧轴平分剩余空间</td></tr><tr><td>space-between</td><td>子项在侧轴线分布在两头,在平分剩余空间</td></tr><tr><td>stretch</td><td>设置子项元素高度平分父元素高度</td></tr></tbody></table><hr><h4 id="常见子项属性"><a href="#常见子项属性" class="headerlink" title="常见子项属性"></a>常见子项属性</h4><table><thead><tr><th>属性</th><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>flex</td><td>number 默认是0</td><td>子项占==剩余空间==的份数</td></tr><tr><td>align-self</td><td>跟 align-items一样</td><td>控制子项自己在侧轴的排列方式</td></tr><tr><td>order</td><td>越小越靠前 默认是0</td><td>属性定义子项的排列顺序(前后顺序)</td></tr></tbody></table><hr><h4 id="背景线性渐变"><a href="#背景线性渐变" class="headerlink" title="背景线性渐变"></a>背景线性渐变</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>:<span class="built_in">linear-gradient</span>(起始方向,颜色<span class="number">1</span>,颜色<span class="number">2</span>,...)</span><br><span class="line">background:<span class="built_in">-webkit-linear-gradient</span>(left,red,blue);</span><br><span class="line"><span class="attribute">background</span>:<span class="built_in">-webkit-linear-gradient</span>(top,left,red,blue);</span><br></pre></td></tr></table></figure><ul><li>背景渐变必须添加浏览器私有前缀</li><li>起始方向可以是:方位名词 或者 度数 ,如果省略默认就是top</li></ul><hr><h3 id="rem"><a href="#rem" class="headerlink" title="rem"></a>rem</h3><h4 id="rem基础"><a href="#rem基础" class="headerlink" title="rem基础"></a>rem基础</h4><ul><li>rem单位</li></ul><p>rem(root em)是一个相对单位,类似于em,em是==父元素==字体大小</p><p>不同的是<font color=red>rem</font>是基准是相对于html元素的==字体大小==</p><p>比如,跟元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.</p><p>==rem优点==:rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制</p><hr><h4 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h4><p>**媒体查询(Meadia Query)**是CSS3新语法</p><ul><li>使用@media查询,可以针对不同的媒体类型定义不同的样式</li><li>==@media可以针对不同的屏幕尺寸设置不同的样式==</li><li>当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面</li><li>目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询</li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@media</span> mediatype <span class="keyword">and</span>|<span class="keyword">not</span>|<span class="keyword">only</span> (media feature) {</span><br><span class="line"> css-<span class="selector-tag">Code</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>用@media开头 注意@符号</li><li>mediatype媒体类型</li><li>关键字and not only</li><li>media feature 媒体特性 必须有小括号包含</li></ul><p>==mediatype==:设备类型 <font color=red>不可省略</font></p><table><thead><tr><th>值</th><th>解释说明</th></tr></thead><tbody><tr><td>all</td><td>用于多有设备</td></tr><tr><td>print</td><td>用于打印机和打印预览</td></tr><tr><td>screen</td><td>用于电脑屏幕,平板电脑,智能手机等</td></tr></tbody></table><p>==关键字==:将媒体类型或多个媒体特性连接到一起做为媒体查询的条件 <font color=red>不可省略</font></p><table><thead><tr><th>值</th><th>解释说明</th></tr></thead><tbody><tr><td>and</td><td>可以将多个媒体特性连接到一起,相当于“且”的意思</td></tr><tr><td>not</td><td>排除某个媒体类型,相当于“非”的意思,可以省略</td></tr><tr><td>only</td><td>指定某个特定的媒体类型,可以省略</td></tr></tbody></table><p>==媒体特性==:根据不同媒体类型的媒体特性设置不同的展示风格,了解三个</p><table><thead><tr><th>值</th><th>解释说明</th></tr></thead><tbody><tr><td>width</td><td>定义输出设备中页面可见区域的宽度</td></tr><tr><td>min-width</td><td>定义输出设备中页面最小可见区域宽度</td></tr><tr><td>max-width</td><td>定义输出设备中页面最大可见区域宽度</td></tr></tbody></table><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">/在屏幕上 并且最大的宽度是<span class="number">800px</span> 设置想要的样式*/</span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-width</span>: <span class="number">800px</span>) {</span><br><span class="line"> <span class="selector-tag">body</span> {</span><br><span class="line"> <span class="attribute">background-color</span>:green;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==<strong>引入资源</strong>==</p><p>当样式比较繁多的时候,我们可以针对不同的媒体使用不同stylesheets(样式表)</p><p>原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*屏幕宽度大于320px时引入style320.css 屏幕宽度大于640px时引入style640.css*/</span></span><br><span class="line"><link rel="stylesheet" href="style320<span class="selector-class">.css</span>" media="screen and (<span class="attribute">min-width</span>:<span class="number">320px</span>)<span class="string">"></span></span><br><span class="line"><span class="string"><link rel="</span>stylesheet<span class="string">" href="</span>style640.css<span class="string">" media="</span>screen and (min-width:<span class="number">640px</span>)<span class="string">"></span></span><br></pre></td></tr></table></figure><hr><h3 id="Less"><a href="#Less" class="headerlink" title="Less"></a>Less</h3><h4 id="less基础"><a href="#less基础" class="headerlink" title="less基础"></a>less基础</h4><p>Less(Leaner Style Sheets 的缩写)时一门CSS扩展语言,也称为CSS预处理器.</p><p>做为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。</p><p>它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。</p><p><font color=red>总结</font>:Less是一门CSS预处理语言,它拓展了CSS的动态特性</p><p>==less变量==:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*例子*/</span></span><br><span class="line"><span class="keyword">@color</span>:pink;</span><br><span class="line"><span class="keyword">@font12</span>:12px;</span><br><span class="line"><span class="selector-tag">body</span> {</span><br><span class="line"> <span class="attribute">background-color</span>:@color;</span><br><span class="line"> <span class="attribute">font-size</span>:@font12;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==less嵌套==:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*内层选择器的前面没有&符号,则它被解析为父选择器的后代*/</span></span><br><span class="line"><span class="selector-class">.header</span> {</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">background-color</span>:pink;</span><br><span class="line"> <span class="selector-tag">a</span> {</span><br><span class="line"> <span class="attribute">background-color</span>:pink;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*交集|伪类|伪类选择器*/</span></span><br><span class="line"><span class="selector-tag">a</span> {</span><br><span class="line"> &<span class="selector-pseudo">:hover</span> {</span><br><span class="line"> <span class="attribute">color</span>:red;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">div</span> {</span><br><span class="line"> &<span class="selector-pseudo">::before</span> {</span><br><span class="line"> <span class="attribute">content</span>:<span class="string">''</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==less运算==:</p><p><font color=red>注意:</font></p><ol><li>我们运算符的左右两侧必须敲一个空格隔开</li><li>两个数参与运算 如果只有一个数有单位,则最后的结果就以这个单位为准</li><li>两个数参与运算,如果2个数都有单位,而且不一样的单位 最后的结果以第一个单位为准</li></ol><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@baseFont</span>: <span class="number">50px</span>;</span><br><span class="line"><span class="selector-tag">html</span> {</span><br><span class="line"> <span class="attribute">font-size</span>:@baseFont;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">@border</span>: <span class="number">5px</span> + <span class="number">5</span>;</span><br><span class="line"><span class="selector-tag">div</span> {</span><br><span class="line"> <span class="attribute">width</span>:<span class="number">200px</span> - <span class="number">50</span>;</span><br><span class="line"> <span class="attribute">height</span>:<span class="number">200px</span> * <span class="number">2</span>;</span><br><span class="line"> <span class="attribute">border</span>:@border solid red;</span><br><span class="line">}</span><br><span class="line"><span class="selector-tag">img</span> {</span><br><span class="line"> <span class="attribute">width</span>: <span class="number">82rem</span> / @baseFont;</span><br><span class="line"> <span class="attribute">height</span>: <span class="number">82rem</span> / @baseFont;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>==导入文件==:将一个less文件导入到另一个less文件</p><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在index.less 中导入 common.less文件</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">'common'</span>;</span><br></pre></td></tr></table></figure><hr><h3 id="rem适配方案"><a href="#rem适配方案" class="headerlink" title="rem适配方案"></a>rem适配方案</h3><ol><li><p>让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。</p></li><li><p>使用媒体查询根据不同设备按比例设置html的字体大小，<br>然后页面元素使用rem做尺寸单位，当htm|字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。</p></li></ol><h4 id="rem适配方案技术使用-市场主流"><a href="#rem适配方案技术使用-市场主流" class="headerlink" title="rem适配方案技术使用(市场主流)"></a>rem适配方案技术使用(市场主流)</h4><p>==方案1==:less、媒体查询、rem</p><p>==方案2==:flexible.js、rem。(推荐)</p><hr><h4 id="元素大小取值方法"><a href="#元素大小取值方法" class="headerlink" title="元素大小取值方法"></a>元素大小取值方法</h4><ol><li>最后的公式:页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)</li><li>屏幕宽度/划分的份数 就是 html font-size的大小</li><li>或者: 页面元素的rem值 = 页面元素值(px) / html font-size字体大小</li></ol><hr><h3 id="响应式布局"><a href="#响应式布局" class="headerlink" title="响应式布局"></a>响应式布局</h3><h4 id="响应式开发原理"><a href="#响应式开发原理" class="headerlink" title="响应式开发原理"></a>响应式开发原理</h4><p>就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的</p><table><thead><tr><th>设备划分</th><th>尺寸区间</th></tr></thead><tbody><tr><td>超小屏幕(手机)</td><td><768px</td></tr><tr><td>小屏屏幕(平板)</td><td>>=768px ~ <992px</td></tr><tr><td>中等屏幕(桌面显示器)</td><td>>=992px ~ 1200px</td></tr><tr><td>宽屏设备(大桌面显示器)</td><td>>= 1200px</td></tr></tbody></table><h4 id="响应式布局容器-amp-响应式尺寸划分"><a href="#响应式布局容器-amp-响应式尺寸划分" class="headerlink" title="响应式布局容器&响应式尺寸划分"></a>响应式布局容器&响应式尺寸划分</h4><p>响应式需要一个腹肌作为布局容器,来配合自己元素来实现变化效果.</p><p>原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里买呢子元素的排列方式</p><ul><li>超小屏幕(手机,小于768px):设置宽度为100%</li><li>小屏幕(平板,大于等于768px): 设置宽度为750px</li><li>中等屏幕(桌面显示器,大于等于992px): 宽度设置为970px</li><li>大屏幕(大桌面显示器,大于等于1200px):宽度设置为1170px</li></ul><hr><h3 id="Bootstrap"><a href="#Bootstrap" class="headerlink" title="Bootstrap"></a>Bootstrap</h3><p><font color=red>框架:</font> 顾名思义就是一套框架,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件.使用者要按照框架所规定的某种规范进行开发.</p><h4 id="布局容器"><a href="#布局容器" class="headerlink" title="布局容器"></a>布局容器</h4><p><font color=red>Bootstrap</font>需要为页面和三个系统包裹一个.container容器,Boostrap预先定义好了这个类,叫.container,它提供了两个作此用处的类</p><ol><li>==container类==</li></ol><ul><li>响应式布局的容器 固定宽度</li><li>大屏(> =1200px)宽度定为1170px</li><li>中屏(> = 992px)宽度定为970px</li><li>小屏(> =768px)宽度定为 750px</li><li>超小屏(100%)</li></ul><ol start="2"><li>==container-fluid类==</li></ol><ul><li>流式布局容器百分百宽度</li><li>占据全部视口(viewport)的容器</li><li>适合于单独做移动端开发</li></ul><hr><h4 id="删格系统"><a href="#删格系统" class="headerlink" title="删格系统"></a>删格系统</h4><p>Bootstrap提供了一套响应式、移动设备优先的流式删格系统,随着屏幕或视口(viewport)的增加,系统会自动划分为最多==12列==.</p><p>Bootstrap里面的container宽度式固定的,但是不同屏幕下,container的宽度不同,我们再把container划分为12等份.</p><p>==删格选项参数==</p><table><thead><tr><th align="left">.container最大宽度</th><th align="center">自动(100%)</th><th align="center">750px</th><th align="center">970px</th><th align="center">1170px</th></tr></thead><tbody><tr><td align="left">类前缀</td><td align="center">.col-xs-</td><td align="center">.col-sm-</td><td align="center">.col-md-</td><td align="center">.col-lg-</td></tr><tr><td align="left">列数(column)</td><td align="center">12</td><td align="center">12</td><td align="center">12</td><td align="center">12</td></tr></tbody></table><ul><li>行(row)必须放到container布局容器里面</li><li>我们实现列的平均划分 需要给列添加<font color=red>类前缀</font></li><li>xs-extra small:超小; sm-small:小; md-medium: 中等; lg-large: 大;</li><li>列(column)大于12,多余的“列(cloumn)” 所在的元素将被作为一个整体另起一行排列</li><li>每一列默认有15像素的padding</li><li>可以同时为一列指定多个设备的类名,以便划分不同的份数 例如 class = “col-md-4 col-sm-6”</li></ul><hr><p>==列嵌套==</p><p>删格系统中的列内再分成若干小列.我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内.</p><p><font color=red>我们列嵌套最好加1个行row这样可以取消父元素的padding值而且高度自动和父级一样高</font></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--列嵌套--></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-4"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-6"</span>></span>小列<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-6"</span>></span>小列<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><p>==列偏移==</p><p>使用.col-md-offset-<em>类可以将列向右侧偏移,这些类世纪是通过使用</em>选择器为当前元素增加了左侧的边距(margin)</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4"</span>></span>左<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- 偏移的份数 就是 12 - 两个盒子的份数 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 col-md-offset-4"</span>></span>右<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> </span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="comment"><!-- 只有一个盒子 偏移 12 - 所占份数 /2 水平居中 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-8 col-md-offset-2"</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><p>==列排序==</p><p>通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的该拜年列(column)的顺序</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="comment"><!-- 推 是向右 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-4 col-md-push-8"</span>></span>左侧<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- 拉 是向左 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-md-8 col-md-pull-4"</span>></span>右侧<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><p>==响应式工具==</p><p>为了加快移动设备友好页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的真对不同设备展示或隐藏页面内容.</p><table><thead><tr><th>类名</th><th>超小屏</th><th>小屏</th><th>中屏</th><th>大屏</th></tr></thead><tbody><tr><td>.hidden-xs</td><td>隐藏</td><td>可见</td><td>可见</td><td>可见</td></tr><tr><td>.hidden-sm</td><td>可见</td><td>隐藏</td><td>可见</td><td>可见</td></tr><tr><td>.hidden-md</td><td>可见</td><td>可见</td><td>隐藏</td><td>可见</td></tr><tr><td>hidden-lg</td><td>可见</td><td>可见</td><td>可见</td><td>隐藏</td></tr></tbody></table><p>与之相反,visible-xs visible-sm visible-md visible-lg是显示某个页面内容</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-xs-3"</span>></span>1</span><br><span class="line"> <span class="comment"><!-- 大屏幕时显示 --></span></span><br><span class="line"> <span class="tag"><<span class="name">span</span> <span class="attr">class</span>=<span class="string">"visible-lg"</span>></span>我是span<span class="tag"></<span class="name">span</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- 小屏幕消失 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-xs-3 hidden-sm"</span>></span>2<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- 中屏幕时消失 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-xs-3 hidden-md"</span>></span>3<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="comment"><!-- 大屏幕时消失 --></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-xs-3 hidden-lg"</span>></span>4<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><hr><h3 id="VW和VH"><a href="#VW和VH" class="headerlink" title="VW和VH"></a>VW和VH</h3><h4 id="什么是vw-amp-vh"><a href="#什么是vw-amp-vh" class="headerlink" title="什么是vw&vh"></a>什么是vw&vh</h4><ul><li>vw&vh是一个相对单位(类似于em和rem相对单位)<ul><li>vw是: viewport width 视口宽度单位</li><li>vh是: viewport height 视口高度单位</li></ul></li><li>相对视口的尺寸计算结果<ul><li>1vw = 1/100视口宽度</li><li>1vh = 1/100视口高度</li></ul></li></ul><p><font color=red>注意:</font></p><ol><li>和百分比有区别的,百分比是相对于==父元素==来说的,而vw和vh总是针对==当前视口==来说的</li><li>因为涉及到大量除法, 还是适应Less搭配更好点</li><li>我们本质是根据视口来等比例缩放页面元素高度和宽度的,所以开发中使用vw就基本就够了,vh很少使用.</li></ol>]]></content>
<categories>
<category> CSS </category>
</categories>
<tags>
<tag> CSS </tag>
</tags>
</entry>
<entry>
<title>Vue-cli应用</title>
<link href="/2021/07/09/Vue-cli/"/>
<url>/2021/07/09/Vue-cli/</url>
<content type="html"><![CDATA[<span id="more"></span><h2 id="脚手架文件结构"><a href="#脚手架文件结构" class="headerlink" title="脚手架文件结构"></a>脚手架文件结构</h2><pre><code>├── node_modules ├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── logo.png│ │── component: 存放组件│ │ └── HelloWorld.vue│ │── App.vue: 汇总所有组件│ │── main.js: 入口文件├── .gitignore: git版本管制忽略的配置├── babel.config.js: babel的配置文件├── package.json: 应用包配置文件 ├── README.md: 应用描述文件├── package-lock.json：包版本控制文件</code></pre><h2 id="关于不同版本的Vue"><a href="#关于不同版本的Vue" class="headerlink" title="关于不同版本的Vue"></a>关于不同版本的Vue</h2><ol><li>vue.js与vue.runtime.xxx.js的区别：<ol><li>vue.js是完整版的Vue，包含：核心功能 + 模板解析器。</li><li>vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。</li></ol></li><li>因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。</li></ol><h2 id="vue-config-js配置文件"><a href="#vue-config-js配置文件" class="headerlink" title="vue.config.js配置文件"></a>vue.config.js配置文件</h2><ol><li>使用vue inspect > output.js可以查看到Vue脚手架的默认配置。</li><li>使用vue.config.js可以对脚手架进行个性化定制，详情见：<a href="https://cli.vuejs.org/zh">https://cli.vuejs.org/zh</a></li></ol><h2 id="ref属性"><a href="#ref属性" class="headerlink" title="ref属性"></a>ref属性</h2><ol><li>被用来给元素或子组件注册引用信息（id的替代者）</li><li>应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）</li><li>使用方式：<ol><li>打标识：<code><h1 ref="xxx">.....</h1></code> 或 <code><School ref="xxx"></School></code></li><li>获取：<code>this.$refs.xxx</code></li></ol></li></ol><h2 id="props配置项"><a href="#props配置项" class="headerlink" title="props配置项"></a>props配置项</h2><ol><li><p>功能：让组件接收外部传过来的数据</p></li><li><p>传递数据：<code><Demo name="xxx"/></code></p></li><li><p>接收数据：</p><ol><li><p>第一种方式（只接收）：<code>props:['name'] </code></p></li><li><p>第二种方式（限制类型）：<code>props:{name:String}</code></p></li><li><p>第三种方式（限制类型、限制必要性、指定默认值）：</p> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">props:{</span><br><span class="line"><span class="attr">name</span>:{</span><br><span class="line"><span class="attr">type</span>:<span class="built_in">String</span>, <span class="comment">//类型</span></span><br><span class="line"><span class="attr">required</span>:<span class="literal">true</span>, <span class="comment">//必要性</span></span><br><span class="line"><span class="attr">default</span>:<span class="string">'老王'</span> <span class="comment">//默认值</span></span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><blockquote><p>备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。</p></blockquote></li></ol><h2 id="mixin-混入"><a href="#mixin-混入" class="headerlink" title="mixin(混入)"></a>mixin(混入)</h2><ol><li><p>功能：可以把多个组件共用的配置提取成一个混入对象</p></li><li><p>使用方式：</p><p> 第一步定义混合：</p> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> data(){....},</span><br><span class="line"> methods:{....}</span><br><span class="line"> ....</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p> 第二步使用混入：</p><p> 全局混入：<code>Vue.mixin(xxx)</code><br> 局部混入：<code>mixins:['xxx'] </code></p></li></ol><h2 id="插件"><a href="#插件" class="headerlink" title="插件"></a>插件</h2><ol><li><p>功能：用于增强Vue</p></li><li><p>本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。</p></li><li><p>定义插件：</p> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">对象.install = <span class="function"><span class="keyword">function</span> (<span class="params">Vue, options</span>) </span>{</span><br><span class="line"> <span class="comment">// 1. 添加全局过滤器</span></span><br><span class="line"> Vue.filter(....)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 2. 添加全局指令</span></span><br><span class="line"> Vue.directive(....)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 3. 配置全局混入(合)</span></span><br><span class="line"> Vue.mixin(....)</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 4. 添加实例方法</span></span><br><span class="line"> Vue.prototype.$myMethod = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{...}</span><br><span class="line"> Vue.prototype.$myProperty = xxxx</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>使用插件：<code>Vue.use()</code></p></li></ol><h2 id="scoped样式"><a href="#scoped样式" class="headerlink" title="scoped样式"></a>scoped样式</h2><ol><li>作用：让样式在局部生效，防止冲突。</li><li>写法：<code><style scoped></code></li></ol><h2 id="总结TodoList案例"><a href="#总结TodoList案例" class="headerlink" title="总结TodoList案例"></a>总结TodoList案例</h2><ol><li><p>组件化编码流程：</p><p> (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。</p><p> (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：</p><p> 1).一个组件在用：放在组件自身即可。</p><p> 2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。</p><p> (3).实现交互：从绑定事件开始。</p></li><li><p>props适用于：</p><p> (1).父组件 ==> 子组件 通信</p><p> (2).子组件 ==> 父组件 通信（要求父先给子一个函数）</p></li><li><p>使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！</p></li><li><p>props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。</p></li></ol><h2 id="webStorage"><a href="#webStorage" class="headerlink" title="webStorage"></a>webStorage</h2><ol><li><p>存储内容大小一般支持5MB左右（不同浏览器可能还不一样）</p></li><li><p>浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。</p></li><li><p>相关API：</p><ol><li><p><code>xxxxxStorage.setItem('key', 'value');</code></p><pre><code> 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。</code></pre></li><li><p><code>xxxxxStorage.getItem('person');</code></p><p> 该方法接受一个键名作为参数，返回键名对应的值。</p></li><li><p><code>xxxxxStorage.removeItem('key');</code></p><p> 该方法接受一个键名作为参数，并把该键名从存储中删除。</p></li><li><p><code> xxxxxStorage.clear()</code></p><p> 该方法会清空存储中的所有数据。</p></li></ol></li><li><p>备注：</p><ol><li>SessionStorage存储的内容会随着浏览器窗口关闭而消失。</li><li>LocalStorage存储的内容，需要手动清除才会消失。</li><li><code>xxxxxStorage.getItem(xxx)</code>如果xxx对应的value获取不到，那么getItem的返回值是null。</li><li><code>JSON.parse(null)</code>的结果依然是null。</li></ol></li></ol><h2 id="组件的自定义事件"><a href="#组件的自定义事件" class="headerlink" title="组件的自定义事件"></a>组件的自定义事件</h2><ol><li><p>一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong></p></li><li><p>使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。</p></li><li><p>绑定自定义事件：</p><ol><li><p>第一种方式，在父组件中：<code><Demo @atguigu="test"/></code> 或 <code><Demo v-on:atguigu="test"/></code></p></li><li><p>第二种方式，在父组件中：</p> <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><Demo ref=<span class="string">"demo"</span>/></span><br><span class="line">......</span><br><span class="line"><span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">this</span>.$refs.xxx.$on(<span class="string">'atguigu'</span>,<span class="built_in">this</span>.test)</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>若想让自定义事件只能触发一次，可以使用<code>once</code>修饰符，或<code>$once</code>方法。</p></li></ol></li><li><p>触发自定义事件：<code>this.$emit('atguigu',数据)</code> </p></li><li><p>解绑自定义事件<code>this.$off('atguigu')</code></p></li><li><p>组件上也可以绑定原生DOM事件，需要使用<code>native</code>修饰符。</p></li><li><p>注意：通过<code>this.$refs.xxx.$on('atguigu',回调)</code>绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！</p></li></ol><h2 id="全局事件总线（GlobalEventBus）"><a href="#全局事件总线（GlobalEventBus）" class="headerlink" title="全局事件总线（GlobalEventBus）"></a>全局事件总线（GlobalEventBus）</h2><ol><li><p>一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。</p></li><li><p>安装全局事件总线：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line">......</span><br><span class="line"><span class="function"><span class="title">beforeCreate</span>(<span class="params"></span>)</span> {</span><br><span class="line">Vue.prototype.$bus = <span class="built_in">this</span> <span class="comment">//安装全局事件总线，$bus就是当前应用的vm</span></span><br><span class="line">},</span><br><span class="line"> ......</span><br><span class="line">}) </span><br></pre></td></tr></table></figure></li><li><p>使用事件总线：</p><ol><li><p>接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">methods</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="function"><span class="title">demo</span>(<span class="params">data</span>)</span>{......}</span><br><span class="line">}</span><br><span class="line">......</span><br><span class="line"><span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.$bus.$on(<span class="string">'xxxx'</span>,<span class="built_in">this</span>.demo)</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>提供数据：<code>this.$bus.$emit('xxxx',数据)</code></p></li></ol></li><li><p>最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。</p></li></ol><h2 id="消息订阅与发布（pubsub）"><a href="#消息订阅与发布（pubsub）" class="headerlink" title="消息订阅与发布（pubsub）"></a>消息订阅与发布（pubsub）</h2><ol><li><p> 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。</p></li><li><p>使用步骤：</p><ol><li><p>安装pubsub：<code>npm i pubsub-js</code></p></li><li><p>引入: <code>import pubsub from 'pubsub-js'</code></p></li><li><p>接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">methods</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="function"><span class="title">demo</span>(<span class="params">data</span>)</span>{......}</span><br><span class="line">}</span><br><span class="line">......</span><br><span class="line"><span class="function"><span class="title">mounted</span>(<span class="params"></span>)</span> {</span><br><span class="line"> <span class="built_in">this</span>.pid = pubsub.subscribe(<span class="string">'xxx'</span>,<span class="built_in">this</span>.demo) <span class="comment">//订阅消息</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>提供数据：<code>pubsub.publish('xxx',数据)</code></p></li><li><p>最好在beforeDestroy钩子中，用<code>PubSub.unsubscribe(pid)</code>去<span style="color:red">取消订阅。</span></p></li></ol></li></ol><h2 id="nextTick"><a href="#nextTick" class="headerlink" title="nextTick"></a>nextTick</h2><ol><li>语法：<code>this.geohash, (回调函数)</code></li><li>作用：在下一次 DOM 更新结束后执行其指定的回调。</li><li>什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。</li></ol><h2 id="Vue封装的过度与动画"><a href="#Vue封装的过度与动画" class="headerlink" title="Vue封装的过度与动画"></a>Vue封装的过度与动画</h2><ol><li><p>作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。</p></li><li><p>图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" /></p></li><li><p>写法：</p><ol><li><p>准备好样式：</p><ul><li>元素进入的样式：<ol><li>v-enter：进入的起点</li><li>v-enter-active：进入过程中</li><li>v-enter-to：进入的终点</li></ol></li><li>元素离开的样式：<ol><li>v-leave：离开的起点</li><li>v-leave-active：离开过程中</li><li>v-leave-to：离开的终点</li></ol></li></ul></li><li><p>使用<code><transition></code>包裹要过度的元素，并配置name属性：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><transition name="hello"></span><br><span class="line"><h1 v-show="isShow">你好啊！</h1></span><br><span class="line"></transition></span><br></pre></td></tr></table></figure></li><li><p>备注：若有多个元素需要过度，则需要使用：<code><transition-group></code>，且每个元素都要指定<code>key</code>值。</p></li></ol></li></ol><h2 id="vue脚手架配置代理"><a href="#vue脚手架配置代理" class="headerlink" title="vue脚手架配置代理"></a>vue脚手架配置代理</h2><h3 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h3><p> 在vue.config.js中添加如下配置：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">devServer:{</span><br><span class="line"> <span class="attr">proxy</span>:<span class="string">"http://localhost:5000"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>说明：</p><ol><li>优点：配置简单，请求资源时直接发给前端（8080）即可。</li><li>缺点：不能配置多个代理，不能灵活的控制请求是否走代理。</li><li>工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）</li></ol><h3 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h3><p> 编写vue.config.js配置具体代理规则：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = {</span><br><span class="line"><span class="attr">devServer</span>: {</span><br><span class="line"> <span class="attr">proxy</span>: {</span><br><span class="line"> <span class="string">'/api1'</span>: {<span class="comment">// 匹配所有以 '/api1'开头的请求路径 加了就直接发送给其他服务器</span></span><br><span class="line"> <span class="attr">target</span>: <span class="string">'http://localhost:5000'</span>,<span class="comment">// 代理目标的基础路径</span></span><br><span class="line"> <span class="attr">changeOrigin</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">pathRewrite</span>: {<span class="string">'^/api1'</span>: <span class="string">''</span>}</span><br><span class="line"> },</span><br><span class="line"> <span class="string">'/api2'</span>: {<span class="comment">// 匹配所有以 '/api2'开头的请求路径</span></span><br><span class="line"> <span class="attr">target</span>: <span class="string">'http://localhost:5001'</span>,<span class="comment">// 代理目标的基础路径</span></span><br><span class="line"> <span class="attr">changeOrigin</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">pathRewrite</span>: {<span class="string">'^/api2'</span>: <span class="string">''</span>}</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000</span></span><br><span class="line"><span class="comment"> changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080</span></span><br><span class="line"><span class="comment"> changeOrigin默认值为true</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure><p>说明：</p><ol><li>优点：可以配置多个代理，且可以灵活的控制请求是否走代理。</li><li>缺点：配置略微繁琐，请求资源时必须加前缀。</li></ol><h2 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h2><ol><li><p>作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red">父组件 ===> 子组件</strong> 。</p></li><li><p>分类：默认插槽、具名插槽、作用域插槽</p></li><li><p>使用方式：</p><ol><li><p>默认插槽：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">父组件中：</span><br><span class="line"> <Category></span><br><span class="line"> <div>html结构1</div></span><br><span class="line"> </Category></span><br><span class="line">子组件中：</span><br><span class="line"> <template></span><br><span class="line"> <div></span><br><span class="line"> <!-- 定义插槽 --></span><br><span class="line"> <slot>插槽默认内容...</slot></span><br><span class="line"> </div></span><br><span class="line"> </template></span><br></pre></td></tr></table></figure></li><li><p>具名插槽：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">父组件中：</span><br><span class="line"> <Category></span><br><span class="line"> <template slot="center"></span><br><span class="line"> <div>html结构1</div></span><br><span class="line"> </template></span><br><span class="line"></span><br><span class="line"> <template v-slot:footer></span><br><span class="line"> <div>html结构2</div></span><br><span class="line"> </template></span><br><span class="line"> </Category></span><br><span class="line">子组件中：</span><br><span class="line"> <template></span><br><span class="line"> <div></span><br><span class="line"> <!-- 定义插槽 --></span><br><span class="line"> <slot name="center">插槽默认内容...</slot></span><br><span class="line"> <slot name="footer">插槽默认内容...</slot></span><br><span class="line"> </div></span><br><span class="line"> </template></span><br></pre></td></tr></table></figure></li><li><p>作用域插槽：</p><ol><li><p>理解：<span style="color:red">数据在子组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）</p></li><li><p>具体编码：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">父组件中：</span><br><span class="line"><Category></span><br><span class="line"><template scope="scopeData"></span><br><span class="line"><!-- 生成的是ul列表 --></span><br><span class="line"><ul></span><br><span class="line"><li v-for="g in scopeData.games" :key="g">{{g}}</li></span><br><span class="line"></ul></span><br><span class="line"></template></span><br><span class="line"></Category></span><br><span class="line"></span><br><span class="line"><Category></span><br><span class="line"><template slot-scope="scopeData"></span><br><span class="line"><!-- 生成的是h4标题 --></span><br><span class="line"><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></span><br><span class="line"></template></span><br><span class="line"></Category></span><br><span class="line">子组件中：</span><br><span class="line"> <template></span><br><span class="line"> <div></span><br><span class="line"> <slot :games="games"></slot></span><br><span class="line"> </div></span><br><span class="line"> </template></span><br><span class="line"></span><br><span class="line"> <script></span><br><span class="line"> export default {</span><br><span class="line"> name:'Category',</span><br><span class="line"> props:['title'],</span><br><span class="line"> //数据在子组件自身</span><br><span class="line"> data() {</span><br><span class="line"> return {</span><br><span class="line"> games:['红色警戒','穿越火线','劲舞团','超级玛丽']</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> }</span><br><span class="line"> </script></span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"> </span><br></pre></td></tr></table></figure></li></ol></li></ol></li></ol><h2 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a>Vuex</h2><h3 id="1-概念"><a href="#1-概念" class="headerlink" title="1.概念"></a>1.概念</h3><p> 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。</p><h3 id="2-何时使用？"><a href="#2-何时使用？" class="headerlink" title="2.何时使用？"></a>2.何时使用？</h3><p> 多个组件需要共享数据时</p><h3 id="3-搭建vuex环境"><a href="#3-搭建vuex环境" class="headerlink" title="3.搭建vuex环境"></a>3.搭建vuex环境</h3><ol><li><p>创建文件：<code>src/store/index.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入Vue核心库</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="comment">//引入Vuex</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"><span class="comment">//应用Vuex插件</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="comment">//准备actions对象——响应组件中用户的动作</span></span><br><span class="line"><span class="keyword">const</span> actions = {}</span><br><span class="line"><span class="comment">//准备mutations对象——修改state中的数据</span></span><br><span class="line"><span class="keyword">const</span> mutations = {}</span><br><span class="line"><span class="comment">//准备state对象——保存具体的数据</span></span><br><span class="line"><span class="keyword">const</span> state = {}</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store({</span><br><span class="line">actions,</span><br><span class="line">mutations,</span><br><span class="line">state</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>在<code>main.js</code>中创建vm时传入<code>store</code>配置项</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">......</span><br><span class="line"><span class="comment">//引入store</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'./store'</span></span><br><span class="line">......</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建vm</span></span><br><span class="line"><span class="keyword">new</span> Vue({</span><br><span class="line"><span class="attr">el</span>:<span class="string">'#app'</span>,</span><br><span class="line"><span class="attr">render</span>: <span class="function"><span class="params">h</span> =></span> h(App),</span><br><span class="line">store</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li></ol><h3 id="4-基本使用"><a href="#4-基本使用" class="headerlink" title="4.基本使用"></a>4.基本使用</h3><ol><li><p>初始化数据、配置<code>actions</code>、配置<code>mutations</code>，操作文件<code>store.js</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入Vue核心库</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="comment">//引入Vuex</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"><span class="comment">//引用Vuex</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> actions = {</span><br><span class="line"> <span class="comment">//响应组件中加的动作</span></span><br><span class="line"><span class="function"><span class="title">jia</span>(<span class="params">context,value</span>)</span>{</span><br><span class="line"><span class="comment">// console.log('actions中的jia被调用了',miniStore,value)</span></span><br><span class="line">context.commit(<span class="string">'JIA'</span>,value)</span><br><span class="line">},</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mutations = {</span><br><span class="line"> <span class="comment">//执行加</span></span><br><span class="line"><span class="function"><span class="title">JIA</span>(<span class="params">state,value</span>)</span>{</span><br><span class="line"><span class="comment">// console.log('mutations中的JIA被调用了',state,value)</span></span><br><span class="line">state.sum += value</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//初始化数据</span></span><br><span class="line"><span class="keyword">const</span> state = {</span><br><span class="line"> <span class="attr">sum</span>:<span class="number">0</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store({</span><br><span class="line">actions,</span><br><span class="line">mutations,</span><br><span class="line">state,</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>组件中读取vuex中的数据：<code>$store.state.sum</code></p></li><li><p>组件中修改vuex中的数据：<code>$store.dispatch('action中的方法名',数据)</code> 或 <code>$store.commit('mutations中的方法名',数据)</code></p><blockquote><p> 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写<code>dispatch</code>，直接编写<code>commit</code></p></blockquote></li></ol><h3 id="5-getters的使用"><a href="#5-getters的使用" class="headerlink" title="5.getters的使用"></a>5.getters的使用</h3><ol><li><p>概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。</p></li><li><p>在<code>store.js</code>中追加<code>getters</code>配置</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">......</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> getters = {</span><br><span class="line"><span class="function"><span class="title">bigSum</span>(<span class="params">state</span>)</span>{</span><br><span class="line"><span class="keyword">return</span> state.sum * <span class="number">10</span></span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//创建并暴露store</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store({</span><br><span class="line">......</span><br><span class="line">getters</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>组件中读取数据：<code>$store.getters.bigSum</code></p></li></ol><h3 id="6-四个map方法的使用"><a href="#6-四个map方法的使用" class="headerlink" title="6.四个map方法的使用"></a>6.四个map方法的使用</h3><ol><li><p><strong>mapState方法：</strong>用于帮助我们映射<code>state</code>中的数据为计算属性</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">computed: {</span><br><span class="line"> <span class="comment">//借助mapState生成计算属性：sum、school、subject（对象写法）</span></span><br><span class="line"> ...mapState({<span class="attr">sum</span>:<span class="string">'sum'</span>,<span class="attr">school</span>:<span class="string">'school'</span>,<span class="attr">subject</span>:<span class="string">'subject'</span>}),</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//借助mapState生成计算属性：sum、school、subject（数组写法）</span></span><br><span class="line"> ...mapState([<span class="string">'sum'</span>,<span class="string">'school'</span>,<span class="string">'subject'</span>]),</span><br><span class="line">},</span><br></pre></td></tr></table></figure></li><li><p><strong>mapGetters方法：</strong>用于帮助我们映射<code>getters</code>中的数据为计算属性</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">computed: {</span><br><span class="line"> <span class="comment">//借助mapGetters生成计算属性：bigSum（对象写法）</span></span><br><span class="line"> ...mapGetters({<span class="attr">bigSum</span>:<span class="string">'bigSum'</span>}),</span><br><span class="line"></span><br><span class="line"> <span class="comment">//借助mapGetters生成计算属性：bigSum（数组写法）</span></span><br><span class="line"> ...mapGetters([<span class="string">'bigSum'</span>])</span><br><span class="line">},</span><br></pre></td></tr></table></figure></li><li><p><strong>mapActions方法：</strong>用于帮助我们生成与<code>actions</code>对话的方法，即：包含<code>$store.dispatch(xxx)</code>的函数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods:{</span><br><span class="line"> <span class="comment">//靠mapActions生成：incrementOdd、incrementWait（对象形式）</span></span><br><span class="line"> ...mapActions({<span class="attr">incrementOdd</span>:<span class="string">'jiaOdd'</span>,<span class="attr">incrementWait</span>:<span class="string">'jiaWait'</span>})</span><br><span class="line"></span><br><span class="line"> <span class="comment">//靠mapActions生成：incrementOdd、incrementWait（数组形式）</span></span><br><span class="line"> ...mapActions([<span class="string">'jiaOdd'</span>,<span class="string">'jiaWait'</span>])</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p><strong>mapMutations方法：</strong>用于帮助我们生成与<code>mutations</code>对话的方法，即：包含<code>$store.commit(xxx)</code>的函数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods:{</span><br><span class="line"> <span class="comment">//靠mapActions生成：increment、decrement（对象形式）</span></span><br><span class="line"> ...mapMutations({<span class="attr">increment</span>:<span class="string">'JIA'</span>,<span class="attr">decrement</span>:<span class="string">'JIAN'</span>}),</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//靠mapMutations生成：JIA、JIAN（对象形式）</span></span><br><span class="line"> ...mapMutations([<span class="string">'JIA'</span>,<span class="string">'JIAN'</span>]),</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><blockquote><p>备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。</p></blockquote><h3 id="7-模块化-命名空间"><a href="#7-模块化-命名空间" class="headerlink" title="7.模块化+命名空间"></a>7.模块化+命名空间</h3><ol><li><p>目的：让代码更好维护，让多种数据分类更加明确。</p></li><li><p>修改<code>store.js</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> countAbout = {</span><br><span class="line"> <span class="attr">namespaced</span>:<span class="literal">true</span>,<span class="comment">//开启命名空间</span></span><br><span class="line"> <span class="attr">state</span>:{<span class="attr">x</span>:<span class="number">1</span>},</span><br><span class="line"> <span class="attr">mutations</span>: { ... },</span><br><span class="line"> <span class="attr">actions</span>: { ... },</span><br><span class="line"> <span class="attr">getters</span>: {</span><br><span class="line"> <span class="function"><span class="title">bigSum</span>(<span class="params">state</span>)</span>{</span><br><span class="line"> <span class="keyword">return</span> state.sum * <span class="number">10</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> personAbout = {</span><br><span class="line"> <span class="attr">namespaced</span>:<span class="literal">true</span>,<span class="comment">//开启命名空间</span></span><br><span class="line"> <span class="attr">state</span>:{ ... },</span><br><span class="line"> <span class="attr">mutations</span>: { ... },</span><br><span class="line"> <span class="attr">actions</span>: { ... }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store({</span><br><span class="line"> <span class="attr">modules</span>: {</span><br><span class="line"> countAbout,</span><br><span class="line"> personAbout</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>开启命名空间后，组件中读取state数据：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接读取</span></span><br><span class="line"><span class="built_in">this</span>.$store.state.personAbout.list</span><br><span class="line"><span class="comment">//方式二：借助mapState读取：</span></span><br><span class="line">...mapState(<span class="string">'countAbout'</span>,[<span class="string">'sum'</span>,<span class="string">'school'</span>,<span class="string">'subject'</span>]),</span><br></pre></td></tr></table></figure></li><li><p>开启命名空间后，组件中读取getters数据：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接读取</span></span><br><span class="line"><span class="built_in">this</span>.$store.getters[<span class="string">'personAbout/firstPersonName'</span>]</span><br><span class="line"><span class="comment">//方式二：借助mapGetters读取：</span></span><br><span class="line">...mapGetters(<span class="string">'countAbout'</span>,[<span class="string">'bigSum'</span>])</span><br></pre></td></tr></table></figure></li><li><p>开启命名空间后，组件中调用dispatch</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接dispatch</span></span><br><span class="line"><span class="built_in">this</span>.$store.dispatch(<span class="string">'personAbout/addPersonWang'</span>,person)</span><br><span class="line"><span class="comment">//方式二：借助mapActions：</span></span><br><span class="line">...mapActions(<span class="string">'countAbout'</span>,{<span class="attr">incrementOdd</span>:<span class="string">'jiaOdd'</span>,<span class="attr">incrementWait</span>:<span class="string">'jiaWait'</span>})</span><br></pre></td></tr></table></figure></li><li><p>开启命名空间后，组件中调用commit</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方式一：自己直接commit</span></span><br><span class="line"><span class="built_in">this</span>.$store.commit(<span class="string">'personAbout/ADD_PERSON'</span>,person)</span><br><span class="line"><span class="comment">//方式二：借助mapMutations：</span></span><br><span class="line">...mapMutations(<span class="string">'countAbout'</span>,{<span class="attr">increment</span>:<span class="string">'JIA'</span>,<span class="attr">decrement</span>:<span class="string">'JIAN'</span>}),</span><br></pre></td></tr></table></figure></li></ol><h2 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h2><ol><li>理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。</li><li>前端路由：key是路径，value是组件。</li></ol><h3 id="1-基本使用"><a href="#1-基本使用" class="headerlink" title="1.基本使用"></a>1.基本使用</h3><ol><li><p>安装vue-router，命令：<code>npm i vue-router</code></p></li><li><p>应用插件：<code>Vue.use(VueRouter)</code></p></li><li><p>编写router配置项:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入VueRouter</span></span><br><span class="line"><span class="keyword">import</span> VueRouter <span class="keyword">from</span> <span class="string">'vue-router'</span></span><br><span class="line"><span class="comment">//引入Luyou 组件</span></span><br><span class="line"><span class="keyword">import</span> About <span class="keyword">from</span> <span class="string">'../components/About'</span></span><br><span class="line"><span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">'../components/Home'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建router实例对象，去管理一组一组的路由规则</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter({</span><br><span class="line"><span class="attr">routes</span>:[</span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'/about'</span>,</span><br><span class="line"><span class="attr">component</span>:About</span><br><span class="line">},</span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'/home'</span>,</span><br><span class="line"><span class="attr">component</span>:Home</span><br><span class="line">}</span><br><span class="line">]</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//暴露router</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure></li><li><p>实现切换（active-class可配置高亮样式）</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><router-link active-class="active" to="/about">About</router-link></span><br></pre></td></tr></table></figure></li><li><p>指定展示位置</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><router-view></router-view></span><br></pre></td></tr></table></figure></li></ol><h3 id="2-几个注意点"><a href="#2-几个注意点" class="headerlink" title="2.几个注意点"></a>2.几个注意点</h3><ol><li>路由组件通常存放在<code>pages</code>文件夹，一般组件通常存放在<code>components</code>文件夹。</li><li>通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。</li><li>每个组件都有自己的<code>$route</code>属性，里面存储着自己的路由信息。</li><li>整个应用只有一个router，可以通过组件的<code>$router</code>属性获取到。</li></ol><h3 id="3-多级路由（多级路由）"><a href="#3-多级路由（多级路由）" class="headerlink" title="3.多级路由（多级路由）"></a>3.多级路由（多级路由）</h3><ol><li><p>配置路由规则，使用children配置项：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">routes:[</span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'/about'</span>,</span><br><span class="line"><span class="attr">component</span>:About,</span><br><span class="line">},</span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'/home'</span>,</span><br><span class="line"><span class="attr">component</span>:Home,</span><br><span class="line"><span class="attr">children</span>:[ <span class="comment">//通过children配置子级路由</span></span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'news'</span>, <span class="comment">//此处一定不要写：/news</span></span><br><span class="line"><span class="attr">component</span>:News</span><br><span class="line">},</span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'message'</span>,<span class="comment">//此处一定不要写：/message</span></span><br><span class="line"><span class="attr">component</span>:Message</span><br><span class="line">}</span><br><span class="line">]</span><br><span class="line">}</span><br><span class="line">]</span><br></pre></td></tr></table></figure></li><li><p>跳转（要写完整路径）：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><router-link to="/home/news">News</router-link></span><br></pre></td></tr></table></figure></li></ol><h3 id="4-路由的query参数"><a href="#4-路由的query参数" class="headerlink" title="4.路由的query参数"></a>4.路由的query参数</h3><ol><li><p>传递参数</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><!-- 跳转并携带query参数，to的字符串写法 --></span><br><span class="line"><router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link></span><br><span class="line"></span><br><span class="line"><!-- 跳转并携带query参数，to的对象写法 --></span><br><span class="line"><router-link </span><br><span class="line">:to="{</span><br><span class="line">path:'/home/message/detail',</span><br><span class="line">query:{</span><br><span class="line"> id:666,</span><br><span class="line"> title:'你好'</span><br><span class="line">}</span><br><span class="line">}"</span><br><span class="line">>跳转</router-link></span><br></pre></td></tr></table></figure></li><li><p>接收参数：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.query.id</span><br><span class="line">$route.query.title</span><br></pre></td></tr></table></figure></li></ol><h3 id="5-命名路由"><a href="#5-命名路由" class="headerlink" title="5.命名路由"></a>5.命名路由</h3><ol><li><p>作用：可以简化路由的跳转。</p></li><li><p>如何使用</p><ol><li><p>给路由命名：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'/demo'</span>,</span><br><span class="line"><span class="attr">component</span>:Demo,</span><br><span class="line"><span class="attr">children</span>:[</span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'test'</span>,</span><br><span class="line"><span class="attr">component</span>:Test,</span><br><span class="line"><span class="attr">children</span>:[</span><br><span class="line">{</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'hello'</span> <span class="comment">//给路由命名</span></span><br><span class="line"><span class="attr">path</span>:<span class="string">'welcome'</span>,</span><br><span class="line"><span class="attr">component</span>:Hello,</span><br><span class="line">}</span><br><span class="line">]</span><br><span class="line">}</span><br><span class="line">]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>简化跳转：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><!--简化前，需要写完整的路径 --></span><br><span class="line"><router-link to="/demo/test/welcome">跳转</router-link></span><br><span class="line"></span><br><span class="line"><!--简化后，直接通过名字跳转 --></span><br><span class="line"><router-link :to="{name:'hello'}">跳转</router-link></span><br><span class="line"></span><br><span class="line"><!--简化写法配合传递参数 --></span><br><span class="line"><router-link </span><br><span class="line">:to="{</span><br><span class="line">name:'hello',</span><br><span class="line">query:{</span><br><span class="line"> id:666,</span><br><span class="line"> title:'你好'</span><br><span class="line">}</span><br><span class="line">}"</span><br><span class="line">>跳转</router-link></span><br></pre></td></tr></table></figure></li></ol></li></ol><h3 id="6-路由的params参数"><a href="#6-路由的params参数" class="headerlink" title="6.路由的params参数"></a>6.路由的params参数</h3><ol><li><p>配置路由，声明接收params参数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'/home'</span>,</span><br><span class="line"><span class="attr">component</span>:Home,</span><br><span class="line"><span class="attr">children</span>:[</span><br><span class="line">{</span><br><span class="line"><span class="attr">path</span>:<span class="string">'news'</span>,</span><br><span class="line"><span class="attr">component</span>:News</span><br><span class="line">},</span><br><span class="line">{</span><br><span class="line"><span class="attr">component</span>:Message,</span><br><span class="line"><span class="attr">children</span>:[</span><br><span class="line">{</span><br><span class="line"><span class="attr">name</span>:<span class="string">'xiangqing'</span>,</span><br><span class="line"><span class="attr">path</span>:<span class="string">'detail/:id/:title'</span>, <span class="comment">//使用占位符声明接收params参数</span></span><br><span class="line"><span class="attr">component</span>:Detail</span><br><span class="line">}</span><br><span class="line">]</span><br><span class="line">}</span><br><span class="line">]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>传递参数</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><!-- 跳转并携带params参数，to的字符串写法 --></span><br><span class="line"><router-link :to="/home/message/detail/666/你好">跳转</router-link></span><br><span class="line"></span><br><span class="line"><!-- 跳转并携带params参数，to的对象写法 --></span><br><span class="line"><router-link </span><br><span class="line">:to="{</span><br><span class="line">name:'xiangqing',</span><br><span class="line">params:{</span><br><span class="line"> id:666,</span><br><span class="line"> title:'你好'</span><br><span class="line">}</span><br><span class="line">}"</span><br><span class="line">>跳转</router-link></span><br></pre></td></tr></table></figure><blockquote><p>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！</p></blockquote></li><li><p>接收参数：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$route.params.id</span><br><span class="line">$route.params.title</span><br></pre></td></tr></table></figure></li></ol><h3 id="7-路由的props配置"><a href="#7-路由的props配置" class="headerlink" title="7.路由的props配置"></a>7.路由的props配置</h3><p> 作用：让路由组件更方便的收到参数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"><span class="attr">name</span>:<span class="string">'xiangqing'</span>,</span><br><span class="line"><span class="attr">path</span>:<span class="string">'detail/:id'</span>,</span><br><span class="line"><span class="attr">component</span>:Detail,</span><br><span class="line"></span><br><span class="line"><span class="comment">//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件</span></span><br><span class="line"><span class="comment">// props:{a:900}</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件</span></span><br><span class="line"><span class="comment">// props:true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件</span></span><br><span class="line"><span class="function"><span class="title">props</span>(<span class="params">route</span>)</span>{</span><br><span class="line"><span class="keyword">return</span> {</span><br><span class="line"><span class="attr">id</span>:route.query.id,</span><br><span class="line"><span class="attr">title</span>:route.query.title</span><br><span class="line">}</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="8-lt-router-link-gt-的replace属性"><a href="#8-lt-router-link-gt-的replace属性" class="headerlink" title="8.<router-link>的replace属性"></a>8.<code><router-link></code>的replace属性</h3><ol><li>作用：控制路由跳转时操作浏览器历史记录的模式</li><li>浏览器的历史记录有两种写入方式：分别为<code>push</code>和<code>replace</code>，<code>push</code>是追加历史记录，<code>replace</code>是替换当前记录。路由跳转时候默认为<code>push</code></li><li>如何开启<code>replace</code>模式：<code><router-link replace .......>News</router-link></code></li></ol><h3 id="9-编程式路由导航"><a href="#9-编程式路由导航" class="headerlink" title="9.编程式路由导航"></a>9.编程式路由导航</h3><ol><li><p>作用：不借助<code><router-link> </code>实现路由跳转，让路由跳转更加灵活</p></li><li><p>具体编码：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$router的两个API</span></span><br><span class="line"><span class="built_in">this</span>.$router.push({</span><br><span class="line"><span class="attr">name</span>:<span class="string">'xiangqing'</span>,</span><br><span class="line"><span class="attr">params</span>:{</span><br><span class="line"><span class="attr">id</span>:xxx,</span><br><span class="line"><span class="attr">title</span>:xxx</span><br><span class="line">}</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="built_in">this</span>.$router.replace({</span><br><span class="line"><span class="attr">name</span>:<span class="string">'xiangqing'</span>,</span><br><span class="line"><span class="attr">params</span>:{</span><br><span class="line"><span class="attr">id</span>:xxx,</span><br><span class="line"><span class="attr">title</span>:xxx</span><br><span class="line">}</span><br><span class="line">})</span><br><span class="line"><span class="built_in">this</span>.$router.forward() <span class="comment">//前进</span></span><br><span class="line"><span class="built_in">this</span>.$router.back() <span class="comment">//后退</span></span><br><span class="line"><span class="built_in">this</span>.$router.go() <span class="comment">//可前进也可后退</span></span><br></pre></td></tr></table></figure></li></ol><h3 id="10-缓存路由组件"><a href="#10-缓存路由组件" class="headerlink" title="10.缓存路由组件"></a>10.缓存路由组件</h3><ol><li><p>作用：让不展示的路由组件保持挂载，不被销毁。</p></li><li><p>具体编码：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><keep-alive include="News"> </span><br><span class="line"> <router-view></router-view></span><br><span class="line"></keep-alive></span><br></pre></td></tr></table></figure></li></ol><h3 id="11-两个新的生命周期钩子"><a href="#11-两个新的生命周期钩子" class="headerlink" title="11.两个新的生命周期钩子"></a>11.两个新的生命周期钩子</h3><ol><li>作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。</li><li>具体名字：<ol><li><code>activated</code>路由组件被激活时触发。</li><li><code>deactivated</code>路由组件失活时触发。</li></ol></li></ol><h3 id="12-路由守卫"><a href="#12-路由守卫" class="headerlink" title="12.路由守卫"></a>12.路由守卫</h3><ol><li><p>作用：对路由进行权限控制</p></li><li><p>分类：全局守卫、独享守卫、组件内守卫</p></li><li><p>全局守卫:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//全局前置守卫：初始化时执行、每次路由切换前执行</span></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to,<span class="keyword">from</span>,next</span>)=></span>{</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'beforeEach'</span>,to,<span class="keyword">from</span>)</span><br><span class="line"><span class="keyword">if</span>(to.meta.isAuth){ <span class="comment">//判断当前路由是否需要进行权限控制</span></span><br><span class="line"><span class="keyword">if</span>(<span class="built_in">localStorage</span>.getItem(<span class="string">'school'</span>) === <span class="string">'atguigu'</span>){ <span class="comment">//权限控制的具体规则</span></span><br><span class="line">next() <span class="comment">//放行</span></span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">alert(<span class="string">'暂无权限查看'</span>)</span><br><span class="line"><span class="comment">// next({name:'guanyu'})</span></span><br><span class="line">}</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">next() <span class="comment">//放行</span></span><br><span class="line">}</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//全局后置守卫：初始化时执行、每次路由切换后执行</span></span><br><span class="line">router.afterEach(<span class="function">(<span class="params">to,<span class="keyword">from</span></span>)=></span>{</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'afterEach'</span>,to,<span class="keyword">from</span>)</span><br><span class="line"><span class="keyword">if</span>(to.meta.title){ </span><br><span class="line"><span class="built_in">document</span>.title = to.meta.title <span class="comment">//修改网页的title</span></span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line"><span class="built_in">document</span>.title = <span class="string">'vue_test'</span></span><br><span class="line">}</span><br><span class="line">})</span><br></pre></td></tr></table></figure></li><li><p>独享守卫:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">beforeEnter</span>(<span class="params">to,<span class="keyword">from</span>,next</span>)</span>{</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'beforeEnter'</span>,to,<span class="keyword">from</span>)</span><br><span class="line"><span class="keyword">if</span>(to.meta.isAuth){ <span class="comment">//判断当前路由是否需要进行权限控制</span></span><br><span class="line"><span class="keyword">if</span>(<span class="built_in">localStorage</span>.getItem(<span class="string">'school'</span>) === <span class="string">'atguigu'</span>){</span><br><span class="line">next()</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">alert(<span class="string">'暂无权限查看'</span>)</span><br><span class="line"><span class="comment">// next({name:'guanyu'})</span></span><br><span class="line">}</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line">next()</span><br><span class="line">}</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li><li><p>组件内守卫：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//进入守卫：通过路由规则，进入该组件时被调用</span></span><br><span class="line">beforeRouteEnter (to, <span class="keyword">from</span>, next) {</span><br><span class="line">},</span><br><span class="line"><span class="comment">//离开守卫：通过路由规则，离开该组件时被调用</span></span><br><span class="line">beforeRouteLeave (to, <span class="keyword">from</span>, next) {</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h3 id="13-路由器的两种工作模式"><a href="#13-路由器的两种工作模式" class="headerlink" title="13.路由器的两种工作模式"></a>13.路由器的两种工作模式</h3><ol><li>对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。</li><li>hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。</li><li>hash模式：<ol><li>地址中永远带着#号，不美观 。</li><li>若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。</li><li>兼容性较好。</li></ol></li><li>history模式：<ol><li>地址干净，美观 。</li><li>兼容性和hash模式相比略差。</li><li>应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。</li></ol></li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">.msite</span><br><span class="line">width 100%</span><br><span class="line">.msite_nav</span><br><span class="line"> bottom-border-1px(#e4e4e4)</span><br><span class="line"> margin-top 45px</span><br><span class="line"> height 200px</span><br><span class="line"> background #fff</span><br><span class="line"> .swiper-container</span><br><span class="line"> width 100%</span><br><span class="line"> height 100%</span><br><span class="line"> .swiper-wrapper</span><br><span class="line"> width 100%</span><br><span class="line"> height 100%</span><br><span class="line"> .swiper-slide</span><br><span class="line"> display flex</span><br><span class="line"> justify-content center</span><br><span class="line"> align-items flex-start</span><br><span class="line"> flex-wrap wrap</span><br><span class="line"> .link_to_food</span><br><span class="line"> width 25%</span><br><span class="line"> .food_container</span><br><span class="line"> display block</span><br><span class="line"> width 100%</span><br><span class="line"> text-align center</span><br><span class="line"> padding-bottom 10px</span><br><span class="line"> font-size 0</span><br><span class="line"> img</span><br><span class="line"> display inline-block</span><br><span class="line"> width 50px</span><br><span class="line"> height 50px</span><br><span class="line"> span</span><br><span class="line"> display block</span><br><span class="line"> width 100%</span><br><span class="line"> text-align center</span><br><span class="line"> font-size 13px</span><br><span class="line"> color #666</span><br><span class="line"> .swiper-pagination</span><br><span class="line"> >span.swiper-pagination-bullet-active</span><br><span class="line"> background #02a774</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> Vue </category>
</categories>
<tags>
<tag> Vue </tag>
</tags>
</entry>
<entry>
<title>Web API</title>
<link href="/2021/07/08/Web%20APIs/"/>
<url>/2021/07/08/Web%20APIs/</url>
<content type="html"><![CDATA[<p><img src="https://gitee.com/Codemid/typora-images/raw/master/uPic/%E3%80%8AJK%E6%A0%A1%E6%9C%8D%E7%99%BD%E4%B8%9D%E3%80%8B%20%5B%E6%A3%AE%E8%90%9D%E8%B4%A2%E5%9B%A2%5D%20X-017%20%E5%86%99%E7%9C%9F%E9%9B%86%5B99P%5D58.jpg" alt="《JK校服白丝》 [森萝财团] X-017 写真集[99P]58"></p><span id="more"></span><h1 id="API-和Web-API"><a href="#API-和Web-API" class="headerlink" title="API 和Web API"></a>API 和Web API</h1><ul><li><p><font color=red>API （Application ProgrammingInterface，应用程序编程接口）</font>是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。</p></li><li><p><font color=red>Web API是浏览器提供的一套操作浏览器功能和页面元素的API</font>（BOM和DOM）。 现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。<br>比如我们想要浏览器弹出一个警示框，直接使用alert（‘弹出’）<br>MDN详细APl:<a href="https://developer.mozilla.org/zh-CN/docs/Web/APl">https://developer.mozilla.org/zh-CN/docs/Web/APl</a> 因为WebAPI很多，所以我们将这个阶段称为WebAPIs</p><p>WebAPI是浏览器提供的一套操作<font color=red>浏览器功能</font>和<font color=red>页面元素</font>的API（BOM和DOM）。 现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。<br>比如我们想要浏览器弹出一个警示框，直接使用alert（‘弹出’）</p></li></ul><h1 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h1><h2 id="DOM简介"><a href="#DOM简介" class="headerlink" title="DOM简介"></a>DOM简介</h2><p>1.1 文档对象模型(Document Object Model,简称DOM)；是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准接口</p><p>1.2 DOM树</p><ul><li><p>文档：一个页面就是一个文档，DOM中使用document表示</p></li><li><p>元素：页面中的所有标签都是元素，DOM中使用element表示</p></li><li><p>节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示</p><p><font color=red>DOM把以上内容都看作是对象</font></p></li></ul><hr><h2 id="获取元素"><a href="#获取元素" class="headerlink" title="获取元素"></a>获取元素</h2><ul><li><p>根据ID获取</p><p>getElementById(‘id’) <font color=red>返回的是一个元素对象</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><div id = <span class="string">'time'</span>><span class="number">2020</span>-<span class="number">3</span>-<span class="number">2</span></div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//1.因为文档是从上往下加载，所以先得有标签 所以script写在标签下面</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//2.参数 id是大小写敏感的字符串</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//3.返回的是一个元素对象</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> timer = <span class="built_in">document</span>.getElementById(<span class="string">'time'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="built_in">console</span>.log(timer);<span class="comment">//<div id = 'time'>2020-3-2</div></span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> timer);<span class="comment">//Object</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">//4.console.dir 打印返回的元素对象 更好的查看里面的属性和方法</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="built_in">console</span>.dir(timer);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure></li><li><p>根据标签名获取</p><p>getElementsByTagName(‘标签名’) <font color=red>返回元素对象的集合 以伪数组形式储存</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span>有备无患<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span>有备无患<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span>有备无患<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></ul></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//1.返回的是 获取元素对象的集合 以为数组的形式储存的</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//2.如果页面中没有这个元素返回的只是伪数组形式</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> lis = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'li'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="built_in">console</span>.log(lis);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><p>还可以获取某个元素(父元素)内部所有指定标签名的子元素</p><p>element.getElementsByTagName(‘标签名’);</p><p><font color=red>注意：父元素必须是单个对象(必须知名是哪一个元素对象)获取的时候不包括父元素自己</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span>有备无患<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span>有备无患<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span>有备无患<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></ul></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> ul = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'ul'</span>);<span class="comment">//[ul]</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> lis = ul[<span class="number">0</span>].getElementsByTagName(<span class="string">'li'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="built_in">console</span>.log(lis);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure></li><li><p>通过HTML5新增的方法获取</p><p><code>1</code>getElementsByClassName(‘类名’) <font color=red>返回元素对象集合 以伪数组形式储存</font> </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">'box'</span>>傻子</div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'box'</span>></span>傻子<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> boxs = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'box'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="built_in">console</span>.log(boxs);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><p><code>2</code>querySelector(‘选择器’) <font color=red>返回指定选择器的第一个元素对象</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">'box'</span>>傻子</div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'box'</span>></span>傻子<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">'nav'</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">ul</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">li</span>></span>shouye<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">li</span>></span>chanpin<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">ul</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> firstBox = <span class="built_in">document</span>.querySelector(<span class="string">'.box'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> nav = <span class="built_in">document</span>.querySelector(<span class="string">'#nav'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> li = <span class="built_in">document</span>.querySelector(<span class="string">'li'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure><p><code>3</code>querySelectorAll(‘选择器’) <font color=red>返回指定选择器的所有元素对象集合</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">'box'</span>>傻子</div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'box'</span>></span>傻子<span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">id</span>=<span class="string">'nav'</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">ul</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">li</span>></span>shouye<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">li</span>></span>chanpin<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">ul</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> allBox = <span class="built_in">document</span>.querySelectorAll(<span class="string">'.box'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> lis = <span class="built_in">document</span>.querySelectorAll(<span class="string">'li'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure></li><li><p>特殊元素获取</p><p><code>1</code>获取body元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.body <span class="comment">//返回body元素对象</span></span><br></pre></td></tr></table></figure><p><code>2</code>获取html元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.documentElement <span class="comment">//返回html元素对象</span></span><br></pre></td></tr></table></figure></li></ul><hr><h2 id="事件基础"><a href="#事件基础" class="headerlink" title="事件基础"></a>事件基础</h2><h3 id="事件概述"><a href="#事件概述" class="headerlink" title="事件概述"></a>事件概述</h3><p>JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。</p><p>简单理解：触发—响应机制</p><p>网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮是产生一个事件，然后去执行某些操作。</p><h3 id="事件三要素"><a href="#事件三要素" class="headerlink" title="事件三要素"></a>事件三要素</h3><p>事件由三部分组成 事件源 事件类型 事件处理程序</p><p><code>1</code>事件源 事件被触发的对象 </p><p><code>2</code> 事件类型 如何触发 什么事件</p><table><thead><tr><th>鼠标事件</th><th>触发条件</th></tr></thead><tbody><tr><td>onclick</td><td>鼠标点击左键触发</td></tr><tr><td>onmouseover</td><td>鼠标经过触发</td></tr><tr><td>onmouseout</td><td>鼠标离开触发</td></tr><tr><td>onfocus</td><td>获得鼠标焦点触发</td></tr><tr><td>onblur</td><td>失去鼠标焦点触发</td></tr><tr><td>onmousemove</td><td>鼠标移动触发</td></tr><tr><td>onmouseup</td><td>鼠标弹起触发</td></tr><tr><td>onmousedown</td><td>鼠标按下触发</td></tr></tbody></table><p><code>3 </code>事件处理程序 通过一个函数赋值的方式完成</p><p>例：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><button id = <span class="string">'btn'</span>>js<<span class="regexp">/button> /</span><span class="regexp">/button为事件源</span></span><br><span class="line"><span class="regexp"><script></span></span><br><span class="line"><span class="regexp">var btn = document.getElementById('btn');</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/事件处理程序 通过一个函数赋值的方式完成</span></span><br><span class="line"><span class="regexp">btn.onclick = function() { /</span><span class="regexp">/ onclick为事件类型</span></span><br><span class="line"><span class="regexp"> alert('dsfds');</span></span><br><span class="line"><span class="regexp">}</span></span><br><span class="line"><span class="regexp"></</span>script></span><br></pre></td></tr></table></figure><h3 id="执行事件的步骤"><a href="#执行事件的步骤" class="headerlink" title="执行事件的步骤"></a>执行事件的步骤</h3><p><code>1</code> 获取事件源</p><p><code>2</code> 注册事件(绑定事件)</p><p><code>3</code> 添加事件处理程序(采用函数赋值的方式)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><div><span class="number">123</span><div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//点击div 控制台输出 我被选中了</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//1.获取事件源</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">//2.绑定事件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">//div.onclick</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="comment">//添加事件处理程序</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">div.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="built_in">console</span>.log();</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> }</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><hr><h2 id="操作元素"><a href="#操作元素" class="headerlink" title="操作元素"></a>操作元素</h2><p>JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容属性等。注意一下都是属性</p><h3 id="改变元素内容"><a href="#改变元素内容" class="headerlink" title="改变元素内容"></a>改变元素内容</h3><p><code>1</code> element.innerText</p><p>从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉</p><p><code>2</code> element.innerHTML</p><p>起始位置到终止位置的全部内容，包括html标签(识别标签)，同时保留空格和换行</p><ol><li><p>innerHTML才是真正的获取标签中间的所有内容</p></li><li><p>innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.—获取不到标签的,文本可以获取</p></li><li><p>想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML</p></li><li><p>innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的 </p></li></ol><h3 id="常用元素属性操作"><a href="#常用元素属性操作" class="headerlink" title="常用元素属性操作"></a>常用元素属性操作</h3><ol><li><p>innerText、innerHMTML 改变元素内容</p></li><li><p>src、href</p></li><li><p>id、alt、title</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><button di=<span class="string">'ldh'</span>>刘德华</button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span> <span class="attr">di</span>=<span class="string">'zxy'</span>></span>张学友<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'images/ldh.jpg'</span> <span class="attr">alt</span>=<span class="string">''</span> <span class="attr">title</span>=<span class="string">'刘德华'</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> </span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> ldh = <span class="built_in">document</span>.getElementById(<span class="string">'ldh'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> zxy = <span class="built_in">document</span>.getElementById(<span class="string">'zxy'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> img = <span class="built_in">document</span>.querySelector(<span class="string">'img'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml">ldh.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//修改元素属性src</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> img.src = <span class="string">'images/ldh.jpg'</span>;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//修改元素属性title</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> img.title = <span class="string">'刘德华'</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> }</span></span></span><br><span class="line"><span class="javascript"><span class="xml">zxy.onclicl = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> img.src = <span class="string">'images/zxy.jpg'</span>;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> }</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure></li></ol><h3 id="操作元素之表单属性设置"><a href="#操作元素之表单属性设置" class="headerlink" title="操作元素之表单属性设置"></a>操作元素之表单属性设置</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><button>按钮</button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">input</span> <span class="attr">type</span> = <span class="string">'text'</span> <span class="attr">value</span> = <span class="string">'输入内容'</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">'button'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> input = <span class="built_in">document</span>.querySelector(<span class="string">'input'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> input.value = <span class="string">'修改内容'</span>;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//禁用按钮</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//btn.disabled = true;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="built_in">this</span>.disabled = <span class="literal">true</span>;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="comment">//this 指向的是事件函数的调用者</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> }</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h3 id="操作元素之样式属性修改"><a href="#操作元素之样式属性修改" class="headerlink" title="操作元素之样式属性修改"></a>操作元素之样式属性修改</h3><p>我们可以通过JS修改元素的大小、颜色、位置等样式</p><p><code>1</code>element.style 行内样式操作</p><p><code>2</code>element.className 类名样式操作 （改变更多元素属性）</p><p><font color=red>tip:</font></p><p><font color=red>1.JS里面的样式采取驼峰命名法 比如 fontsize、bcckgroundColor</font></p><p><font color=red>2.JS修改 style样式操作，产生的是行内样式，css权重比较高</font></p><p>案例：精灵图</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></ul></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> lis = <span class="built_in">document</span>.querySelectorAll(<span class="string">'li'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> index =i*<span class="number">44</span>;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<lis.length;i++) {</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> lis[i].style.backgroundPosition = <span class="string">'x y'</span>;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> }</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><h3 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h3><ul><li><p>排他思想(算法)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><button>按钮<span class="number">1</span></button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span>></span>按钮2<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span>></span>按钮3<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span>></span>按钮4<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span>></span>按钮5<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><script></span><br><span class="line"> //1.获取所有按钮元素</span><br><span class="line"> var btns = document.querySelectorAll('button');</span><br><span class="line">//给所有按钮注册事件</span><br><span class="line">for(var i=0;i<btns.length;i++) {</span><br><span class="line"> btns[i].onclick = function() {</span><br><span class="line"> //1.先把所有的按钮颜色去掉 干掉所有人</span><br><span class="line"> for(var i= 0;i<btns.length;i++) {</span><br><span class="line"> btns[i].style.backgroundColor = '';</span><br><span class="line"> }</span><br><span class="line"> //2.留下自己</span><br><span class="line"> this.style.backgroundColor='pink';</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></script></span><br></pre></td></tr></table></figure><hr><h3 id="自定义属性操作"><a href="#自定义属性操作" class="headerlink" title="自定义属性操作"></a>自定义属性操作</h3><p><code>1</code> 获取属性值</p></li><li><p>element.属性 获取属性值 （元素本身自带的属性值）</p></li><li><p>element.getAttribute(‘属性’) (主要获得自定义的属性 程序员自定义的属性)</p><p><code>2</code> 设置属性值</p></li><li><p>element.属性 = ‘值’ （设置内置属性值）</p></li><li><p>element.setAttribute(‘属性’,’值’) (主要设置自定义属性的值)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">div.setAttribute(<span class="string">'class'</span>,<span class="string">'footer'</span>);<span class="comment">//特殊 class不是className</span></span><br></pre></td></tr></table></figure><p><code>3</code> 移除属性</p></li><li><p>element.removeAttribute(‘属性’)</p><p><code>4</code> H5自定义属性</p></li><li><p>获取H5自定义属性 </p><p>element.getAttribute(‘data-index’)(兼容性获取) </p><p>H5新增element.dataset.index 或者element.dataset[‘index’] (dataset是一个集合 里面是所有以data开头的自定义属性)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><div data-index=<span class="string">'2'</span> data-list-name=<span class="string">'andy'</span>></div></span><br><span class="line"><script></span><br><span class="line"> <span class="built_in">console</span>.log(div.dataset.listName);</span><br><span class="line"><span class="built_in">console</span>.log(dic.dataset[<span class="string">'listName'</span>]);</span><br><span class="line"></sctipt></span><br></pre></td></tr></table></figure></li></ul><hr><h2 id="节点操作"><a href="#节点操作" class="headerlink" title="节点操作"></a>节点操作</h2><h3 id="节点概述"><a href="#节点概述" class="headerlink" title="节点概述"></a>节点概述</h3><p>一般的，节点至少拥有nodeType、nodeName、nodeValue三个基本属性</p><ul><li>元素节点 nodeType为1</li><li>属性节点 nodeType为2</li><li>文本节点 nodeType为3 (文本节点包括文字、空格、换行等)</li></ul><h3 id="节点操作-1"><a href="#节点操作-1" class="headerlink" title="节点操作"></a>节点操作</h3><ul><li><p>父节点操作</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">'demo'</span>></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'box'</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'erweima'</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"> <span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"> </div></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> erweima = <span class="built_in">document</span>.querySelector(<span class="string">'.erweima'</span>);</span><br><span class="line"><span class="comment">//得到离他最近的父级节点 如果找不到父亲就返回为 null</span></span><br><span class="line"><span class="built_in">console</span>.log(erweima.parentNode);<span class="comment">//<div class='box'></div></span></span><br></pre></td></tr></table></figure></li><li><p>子节点操作</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></ul></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.getElementByTagName(<span class="string">'ul'</span>);</span><br><span class="line"><span class="comment">//得到的子节点包含 元素节点 文本节点的等等</span></span><br><span class="line"><span class="built_in">console</span>.log(ul.childNodes);<span class="comment">// （不好用）</span></span><br><span class="line"><span class="comment">//获得所有子元素节点</span></span><br><span class="line"><span class="built_in">console</span>.log(ul.children);<span class="comment">//4个小li （常用）</span></span><br></pre></td></tr></table></figure></li><li><p>子节点操作之第一个子元素和最后一个子元素</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><ol></span><br><span class="line"> <li><span class="number">1</span><li></span><br><span class="line"> <li><li></span><br><span class="line"> <li><li></span><br><span class="line"> <li><span class="number">4</span><li></span><br><span class="line"></ol></span><br><span class="line"><span class="keyword">var</span> ol= <span class="built_in">document</span>.getElementByTagName(<span class="string">'ol'</span>);</span><br><span class="line"><span class="comment">//1.firstChild 第一个子节点 不管是文本节点还是元素节点</span></span><br><span class="line"><span class="built_in">console</span>.log(ol.firstChild);</span><br><span class="line"><span class="built_in">console</span>.log(ol.lastChild);</span><br><span class="line"><span class="comment">//2. firstElementChild 返回第一个子元素节点 IE9+</span></span><br><span class="line"><span class="built_in">console</span>.log(ol.firstElementChild)<span class="comment">// <li>1<li></span></span><br><span class="line"><span class="built_in">console</span>.log(ol.lastElementChild) <span class="comment">// <li>4<li></span></span><br><span class="line"><span class="comment">//3.实际开发中写法 没有兼容问题</span></span><br><span class="line"><span class="built_in">console</span>.log(ol.children[<span class="number">0</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(ol.children[ol.children.length-<span class="number">1</span>])</span><br></pre></td></tr></table></figure></li><li><p>兄弟节点操作</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><div></div></span><br><span class="line"><sapn></span></span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span><br><span class="line"><span class="comment">//1.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等</span></span><br><span class="line"><span class="built_in">console</span>.log(div.nextSibling);</span><br><span class="line"><span class="comment">//2.previousSibling 上一个兄弟节点 包含元素节点或者文本节点等等</span></span><br><span class="line"><span class="built_in">console</span>.log(div.previousSibling);</span><br><span class="line"><span class="comment">//3.nextElementSibling 下一个兄弟元素节点 IE9+</span></span><br><span class="line"><span class="built_in">console</span>.log(div.newtElemetSibling);</span><br><span class="line"><span class="comment">//4.previousElementSibling 下一个兄弟元素节点 IE9+</span></span><br><span class="line"><span class="built_in">console</span>.log(div.previousElementSibling);</span><br></pre></td></tr></table></figure></li></ul><h3 id="创建节点"><a href="#创建节点" class="headerlink" title="创建节点"></a>创建节点</h3><ul><li><p>创建和添加节点</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><ul></ul></span><br><span class="line"><span class="comment">//创建节点</span></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">'ul'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> li =<span class="built_in">document</span>.creatElement(<span class="string">'li'</span>);</span><br><span class="line"><span class="comment">//在后面添加节点 node.appendChild(child)</span></span><br><span class="line"><span class="comment">//node.appendChild()方法将一个节点添加到指定父节点的子节点末尾。类似于css里的after伪元素</span></span><br><span class="line">ul.appendChild(li);</span><br><span class="line"></span><br><span class="line"><span class="comment">//在前面添加节点 node.insertBefore(child,指定元素)</span></span><br><span class="line"><span class="comment">//node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似css里的before伪元素</span></span><br><span class="line">ul.insertBefore(li,ul.children[<span class="number">0</span>]);<span class="comment">//ul第一个儿子的前面</span></span><br></pre></td></tr></table></figure></li></ul><h3 id="删除节点"><a href="#删除节点" class="headerlink" title="删除节点"></a>删除节点</h3><ul><li><p>删除节点</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></ul></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span>></span><span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">'ul'</span>);</span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">'button'</span>);</span><br><span class="line"><span class="comment">//删除元素 node.removeChild(child)</span></span><br><span class="line"><span class="comment">//node.removeChild(ul.children[0]);</span></span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(ul.children.length==<span class="number">0</span>){</span><br><span class="line"> <span class="built_in">this</span>.disable=<span class="literal">true</span>;</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> ul.removeChild(ul.children[<span class="number">0</span>]);</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="克隆节点"><a href="#克隆节点" class="headerlink" title="克隆节点"></a>克隆节点</h3></li><li><p>复制节点</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></ul></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">'ul'</span>);</span><br><span class="line"><span class="comment">//cloneNode() 括号里为空或为false 浅拷贝 只复制标签不复制里面的内容</span></span><br><span class="line"><span class="keyword">var</span> lili = ul.children[<span class="number">0</span>].cloneNode();</span><br><span class="line">ul.appedChild(lili);</span><br><span class="line"><span class="comment">//cloneNode(true) 括号里为true 深拷贝 复制标签也复制内容</span></span><br><span class="line"><span class="keyword">var</span> lilili = ul.children[<span class="number">1</span>].cloneNode;</span><br><span class="line">ul.insertBefore(lilili,ul.children[<span class="number">0</span>]);</span><br></pre></td></tr></table></figure></li></ul><h3 id="创建元素三种方式的区别"><a href="#创建元素三种方式的区别" class="headerlink" title="创建元素三种方式的区别"></a>创建元素三种方式的区别</h3><ul><li><p>三种创建元素区别</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span><span class="built_in">document</span>.write() 创建元素 </span><br><span class="line"></span><br><span class="line"><button>点击</button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">p</span>></span>sdf<span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="keyword">var</span> btn =doucument.querSelector(<span class="string">'button'</span>);</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">document</span>.write(<span class="string">'<div>123</div>'</span>);</span><br><span class="line">}</span><br><span class="line"><span class="comment">//缺点：document.write 是直接将让内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 之前的内容全部没有了 相当于重新创建了一个新的页面</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">2.</span>innerHTML 创建元素</span><br><span class="line"></span><br><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">'inner'</span>></div></span><br><span class="line"><span class="keyword">var</span> inner = <span class="built_in">document</span>.querySelector(<span class="string">'.inner'</span>);</span><br><span class="line">inner.innerHTML = <span class="string">"<a href=''>百度</a>"</span>;</span><br><span class="line"><span class="comment">//将a标签放进div里</span></span><br><span class="line"><span class="comment">//大量拼接字符串 效率低</span></span><br><span class="line"></span><br><span class="line">第二种方式 数组拼接</span><br><span class="line"><span class="keyword">var</span> inner = <span class="built_in">document</span>.querySelector(<span class="string">'.inner'</span>);</span><br><span class="line"><span class="keyword">var</span> array =[];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<<span class="number">1000</span>;i++) {</span><br><span class="line"> array.push(<span class="string">'<a href='</span><span class="string">'>dsfsdfdsf</a>'</span>)</span><br><span class="line">}</span><br><span class="line">inner.innerHTML = array.join(<span class="string">''</span>);</span><br><span class="line"><span class="comment">//效率最高</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3.</span><span class="built_in">document</span>.creatElement() 创建元素</span><br><span class="line"></span><br><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">'creat'</span>><div></span><br><span class="line"><span class="keyword">var</span> creat = <span class="built_in">document</span>.querSelector(<span class="string">'.creat'</span>);</span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.creatElement(<span class="string">'div'</span>)</span><br><span class="line">creat.appendChild(<span class="string">"div"</span>);</span><br><span class="line"><span class="comment">//创建多个元素效率低一点点，但是结构更清晰</span></span><br></pre></td></tr></table></figure></li></ul><h2 id="事件高级"><a href="#事件高级" class="headerlink" title="事件高级"></a>事件高级</h2><h3 id="注册事件"><a href="#注册事件" class="headerlink" title="注册事件"></a>注册事件</h3><ul><li><strong>addEventListener 事件监听方式</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">evertTarget.addEventListenner(type,listener[,useCapture])</span><br></pre></td></tr></table></figure><p> evenTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象上)，当该对象触发指定的事件时，就会执行事件处理函数。</p><p> 该方法接收三个参数：</p><p> <font color=red>type:</font>事件类型字符串，比如click、mouseover、注意这里不要带on</p><p> <font color=red>listener:</font>事件处理函数，事件发生时，会调用该监听函数</p><p> <font color=red>useCapture:</font>可选参数，是一个布尔值，默认为false。学完DOM事件流后，进一步学习</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">事件监听注册事件 addEventListener</span><br><span class="line"></span><br><span class="line"><button></button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span>></span><span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.querSelector(<span class="string">'button'</span>);</span><br><span class="line">btn[<span class="number">1</span>].addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="number">22</span>);</span><br><span class="line">})</span><br><span class="line">btn[<span class="number">1</span>].addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="number">33</span>);</span><br><span class="line">})</span><br><span class="line"><span class="comment">//点击第二个按钮先弹出22再弹出33</span></span><br><span class="line"><span class="comment">//里面的事件类型是字符串 必须加引号 不用带on</span></span><br><span class="line"><span class="comment">//同一个元素 同一个事件可以添加多个监听器（事件处理程序）</span></span><br></pre></td></tr></table></figure><ul><li><strong>attachEvent事件监听方式</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">eventTarget.attachEvent(evenNameWithOn,callback)</span><br></pre></td></tr></table></figure><p> eventTarget.attachevent（）方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。</p><p>该方法接收两个参数：</p><p> <font color=red>eventNameWithOn:</font>事件类型字符串，比如click、mouseover、这里要带on</p><p> <font color=red>callback:</font>事件处理函数，当目标出发事件时回调函数被调用</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">attachEvent ie9以前的版本支持</span><br><span class="line"></span><br><span class="line"><button></button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span>></span><span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.querSelector(<span class="string">'button'</span>);</span><br><span class="line">btn[<span class="number">1</span>].attachEvent(<span class="string">'onclick'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li><strong>注册事件兼容性解决方案</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addEventListener</span>(<span class="params">element,eventName,fn</span>) </span>{</span><br><span class="line"> <span class="comment">//判断当前浏览器是否支持addEventListener方法</span></span><br><span class="line"> <span class="keyword">if</span>(element.addEventListener) {</span><br><span class="line"> element.addEventListener(eventName,fn); <span class="comment">//第三个参数 默认为false</span></span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(element.attachEvent) {</span><br><span class="line"> element.attachEvent(<span class="string">'on'</span>+eventName,fn);</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> <span class="comment">//相当于 element.onclick = fn;</span></span><br><span class="line"> element[<span class="string">'on'</span>+eventName] = fn;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h3 id="删除事件-解绑事件"><a href="#删除事件-解绑事件" class="headerlink" title="删除事件/解绑事件"></a>删除事件/解绑事件</h3><ul><li><strong>传统方式删除事件</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><div></div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> divs = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span><br><span class="line">divs[<span class="number">0</span>].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line"> <span class="comment">//传统方式删除事件</span></span><br><span class="line"> divs[<span class="number">0</span>].onclick = <span class="literal">null</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li><strong>removeEventListener() 解绑/删除事件</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><div></div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> divs = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span><br><span class="line">div[<span class="number">1</span>].addEventListener(<span class="string">'click'</span>,fn);<span class="comment">//里面的fn 不需要调用加小括号</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line"> div[<span class="number">1</span>].removeEventListener(<span class="string">'click'</span>,fn);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li><strong>detachEvent() 解绑/删除事件</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><div></div></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> divs = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span><br><span class="line">div[<span class="number">2</span>].attachEvent(<span class="string">'onclick'</span>,fn);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line"> div[<span class="number">2</span>].detachEvent(<span class="string">'onclick'</span>,fn);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><hr><h3 id="DOM事件流"><a href="#DOM事件流" class="headerlink" title="DOM事件流"></a>DOM事件流</h3><ul><li><p><strong>什么是事件流？</strong></p><p><font color=red>事件流</font>描述的是从页面中接收事件的顺序。</p><p><font color=red>事件</font>发生时会在元素节点之间按照特定的顺序传播，这个<font color=red>传播过程</font>即<font color=red>DOM事件流</font>。</p><p>比如我们给div注册了一个点击事件：</p><p> 1.捕获阶段</p><p> 2.当前目标阶段</p><p> 3.冒泡阶段</p></li></ul><p> </p><p><font color=red>事件冒泡：</font>IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程</p><p><font color=red>事件捕获：</font>网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程</p><p><font color=red>Tips：</font></p><ol><li>Js代码中只能执行捕获或者冒泡其中的一个阶段</li><li>onclick(传统注册事件方式)和attachEvent 只能得到冒泡阶段</li><li>addEventListener(type, listener,[,useCapture])第三个参时如果是true，表示在事件捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示事件冒泡阶段调用事件处理程序。</li><li>实际开发中很少使用事件捕获</li><li>有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave</li></ol><hr><h3 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h3><ul><li><strong>什么是事件对象？</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">eventTarget.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{}</span><br><span class="line">eventTarget.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{})</span><br><span class="line"><span class="comment">//这个event就是事件对象，我们还喜欢写成 e 或者 evt</span></span><br></pre></td></tr></table></figure><p>官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。<br>简单理解：事件发生后，<font color=red>跟事件相关的一系列信息数据的集合</font>都放到这个对象里面，<font color=red>这个对象就是事件对象event</font>，它有很多属性和方法。</p><p>比如：<br>1.谁绑定了这个事件。<br>2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置，<br>3.键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。</p><ul><li><strong>事件对象的使用语法</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">eventTarget.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> <span class="comment">//这个event就是事件对象，我们还喜欢写成 e 或者 evt</span></span><br><span class="line">}</span><br><span class="line">eventTarget.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>{</span><br><span class="line"> <span class="comment">//这个event就是事件对象，我们还喜欢写成 e 或者 evt</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去</p><p>当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)</p><ul><li><strong>事件对象的兼容性方案</strong></li></ul><p>事件对象本身的获取存在兼容问题：<br>1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。<br>2.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。 解决：<br>e = e||window.event;</p><ul><li><strong>事件对象的常见属性和方法</strong></li></ul><table><thead><tr><th>事件对象属性方法</th><th>说明</th></tr></thead><tbody><tr><td>e.target</td><td>返回触发事件的对象(元素) 标准</td></tr><tr><td>e.srcElement</td><td>返回触发事件的对象 非标准 ie6-8使用</td></tr><tr><td>e.type</td><td>返回事件的类型 比如click mouseover 不带on</td></tr><tr><td>e.canaelBubble</td><td>该属性阻止冒泡 ie6-8使用</td></tr><tr><td>e.returnValue</td><td>该属性 阻止默认事件(默认行为) 非标准 ie6-8 比如不然链接跳转</td></tr><tr><td>e.preventDefalut</td><td>该方法 阻止默认事件(默认行为) 标准 比如不然链接跳转</td></tr><tr><td>e.stopPropagation</td><td>阻止冒泡 标准</td></tr></tbody></table><ul><li><p><strong>this和target的区别</strong></p><p><font color=red>e.target返回的是触发事件的对象(元素)</font></p><p><font color=red>this返回的是绑定事件对象(元素)</font></p></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><div></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span><span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line"><span class="comment">//区别：e.target 点击了哪个元素，就返回哪个元素 this 哪个元素绑定了这个点击事件，那么就返回谁</span></span><br><span class="line">div = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span><br><span class="line">div.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">//点击小li 返回<div></div></span></span><br><span class="line"> <span class="built_in">console</span>.log(event.target);<span class="comment">//点击小li 返回<div></div></span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><font color=red>了解：跟this有个非常相似的属性 currentTarget 指向绑定的事件对象</font></p><ul><li><strong>事件对象阻止默认行为</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><a href=<span class="string">'www.baidu.com'</span>>百度</a></span><br><span class="line"></span><br><span class="line"><span class="comment">//阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="built_in">document</span>.querySelector(<span class="string">'a'</span>);</span><br><span class="line">a.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> e.preventDefault(); <span class="comment">//dom标准写法</span></span><br><span class="line">})</span><br><span class="line"></span><br><span class="line"><span class="comment">//传统注册方式</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="built_in">document</span>.querSelector(<span class="string">'a'</span>);</span><br><span class="line">a.onclick = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> <span class="comment">//普通浏览器</span></span><br><span class="line"> e.preventDefalult();</span><br><span class="line"> <span class="comment">//低版本浏览器 ie678</span></span><br><span class="line"> e.returnValue;</span><br><span class="line"> <span class="comment">//可以用用return false阻止默认行为 没有兼容性问题 特点：return后面的代码不执行了，而且只限于传统注册方式</span></span><br><span class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li><strong>阻止事件冒泡</strong><ul><li>标准写法：利用世界对象里面的stopPropagation()方法</li><li>非标准写法：IE6-8 利用事件对象cancelBubble属性</li></ul></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><div <span class="class"><span class="keyword">class</span></span>=<span class="string">'father'</span>></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">'son'</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"></div></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> son = <span class="built_in">document</span>.querySelector(<span class="string">'.son'</span>);</span><br><span class="line">son.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> alert(<span class="string">'son'</span>);</span><br><span class="line"> e.stopPropagation(); <span class="comment">//阻止冒泡</span></span><br><span class="line"> e.cancelBubble = <span class="literal">true</span>;<span class="comment">//阻止冒泡</span></span><br><span class="line">},<span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> father = querySelector(<span class="string">'.father'</span>);</span><br><span class="line">father.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> alert(<span class="string">'father'</span>);</span><br><span class="line">},<span class="literal">false</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> alert(<span class="string">'document'</span>);</span><br><span class="line">},<span class="literal">false</span>)</span><br></pre></td></tr></table></figure><ul><li><strong>阻止事件冒泡兼容性解决方案</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(e&&e.stopPropagetion) {</span><br><span class="line"> e.stopPropation();</span><br><span class="line">}<span class="keyword">else</span> {</span><br><span class="line"> <span class="built_in">window</span>.event.cancelBubble = <span class="literal">true</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="事件委托-代理-委派"><a href="#事件委托-代理-委派" class="headerlink" title="事件委托(代理/委派)"></a>事件委托(代理/委派)</h3><p>事件冒泡本身的特性，会带来坏处，也会<font color=red>带来好处</font>,需要我们灵活掌握</p><ul><li><strong>事件委托的原理</strong></li></ul><p><font color=red>不是每个子节点单独设置事件监听器，而是事件监听器设在其父节点上，然后利用冒泡原理影响设置每个子节点</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><ul></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span>知否知否，点我应有弹窗在手<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span>知否知否，点我应有弹窗在手<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span>知否知否，点我应有弹窗在手<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">li</span>></span>知否知否，点我应有弹窗在手<span class="tag"></<span class="name">li</span>></span></span></span><br><span class="line"></ul></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> ul = <span class="built_in">document</span>.querySelector(<span class="string">'ul'</span>);</span><br><span class="line">ul.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="string">'知否知否，点我应有弹窗在手'</span>);</span><br><span class="line"> <span class="comment">//e.target 可以得到点击的对象</span></span><br><span class="line"> e.target.style.backgroundColor = <span class="string">'red'</span>;</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h3 id="常用鼠标-键盘事件"><a href="#常用鼠标-键盘事件" class="headerlink" title="常用鼠标/键盘事件"></a><strong>常用鼠标/键盘事件</strong></h3><ul><li><strong>禁止鼠标右键菜单</strong></li></ul><p>contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'contextmenu'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> e.preventDefault();</span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li><strong>禁止鼠标选中(selectsatrt 开始选中)</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">element.adEventListener(<span class="string">'selectstart'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>{</span><br><span class="line"> e.prventDefault();</span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li><strong>鼠标事件对象</strong></li></ul><p><font color=red>event</font>对象代表事件的状态，跟事件相关的一系列信息的集合，现阶段主要是用鼠标事件对象<font color=red>MouseEvent</font>和键盘事件对象<font color=red>KeyboardEvent</font></p><table><thead><tr><th>鼠标事件对象</th><th>说明</th></tr></thead><tbody><tr><td>e.clientX</td><td>返回鼠标相对于浏览器窗口可视区的X坐标</td></tr><tr><td>e.clientY</td><td>返回鼠标相对于浏览器窗口可视区的Y坐标</td></tr><tr><td>e.pageX</td><td>返回鼠标相对于文档页面的X坐标 IE9+支持</td></tr><tr><td>e.pageY</td><td>返回鼠标相对于文档页面的Y坐标 IE9+支持</td></tr><tr><td>e.screenX</td><td>返回鼠标相对于电脑屏幕的X坐标</td></tr><tr><td>e.screenY</td><td>返回鼠标相对于电脑屏幕的Y坐标</td></tr></tbody></table><ul><li><strong>常用键盘事件</strong></li></ul><table><thead><tr><th>键盘事件</th><th>触发条件</th></tr></thead><tbody><tr><td>onkeyup</td><td>某个键盘按键被松开时触发</td></tr><tr><td>onkeydown</td><td>某个键盘按键被按下时触发</td></tr><tr><td>onkeypress</td><td>某个键盘按键被按下时 触发 <font color=red>但是它不能识别功能键 比如 ctrl shift 等</font></td></tr></tbody></table><p>三个事件的执行顺序 keydown – >keypress – > keyup</p><ul><li><strong>键盘事件对象值keyCode属性</strong></li></ul><table><thead><tr><th>键盘事件对象属性</th><th>说明</th></tr></thead><tbody><tr><td>keyCode</td><td>返回该键的ASCII值</td></tr></tbody></table><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'keyup'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(e.keyCode);</span><br><span class="line"> <span class="comment">//1.keyup 和keydown事件不区分字母大小写 a和A 得到的都是65</span></span><br><span class="line"> <span class="comment">//2.keypress 事件 区分字母大小写 a是97 A是65</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><h1 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h1><h2 id="BOM概述"><a href="#BOM概述" class="headerlink" title="BOM概述"></a>BOM概述</h2><ul><li><strong>什么是BOM</strong></li></ul><p>BOM （BrowserObjectModel）即<font color=red>浏览器对象模型</font>，它提供了独立于内容而与<font color=red>浏览器窗口进行交互的对象</font>，其核心对象是window.<br>BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。<br>BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。</p><ul><li><strong>BOM的构成</strong></li></ul><p></p><p><font color=red>window对象是浏览器的顶级对象,</font>它具有双重角色。</p><ol><li><p>它是JS访问浏览器窗口的一个接口。</p></li><li><p>它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。</p><p>在调用的时候可以省略window，前面学习的对话框属于window对象方法，如alert()、prompt()。</p></li></ol><p><font color=red>注意：window下的一个特殊属性window.name</font></p><h2 id="window对象的常见事件"><a href="#window对象的常见事件" class="headerlink" title="window对象的常见事件"></a>window对象的常见事件</h2><ul><li><strong>窗口加载事件</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{};</span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">'load'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{});</span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'DOMContenLoaded'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{});</span><br></pre></td></tr></table></figure><p><font color=red>window.onload</font>是窗口(页面) 加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用处理函数。</p><p><font color=red>DOMContenLoaded</font>事件触发是，仅当DOM加载完成时，不包括样式表、图片、flash等 (ie9+)</p><p><font color=red>注意：</font></p><p>1.有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。</p><p>2.window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。</p><ul><li><strong>调整窗口大小事件</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onresize = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{};</span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">'resize'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{});</span><br></pre></td></tr></table></figure><p><font color=red>window.onresize</font>是调整窗口大小的加载事件，当触发时就会调用的处理函数</p><p><font color=red>注意：</font></p><ol><li>只要窗口大小发生像素变化，就会触发这个事件。</li><li>我们经常利用这个事件完成响应式布局。window.innWidth当前屏幕的宽度。</li></ol><h2 id="两种定时器"><a href="#两种定时器" class="headerlink" title="两种定时器"></a>两种定时器</h2><ul><li><strong>setTimeout()</strong></li></ul><p><font color=red>setTimeout()</font>方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.setTimeout(调用函数，[延迟的毫秒数]);</span><br><span class="line"></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},<span class="number">0</span>);</span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">callback</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'时间到'</span>);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">setTimeout</span>(callback,<span class="number">200</span>);</span><br><span class="line"><span class="comment">//或者</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="string">'callback()'</span>,<span class="number">200</span>);<span class="comment">//不提倡这种写法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//给定时器添加标识符</span></span><br><span class="line"><span class="keyword">var</span> time1 = <span class="built_in">setTimeout</span>(callback,<span class="number">200</span>);</span><br><span class="line"><span class="keyword">var</span> time2 = <span class="built_in">setTimeout</span>(callback,<span class="number">500</span>);</span><br></pre></td></tr></table></figure><p><font color=red>Tip：</font></p><ol><li><p>这个window在调用的时候可以省略</p></li><li><p>这个延迟事件单位时毫秒 但是可以省略，如果省略默认是0</p></li><li><p>这个调用函数可以直接写函数 还可以写 函数名</p></li><li><p>页面中可能有很多定时器，我们经常给定时器加标识符(名字)</p><ul><li>回调函数</li></ul></li></ol><p></p><ul><li><strong>停止 setTimeout() 定时器</strong></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><button></button></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> timer = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line">},<span class="number">3000</span>)</span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">'button'</span>);</span><br><span class="line">btn.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"><span class="built_in">window</span>.clearTimeout(timer);<span class="comment">//window可省略</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li><p><strong>setInterval()定时器</strong></p><p><font color=red>和setTimeout的唯一不同就是它可以重复的调用函数</font></p></li><li><p><strong>清除setInterval定时器</strong></p></li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><button <span class="class"><span class="keyword">class</span></span>=<span class="string">'begin'</span>>开启定时器</button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">'stop'</span>></span>停止定时器<span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="keyword">var</span> begin = <span class="built_in">document</span>.querySelector(<span class="string">'.begin'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> stop = <span class="built_in">document</span>.querySelector(<span class="string">'.stop'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"><span class="keyword">var</span> timer = <span class="literal">null</span>; <span class="comment">//全局变量 null是一个空对象</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">brgin.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="title">functon</span>(<span class="params"></span>)</span> {</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> timer = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="built_in">console</span>.log(<span class="string">'dsf'</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> },<span class="number">1000</span>); </span></span></span><br><span class="line"><span class="javascript"><span class="xml">})</span></span></span><br><span class="line"><span class="javascript"><span class="xml">stop.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> <span class="built_in">clearInterval</span>(timer);</span></span></span><br><span class="line"><span class="javascript"><span class="xml"> })</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag"></<span class="name">script</span>></span></span></span><br></pre></td></tr></table></figure><ul><li><strong>this</strong></li></ul><p>this的指向在函数定义的时候是不确定的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向是那个调用它的对象。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>在全局作用域或者普通函数中<span class="built_in">this</span>指向全局对象<span class="built_in">window</span>(注意定时器里面的<span class="built_in">this</span>指向<span class="built_in">window</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">//指向window对象</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">//指向window对象</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">window</span>.fn(); <span class="comment">//window调用 fn方法 window可省略</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>); <span class="comment">//指向window对象</span></span><br><span class="line">},<span class="number">1000</span>); <span class="comment">//window可省略</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">2.</span>方法调用中谁调用<span class="built_in">this</span>指向谁</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> o = {</span><br><span class="line"> <span class="attr">sayHi</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">//this指向的是 o 这个对象</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">o.sayHi();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span>.btn = docuemnt.querySelector(<span class="string">'button'</span>);</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">//this指向的是btn这个按钮对象</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">btn.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">//this指向的是btn这个按钮对象</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3.</span>构造函数中的<span class="built_in">this</span>指向构造函数的实例</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Fun</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="built_in">this</span>);<span class="comment">//this指向的是fun这个实列对象</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> fun = <span class="keyword">new</span> Fun();</span><br></pre></td></tr></table></figure><hr><h2 id="js执行机制"><a href="#js执行机制" class="headerlink" title="js执行机制"></a>js执行机制</h2><ul><li><p>JS语言的一大特点就是<font color=red>单线程</font>，也就是说，同一时间只能做同一件事。这是因为JS这门脚本语言诞生的使命所致——JS是为了处理页面中用户的交互，以及操作DOM而诞生的，比如我们对某个DOM元素进行添加和删除，不能同时进行。应该先进行添加，之后在删除。</p><p><font color=red>为了解决这个问题，利用多核CPU的计算能力，HTML5提出了 Web Worker 标准，允许JS脚本创建多个线程。于是JS中出现了同步和异步。</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);<span class="comment">//第一个输出</span></span><br><span class="line"></span><br><span class="line">steTimeout(<span class="function"><span class="title">functon</span>(<span class="params"></span>)</span> {</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3</span>);<span class="comment">//第三个输出 </span></span><br><span class="line">},<span class="number">1000</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);<span class="comment">//第二个输出</span></span><br></pre></td></tr></table></figure></li></ul><ul><li><p><strong>同步和异步</strong></p><ul><li>同步任务都在主线程上执行，形成一个<font color=red>执行栈</font>。</li><li>异步任务</li></ul><p>JS的异步是通过回调函数实现的。</p><p>一般而言，异步任务有以下三种类型：</p><ol><li>普通事件，如click、resize等</li><li>资源加载，如load、error等</li><li>定时器，包括setTimeout、setInterval等</li></ol><p>异步任务相关<font color=red>回调函数</font>添加到<font color=red>任务队列</font>中(任务队列也称为消息队列)。</p></li><li><p><strong>JS执行机制</strong></p></li></ul><ol><li>先执行<font color=red>执行栈中的同步任务</font></li><li>异步任务(回调函数)放入任务队列中</li><li>一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取<font color=red>任务队列</font>，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。</li></ol><ul><li><strong>事件循环</strong></li></ul><p>由于主线程不断的重复获得任务、执行任务、在获取任务、再执行，所以这种机制被称为<font color=red>事件循环(event loop)</font></p><p></p><hr><h2 id="location对象"><a href="#location对象" class="headerlink" title="location对象"></a>location对象</h2><ul><li><p><strong>什么是location对象？</strong></p><p>window对象给我们提供了一个<font color=red>location属性</font>用于<font color=red>获取或设置窗体的URL</font>，并且可以用于<font color=red>解析URL</font>。因为这个属性返回的是一个对象，所以我们将这个属性也称为<font color=red>location对象</font></p></li><li><p><strong>什么是URL？</strong></p><p><font color=red>统一资源定位符(Uniform Resourse Locator,URL)</font>是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。</p><p>URL的一般语法格式为：</p><p>protocol://host[:port]/path/[?query]#frament</p><p><a href="http://www.itcast.cn/indxe.html?name=andy&age=18#link">http://www.itcast.cn/indxe.html?name=andy&age=18#link</a></p><table><thead><tr><th>组成</th><th>说明</th></tr></thead><tbody><tr><td>portocol</td><td>通信协议 常用的http，ftp，maito等</td></tr><tr><td>host</td><td>主机 (域名) <a href="http://www.itheima.com/">www.itheima.com</a></td></tr><tr><td>port</td><td>端口号 可选，省略时使用方案的默认端口 如http的默认端口为80</td></tr><tr><td>path</td><td>路径 由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址</td></tr><tr><td>query</td><td>参数 以键值对的形式通过&符号隔开来</td></tr><tr><td>fragment</td><td>片段 #后面内容 常见于链接 锚点</td></tr></tbody></table></li></ul><ul><li><p><strong>location对象的属性</strong></p><table><thead><tr><th>location对象的属性</th><th>返回值</th></tr></thead><tbody><tr><td>location.href</td><td>获取或者设置 整个URL <font color=red>重点</font></td></tr><tr><td>location.host</td><td>返回主机(域名) <a href="http://www.xiaomi.com/">www.xiaomi.com</a></td></tr><tr><td>location.port</td><td>返回端口号 如果未写 返回空字符串</td></tr><tr><td>location.pathname</td><td>返回路径</td></tr><tr><td>location.search</td><td>返回参数 <font color=red>重点</font></td></tr><tr><td>location.hash</td><td>返回片段 #后面内容 常见于链接 锚点</td></tr></tbody></table></li></ul><ul><li><strong>location对象的方法</strong></li></ul><table><thead><tr><th>location对象方法</th><th>返回值</th></tr></thead><tbody><tr><td>location.assign()</td><td>跟href一样，可以跳转页面(也称为重定向页面) <font color=red>记录浏览历史，所以可以实现后退功能</font></td></tr><tr><td>location.replace()</td><td>替换当前页面，因为不记录历史，所以不能后退页面 <font color=red>不记录浏览历史，不能实现后退功能</font></td></tr><tr><td>location.reload()</td><td>重新加载页面，相当于刷新按钮或者F5 如果参数为true 强制刷新 ctrl+f5</td></tr></tbody></table><h2 id="navigator对象"><a href="#navigator对象" class="headerlink" title="navigator对象"></a>navigator对象</h2><ul><li><p><strong>什么是navigator对象？</strong></p><p>navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是useAgent，该属性可以返回客服端发送服务器的user-agent头部的值</p><p>判断用户用哪个终端打开页面，实现跳转</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>( (navigator.userAgent.match (<span class="regexp">/(phone|pad|pod|iPhone|iPod|ios|iPad Android|Mobile|BlackBerryl|IEMobile|MQQBrowser|JUC|Fennec|IwOSBrowser| BrowserNG|Webos|Symbian|windows Phone)/i</span>))) {</span><br><span class="line"><span class="built_in">window</span>. location.href = <span class="string">""</span>; <span class="comment">//手机</span></span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line"><span class="built_in">window</span>. location.href = <span class="string">""</span>; <span class="comment">//电脑</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul><h2 id="history对象"><a href="#history对象" class="headerlink" title="history对象"></a>history对象</h2><ul><li><p><strong>什么是history对象？</strong></p><p>window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户(在浏览器窗口中)访问过的URL。</p><table><thead><tr><th>history对象方法</th><th>作用</th></tr></thead><tbody><tr><td>back()</td><td>可以后退功能</td></tr><tr><td>forward()</td><td>前进功能</td></tr><tr><td>go(参数)</td><td>前进后退功能 参数如果是1 前进1个页面 如果是-1 后退一个页面</td></tr></tbody></table></li></ul><h1 id="网页特效"><a href="#网页特效" class="headerlink" title="网页特效"></a>网页特效</h1><h2 id="元素偏移量offset系列"><a href="#元素偏移量offset系列" class="headerlink" title="元素偏移量offset系列"></a>元素偏移量offset系列</h2><ul><li><p><strong>offset概述</strong></p><p>offset翻译过来就是偏移量，我们使用offset系列相关属性可以<font color=red>动态的</font>得到该元素的位置(偏移)、大小等。</p><p>Tips：</p><ol><li>获得元素距离带有定位父元素的位置</li><li>获得元素自身的大小(宽度高度)</li><li>返回的数值都不带单位</li></ol><table><thead><tr><th>offset系列属性</th><th>作用</th></tr></thead><tbody><tr><td>element.offsetParent</td><td>返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body <font color=red>parentNode返回的是最近一级的父亲 且不管父亲有没有定位</font></td></tr><tr><td>element.offsetTop</td><td>返回元素相对于带有定位父元素上方的偏移</td></tr><tr><td>element.offsetLeft</td><td>返回元素相对于带有定位父元素左边框的偏移</td></tr><tr><td>element.offsetWidth</td><td>返回自身包括padding、边框、内容区的宽度，返回数值不带单位</td></tr><tr><td>element.offsetHeight</td><td>返回自身包括padding、边框、内容区的高度，返回数值不带单位</td></tr></tbody></table></li></ul><ul><li><p><strong>offset与style的区别</strong></p><p></p></li></ul><h2 id="元素可视区client系列"><a href="#元素可视区client系列" class="headerlink" title="元素可视区client系列"></a>元素可视区client系列</h2><ul><li><p><strong>client概述</strong></p><p>client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等</p><p>Tips:</p><p>clientWidth/clientHeight和offsetWidth/offsetHeight最大的区别就是前者<font color=red>不包含边框</font></p><table><thead><tr><th>client系列属性</th><th>作用</th></tr></thead><tbody><tr><td>element.clientTop</td><td>返回元素上边框的大小</td></tr><tr><td>element.clientLeft</td><td>返回元素左边框的大小</td></tr><tr><td>element.clientWidth</td><td>返回自身包括padding、内容区的高度，不含边框，返回数值不带单位</td></tr><tr><td>element.clentHeight</td><td>返回自身包括padding、内容区的高度，不含边框，返回数值不带单位</td></tr></tbody></table></li></ul><h2 id="元素滚动scroll系列"><a href="#元素滚动scroll系列" class="headerlink" title="元素滚动scroll系列"></a>元素滚动scroll系列</h2><ul><li><p><strong>scroll概述</strong></p><p>scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等</p><table><thead><tr><th>scroll系列属性</th><th>作用</th></tr></thead><tbody><tr><td>element.scrollTop</td><td>返回被卷去的上距离，返回值不带单位 <font color=red>使用较多</font></td></tr><tr><td>element.scrollLeft</td><td>返回被卷的左侧距离，返回数值不带单位 <font color=red>使用较多</font></td></tr><tr><td>element.scrollWidth</td><td>返回自身实际的宽度，不含边框，返回数值不带单位</td></tr><tr><td>element.scrollHeight</td><td>返回自身实际的高度，不含边框，返回数值不带单位</td></tr></tbody></table><p></p></li></ul><p><strong>三大系列总结</strong></p><p></p><table><thead><tr><th>三大系列大小对比</th><th>作用</th></tr></thead><tbody><tr><td>element.offsetWidth</td><td>返回自身包括padding、边框、内容区的宽度，返回数值不带单位</td></tr><tr><td>element.clientWidth</td><td>返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位</td></tr><tr><td>element.scrollWidth</td><td>返回自身实际的宽度，不含边框，返回数值不带单位</td></tr></tbody></table><p><strong>他们的主要用法</strong></p><ol><li>offset系列经常用于获得元素位置 offsetLeft\offsetTop</li><li>client经常用于获取元素大小 clientWidth clientHeight</li><li>scroll经常用于获取滚动距离 scrollTop scrollLeft</li><li>注意页面滚动的距离通过 window.pageXOffset 获得</li><li>返回顶部 window.scroll(0,0);</li></ol><h2 id="mouseenter和mouseover的区别"><a href="#mouseenter和mouseover的区别" class="headerlink" title="mouseenter和mouseover的区别"></a>mouseenter和mouseover的区别</h2><ul><li>当鼠标移动到元素上时就会触发mouseenter事件</li><li>类似mouseover，他们两者之间的差别是</li><li>mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发</li><li>之所以这样，就是因为mouseenter不会冒泡</li><li>跟mouseenter发哦诶鼠标离开mouseleave 同样不会冒泡</li></ul><h2 id="动画函数封装"><a href="#动画函数封装" class="headerlink" title="动画函数封装"></a>动画函数封装</h2><h3 id="动画实现的原理"><a href="#动画实现的原理" class="headerlink" title="动画实现的原理"></a>动画实现的原理</h3><p><font color=red>核心原理： </font>通过定时器setInterval()不断移动盒子的位置</p><p><strong>实现步骤：</strong></p><ol><li>获得盒子当前位置</li><li>让盒子在当前位置加上1个移动距离</li><li>利用定时器不断重复这个动作</li><li>接一个结束定时器的条件</li><li>注意此元素需要添加定位，才能使用element.style.left</li></ol><h3 id="动画函数简单封装"><a href="#动画函数简单封装" class="headerlink" title="动画函数简单封装"></a>动画函数简单封装</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">animate</span>(<span class="params">obj, target</span>) </span>{</span><br><span class="line"> <span class="comment">//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器</span></span><br><span class="line"> <span class="comment">//解决方案是 让我们元素只有一个定时器执行</span></span><br><span class="line"> <span class="comment">//先清除以前的定时器，只保留当前的一个定时器执行</span></span><br><span class="line"> <span class="built_in">clearInterval</span>(obj.timer);</span><br><span class="line"> obj.timer = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span> (obj.offsetLeft >= target) {</span><br><span class="line"> <span class="comment">//停止动画 本质是停止定时器</span></span><br><span class="line"> <span class="built_in">clearInterval</span>(timer);</span><br><span class="line"> }</span><br><span class="line"> obj.style.left = obj.offsetLeft + <span class="number">1</span> + <span class="string">'px'</span>;</span><br><span class="line"> }, <span class="number">30</span>);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">"div"</span>);</span><br><span class="line"><span class="keyword">var</span> btn = <span class="built_in">document</span>.querySelector(<span class="string">'button'</span>);</span><br><span class="line"><span class="keyword">var</span> span = <span class="built_in">document</span>.querySelector(<span class="string">'span'</span>);</span><br><span class="line"><span class="comment">//调用函数</span></span><br><span class="line">animate(div, <span class="number">300</span>);</span><br><span class="line">btn.addEventListener(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> animate(span, <span class="number">200</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="缓动效果原理及在多个目标值之间移动"><a href="#缓动效果原理及在多个目标值之间移动" class="headerlink" title="缓动效果原理及在多个目标值之间移动"></a>缓动效果原理及在多个目标值之间移动</h3><p> 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来</p><p> 思路：</p><ol><li>让盒子每次移动的距离慢慢变小，速度就会慢慢落下来</li><li>核心算法：(目标值-现在的位置) / 10 做为每次移动的距离步长</li><li>停止的条件是：让当前盒子位置等于目标位置就停止定时器</li><li>注意步长值需要取整</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><button <span class="class"><span class="keyword">class</span></span>=<span class="string">'btn500'</span>></button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">'btn800'</span>></span><span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">animate</span>(<span class="params">obj, target</span>) </span>{</span><br><span class="line"> <span class="built_in">clearInterval</span>(obj.timer);</span><br><span class="line"> obj.timer = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//步长值写到定时器的里面</span></span><br><span class="line"> <span class="comment">//把我们步长值改为整数 不要出现小数的问题</span></span><br><span class="line"> <span class="comment">//var step = Math.ceil(target - obj.offsetLeft) / 10);</span></span><br><span class="line"> <span class="keyword">var</span> step = (target - obj.offsetLeft) / <span class="number">10</span>;</span><br><span class="line"> step = step > <span class="number">0</span> ? <span class="built_in">Math</span>.ceil(step) : <span class="built_in">Math</span>.floor(step);</span><br><span class="line"> <span class="keyword">if</span> (obj.offsetLeft == target) {</span><br><span class="line"> <span class="built_in">clearInterval</span>(timer);</span><br><span class="line"> }</span><br><span class="line"> obj.style.left = obj.offsetLeft + step + <span class="string">'px'</span>;</span><br><span class="line"> }, <span class="number">30</span>);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">"div"</span>);</span><br><span class="line"><span class="keyword">var</span> btn500 = <span class="built_in">document</span>.querySelector(<span class="string">".btn500"</span>);</span><br><span class="line"><span class="keyword">var</span> btn800 = <span class="built_in">document</span>.querySelector(<span class="string">".btn800"</span>);</span><br><span class="line">btn500.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> animate(div, <span class="number">500</span>);</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">btn800.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> animate(div,<span class="number">800</span>);</span><br><span class="line">})</span><br><span class="line"></span><br></pre></td></tr></table></figure><h3 id="动画函数添加回调函数"><a href="#动画函数添加回调函数" class="headerlink" title="动画函数添加回调函数"></a>动画函数添加回调函数</h3><p><font color=red>回调函数原理：</font>函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程叫做回调。</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><button <span class="class"><span class="keyword">class</span></span>=<span class="string">'btn500'</span>></button></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">button</span> <span class="attr">class</span>=<span class="string">'btn800'</span>></span><span class="tag"></<span class="name">button</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">animate</span>(<span class="params">obj, target,callback</span>) </span>{</span><br><span class="line"> <span class="built_in">clearInterval</span>(obj.timer);</span><br><span class="line"> obj.timer = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//步长值写到定时器的里面</span></span><br><span class="line"> <span class="comment">//把我们步长值改为整数 不要出现小数的问题</span></span><br><span class="line"> <span class="comment">//var step = Math.ceil(target - obj.offsetLeft) / 10);</span></span><br><span class="line"> <span class="keyword">var</span> step = (target - obj.offsetLeft) / <span class="number">10</span>;</span><br><span class="line"> step = step > <span class="number">0</span> ? <span class="built_in">Math</span>.ceil(step) : <span class="built_in">Math</span>.floor(step);</span><br><span class="line"> <span class="keyword">if</span> (obj.offsetLeft == target) {</span><br><span class="line"> <span class="built_in">clearInterval</span>(timer);</span><br><span class="line"> <span class="comment">//清除定时器后执行回调函数</span></span><br><span class="line"> <span class="keyword">if</span>(callback) {</span><br><span class="line"> callback();</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> obj.style.left = obj.offsetLeft + step + <span class="string">'px'</span>;</span><br><span class="line"> }, <span class="number">30</span>);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">"div"</span>);</span><br><span class="line"><span class="keyword">var</span> btn500 = <span class="built_in">document</span>.querySelector(<span class="string">".btn500"</span>);</span><br><span class="line"><span class="keyword">var</span> btn800 = <span class="built_in">document</span>.querySelector(<span class="string">".btn800"</span>);</span><br><span class="line">btn500.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> animate(div, <span class="number">500</span>);</span><br><span class="line">})</span><br><span class="line"></span><br><span class="line">btn800.addEventListener(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> animate(div,<span class="number">800</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> span.style.backgroundColor = <span class="string">'red'</span>;</span><br><span class="line"> });</span><br><span class="line">})</span><br></pre></td></tr></table></figure><h3 id="动画函数封装到单独JS文件里面"><a href="#动画函数封装到单独JS文件里面" class="headerlink" title="动画函数封装到单独JS文件里面"></a>动画函数封装到单独JS文件里面</h3><p>因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。</p><h2 id="常见网页特效案例"><a href="#常见网页特效案例" class="headerlink" title="常见网页特效案例"></a>常见网页特效案例</h2><h3 id="轮播图"><a href="#轮播图" class="headerlink" title="轮播图"></a>轮播图</h3><p>功能需求：</p><ol><li>鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。</li><li>点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。</li><li>图片播放的同时，下面小圆圈模块跟随一起变化。</li><li>点击小圆圈，可以播放相应图片。</li><li>鼠标不经过轮播图，轮播图也会自动播放。</li></ol><ul><li><p>防止轮播图按钮连续点击造成播放过快</p><p>节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。</p><p>核心思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。</p><p>开始设置一个变量var flag = true;</p><p>if(flag){flag = false; do something} 关闭水龙头</p></li></ul><h3 id="筋斗云案例"><a href="#筋斗云案例" class="headerlink" title="筋斗云案例"></a>筋斗云案例</h3><p>功能需求：</p><ol><li>鼠标经过某个小li，筋斗云跟着到当前小li这个位置</li><li>鼠标离开小li，筋斗云复原为原来的位置</li><li>鼠标点击了某个小li，筋斗云就会留在点击这个小li的位置</li></ol><ul><li><p>案例分析</p><p><code>1</code>利用动画函数做动画效果</p><p><code>2</code>原先筋斗云起始位置是0</p><p><code>3</code>鼠标经过某个小li，把当前小li的offsetLeft位置做为目标值即可</p></li></ul><hr><h1 id="移动端"><a href="#移动端" class="headerlink" title="移动端"></a>移动端</h1><h2 id="触屏事件"><a href="#触屏事件" class="headerlink" title="触屏事件"></a>触屏事件</h2><p>==概述==:</p><p>移动端浏览器兼容性好,我们不需要考虑以前JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端有自己独特的地方,比如<font color=red>触屏事件touch</font>(也称触摸事件),Android和IOS都有</p><p>==常见的触屏事件==:</p><table><thead><tr><th>触屏touch事件</th><th>说明</th></tr></thead><tbody><tr><td>touchstart</td><td>手指触摸到一个DOM元素时触发</td></tr><tr><td>touchmove</td><td>手指在一个元素上滑动时触发</td></tr><tr><td>touchend</td><td>手指从一个DOM元素上移开时触发</td></tr></tbody></table><p>==触摸事件对象==(touchEvent)</p><table><thead><tr><th>触摸列表</th><th>说明</th></tr></thead><tbody><tr><td>touches</td><td>正在触摸屏幕的所有手指一个列表</td></tr><tr><td>targetTouches</td><td>正在触摸当前DOM元素上的手指的一个列表</td></tr><tr><td>dTouches</td><td>手指状态发生了改变的列表,从无到有,从有到无变化</td></tr></tbody></table><p><font color=red>因为平时我们都是给元素注册触摸事件,所以重点记住targetTouches</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(e.targetTouches[<span class="number">0</span>])</span><br><span class="line"><span class="comment">//输出正在触摸dom元素的第一个手指的信息</span></span><br></pre></td></tr></table></figure><hr><p>==移动端拖动元素==</p><ol><li>touchstart、touchmove、touchend可以实现拖动元素</li><li>但是拖动元素需要当前手指的坐标值 我们可以使用 targerTouches[0]里面的pageX和pageY</li><li>移动端拖动的原理:手指移动中,计算出手指移动的距离.然后用盒子原来的位置+手指移动的距离</li><li>手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置</li></ol><ul><li>触摸元素touchstart: 获取手指初始坐标,同时获得盒子原来的位置</li><li>移动手指touchmove: 计算手指的滑动距离, 并且移动盒子</li><li>离开屏幕touchend:</li></ul><p><font color=red>注意:</font>手指移动也会触发滚动屏幕所以这里要阻止屏幕滚动 ==e.preventDefault()==;</p><hr><h2 id="移动端常见特效"><a href="#移动端常见特效" class="headerlink" title="移动端常见特效"></a>移动端常见特效</h2><p>==classList属性==(元素属性)</p><p>classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加，移除及切换CSS类。有以下方法</p><ul><li><p>添加类</p><p>element.classList.add(‘类名’);</p></li><li><p>移除类名</p><p>element.classList.remove(‘类名’);</p></li><li><p>切换类名</p><p>element.classList.toggle(‘类名’); ==有的话就去掉,没有就加上==</p></li></ul><hr><p>==click延时解决方案==</p><p>移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap 头 zoom)页面.</p><p><font color=green>解决方案:</font></p><ol><li>禁用缩放.浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟</li></ol><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><meta name='viewport' <span class="attribute">content</span>='user-scalable=no'></span><br></pre></td></tr></table></figure><ol start="2"><li>封装函数解决 如果手指触摸屏幕到离开屏幕时间小于150ms且没有滑动 定义为点</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">obj,callback</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> isMove = <span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">var</span> startrTime = <span class="number">0</span>; <span class="comment">//记录触摸时候的时间变量</span></span><br><span class="line"> obj.addEventListener(<span class="string">'touchstart'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> startTime = <span class="built_in">Date</span>.now(); <span class="comment">//记录触摸时间</span></span><br><span class="line"> });</span><br><span class="line"> obj.addEventListener(<span class="string">'touchmove'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> isMove = <span class="literal">true</span>; <span class="comment">//如果有滑动,就不算点击</span></span><br><span class="line"> });</span><br><span class="line"> obj.addEventListener(<span class="string">'touchend'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(!isMove && (<span class="built_in">Date</span>.now() - starttime) < <span class="number">150</span>) {</span><br><span class="line"> callback && callback(); <span class="comment">//执行回调函数</span></span><br><span class="line"> }</span><br><span class="line"> isMove = <span class="literal">false</span>; <span class="comment">// 取反 重置</span></span><br><span class="line"> startTime = <span class="number">0</span>;</span><br><span class="line"> });</span><br><span class="line">}</span><br><span class="line"><span class="comment">//调用</span></span><br><span class="line">tap(div,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ 执行代码 });</span><br></pre></td></tr></table></figure><ol start="3"><li><p>fastclick插件解决 300ms[延迟问题] (<a href="https://github.com/ftlabs/fastclick">https://github.com/ftlabs/fastclick</a>)</p><p><font color=red>JS插件就是JS文件</font>,它是遵循一定规范便可,方便程序展示效果,拥有特定功能且方便调用.如轮播图和瀑布流插件</p><p>特点:一般是为了解决某个问题二专门存在,功能单一,并且比较小</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--fastclick插件使用--></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">'fastclick'</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="keyword">if</span>(<span class="string">'addEventListener'</span> <span class="keyword">in</span> <span class="built_in">document</span>) {</span></span><br><span class="line"><span class="javascript"> <span class="built_in">document</span>.addEventListener(<span class="string">'DOMContentLoaded'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript"> FastClick.attach(<span class="built_in">document</span>.body);</span></span><br><span class="line"><span class="javascript"> },<span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript"> }</span></span><br><span class="line"><span class="javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure></li></ol><hr><h2 id="Swiper插件"><a href="#Swiper插件" class="headerlink" title="Swiper插件"></a>Swiper插件</h2><p><a href="https://www.swiper.com.cn/">https://www.swiper.com.cn/</a></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--1.引入相关css、js文件--></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">'stylesheet'</span> <span class="attr">href</span>=<span class="string">'swiper.min.css'</span>></span></span><br><span class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">'swiper.min.js'</span>></span><span class="tag"></<span class="name">script</span>></span></span><br><span class="line"><span class="comment"><!--2. 复制案例里的html、css、js--></span></span><br></pre></td></tr></table></figure><p>其它相关插件:</p><p>Superslide: <a href="http://www.superdlide2.com/">http://www.superdlide2.com/</a></p><p>Scroll: <a href="http://github.com/cubiq/iscroll">http://github.com/cubiq/iscroll</a></p><hr><h2 id="视频插件"><a href="#视频插件" class="headerlink" title="视频插件"></a>视频插件</h2><p><a href="https://github.com/ireaderlab/zyMedia">https://github.com/ireaderlab/zyMedia</a></p><p>基本使用</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--1. 引入样式文件zy.media.css和js文件zy.media.js--></span></span><br><span class="line"><span class="comment"><!--2. 输入html结构,例如视频,其中video标签的data-config属性用于设置参数--></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"zy_media"</span>></span></span><br><span class="line"><span class="tag"><<span class="name">video</span> <span class="attr">poster</span>=<span class="string">"test.jpg"</span> <span class="attr">data-config</span>=<span class="string">'{"mediaTitle": "《疯狂动物城》--腾讯视频"}'</span>></span></span><br><span class="line"><span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"test.mp4"</span> <span class="attr">type</span>=<span class="string">"video/mp4"</span>></span></span><br><span class="line">您的浏览器不支持HTML5视频</span><br><span class="line"><span class="tag"></<span class="name">video</span>></span></span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//3. 绑定媒体节点,zymedia是一个全局对象,可重复调用,不反回视频实例,第二个参数是用于批量设置视频参数</span></span><br><span class="line">zymedia(<span class="string">'video'</span>);</span><br><span class="line"><span class="comment">// zymedia('video', {...参数});</span></span><br></pre></td></tr></table></figure><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line">参数说明</span><br><span class="line">type: ''</span><br><span class="line">指定媒体类型，默认空</span><br><span class="line"></span><br><span class="line">mediaTitle: ''</span><br><span class="line">设置媒体标题，默认空，不展示</span><br><span class="line"></span><br><span class="line">nativeControls: <span class="literal">false</span></span><br><span class="line">强制用原生的播放控制器，默认不使用，<span class="literal">true</span>为使用</span><br><span class="line"></span><br><span class="line">autoplay: <span class="literal">false</span></span><br><span class="line">是否自动播放，默认否，<span class="literal">true</span>为自动播放</span><br><span class="line"></span><br><span class="line">preload: 'none'</span><br><span class="line">是否预加载，默认关闭，和原生preload对应，其他值为metadata|auto|''</span><br><span class="line"></span><br><span class="line">videoWidth: '<span class="number">100</span>%'</span><br><span class="line">指定视频宽，默认<span class="number">100</span>%</span><br><span class="line"></span><br><span class="line">videoHeight: 'auto'</span><br><span class="line">指定视频高，默认auto</span><br><span class="line"></span><br><span class="line">aspectRation: (<span class="number">16</span> / <span class="number">9</span>)</span><br><span class="line">指定视频宽高比，默认<span class="number">16</span>:<span class="number">9</span></span><br><span class="line"></span><br><span class="line">audioWidth: '<span class="number">100</span>%'</span><br><span class="line">指定音频宽，默认<span class="number">100</span>%</span><br><span class="line"></span><br><span class="line">audioHeight: <span class="number">44</span></span><br><span class="line">指定音频高，默认<span class="number">44</span>px</span><br><span class="line"></span><br><span class="line">autoLoop: <span class="literal">false</span></span><br><span class="line">是否循环播放，默认否，<span class="literal">true</span>为无限循环</span><br><span class="line"></span><br><span class="line">timeFormatType: <span class="number">1</span></span><br><span class="line">时间格式类型，默认mm:ss，<span class="number">2</span>为m:s</span><br><span class="line"></span><br><span class="line">alwaysShowHours: <span class="literal">false</span></span><br><span class="line">是否强制显示小时位，默认否，<span class="literal">true</span>为显示</span><br><span class="line"></span><br><span class="line">alwaysShowControls: <span class="literal">false</span></span><br><span class="line">是否始终显示控制栏，默认否，自动隐藏，<span class="literal">true</span>为始终显示</span><br><span class="line"></span><br><span class="line">hideVideoControlsOnLoad: <span class="literal">false</span></span><br><span class="line">加载时是否隐藏视频控制栏，默认否，<span class="literal">true</span>为隐藏</span><br><span class="line"></span><br><span class="line">enableFullscreen: <span class="literal">true</span></span><br><span class="line">是否显示全屏按钮，默认显示，<span class="literal">false</span>为不显示</span><br><span class="line"></span><br><span class="line">pauseOtherPlayers: <span class="literal">true</span></span><br><span class="line">是否播放唯一，默认唯一，播放时将暂停其他播放实例，<span class="literal">false</span>为不唯一</span><br><span class="line"></span><br><span class="line">enableVisibilityState: <span class="literal">true</span>,</span><br><span class="line">是否页面不可见时暂停当前所有播放，默认暂停</span><br><span class="line"></span><br><span class="line">duration: <span class="number">0</span></span><br><span class="line">指定媒体时长，默认<span class="number">0</span></span><br><span class="line"></span><br><span class="line">success: <span class="literal">null</span></span><br><span class="line">实例化成功时的回调，默认无</span><br><span class="line"></span><br><span class="line">error: <span class="literal">null</span></span><br><span class="line">实例化错误时的回调，默认无</span><br><span class="line"></span><br><span class="line">beforePlay: <span class="literal">null</span></span><br><span class="line">点击播放前的交互，默认无，如果函数返回<span class="literal">true</span>，将不播放视频</span><br></pre></td></tr></table></figure><hr><h2 id="Bootstra框架"><a href="#Bootstra框架" class="headerlink" title="Bootstra框架"></a>Bootstra框架</h2><p>Bootstrap是一个简洁、直观、强悍的削端开发框架，它让web开发更迅速、简单。 它能开发PC端，也能开发移动端<br>Bootstrap JS插件使用步骤：</p><ol><li><p>引入相关js文件</p></li><li><p>复制HTML结构</p></li><li><p>修改对应样式</p></li><li><p>修改相应JS 参数</p></li></ol><hr><h1 id="本地存储"><a href="#本地存储" class="headerlink" title="本地存储"></a>本地存储</h1><p>随着互联网的快速发展,给予网页的应用越来越普遍,同时也变得越来越复杂,为了满足各种各样的需求,会经常在本地存储大量的数据,HTML5规范提出了相关解决方案</p><h2 id="本地存储特性"><a href="#本地存储特性" class="headerlink" title="本地存储特性"></a>本地存储特性</h2><ol><li>数据存储在用户浏览器中</li><li>设置、读取方便、甚至页面刷新不丢失数据</li><li>容量较大,sessionStorage约5M、localStorage约20M</li><li>只能存储字符串,可以将对象JSON.stringfy()编码后存储</li></ol><h2 id="Window-sessionStorage"><a href="#Window-sessionStorage" class="headerlink" title="Window.sessionStorage"></a>Window.sessionStorage</h2><ol><li>==生命周期为关闭浏览器窗口==</li><li>在同一个窗口(页面)下数据是可以共享</li><li>以键值对的形式存储使用</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//存储数据</span></span><br><span class="line">sessionStorage.setItem(key,value);</span><br><span class="line"><span class="comment">//获取数据</span></span><br><span class="line">sessionStorage.getItem(key);</span><br><span class="line"><span class="comment">//删除数据</span></span><br><span class="line">sessionStorage.remove(key);</span><br><span class="line"><span class="comment">//清空数据</span></span><br><span class="line">sessionStorage.clear();</span><br></pre></td></tr></table></figure><hr><h2 id="Window-localStorage"><a href="#Window-localStorage" class="headerlink" title="Window.localStorage"></a>Window.localStorage</h2><ol><li>生命周期永久生效,除非手动删除,否则关闭页面也会存在</li><li>可以多窗口(页面) 共享 (同一浏览器可以共享)</li><li>以键值对存储使用</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//存储数据</span></span><br><span class="line"><span class="built_in">localStorage</span>.setItem(key,value);</span><br><span class="line"><span class="comment">//获取数据</span></span><br><span class="line"><span class="built_in">localStorage</span>.getItem(key);</span><br><span class="line"><span class="comment">//删除数据</span></span><br><span class="line">loaclStorage.remove(key);</span><br><span class="line"><span class="comment">//清空数据</span></span><br><span class="line"><span class="built_in">localStorage</span>.clear();</span><br></pre></td></tr></table></figure><h1 id="jQuery"><a href="#jQuery" class="headerlink" title="jQuery"></a>jQuery</h1><h2 id="jQuery概述"><a href="#jQuery概述" class="headerlink" title="jQuery概述"></a>jQuery概述</h2><p>jQuery把JS中的DOM操作做了封装,我们可以快速的查询使用里面的功能.</p><p>==优点==</p><ol><li>轻量级.核心文件才几十kb,不会影响页面加载速度</li><li>跨浏览器兼容,基本兼容了现在主流的浏览器</li><li>链式编程、隐式迭代</li><li>对事件、样式、动画支持,大大简化了DOM操作</li><li>支持插件扩展开发.有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图等</li><li>免费、开源</li></ol><p>常见的JS库</p><ul><li>jQuery</li><li>Prototype</li><li>YUI</li><li>Dojo</li><li>Ext JS</li><li>移动端的zepto</li></ul><p>这些库都是对原生js的封装,内部都是用js实现的</p><hr><h2 id="jQuery基本使用"><a href="#jQuery基本使用" class="headerlink" title="jQuery基本使用"></a>jQuery基本使用</h2><h3 id="入口函数"><a href="#入口函数" class="headerlink" title="入口函数"></a>入口函数</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.第一种</span></span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ </span><br><span class="line"><span class="comment">//此处是页面DOM加载完成的入口</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ </span><br><span class="line"><span class="comment">//此处是页面DOM加载完成的入口</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><ol><li>等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装.</li><li>相当于原生js中的DOMContentLoaded.</li><li>不同于原生js中的load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码</li></ol><hr><h3 id="jQuery的顶级对象"><a href="#jQuery的顶级对象" class="headerlink" title="jQuery的顶级对象"></a>jQuery的顶级对象</h3><ol><li>$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,直接用$.</li><li>$是jQuery的顶级对象,相当于原生JavaScript中的window.把元素利用$包装成jQuery对象,就可以调用jQuery方法.</li></ol><hr><h3 id="jQuery对象和DOM对象"><a href="#jQuery对象和DOM对象" class="headerlink" title="jQuery对象和DOM对象"></a>jQuery对象和DOM对象</h3><ol><li>用原生JS获取来的对象就是DOM对象.</li><li>jQuery方法获取的元素就是jQuery对象</li><li>jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)</li><li>jQuery方法和DOM方法不能混用</li><li>因为原生js比jQuery大,原生的一些属性和方法jQuery没法给我们封装,想要使用就需要转换</li></ol><ul><li>DOM对象转换为jQuery对象</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>);</span><br><span class="line">$(div); <span class="comment">//不能加引号</span></span><br></pre></td></tr></table></figure><ul><li>jQuery对象转换为DOM对象</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(div)[index] <span class="comment">//index是索引号</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(div).get(index) <span class="comment">//index是索引号</span></span><br></pre></td></tr></table></figure><hr><h3 id="jQuery-API"><a href="#jQuery-API" class="headerlink" title="jQuery API"></a>jQuery API</h3><h4 id="jQuery选择器"><a href="#jQuery选择器" class="headerlink" title="jQuery选择器"></a>jQuery选择器</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'选择器'</span>) <span class="comment">//里面选择器直接写css选择器即可,但是要加引号</span></span><br></pre></td></tr></table></figure><p>==基础选择器==</p><table><thead><tr><th>名称</th><th>用法</th><th>描述</th></tr></thead><tbody><tr><td>ID选择器</td><td>$(‘#id’)</td><td>获取制定ID的元素</td></tr><tr><td>全选选择器</td><td>$(‘*’)</td><td>匹配所有元素</td></tr><tr><td>类选择器</td><td>$(‘.class’)</td><td>获取统一类class的元素</td></tr><tr><td>标签选择器</td><td>$(‘element’)</td><td>获取同一类标签的所有元素</td></tr><tr><td>并集选择器</td><td>$(‘div,p,li’)</td><td>选取多个元素</td></tr><tr><td>交集选择器</td><td>$(‘li.current’)</td><td>交集元素</td></tr><tr><td>子代选择器</td><td>$(‘ul>li’)</td><td>使用>号,获取亲儿子层级元素</td></tr><tr><td>后代选择器</td><td>$(‘ul li’)</td><td>使用空格,代表后代选择器</td></tr></tbody></table><p>==层级选择器==</p><table><thead><tr><th>名称</th><th>用法</th><th>描述</th></tr></thead><tbody><tr><td>子代选择器</td><td>$(‘ul>li’)</td><td>使用>号,获取亲儿子层级元素</td></tr><tr><td>后代选择器</td><td>$(‘ul li’)</td><td>使用空格,代表后代选择器</td></tr></tbody></table><p>==筛选选择器==</p><table><thead><tr><th>语法</th><th>用法</th><th>描述</th></tr></thead><tbody><tr><td>:first</td><td>$(‘li:first’)</td><td>获取第一个li元素</td></tr><tr><td>:last</td><td>$(‘li:last’)</td><td>获取最后一个li元素</td></tr><tr><td>:eq(index)</td><td>$(‘li:eq(2)’)</td><td>获取到li元素中索引号为2的元素,从0开始</td></tr><tr><td>:odd</td><td>$(‘li:odd’)</td><td>获取到li元素中,选择索引号为奇数的元素</td></tr><tr><td>:even</td><td>$(‘li:even’)</td><td>获取到li元素中,选择索引号为偶数的元素</td></tr></tbody></table><hr><h4 id="jQuery隐式迭代"><a href="#jQuery隐式迭代" class="headerlink" title="jQuery隐式迭代"></a>jQuery隐式迭代</h4><p>遍历内部DOM元素(伪数组形式存储)的过程就叫做<font color=red>隐式迭代</font></p><p>简单理解:给匹配的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>相同的操作<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>相同的操作<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>相同的操作<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">script</span>></span><span class="javascript"></span></span><br><span class="line"><span class="javascript"> <span class="comment">//1.给4个小li加上绿色</span></span></span><br><span class="line"><span class="javascript"> $(<span class="string">'ul li'</span>).css(<span class="string">'background'</span>,<span class="string">'green'</span>);</span></span><br><span class="line"><span class="javascript"> <span class="comment">//隐式迭代就是把匹配的所有元素内部进行循环遍历</span></span></span><br><span class="line"><span class="javascript"> </span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure><hr><h4 id="jQuery筛选方法-重点"><a href="#jQuery筛选方法-重点" class="headerlink" title="jQuery筛选方法(重点)"></a>jQuery筛选方法(重点)</h4><table><thead><tr><th>语法</th><th>用法</th><th>说明</th></tr></thead><tbody><tr><td>parent()</td><td>$(‘li’).parent();</td><td>查找父级</td></tr><tr><td>parents()</td><td>$(‘li’).parents(‘.one’)</td><td>找出所有父级中类名是one的</td></tr><tr><td>children(selector)</td><td>$(‘ul’).children.(‘li’)</td><td>相当于$(‘ul>li’),最近一级,亲儿子</td></tr><tr><td>find(selector)</td><td>$(‘ul’).find(‘li’);</td><td>相当于$(‘ul li’),后代选择器</td></tr><tr><td>siblings(selector)</td><td>$(‘.first’).siblings(‘li’)</td><td>查找兄弟节点,不包括本身</td></tr><tr><td>nextAll([expr])</td><td>$(‘.first’).nextAll()</td><td>查找当前元素之后的所有同辈元素</td></tr><tr><td>prevAll([expr])</td><td>$(‘.last’).prevAll()</td><td>查找当前元素之前的所有同辈元素</td></tr><tr><td>hasClass(class)</td><td>$(‘div’).hasClass(‘protected’)</td><td>检查当前元素是否含有某个特定的类,如果有,则返回true</td></tr><tr><td>eq(index)</td><td>$(‘li’).eq(2)</td><td>相当于$(‘li:eq(2)’),index从0开始</td></tr><tr><td>filter(“.intro”)</td><td>$(“p”).filter(“.intro”)</td><td>返回符合条件的元素。多个条件逗号隔开</td></tr><tr><td>not(“.intro”)</td><td>$(“p”).not(“.intro”)</td><td>返回不符合条件的元素 多个条件逗号隔开</td></tr></tbody></table><p><font color=red>$(this).index() 得到当前元素的索引号</font></p><hr><h4 id="jQuery链式编程"><a href="#jQuery链式编程" class="headerlink" title="jQuery链式编程"></a>jQuery链式编程</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'button'</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="comment">//链式</span></span><br><span class="line"> $(<span class="built_in">this</span>).css(<span class="string">'background'</span>,<span class="string">'red'</span>).siblings().css(<span class="string">'background'</span>,<span class="string">''</span>);</span><br><span class="line"> </span><br><span class="line"> })</span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h4 id="jQuery样式操作"><a href="#jQuery样式操作" class="headerlink" title="jQuery样式操作"></a>jQuery样式操作</h4><p>jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//参数只写属性名,则是返回属性值</span></span><br><span class="line">$(<span class="built_in">this</span>).css(<span class="string">'color'</span>); <span class="comment">//返回this字体颜色</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//参数式属性名,属性值,逗号隔开,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号</span></span><br><span class="line">$(<span class="built_in">this</span>).css(<span class="string">'color,'</span>red<span class="string">');</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//参数可以式对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号</span></span><br><span class="line">$(<span class="built_in">this</span>).css({<span class="string">'color'</span>:<span class="string">'white'</span>,<span class="string">'font-size'</span>:<span class="string">'20px'</span>})</span><br><span class="line">$(<span class="built_in">this</span>).css({<span class="attr">color</span>:white,font-size:20px})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加类</span></span><br><span class="line">$(<span class="string">'div'</span>).addClass(<span class="string">'current'</span>);</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 移除类</span></span><br><span class="line">$(<span class="string">'div'</span>).removeClass(<span class="string">'current'</span>);</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//切换类名 有就去掉 没有就加上</span></span><br><span class="line">$(<span class="string">'div'</span>).toggleClass(<span class="string">'current'</span>);</span><br></pre></td></tr></table></figure><hr><h4 id="jQuery效果"><a href="#jQuery效果" class="headerlink" title="jQuery效果"></a>jQuery效果</h4><p>==显示&隐藏==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'show(speed,easing,[fn])</span></span><br><span class="line"><span class="string">//参数都可以省略</span></span><br><span class="line"><span class="string">speed:三种预定速度之一的字符串('</span>slow<span class="string">','</span>normal<span class="string">','</span>fast<span class="string">')或表示动画的时长(ms)</span></span><br><span class="line"><span class="string">easing:(Optional)用来制定切换效果,默认是'</span>swing<span class="string">',可用参数'</span>linear<span class="string">'</span></span><br><span class="line"><span class="string">fn:回调函数,在动画完成式执行的函数,每个元素执行一次</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'hide(speed,easing,[fn])</span></span><br><span class="line"><span class="string">//参数都可以省略</span></span><br><span class="line"><span class="string">speed:三种预定速度之一的字符串('</span>slow<span class="string">','</span>normal<span class="string">','</span>fast<span class="string">')或表示动画的时长(ms)</span></span><br><span class="line"><span class="string">easing:(Optional)用来制定切换效果,默认是'</span>swing<span class="string">',可用参数'</span>linear<span class="string">'</span></span><br><span class="line"><span class="string">fn:回调函数,在动画完成式执行的函数,每个元素执行一次</span></span><br></pre></td></tr></table></figure><p>==滑动==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//向下滑动</span></span><br><span class="line"><span class="string">'slideDown(speed,easing,[fn]);</span></span><br><span class="line"><span class="string">//向上滑动</span></span><br><span class="line"><span class="string">'</span>slideUp(speed,easing,fn);</span><br><span class="line"><span class="comment">//滑动切换</span></span><br><span class="line"><span class="string">'slideToggle(speed,easing,fn)</span></span><br><span class="line"><span class="string">easing:该参数需要加引号</span></span><br></pre></td></tr></table></figure><p>==事件切换==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">hover([over],[out])</span><br><span class="line"><span class="attr">over</span>: 鼠标移动到元素上要触发的函数(相当于mouseenter)</span><br><span class="line"><span class="attr">out</span>: 鼠标移出元素要触发的函数(相当于mouseleave)</span><br><span class="line">$(<span class="string">'div'</span>).hover(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//事件切换hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数</span></span><br><span class="line">$(<span class="string">'div'</span>).hover(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="built_in">this</span>).children(<span class="string">'ul'</span>).slideToggle();</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>==动画队列&停止排队==</p><p>动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画效果排队执行</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'stop()</span></span><br><span class="line"><span class="string">//stop()方法用于停止动画或效果</span></span><br><span class="line"><span class="string">//注意: stop()写到动画或者效果的前面,相当于停止结束上一次的动画</span></span><br></pre></td></tr></table></figure><p>==淡入淡出==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//淡入效果</span></span><br><span class="line"><span class="string">'fadeIn(speed,easing,[fn])</span></span><br><span class="line"><span class="string">//淡出效果</span></span><br><span class="line"><span class="string">'</span>fadeOut(speed,easing,[fn])</span><br><span class="line"><span class="comment">//淡入淡出切换</span></span><br><span class="line"><span class="string">'fadeToggle(speed,easing,[fn])</span></span><br><span class="line"><span class="string">easing:该参数需要加引号</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//渐进方式调整到指定的不透明度</span></span><br><span class="line"><span class="string">'fadeTo(speed,opacity,easing,[fn])</span></span><br><span class="line"><span class="string">opacity:透明度'</span>必须写<span class="string">',取值0~1之间</span></span><br><span class="line"><span class="string">speed:三种预定速度之一的字符串('</span>slow<span class="string">','</span>normal<span class="string">','</span>fast<span class="string">')或表示动画的时长(ms) '</span>必须写<span class="string">'</span></span><br><span class="line"><span class="string">easing:该参数需要加引号</span></span><br></pre></td></tr></table></figure><p>==自定义动画==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//自定义动画 aninmate</span></span><br><span class="line"><span class="string">'animate({params},speed,easing,[fn])</span></span><br><span class="line"><span class="string">params:想要改变的样式属性,以'</span>对象<span class="string">'的形式传递,必须写.属性名可以不带引号,如果是复合属性则需要采取驼峰命名法bordrLeft.其余参数都可省略.</span></span><br><span class="line"><span class="string">easing:该参数需要加引号,有两种写法</span></span><br><span class="line"><span class="string">//第一种</span></span><br><span class="line"><span class="string">$('</span>element<span class="string">').animate({</span></span><br><span class="line"><span class="string"> left: [300, '</span>linear<span class="string">']</span></span><br><span class="line"><span class="string">},2000)</span></span><br><span class="line"><span class="string">//第二种</span></span><br><span class="line"><span class="string">$('</span>element<span class="string">').animate({</span></span><br><span class="line"><span class="string"> left: 300</span></span><br><span class="line"><span class="string">},2000,'</span>linear<span class="string">')</span></span><br></pre></td></tr></table></figure><p>==滑动效果参数写法二==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span><span class="string">'$(myElement).slideUp(1000, method, callback}); </span></span><br><span class="line"><span class="string">//第2种写法</span></span><br><span class="line"><span class="string">$(myElement).slideUp({ </span></span><br><span class="line"><span class="string">duration: 1000, </span></span><br><span class="line"><span class="string">easing: method, </span></span><br><span class="line"><span class="string">complete: callback </span></span><br><span class="line"><span class="string">});</span></span><br></pre></td></tr></table></figure><hr><h4 id="jQuery属性操作"><a href="#jQuery属性操作" class="headerlink" title="jQuery属性操作"></a>jQuery属性操作</h4><p>==设置或获取元素固有属性值==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取属性方法</span></span><br><span class="line">prop(<span class="string">'属性'</span>)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置属性方法</span></span><br><span class="line">prop(<span class="string">'属性'</span>,<span class="string">'属性值'</span>)</span><br></pre></td></tr></table></figure><p>==设置或获取元素自定义属性==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取自定义属性</span></span><br><span class="line">attr(<span class="string">'属性'</span>) <span class="comment">//类似原生getAttribute()</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//设置自定义属性</span></span><br><span class="line">attr(<span class="string">'属性'</span>,<span class="string">'属性值'</span>) <span class="comment">// 类似原生setAttribute()</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据缓存 data() 这个里面的数据是存放在元素的内存里面 页面刷新就没了</span></span><br><span class="line"><span class="comment">//data方法获取属性</span></span><br><span class="line">element.data(<span class="string">'属性'</span>)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//data方法设置属性</span></span><br><span class="line">element.data(<span class="string">'属性'</span>,<span class="string">'属性值'</span>)</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"><!--data 获取h5自定义属性(data-index) 1.不用写data- 而且返回的是数字型--></span></span><br><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">data-index</span>=<span class="string">'2'</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line">element.data('index') // 2 (number)</span><br></pre></td></tr></table></figure><p>==被选中的复选框个数还可以判断是否被选中==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'checkbox:checked'</span>).length</span><br></pre></td></tr></table></figure><hr><h4 id="jQuery内容文本值"><a href="#jQuery内容文本值" class="headerlink" title="jQuery内容文本值"></a>jQuery内容文本值</h4><p>==获取&设置普通元素内容html()== (相当原生innerHTML)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">html() <span class="comment">// 获取元素内容</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">html(<span class="string">'内容'</span>) <span class="comment">//设置元素内容</span></span><br></pre></td></tr></table></figure><p>==获取&设置普通元素内容text()== (相当于原生innerText)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text() <span class="comment">// 获取元素内容</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text(<span class="string">'内容'</span>) <span class="comment">//设置元素内容</span></span><br></pre></td></tr></table></figure><p>==获取&设置表单的值val()== (相当于原生的value)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">val() <span class="comment">//获取表单的value</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">val(<span class="string">'内容'</span>) <span class="comment">// 设置表单value</span></span><br></pre></td></tr></table></figure><hr><h4 id="jQuery元素操作"><a href="#jQuery元素操作" class="headerlink" title="jQuery元素操作"></a>jQuery元素操作</h4><p>==遍历元素==</p><p>jQuery隐式迭代是对同一类元素做了同样的操作.如果想要给同一类元素做不同操作,就需要遍历</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params">index,domEle</span>) </span>{xxx;})</span><br><span class="line"><span class="comment">//each()方法遍历匹配的每一个元素,主要用DOM处理</span></span><br><span class="line"><span class="comment">//里面的回调函数有两个参数:index式每个元素的索引号;demEle是每个DOM元素对象,不是jQuery对象</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$.each(object,<span class="function"><span class="keyword">function</span>(<span class="params">index,element</span>) </span>{xxx;})</span><br><span class="line"><span class="comment">//$.each()方法可用于遍历任何对象,主要用于数据处理,比如数组,对象</span></span><br><span class="line"><span class="comment">//里面的函数有2个参数:index是每个元素的索引号;element元素</span></span><br></pre></td></tr></table></figure><p>==创建元素==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'<li></li>'</span>); <span class="comment">//动态的创建了一个标签</span></span><br></pre></td></tr></table></figure><p>==添加元素==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'ul'</span>).append(li); <span class="comment">//内部添加 把内容放到匹配元素的最后面,类似原生appendChild</span></span><br><span class="line">$(<span class="string">'ul'</span>).prepend(li) <span class="comment">//内部添加 把内容放到匹配元素的最前面,类似原生</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">element.after(<span class="string">'creatElement'</span>) <span class="comment">//外部添加 把内容放入目标元素后面</span></span><br><span class="line">element.before(<span class="string">'creatElement'</span>) <span class="comment">//外部添加 把内容放到目标元素前面</span></span><br></pre></td></tr></table></figure><p>==删除元素==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.remove() <span class="comment">//删除匹配的元素(本身)</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.empty() <span class="comment">//删除匹配的元素集合中所有的子节点 删孩子</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.html(<span class="string">''</span>) <span class="comment">//清空匹配的元素内容 删孩子</span></span><br></pre></td></tr></table></figure><hr><h4 id="jQuery尺寸-amp-位置操作"><a href="#jQuery尺寸-amp-位置操作" class="headerlink" title="jQuery尺寸&位置操作"></a>jQuery尺寸&位置操作</h4><p>==尺寸==</p><table><thead><tr><th>语法</th><th>用法</th></tr></thead><tbody><tr><td>width() / heigth()</td><td>取得匹配元素宽度和高度值 只算 width / height</td></tr><tr><td>innerWidth() / innerHeight()</td><td>取得匹配元素宽度和高度值 包含padding</td></tr><tr><td>outerWidth() / outerHeight()</td><td>取得匹配元素宽度和高度值 包含 padding、border</td></tr><tr><td>outerWidth(true) / outerHeight(true)</td><td>取得匹配元素宽度和高度值 包含padding、bordr、margin</td></tr></tbody></table><p>==位置==</p><p>位置主要有三个: offset() 、position() 、 scrollTop() / scrollLeft()</p><ul><li><font color=red>offset()</font>设置或获取元素偏移</li></ul><ol><li>offset()方法设置或返回被选元素相对于<font color=red>文档</font>的偏移坐标,跟父级没有关系</li><li>该方法有两个属性Left、Top;offset().Top用于获取距离文档顶部的距离,offset().Left左侧</li><li>可以设置元素的偏移:offset({top: 10,left:30})</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).offset().top <span class="comment">//获取距离文档顶部的偏移量</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).offset({</span><br><span class="line"> <span class="attr">top</span>: <span class="number">200</span>,</span><br><span class="line"> <span class="attr">left</span>: <span class="number">200</span> <span class="comment">//设置元素的偏移量</span></span><br><span class="line">}) </span><br></pre></td></tr></table></figure><ul><li><font color=red>position()</font>获取元素偏移</li></ul><ol><li>position()方法用于返回被选元素相对于<font color=red>带有定位的父级</font>偏移坐标,如果父级没有定位,以文档为准</li><li>只能获取,不能设置</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).position() <span class="comment">//获取距离父亲的偏移量</span></span><br></pre></td></tr></table></figure><ul><li><font color=red>scrollTop()/scrollLeft()</font>设置或获取元素被卷去的头部和左侧</li></ul><ol><li>scrollTop()方法设置或返回被选元素被卷曲的头部</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">window</span>).scroll(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(docuemnt).scrollTop() <span class="comment">//获取文档距离头部的距离</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><ul><li><font color=red>带有动画的返回顶部</font></li></ul><ol><li>animate动画函数里面有个scrollTop属性,可以设置位置</li><li>但是是元素做动画,因此$(‘body,html’).animate( {scroll:0} ) </li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'body,html'</span>).stop().animate({ <span class="comment">//不能写document</span></span><br><span class="line"> <span class="attr">scrollTop</span>: <span class="number">0</span> <span class="comment">//返回顶部</span></span><br><span class="line">});</span><br></pre></td></tr></table></figure><hr><h3 id="jQuery事件"><a href="#jQuery事件" class="headerlink" title="jQuery事件"></a>jQuery事件</h3><h3 id="jQuery事件注册"><a href="#jQuery事件注册" class="headerlink" title="jQuery事件注册"></a>jQuery事件注册</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.事件(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{}) <span class="comment">//事件和原生基本一致</span></span><br></pre></td></tr></table></figure><hr><h3 id="jQuery事件处理"><a href="#jQuery事件处理" class="headerlink" title="jQuery事件处理"></a>jQuery事件处理</h3><p>==事件处理on()绑定事件==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//优势1: 可以绑定多个事件,多个处理事件处理程序</span></span><br><span class="line">$(<span class="string">'div'</span>).on({</span><br><span class="line"> <span class="attr">mouseover</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},</span><br><span class="line"> <span class="attr">mouseout</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{},</span><br><span class="line"> <span class="attr">click</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{}</span><br><span class="line">});</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//不同的事件,相同的事件处理程序</span></span><br><span class="line">$(<span class="string">'div'</span>).on(<span class="string">'mouseover mouseout'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="built_in">this</span>).toggleClass(<span class="string">'current'</span>);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//优势2:可以事件委派,把原来子元素身上的事件绑定在父元素身上,就是把事件委派给父元素</span></span><br><span class="line">$(<span class="string">'父元素'</span>).on(<span class="string">'事件'</span>,<span class="string">'子元素'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ }) <span class="comment">// 这里绑定的是子元素(this指向) 点击的目标元素是父元素(e.target指向)</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//优势3:动态创建元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件</span></span><br><span class="line">$(<span class="string">'ol'</span>).on(<span class="string">'click'</span>,<span class="string">'li'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line">})</span><br><span class="line"><span class="keyword">var</span> li = $(<span class="string">'<li>我是后来创建的</li>'</span>) <span class="comment">//没有办法绑定事件</span></span><br><span class="line">$(<span class="string">'ol'</span>).append(li)</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// one() 只能触发事件一次</span></span><br><span class="line">$(<span class="string">'div'</span>).one(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>==事件处理off()解绑事件==</p><p>off()方法可以移除通过on()方法添加的事件处理程序</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).on(<span class="string">'mouseover mouseout'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="built_in">this</span>).toggleClass(<span class="string">'current'</span>);</span><br><span class="line">})</span><br><span class="line">$(<span class="string">'div'</span>).off() <span class="comment">//解除了div身上的所有事件</span></span><br><span class="line">$(<span class="string">'div'</span>).off(<span class="string">'mouseover'</span>) <span class="comment">//解除了div身上的mouseover事件</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'ol'</span>).on(<span class="string">'click'</span>,<span class="string">'li'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line">})</span><br><span class="line">$(<span class="string">'ol'</span>).off(<span class="string">'click'</span>,<span class="string">'li'</span>) <span class="comment">//解除事件委托</span></span><br></pre></td></tr></table></figure><p>==自动触发事件trigger()==</p><p>有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致,可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'div'</span>).on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line"> })</span><br><span class="line"> $(<span class="string">'div'</span>).click(); <span class="comment">//第一种自动触发事件</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'div'</span>).on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line"> })</span><br><span class="line"> $(<span class="string">'div'</span>).trigger(<span class="string">'click'</span>) <span class="comment">//第二种自动触发事件</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> $(<span class="string">'div'</span>).on(<span class="string">'click'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="number">11</span>);</span><br><span class="line"> })</span><br><span class="line"> $(<span class="string">'div'</span>).triggerHandler(<span class="string">'click'</span>);<span class="comment">//第三种自动触发事件 不会触发元素的默认行为</span></span><br><span class="line">})</span><br></pre></td></tr></table></figure><hr><h3 id="jQuery事件对象"><a href="#jQuery事件对象" class="headerlink" title="jQuery事件对象"></a>jQuery事件对象</h3><p>事件被触发,就会有事件对象产生.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">element.on(event, [selector] ,<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{})</span><br></pre></td></tr></table></figure><p>阻止默认行为: event.preventDefault() 或者 return false</p><p>阻止冒泡:event.stopPropagation()</p><hr><h3 id="jQuery其它方法"><a href="#jQuery其它方法" class="headerlink" title="jQuery其它方法"></a>jQuery其它方法</h3><h4 id="jQuery拷贝对象"><a href="#jQuery拷贝对象" class="headerlink" title="jQuery拷贝对象"></a>jQuery拷贝对象</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$.extend([deep], targer, object1,..[objectN])</span><br><span class="line"><span class="comment">//1.deep: 如果设为true为深拷贝 默认是false</span></span><br><span class="line"><span class="comment">//2.target: 要拷贝的目标对象 被赋值 </span></span><br><span class="line"><span class="comment">//3.object1: 待拷贝到第一个对象的对象 被拷贝 如果里面有简单数据类型 直接给target</span></span><br><span class="line"><span class="comment">//4.objectN:待拷贝第N个对象的对象</span></span><br><span class="line"><span class="comment">//5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给了目标对象,修改目标对象会影响被拷贝对象.</span></span><br><span class="line"><span class="comment">//6.深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象</span></span><br></pre></td></tr></table></figure><p></p><p></p><hr><h4 id="多库共存"><a href="#多库共存" class="headerlink" title="多库共存"></a>多库共存</h4><p>jQuery使用$作为标识符,随着jQuery的流行,其它js库也会用$作为标识符,这样就会引起冲突.</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$标识符封装原理</span></span><br><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">$</span>(<span class="params">ele</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">document</span>.querySelector(ele);</span><br><span class="line"> }</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>==解决方案==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 用jQuery关键字代替$</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2. 用noConflict()方法释放对 $ 符号的控制权 自己命名</span></span><br><span class="line"><span class="keyword">var</span> ¥ = jQuery.noConflict();</span><br><span class="line"><span class="keyword">var</span> ¥ = $.noConflict();</span><br></pre></td></tr></table></figure><hr><h4 id="jQuery插件"><a href="#jQuery插件" class="headerlink" title="jQuery插件"></a>jQuery插件</h4><p><strong>jQuery插件常用网站:</strong></p><p>jQuery插件库:<a href="http://www.jq22.com/">http://www.jq22.com/</a></p><p>jQuery之家:<a href="http://www.htmleaf.com/">http://www.htmleaf.com/</a></p><p><strong>jQuery插件使用步骤:</strong></p><p>1.引入相关文件(jQuery文件和插件文件)</p><p>2.复制相关html、css、js调用插件</p><p><strong>常用的jQuery插件</strong></p><ol><li><p>瀑布流</p></li><li><p>图片懒加载</p></li><li><p>全屏滚动(fullpage.js) <a href="http://github.com/alvarotrigo/fullpage.js">http://github.com/alvarotrigo/fullpage.js</a></p><p>中文翻译网站: <a href="http://www.dowebok.com/demo/2014/77/">http://www.dowebok.com/demo/2014/77/</a></p></li><li><p>bootstrap组件、插件</p></li></ol><hr><h1 id="数据可视化"><a href="#数据可视化" class="headerlink" title="数据可视化"></a>数据可视化</h1><h2 id="什么是数据可视化"><a href="#什么是数据可视化" class="headerlink" title="什么是数据可视化?"></a>什么是数据可视化?</h2><ul><li>数据可视化主要目的:借助图形化手段,清晰有效地传达于沟通信息</li><li>数据可视化可以把数据从冰冷的数字转换成图形,揭示含在数据中的规律和道理</li></ul><h2 id="数据可视化的场景"><a href="#数据可视化的场景" class="headerlink" title="数据可视化的场景"></a>数据可视化的场景</h2><ol><li>通用报表</li><li>移动端图表</li><li>大屏可视化</li><li>图编辑&图分析</li><li>地理可视化</li></ol><h2 id="常见的数据可视化库"><a href="#常见的数据可视化库" class="headerlink" title="常见的数据可视化库"></a>常见的数据可视化库</h2><ul><li>D3.js 目前Web端评价最高的Javascript可视化工具库(入手难)</li><li>EChrts.js 百度出品的一个开源Javascript数据可视化库</li><li>Highchars.js 国外的前端数据可视化库,非商用免费,被许多国外大公司使用</li><li>AntV 蚂蚁金服全新一代数据可视化解决方案</li><li>等等</li></ul><hr><h2 id="Echarts"><a href="#Echarts" class="headerlink" title="Echarts"></a>Echarts</h2><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><p>ECharts是一个使用JS实现的开源可是化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层一览矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表.</p><p>官方网址:<a href="https://www.echartsjs.com/zh/index.html">https://www.echartsjs.com/zh/index.html</a></p><ul><li>丰富的可视化类型</li><li>多种数据格式支持</li><li>流数据格式支持</li><li>移动端优化</li><li>跨平台使用</li><li>绚丽的特效</li><li>详细的文档说明</li></ul><hr><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><ol><li>下载并引入echarts.js文件 ————-> 图表依赖这个js库</li><li>准备一个具备大小的DOM容器 ————-> 生成的图表会放入这个容器内</li><li>初始化echarts实例对象 ————-> 实例化echarts对象</li><li>指定配置项和数据(option) ————-> 根据具体需求修改配置选项</li><li>将配置项设置给echarts实例对象 ————-> 让echarts对象根据修改好的配置生效</li></ol><h3 id="边框图片"><a href="#边框图片" class="headerlink" title="边框图片"></a>边框图片</h3><ul><li><p><strong>盒子大小不一,但是边框样式相同,此时就需要边框图片来完成</strong></p></li><li><p>为了实现丰富多彩的边框效果,在CSS3中,新增了border-image属性,这个属性允许指定一副图像作为元素的边框</p></li></ul><hr><p>==边框图片切图原理==(important)</p><p>把四个角切出去(九宫格的由来),中间部分可以铺排、拉伸或者环绕(按照上右下左顺序切)</p><p></p><p>==边框图片语法==(important)</p><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>border-image-source</td><td>用爱边框图片的路径</td></tr><tr><td>Border-image-slice</td><td>图片边框向内偏移(裁剪的尺寸 不加单位 上右下左顺序)</td></tr><tr><td>border-image-width</td><td>图片边框的宽度(需要单位)(不是边框的宽度是边框图片的宽度)</td></tr><tr><td>border-image-repeat</td><td>图像边框是否平铺(repeat)、铺满(round)或拉伸(stretch) 默认拉伸</td></tr></tbody></table><p>==无缝滚动原理==</p><ol><li>先克隆滚动区块里所有的行(row). JS实现这一步</li><li>通过css3动画滚动</li><li>鼠标经过就停止滚动</li><li>animation-play-state:paused;</li></ol>]]></content>
<categories>
<category> Web </category>
</categories>
<tags>
<tag> Web </tag>
</tags>
</entry>
<entry>
<title>JS基础</title>
<link href="/2021/07/07/JavaScript%E5%9F%BA%E7%A1%80/"/>
<url>/2021/07/07/JavaScript%E5%9F%BA%E7%A1%80/</url>
<content type="html"><![CDATA[<span id="more"></span><h1 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h1><h2 id="转换成String类型"><a href="#转换成String类型" class="headerlink" title="转换成String类型"></a>转换成String类型</h2><p><code>1</code> var num =1 alert(num.toString)</p><p><code>2</code> Var num =1 alert(String(num)) 强制转换</p><p><code>3</code> Var num = 1 alert(num+”我是字符串类型”)字符串拼接</p><hr><h2 id="转换成number类型"><a href="#转换成number类型" class="headerlink" title="转换成number类型"></a>转换成number类型</h2><p><code>1</code> parseInt(String)</p><p><code>2</code> parseFloat(String)</p><p><code>3</code> Number() 强制转换</p><p><code>4</code> js - * / 隐式转换 利用算术运算隐士转换为数值型 console.log(‘123’-‘120’)</p><hr><h2 id="转换成Boolean类型"><a href="#转换成Boolean类型" class="headerlink" title="转换成Boolean类型"></a>转换成Boolean类型</h2><table><thead><tr><th>方式</th><th>说明</th><th>案例</th></tr></thead><tbody><tr><td>Boolean()函数</td><td>其他类型转换成布尔值</td><td>Boolean(‘true’);</td></tr></tbody></table><ul><li>代表 <font color=red>空</font>、<font color=red>否定的值</font>会被转换为false，如’’、0、NaN、null、undefind</li><li>其余只都会被转换为true</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">''</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="number">0</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">NaN</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="literal">null</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(undefind));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="string">'小白'</span>));<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Boolean</span>(<span class="number">12</span>));<span class="comment">//true</span></span><br></pre></td></tr></table></figure><h1 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h1><h3 id="浮点数精度问题"><a href="#浮点数精度问题" class="headerlink" title="浮点数精度问题"></a>浮点数精度问题</h3><p> <strong>浮点数值的最高精度是17位小数，但在进行算数计算时其精度远不如整数</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> result = <span class="number">0.1</span> + <span class="number">0.2</span>; <span class="comment">//结果不是0.3，而是0.3000000000004</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0.07</span>*<span class="number">100</span>);<span class="comment">//结果不是7，而是7.00000000001</span></span><br></pre></td></tr></table></figure><p>所以：<font color=red>不要直接判断两个浮点数是否相等！</font></p><h3 id="递增递减运算符"><a href="#递增递减运算符" class="headerlink" title="递增递减运算符"></a>递增递减运算符</h3><ol><li><p>前置递增运算符</p><p> ++num 前置递增，就是自加1，类似于num=num+1</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">++age; <span class="comment">//类似于 age = age+1</span></span><br><span class="line"><span class="keyword">var</span> p =<span class="number">10</span>;</span><br><span class="line"><span class="built_in">console</span>.log(++p + <span class="number">10</span>) <span class="comment">//结果为21</span></span><br></pre></td></tr></table></figure><p>使用口诀：<font color=red>先自加1，后返回值</font></p></li><li><p>后置递增运算符</p><p> 前置自增和后置自增如果单独使用效果是一样的</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> age = <span class="number">10</span>;</span><br><span class="line"><span class="built_in">console</span>.log(age++ +<span class="number">10</span>); <span class="comment">//结果为20</span></span><br><span class="line"><span class="built_in">console</span>.log(age);<span class="comment">//结果为11</span></span><br></pre></td></tr></table></figure><p>使用口诀：先返回<font color=red>原值</font>，后自加1</p></li></ol><h3 id="比较运算符"><a href="#比较运算符" class="headerlink" title="比较运算符"></a>比较运算符</h3><ol><li>```javascript<br>程序里的等于符号 == 默认转换数据类型 会把String类型的字符串转换成Number数字行(隐式转换)<br>console.log(10 == ‘10’);//true<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"> </span><br><span class="line"></span><br><span class="line">2. ```javascript</span><br><span class="line"> === 全等于 要求数值和数据类型完全相等 !== 不全等</span><br></pre></td></tr></table></figure></li></ol><h3 id="逻辑运算符"><a href="#逻辑运算符" class="headerlink" title="逻辑运算符"></a>逻辑运算符</h3><p>概念：逻辑运算符是用来进行布尔运算的运算符，其返回值也是布尔值</p><table><thead><tr><th>逻辑运算符</th><th>说明</th><th>案例</th></tr></thead><tbody><tr><td>&&</td><td>逻辑与 简称“与” and</td><td>true&&false</td></tr><tr><td>||</td><td>逻辑或 简称“或” or</td><td>true||false</td></tr><tr><td>!</td><td>逻辑非 简称“”非 not</td><td>!true</td></tr></tbody></table><p><strong>短路运算</strong></p><p>原理：<font color=red>当有多个表达式(值)是，左边的表达式的值可以确定结果时，就不再继续运算右边的表达式的值</font></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">逻辑与短路运算 </span><br><span class="line">如果左边表达式为真 则返回右边表达式</span><br><span class="line">如果左边表达时为假 则返回左边表达式</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">123</span> && <span class="number">456</span>) <span class="comment">//返回456</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span> && <span class="number">456</span>) <span class="comment">// 返回0</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">逻辑或短路运算</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">123</span> || <span class="number">456</span>) <span class="comment">//返回123</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">0</span>||<span class="number">456</span>) <span class="comment">//返回456</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">123</span>||num++);<span class="comment">//123</span></span><br><span class="line"><span class="built_in">console</span>.log(num);<span class="comment">//0 123为真 逻辑中断 num++不执行</span></span><br></pre></td></tr></table></figure><h3 id="赋值运算符"><a href="#赋值运算符" class="headerlink" title="赋值运算符"></a>赋值运算符</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num =<span class="number">10</span>;</span><br><span class="line"></span><br><span class="line">num += <span class="number">2</span>; 相当于 num = num+<span class="number">2</span>; </span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//12</span></span><br><span class="line"></span><br><span class="line">num *=<span class="number">2</span></span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//20</span></span><br><span class="line"></span><br><span class="line">num /= <span class="number">2</span>;</span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//5</span></span><br><span class="line"></span><br><span class="line">num %=<span class="number">2</span>;</span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//0</span></span><br></pre></td></tr></table></figure><p>运算符优先级</p><table><thead><tr><th>优先级</th><th align="left">运算符</th><th></th></tr></thead><tbody><tr><td>1</td><td align="left">小括号</td><td>()</td></tr><tr><td>2</td><td align="left">一元运算符(只有一个变量)</td><td>++ – !</td></tr><tr><td>3</td><td align="left">算数运算符</td><td>先乘除后加减</td></tr><tr><td>4</td><td align="left">关系运算符</td><td>> >= < <=</td></tr><tr><td>5</td><td align="left">相等运算符</td><td>== != 全等 不全等</td></tr><tr><td>6</td><td align="left">逻辑运算符</td><td>先&& 后||</td></tr><tr><td>7</td><td align="left">赋值运算符</td><td>=</td></tr><tr><td>8</td><td align="left">逗号运算符</td><td>,</td></tr></tbody></table><h3 id="流程控制"><a href="#流程控制" class="headerlink" title="流程控制"></a>流程控制</h3><p><strong>三种结构:</strong><font color=red>顺序结构、分支结构、循环结构</font></p><h4 id="分支结构"><a href="#分支结构" class="headerlink" title="分支结构"></a>分支结构</h4><ol><li><p>if else if的多分支语句(多选一)</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(条件<span class="number">1</span>) {</span><br><span class="line"> 语句<span class="number">1</span></span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">2</span>) {</span><br><span class="line"> 语句<span class="number">2</span></span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span>(条件<span class="number">3</span>) {</span><br><span class="line"> 语句<span class="number">3</span></span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line"> 上述条件都不成立 则执行此代码</span><br><span class="line">}</span><br><span class="line">执行思路：如果条件<span class="number">1</span>满足条件 执行语句<span class="number">1</span>后，退出整个<span class="keyword">if</span>分支语句</span><br><span class="line"> 如果条件<span class="number">1</span>不满足条件，则判断条件<span class="number">2</span>，直到执行了满足条件的<span class="keyword">else</span> <span class="keyword">if</span> 语句 否则执行<span class="keyword">else</span>语句</span><br></pre></td></tr></table></figure></li><li><p>switch多分支语句(多选一)</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num =<span class="number">3</span>;</span><br><span class="line"><span class="keyword">switch</span>(num) {</span><br><span class="line"> <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line"> 执行语句<span class="number">1</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line"> 执行语句<span class="number">2</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line"> 执行语句<span class="number">3</span></span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> <span class="keyword">default</span>;</span><br><span class="line"> 执行最后的语句;</span><br><span class="line">}</span><br><span class="line"><span class="number">1.</span>num的值和<span class="keyword">case</span>的值相匹配的时候是 全等 ===</span><br><span class="line"><span class="number">2.</span><span class="keyword">break</span>可以不写，不写就继续往下执行</span><br></pre></td></tr></table></figure><p>if else 和 switch case的区别：<font color=red>case比较确定的情况下用switch case语句，而if..else..语句更加灵活</font></p></li><li><p>三元表达式</p><p>结构：条件表达式 ？表达式1 ：表达式2</p></li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var num = 10;</span><br><span class="line">var result = num>5 ? '是的'：'不是的';</span><br><span class="line">console.log(result);//是的</span><br></pre></td></tr></table></figure><h4 id="循环结构"><a href="#循环结构" class="headerlink" title="循环结构"></a>循环结构</h4><ol><li><p>```javascript<br>0求1~10000的累加和<br>var sum =0;<br>for(var i=1;1<=100;i++) {<br> sum=sum+i;<br>}<br>console.log(sum);//5050</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line"> 求1～100之间所有数的平均值</span><br><span class="line"> var sum =0;</span><br><span class="line"> var average =0;</span><br><span class="line"> for(var i=1;i<=100;i++) {</span><br><span class="line"> sum=sum+i;</span><br><span class="line"> }</span><br><span class="line"> var average = sum/100;</span><br><span class="line"> console.log(average);//50.5</span><br></pre></td></tr></table></figure></li><li><p>```js<br>求1～100之间所有的偶数和跟奇数和<br>var evenSum = 0;<br>var oddSum = 0;<br>for(var i=1;i<=100;i++) {<br> if(i%2==0) {</p><pre><code>evenSum = evenSum+i;</code></pre><p> } else {</p><pre><code>oddSum= oddSum+i;</code></pre><p> }<br>}<br>console.log(evenSum);//2550<br>console.log(oddSum);//2500</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">4. ```js</span><br><span class="line"> 求1～100之间所有能被3整除的数字的和</span><br><span class="line"> var sum =0;</span><br><span class="line"> for(var i=1;i<=100;i++) {</span><br><span class="line"> if(i % 3 == 0) {</span><br><span class="line"> sum=sum+i;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> console.log(sum);//1683</span><br></pre></td></tr></table></figure></li><li><p>```js<br>一行打印五颗🌟<br>// var num =prompt(‘请输入🌟的个数’) 一行打印num个🌟<br>var str = ‘’<br>for(var i=1;i<=num;i++) {<br> str = str+’🌟’;<br>}<br> console.log(str);<br>🌟🌟🌟🌟🌟</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">6. ```js</span><br><span class="line"> 五行每行六颗🌟</span><br><span class="line"> var str ='';</span><br><span class="line"> for(var i=1;i<=5;i++) {</span><br><span class="line"> for(var j=1;j<=6;j++) {</span><br><span class="line"> str += '🌟'；</span><br><span class="line"> }</span><br><span class="line"> str += '\n';</span><br><span class="line"> }</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟</span><br><span class="line"> </span><br></pre></td></tr></table></figure></li><li><p>```js<br>var str =’’;</p><pre><code>for(var i=1;i<=10;i++) { for(var j=i;j<=10;j++) { str += '🌟'; } str +='\n'; }</code></pre><p> console.log(str);<br>🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟<br>🌟🌟🌟🌟🌟🌟🌟🌟🌟<br>🌟🌟🌟🌟🌟🌟🌟🌟<br>🌟🌟🌟🌟🌟🌟🌟<br>🌟🌟🌟🌟🌟🌟<br>🌟🌟🌟🌟🌟<br>🌟🌟🌟🌟<br>🌟🌟🌟<br>🌟🌟<br>🌟</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">8. ```js</span><br><span class="line"> var str ='';</span><br><span class="line"> for(var i=1;i<=10;i++) {</span><br><span class="line"> for(var j=1;j<=i;j++) {</span><br><span class="line"> str += '🌟';</span><br><span class="line"> }</span><br><span class="line"> str +='\n';</span><br><span class="line"> }</span><br><span class="line"> console.log(str);</span><br><span class="line"> 🌟</span><br><span class="line"> 🌟🌟</span><br><span class="line"> 🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟🌟🌟🌟</span><br><span class="line"> 🌟🌟🌟🌟🌟🌟🌟🌟🌟🌟</span><br><span class="line"> </span><br></pre></td></tr></table></figure></li><li><p>```js<br>九九乘法表<br>var str =’’;<br>for(var i=1;i<=9;i++) {<br> for(var j=1;j<=i;j++) {</p><pre><code>str += j+'x'+i+'='+i*j+'\t';</code></pre><p> }</p><pre><code>str +='\n'</code></pre><p>}<br>console.log(str);</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">10. do...while</span><br><span class="line"></span><br><span class="line"> ```js</span><br><span class="line"> var i= 1;</span><br><span class="line"> do {</span><br><span class="line"> console.log("我是循环体")；</span><br><span class="line"> }while(i<=100)</span><br><span class="line"> // do..while循环至少执行一次循环体</span><br></pre></td></tr></table></figure></li><li><p>continue关键字</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">求<span class="number">1</span>～<span class="number">100</span>之间，除了能被<span class="number">7</span>整除之外的整数和</span><br><span class="line"><span class="keyword">var</span> sum = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i<=<span class="number">100</span>;i++) {</span><br><span class="line"> <span class="keyword">if</span>(i % <span class="number">7</span>==<span class="number">0</span>) {</span><br><span class="line"> <span class="keyword">continue</span>; <span class="comment">// 只要遇到contuine就退出本次循环 直接跳到i++</span></span><br><span class="line"> }</span><br><span class="line"> sum += i;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(sum);</span><br></pre></td></tr></table></figure></li></ol><h1 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h1><h2 id="数组的创建方式及初始化"><a href="#数组的创建方式及初始化" class="headerlink" title="数组的创建方式及初始化"></a>数组的创建方式及初始化</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(); <span class="comment">//创建了一个空的数组</span></span><br><span class="line"></span><br><span class="line">字面量方式创建数组</span><br><span class="line"><span class="keyword">var</span> arr =[]; <span class="comment">//创建了一个空的数组</span></span><br><span class="line">arr[<span class="number">0</span>] = <span class="number">1</span>;</span><br><span class="line">arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="string">'zhangsan'</span>,<span class="literal">true</span>]; <span class="comment">//初始化数组</span></span><br><span class="line">数组里可以放任意类型的数据</span><br></pre></td></tr></table></figure><h2 id="排序"><a href="#排序" class="headerlink" title="排序"></a>排序</h2><ol><li><p>```js<br>求数组[2,6,77,53,67,4]中的最大值<br>var arr=[2,6,77,53,67,4];<br>var max =0;<br> for(var i=0;i<arr.length;i++) {</p><pre><code> if(arr[i]>=max) { max =arr[i]; } }</code></pre><p>console.log(max);//77</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">2. ```js</span><br><span class="line"> 将数组['red','green','blue','pink']转化为字</span><br><span class="line"> 符串，并且用|或其他符号分割</span><br><span class="line"> 输出:'red|green|blue|pink|'</span><br><span class="line"> </span><br><span class="line"> var arr = ['red','green','blue','pink']</span><br><span class="line"> var str ='';</span><br><span class="line"> for(var i=0;i<arr.length;i++) {</span><br><span class="line"> str += arr[i]+'|'</span><br><span class="line"> }</span><br><span class="line"> console.log(str);</span><br><span class="line"> </span><br></pre></td></tr></table></figure></li><li><p>翻转数组</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">3</span>,<span class="number">4</span>,<span class="number">6</span>,<span class="number">2</span>,<span class="number">5</span>,<span class="number">7</span>];</span><br><span class="line"><span class="keyword">var</span> newArr =[];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = arr.length - <span class="number">1</span>;i>=<span class="number">0</span>;i--) {</span><br><span class="line"> newArr[newArr.length] = arr[i];</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(newArr);</span><br></pre></td></tr></table></figure></li><li><p><font color=red>冒泡排序</font></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">从小到大</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">22</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">1</span>,<span class="number">34</span>,<span class="number">14</span>];</span><br><span class="line"><span class="keyword">var</span> temp = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<arr.length-<span class="number">1</span>;i++) {<span class="comment">//循环次数</span></span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j<arr.length-i-<span class="number">1</span>;j++) {<span class="comment">//交换次数</span></span><br><span class="line"> <span class="keyword">if</span>(arr[j]>arr[j+<span class="number">1</span>]) {</span><br><span class="line"> temp = arr[j];</span><br><span class="line"> arr[j]=arr[j+<span class="number">1</span>];</span><br><span class="line"> arr[j+<span class="number">1</span>]=temp;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">} </span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br></pre></td></tr></table></figure></li></ol><h2 id="新增数组长度"><a href="#新增数组长度" class="headerlink" title="新增数组长度"></a>新增数组长度</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">将数组[<span class="number">2</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">1</span>,<span class="number">77</span>,<span class="number">0</span>,<span class="number">52</span>,<span class="number">0</span>,<span class="number">25</span>,<span class="number">7</span>,<span class="number">9</span>,<span class="number">22</span>]中大于<span class="number">10</span>的元素选出来，放入新的数组</span><br><span class="line">第一种方法：</span><br><span class="line"><span class="keyword">var</span> arr =[<span class="number">2</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">1</span>,<span class="number">77</span>,<span class="number">0</span>,<span class="number">52</span>,<span class="number">0</span>,<span class="number">25</span>,<span class="number">7</span>,<span class="number">9</span>,<span class="number">22</span>];</span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="keyword">var</span> j=<span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<arr.length;i++) {</span><br><span class="line"> <span class="keyword">if</span>(arr[i]><span class="number">10</span>) {</span><br><span class="line"> newArr[j]=arr[i];</span><br><span class="line"> j++;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"><span class="built_in">console</span>.log(newArr)</span><br><span class="line">第二种方法：</span><br><span class="line"><span class="keyword">var</span> arr =[<span class="number">2</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">1</span>,<span class="number">77</span>,<span class="number">0</span>,<span class="number">52</span>,<span class="number">0</span>,<span class="number">25</span>,<span class="number">7</span>,<span class="number">9</span>,<span class="number">22</span>];</span><br><span class="line"><span class="keyword">var</span> newArr = [];</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<arr.length;i++) {</span><br><span class="line"> <span class="keyword">if</span>(arr[i]><span class="number">10</span>) {</span><br><span class="line"> newArr[newArr.length]=arr[i];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"><span class="built_in">console</span>.log(newArr)</span><br></pre></td></tr></table></figure><h1 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h1><h2 id="函数声明"><a href="#函数声明" class="headerlink" title="函数声明"></a>函数声明</h2><ol><li><p>利用函数关键字自定义函数(命名函数)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line">fn();</span><br></pre></td></tr></table></figure></li><li><p>函数表达式(匿名函数)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line">fn();</span><br></pre></td></tr></table></figure></li></ol><h2 id="函数参数"><a href="#函数参数" class="headerlink" title="函数参数"></a>函数参数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>声明函数</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span>(<span class="params">start,end</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> sum =<span class="number">0</span>;</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=start;i<=end;i++) {</span><br><span class="line"> sum += i;</span><br><span class="line"> }</span><br><span class="line"> <span class="built_in">console</span>.log(sum)</span><br><span class="line">}</span><br><span class="line"><span class="number">2.</span>调用函数</span><br><span class="line">getSum(<span class="number">50</span>,<span class="number">100</span>);</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">***函数形参与实参个数匹配问题***</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getSum</span>(<span class="params">num1,num2</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(num1+num2);</span><br><span class="line">}</span><br><span class="line"><span class="number">1.</span>如果实参的个数多于形参的个数，会取到形参的个数</span><br><span class="line">getSum(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>);<span class="comment">//3</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span>如果实参的额个数少于形参的个数</span><br><span class="line">形参可以看作是不作声明的变量 num2 是一个变量但是没有接受值 结果就是undefind</span><br><span class="line"> getSum(<span class="number">1</span>);<span class="comment">//NaN</span></span><br><span class="line">任何一个数字型的变量加上undefind结果都是<span class="literal">NaN</span></span><br></pre></td></tr></table></figure><p><font color=red>注意：</font>在js中，形参的默认值式undefind</p><h2 id="函数返回值"><a href="#函数返回值" class="headerlink" title="函数返回值"></a>函数返回值</h2><ol><li><p>函数只是实现某种功能，最终的结果需要返回给函数的调用者 通过return实现的</p></li><li><p>只要函数遇到return 就把后面的结果返回给函数的调用者</p><p>函数名() = return后面的结果</p></li><li><p>return语句后面的代码不会被执行</p></li><li><p>return只能返回一个值(返回最后一个值)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">num1,num2</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> num1,num2;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(fn(<span class="number">1</span>,<span class="number">2</span>));<span class="comment">//2</span></span><br></pre></td></tr></table></figure></li><li><p>```js<br>求任意两个数的加减乘除<br>function fn(num1,num2) {<br> return[num1+num2,num1-num2,num1*num2,num1/num2];<br>}</p><p>console.log(fn(1,2));<br>//[3,-1,2,0.5]</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">6. 函数如果有return 则返回return后面的结果，如果没有则返回undefind</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">## arguments的使用</span><br><span class="line"></span><br><span class="line">+ 当我们不确定有多少个实参需要传递的时候，可以用arguments来获取，在js中，arfuments实际上是当前函数的一个内置对象。所有的函数都内置了argumengs对象，arguments对象中存储了传递的所有实参</span><br><span class="line"></span><br><span class="line">```js</span><br><span class="line">function fn() {</span><br><span class="line"> console.log(aguments);//里面存储了所有传递过来的实参</span><br><span class="line">}</span><br><span class="line">fn(1,2,3)</span><br></pre></td></tr></table></figure></li><li><p>伪数组 并不是真正意义上的数组</p></li><li><p>具有数组的length属性</p></li><li><p>按照索引的方式进行存储</p></li><li><p>没有真正数组的一些方法 pop() push() 等等</p></li><li><p>可以按照数组的方式遍历arguments</p></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">利用函数求任意个数的最大值</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMax</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> max = <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<=<span class="built_in">arguments</span>.length;i++) {</span><br><span class="line"> <span class="keyword">if</span>(max<<span class="built_in">arguments</span>[i]) {</span><br><span class="line"> max = <span class="built_in">arguments</span>[i];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> max;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(getMax(<span class="number">1</span>,<span class="number">2</span>,<span class="number">345</span>,<span class="number">64</span>,<span class="number">56</span>));</span><br></pre></td></tr></table></figure><h2 id="函数例子"><a href="#函数例子" class="headerlink" title="函数例子"></a>函数例子</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">翻转数组函数</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reverse</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> newArr =[];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=arr.length-<span class="number">1</span>;i--) {</span><br><span class="line"> newArr[newArr.length=arr[i];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> newArr;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> re = reverse([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(re);<span class="comment">//[5,4,3,2,1]</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">冒泡排序</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sort</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i<arr.length-<span class="number">1</span>;i++) {</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j<arr.length-i-<span class="number">1</span>;j++) {</span><br><span class="line"> <span class="keyword">var</span> tmp =<span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span>(arr[j]<arr[j+<span class="number">1</span>]) {</span><br><span class="line"> tmp = arr[j];</span><br><span class="line"> arr[j] = arr[j+<span class="number">1</span>];</span><br><span class="line"> arr[j+<span class="number">1</span>] = tmp;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> arr;</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> re = sort([<span class="number">2</span>,<span class="number">12</span>,<span class="number">5</span>,<span class="number">64</span>,<span class="number">4</span>,<span class="number">56</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(re);</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">判断年份是否为润年</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isRunYear</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> flag =<span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">if</span>(year%<span class="number">4</span>==<span class="number">0</span> && year&<span class="number">100</span>!=<span class="number">0</span> || year % <span class="number">400</span>==<span class="number">0</span>) {</span><br><span class="line"> flag =<span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> flag;</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">函数调用函数</span><br><span class="line">用户输入年份，输出当前<span class="number">2</span>月份的天数</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">backDay</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> year = prompt(<span class="string">'请输入年份'</span>)；</span><br><span class="line"> <span class="keyword">if</span>(isRunYear()) {</span><br><span class="line"> alert(<span class="string">'当前年份是闰年2月份有29天'</span>)</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> alert(<span class="string">'当前年份是平年2月份天数有28天'</span>)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">backDay();</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isRunYear</span>(<span class="params">year</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> flag =<span class="literal">false</span>;</span><br><span class="line"> <span class="keyword">if</span>(year%<span class="number">4</span>==<span class="number">0</span> && year&<span class="number">100</span>!=<span class="number">0</span> || year % <span class="number">400</span>==<span class="number">0</span>) {</span><br><span class="line"> flag =<span class="literal">true</span>;</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> flag;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="js作用域"><a href="#js作用域" class="headerlink" title="js作用域"></a>js作用域</h2><p><strong>全局变量</strong>：在全局作用域下的变量 在全局作用域下用var声明的变量 在全局下都可以使用 </p><p><font color=red>注意:</font>如果在函数内部 没有声明直接赋值的变量也属于全局变量(不建议使用)</p><p><strong>局部变量</strong>：在局部作用域下的变量 在函数内部用var声明的变量</p><p><font color=red>注意:</font>函数的形参也可以看作是局部变量</p><p>从执行效率来看全局变量和局部变量</p><p><code>1</code>全局变量只有在浏览器关闭的时候才会销毁，比较占用资源</p><p><code>2</code>局部变量 当我们的程序执行完毕就会销毁，比较节约内存资源</p><p><strong>作用域链</strong>：内部函数访问外部函数的变量，采取的是链式查找的方式来决定去哪个值 这种结构我们成为作用域链 就近原则</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{ <span class="comment">//外部函数</span></span><br><span class="line"> <span class="keyword">var</span> num =<span class="number">20</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>{ <span class="comment">//内部函数</span></span><br><span class="line"> <span class="built_in">console</span>.log(num);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">fn();<span class="comment">//20</span></span><br></pre></td></tr></table></figure><p>注意：<font color=red>js在es6之前没有块级作用域</font></p><h1 id="预解析"><a href="#预解析" class="headerlink" title="预解析"></a>预解析</h1><p>JavaScript代码是由浏览器中的JavaScript解释器(js引擎)来执行的。JavaScript解释器在运行JavaScript代码的时候分为两步：<font color=red>预解析</font>和<font color=red>代码执行</font></p><ul><li><p>预解析：js引擎会把js里面所有的var 还有function提升到当前作用域的最前面</p><ul><li><p>预解析分为变量预解析(变量提升)和函数预解析(函数提升)</p><p><code>1</code>变量提升 就是把所有的变量声明提升到当前作用域最前面 不提升赋值操作</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(num);<span class="comment">//undefind 坑1</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">解析和执行过程</span><br><span class="line"><span class="keyword">var</span> num;</span><br><span class="line"><span class="built_in">console</span>.log(num);</span><br><span class="line">num = <span class="number">10</span>;</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">fun();<span class="comment">//报错 坑2</span></span><br><span class="line"><span class="keyword">var</span> fun = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">22</span>);</span><br><span class="line">}</span><br><span class="line">解析和执行过程</span><br><span class="line"><span class="keyword">var</span> fun;</span><br><span class="line">fun = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">22</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>2</code>函数提升 就是把所有的函数声明提升到当前作用域最前面 不掉用函数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">fn();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">11</span>);</span><br><span class="line">}</span><br><span class="line">解析和执行过程</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="number">11</span>);</span><br><span class="line">}</span><br><span class="line">fn();</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">案例<span class="number">1</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(num);</span><br><span class="line"> <span class="keyword">var</span> num = <span class="number">20</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(num);</span><br><span class="line">}</span><br><span class="line">fn();<span class="comment">//undefind 20</span></span><br><span class="line">解析和执行过程</span><br><span class="line"><span class="keyword">var</span> = num;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span></span><br><span class="line"><span class="function"><span class="title">var</span> <span class="title">num</span></span>;</span><br><span class="line"> <span class="built_in">console</span>.log(num);</span><br><span class="line"> num = <span class="number">20</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(num);</span><br><span class="line">}</span><br><span class="line">num =<span class="number">10</span>;</span><br><span class="line">fn();<span class="comment">//undefind 20</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">案例<span class="number">2</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">18</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> b = <span class="number">9</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(a);</span><br><span class="line"> <span class="built_in">console</span>.log(b);</span><br><span class="line"> <span class="keyword">var</span> a = <span class="string">'123'</span>; </span><br><span class="line">}</span><br><span class="line">f1();<span class="comment">// undefind 9</span></span><br><span class="line">解析和执行过程</span><br><span class="line"><span class="keyword">var</span> a;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> b;</span><br><span class="line"> <span class="keyword">var</span> a;</span><br><span class="line"> b=<span class="number">9</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(a);</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line">a=<span class="string">'123'</span>;</span><br><span class="line">}</span><br><span class="line">a= <span class="number">18</span>;</span><br><span class="line">f1();<span class="comment">//undefind 9</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">案例<span class="number">3</span></span><br><span class="line">f1();</span><br><span class="line"><span class="built_in">console</span>.log(c);</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a=b=c=<span class="number">9</span>;<span class="comment">//相当于 var a= 9;b=9;c=9;</span></span><br><span class="line"> <span class="comment">//集体声明 var a=9,b=9,c=9;</span></span><br><span class="line"> <span class="built_in">console</span>.log(a);</span><br><span class="line"> <span class="built_in">console</span>.log(b);</span><br><span class="line"> <span class="built_in">console</span>.log(c);</span><br><span class="line">}</span><br><span class="line">解析和执行过程</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a;</span><br><span class="line"> a=b=c=<span class="number">9</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(a);</span><br><span class="line"> <span class="built_in">console</span>.log(b);</span><br><span class="line"> <span class="built_in">console</span>.log(c);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(c);</span><br><span class="line"><span class="built_in">console</span>.log(b);</span><br><span class="line"><span class="built_in">console</span>.log(a);</span><br><span class="line">b=<span class="number">9</span>;</span><br><span class="line">c=<span class="number">9</span>;</span><br><span class="line">f1();<span class="comment">//9 9 9 9 9 报错 </span></span><br><span class="line"></span><br></pre></td></tr></table></figure></li></ul></li><li><p>代码执行 按照代码书写的顺序从上往下执行</p></li></ul><h1 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h1><h2 id="定义"><a href="#定义" class="headerlink" title="定义"></a>定义</h2><ul><li><p>定义：在js中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。</p><ul><li>属性：事物的<font color=red>特征</font>,在对象中用<font color=red>属性</font>来表示</li><li>方法：事物的<font color=red>行为</font>，在对象中用方法来表示</li></ul><p><strong>为什么需要对象</strong>：保存一个值时，可以使用变量，保存多个值时，可以使用数组，如果要保存一个人的完整信息？</p></li></ul><h2 id="对象的创建"><a href="#对象的创建" class="headerlink" title="对象的创建"></a>对象的创建</h2><p>在js中，现阶段可以三种方式创建对象</p><ul><li><p>利用<font color=red>字面量</font>创建对象</p><p><font color=red>对象字面量：</font>就是花括号{}里面包含了这个具体事物(对象)的属性和方法</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {}; <span class="comment">//创建了一个空的对象</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">uname</span>:<span class="string">'张三'</span>,</span><br><span class="line"> <span class="attr">age</span>:<span class="number">18</span>;,</span><br><span class="line"> sex:<span class="string">'男'</span>,</span><br><span class="line"> <span class="attr">sayHi</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'hi'</span>);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">(<span class="number">1</span>)里面的属性和方法用键值对形式 键 属性名： 值 属性值</span><br><span class="line">(<span class="number">2</span>)多个属性或者方法中间用逗号隔开</span><br><span class="line">(<span class="number">3</span>)方法后面跟的是一个匿名函数</span><br></pre></td></tr></table></figure></li><li><p>利用<font color=red>new Object</font>创建对象</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>();<span class="comment">//创建了一个空的对象</span></span><br><span class="line">obj.uanme = <span class="string">'张三'</span>;</span><br><span class="line">obj.age = <span class="number">18</span>;</span><br><span class="line">obj.sex = <span class="string">'男'</span>;</span><br><span class="line">obj.fn = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line">}</span><br><span class="line">(<span class="number">1</span>)利用等号赋值的方式 添加对象的属性和方法</span><br><span class="line">(<span class="number">2</span>)每个属性和方法之间用分号隔开</span><br></pre></td></tr></table></figure></li><li><p>利用<font color=red>构造函数</font>创建对象</p><p><strong>为什么要用构造函数创建对象？</strong></p><p>因为其他两种创建对象的方式一次只能创建一个对象</p><p><strong>构造函数定义</strong>：是一种特殊的函数，主要用于初始化对象，因为对象成员变量赋初始值，他总是与new运算符一起使用，我们可以把对象中一些公共的属性和方法抽取出来然后封装到这个函数里面</p><p>构造函数格式：function 构造函数名() {</p><p> this.属性 = 值;</p><p> this.方法 = function() { }</p><p>}</p><p>调用：</p><p>new 构造函数名();</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name = uanme;</span><br><span class="line"> <span class="built_in">this</span>.age = age;</span><br><span class="line"> <span class="built_in">this</span>.sex = sex;</span><br><span class="line"> <span class="built_in">this</span>.sing = <span class="function"><span class="keyword">function</span>(<span class="params">sang</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(sang)</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> animal = <span class="keyword">new</span> Animal(<span class="string">'cat'</span>,<span class="number">13</span>,<span class="string">'女'</span>)；<span class="comment">//调用函数返回的是一个对象</span></span><br></pre></td></tr></table></figure><p><font color=red>注意:</font>1. 构造函数名首字母大写</p><p> 2.构造函数不需要return 就可以返回结果</p><p> 3.构造函数里的属性和方法前面必须添加this</p><p> 4.利用构造函数创建对象的过程称为对象的实例化</p><p><strong>new关键字执行过程</strong></p><ol><li><p>new 构造函数可以在内存中创建了一个空的对象</p></li><li><p>this 就会指向刚才创建的空对象</p></li><li><p>执行的构造函数里面的代码 给这个空对象添加属性和方法</p></li><li><p>返回这个对象 </p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Animal</span>(<span class="params">uanme,age,sex</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name = uname;</span><br><span class="line"> <span class="built_in">this</span>.age = age;</span><br><span class="line"> <span class="built_in">this</span>.sex = sex;</span><br><span class="line"> <span class="built_in">this</span>.sing = <span class="function"><span class="keyword">function</span>(<span class="params">sang</span>) </span>{</span><br><span class="line"> <span class="built_in">console</span>.log(sang);</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> Animal(<span class="string">'cat'</span>,<span class="number">17</span>,<span class="string">'女'</span>)；</span><br></pre></td></tr></table></figure></li></ol></li></ul><h2 id="使用对象"><a href="#使用对象" class="headerlink" title="使用对象"></a>使用对象</h2><p><code>1</code>调用对象的属性 我们采取 对象名.属性名</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(obj.uname);</span><br></pre></td></tr></table></figure><p><code>2</code>调用属性还有一种方法 对象名[‘属性名’]</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(obj[<span class="string">'age'</span>]);</span><br></pre></td></tr></table></figure><p><code>3</code>调用对象的方法 对象名.方法名()</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">obj.sayHi();</span><br></pre></td></tr></table></figure><p>==删除对象属性==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> obj.xxx;</span><br></pre></td></tr></table></figure><p>==修改对象属性==</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">obj.xxx = <span class="string">''</span>;</span><br></pre></td></tr></table></figure><p><strong>变量、属性、函数、方法的区别</strong></p><ul><li><p>变量和属性的相同点 他们都是用来存储数据的</p></li><li><p>不同点</p><ol><li>变量 单独声明并赋值 使用的时候直接写变量名 单独存在</li><li>属性 在对象里面不需要声明 使用的时候必须是 对象.属性</li></ol></li><li><p>函数和方法的相同点 都是实现某种功能 做某件事</p></li><li><p>不同点</p><ol><li>函数是单独声明 并且调用的 函数名() 单独存在的</li><li>方法 在对象里面 调用的时候 对象.方法()</li></ol></li></ul><h2 id="遍历对象"><a href="#遍历对象" class="headerlink" title="遍历对象"></a>遍历对象</h2><p><font color=red>for…in语句</font>用于对数组或对象的属性进行循环操作</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">遍历对象</span><br><span class="line"><span class="keyword">var</span> obj = {</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'张三'</span>，</span><br><span class="line"> <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line"> <span class="attr">sex</span>:<span class="string">'男'</span>,</span><br><span class="line"> <span class="attr">fn</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> </span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> obj) {</span><br><span class="line"> <span class="built_in">console</span>.log(k);<span class="comment">// k 变量 输出得到的是 属性名</span></span><br><span class="line"> <span class="built_in">console</span>.log(obj[k]);<span class="comment">//obj[k] 得到的是 属性值</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h1><ul><li>javaScript中的对象分为3种：自定义对象、内置对象、浏览器对象</li><li>前面两种对象是JS基础内容，属于ECMAScript；第三种浏览器对象是js独有的</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">封装自己的数学对象</span><br><span class="line"><span class="keyword">var</span> myMath={</span><br><span class="line"> <span class="attr">PI</span>:<span class="number">3.1415926</span>,</span><br><span class="line"> <span class="attr">max</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> max = <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>;i<<span class="built_in">arguments</span>.length;i++) {</span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">arguments</span>[i]>max) {</span><br><span class="line"> max = <span class="built_in">arguments</span>[i];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> max;</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">min</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> min = <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">1</span>;i<<span class="built_in">arguments</span>.length;i++) {</span><br><span class="line"> <span class="keyword">if</span>(<span class="built_in">arguments</span>[i]<min) {</span><br><span class="line"> min = <span class="built_in">arguments</span>[i];</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> min;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(myMath.PI);</span><br><span class="line"><span class="built_in">console</span>.log(myMath.max(<span class="number">1</span>,<span class="number">9</span>));</span><br></pre></td></tr></table></figure><ol><li><p>Math.random() 随机数 </p><p><code>1</code>返回一个随机小数 0<=x<1</p><p><code>2</code>这个方法不跟参数</p><p><strong>得到两个整数之间的随机整数</strong> 并且包含这两个数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandom</span>(<span class="params">min,max</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(max - min )+min);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(getRandom(<span class="number">1</span>,<span class="number">10</span>))</span><br></pre></td></tr></table></figure><p><strong>随机点名案例</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandom</span>(<span class="params">min,max</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(max - min)+min);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">'zhanga'</span>,<span class="string">'sdfsf'</span>,<span class="string">'dsfsd'</span>,<span class="string">'dsfsd'</span>]</span><br><span class="line"><span class="built_in">console</span>.log(arr[getRandom(<span class="number">0</span>,arr.length)])</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">猜数字游戏</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">youxi</span>(<span class="params">min, max</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (max - min) + min);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> random = youxi(<span class="number">1</span>, <span class="number">10</span>);</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">cai</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">while</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">var</span> p = prompt(<span class="string">'请输入一个数'</span>);</span><br><span class="line"> <span class="comment">//console.log(random);</span></span><br><span class="line"> <span class="keyword">if</span> (p > random) {</span><br><span class="line"> alert(<span class="string">'数字大了，继续猜'</span>);</span><br><span class="line"> } <span class="keyword">else</span> <span class="keyword">if</span> (p < random) {</span><br><span class="line"> alert(<span class="string">'数字小了，继续猜'</span>);</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">else</span> {</span><br><span class="line"> alert(<span class="string">'猜对了'</span>)</span><br><span class="line"> <span class="keyword">break</span>;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="comment">//var p = prompt('请输入一个数');</span></span><br><span class="line">cai();</span><br></pre></td></tr></table></figure><p><strong>向上取整</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.ceil(<span class="number">5.123</span>); <span class="comment">//6</span></span><br></pre></td></tr></table></figure><p><strong>向下取整</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.floor(<span class="number">5.234</span>);<span class="comment">//5</span></span><br></pre></td></tr></table></figure><p><strong>取整</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(<span class="number">5.234</span>);<span class="comment">// 5</span></span><br></pre></td></tr></table></figure><p><strong>四舍五入</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.round(<span class="number">5.342</span>);<span class="comment">//5</span></span><br></pre></td></tr></table></figure><p><strong>取绝对值</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.abs(-<span class="number">1</span>); <span class="comment">//1</span></span><br></pre></td></tr></table></figure></li></ol><p>2.Date() 日期对象 是一个构造函数 必须使用new来创建日期对象</p><p><strong>使用Date</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">如果没有参数 返回当前系统的当前时间</span><br><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date);</span><br><span class="line"></span><br><span class="line">参数常用的写法 数字型 <span class="number">2021</span>,<span class="number">02</span>,<span class="number">20</span> 或者是字符串型 <span class="string">'2021-02-20'</span></span><br><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">2021</span>,<span class="number">02</span>,<span class="number">20</span>);</span><br><span class="line"><span class="built_in">console</span>.log(date);<span class="comment">//返回的是 3月 不是2月</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">'2021-02-20'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(date);<span class="comment">//返回的是2月</span></span><br></pre></td></tr></table></figure><p><strong>日期格式化 获取指定的日期部分</strong></p><p></p><table><thead><tr><th>方法名</th><th>说明</th></tr></thead><tbody><tr><td>getFullYear()</td><td>获取当年</td></tr><tr><td>getMonth()</td><td>获取当月(0-11)</td></tr><tr><td>getDate()</td><td>获取当天日期</td></tr><tr><td>getDay()</td><td>获取星期几(周日0 )</td></tr><tr><td>getHours()</td><td>获取当前小时</td></tr><tr><td>getMinutes()</td><td>获取当前分钟</td></tr><tr><td>getSeconds()</td><td>获取当前秒</td></tr></tbody></table><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="keyword">var</span> year = date.getFullYear();</span><br><span class="line"><span class="keyword">var</span> month = date.getMonth()+<span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> dates = date.getDate();</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">'星期日'</span>,<span class="string">'星期一'</span>,<span class="string">'星期二'</span>,<span class="string">'星期三'</span>,<span class="string">'星期四'</span>,<span class="string">'星期五'</span>,<span class="string">'星期六'</span>];</span><br><span class="line"><span class="keyword">var</span> day = date.getDay();</span><br><span class="line"><span class="built_in">console</span>.log(year+<span class="string">'年'</span>+month+<span class="string">'月'</span>+dates+<span class="string">'日'</span>+arr[day])</span><br></pre></td></tr></table></figure><p><strong>封装一个函数返回当前的时分秒 格式：08:08:08</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getTime</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> time = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"> <span class="keyword">var</span> hours = time.getHours();</span><br><span class="line"> hours = hours < <span class="number">10</span> ? <span class="string">'0'</span> + hours : hours;</span><br><span class="line"> <span class="keyword">var</span> minutes = time.getMinutes();</span><br><span class="line"> minutes = minutes < <span class="number">10</span> ? <span class="string">'0'</span> + minutes : minutes;</span><br><span class="line"> <span class="keyword">var</span> seconds = time.getSeconds();</span><br><span class="line"> seconds = seconds < <span class="number">10</span> ? <span class="string">'0'</span> + seconds : seconds;</span><br><span class="line"> <span class="keyword">return</span> hours + <span class="string">':'</span> + minutes + <span class="string">':'</span> + seconds;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(getTime());</span><br></pre></td></tr></table></figure><p><strong>获得Date总的毫秒数(1970/1/1距今)</strong> </p><ol><li>方法：valueOf() getTime()</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date.valueOf());</span><br><span class="line"><span class="built_in">console</span>.log(date.getTime());</span><br></pre></td></tr></table></figure><p> 2.简单的写法(最常用写法)</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> date = +<span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date);</span><br></pre></td></tr></table></figure><ol start="3"><li>H5 新增的 获得总毫秒数</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Date</span>.now());</span><br></pre></td></tr></table></figure><p><strong>倒计时案例</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">countDown</span>(<span class="params">time</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> nowTime = +<span class="keyword">new</span> <span class="built_in">Date</span>();<span class="comment">//返回当前总毫秒数 //+号是为了将Obj类型转为numb</span></span><br><span class="line"> <span class="keyword">var</span> inputTime = +<span class="keyword">new</span> <span class="built_in">Date</span>(time);<span class="comment">//返回我们输入的总毫秒数</span></span><br><span class="line"> <span class="keyword">var</span> times = (inputTime - nowTime) / <span class="number">1000</span>;</span><br><span class="line"> <span class="keyword">var</span> d = <span class="built_in">parseInt</span>(times / <span class="number">60</span> / <span class="number">60</span> / <span class="number">24</span>);</span><br><span class="line"> <span class="keyword">var</span> h = <span class="built_in">parseInt</span>(times / <span class="number">60</span> / <span class="number">60</span> % <span class="number">24</span>);</span><br><span class="line"> h = h < <span class="number">10</span> ? <span class="string">'0'</span> + h : h;</span><br><span class="line"> <span class="keyword">var</span> m = <span class="built_in">parseInt</span>(times / <span class="number">60</span> % <span class="number">60</span>);</span><br><span class="line"> m = m < <span class="number">10</span> ? <span class="string">'0'</span> + m : m;</span><br><span class="line"> <span class="keyword">var</span> s = <span class="built_in">parseInt</span>(times % <span class="number">60</span>);</span><br><span class="line"> s = s < <span class="number">10</span> ? <span class="string">'0'</span> + s : s;</span><br><span class="line"> <span class="keyword">return</span> d + <span class="string">'天'</span> + h + <span class="string">'时'</span> + m + <span class="string">'分'</span> + s + <span class="string">'秒'</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(countDown(<span class="string">'2021-02-20 21:00'</span>));</span><br></pre></td></tr></table></figure><p>3.Array() 数组对象</p><p><strong>检测是否为数组</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reverse</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="keyword">if</span>(arr <span class="keyword">instanceof</span> <span class="built_in">Array</span>){</span><br><span class="line"> <span class="keyword">var</span> newArr = [];</span><br><span class="line"> <span class="keyword">for</span>(<span class="keyword">var</span> i = arr.length-<span class="number">1</span>;i>=<span class="number">0</span>;i--) {</span><br><span class="line"> newArr[newArr.length] = arr[i];</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> newArr;</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"> <span class="keyword">return</span> <span class="string">'error 参数不是数组'</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]);</span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">H5新增方法</span><br><span class="line"><span class="built_in">Array</span>.isArray(参数)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Array</span>.isArray(arr));</span><br></pre></td></tr></table></figure><p><strong>添加删除数组元素的方法</strong></p><ol><li><p>push() 在数组末尾 添加一个或者多个数组元素 push 推</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">arr.push(<span class="number">4</span>,<span class="string">'pink'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr.push(<span class="number">4</span>,<span class="string">'pink'</span>));<span class="comment">//5</span></span><br><span class="line"><span class="built_in">console</span>.log(arr); <span class="comment">//[1,2,3,4,'pink']</span></span><br></pre></td></tr></table></figure><p>Tip: <code>1</code> push 是可以给数组追加新的元素</p><p> <code>2</code> push() 参数直接写 数组元素</p><p> <code>3</code> push完毕之后，返回的结果是 新数组长度</p><p> <code>4</code> 原数组也会发生变化</p></li><li><p>unshift() 在数组的开头 添加一个或多个数组元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>];</span><br><span class="line">arr.unshift(<span class="number">4</span>,<span class="string">'pink'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr.unshift(<span class="number">4</span>,<span class="string">'pink'</span>));<span class="comment">//7</span></span><br><span class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[4,'pink',1,2,3]</span></span><br></pre></td></tr></table></figure></li><li><p>pop() 他可以删除数组的最后一个元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr= [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">arr.pop();</span><br><span class="line"><span class="built_in">console</span>.log(arr.pop);<span class="comment">//返回被删除的元素 4</span></span><br><span class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[1,2,3]</span></span><br></pre></td></tr></table></figure><p>Tip:<code>1</code> pop() 可以删除数组的最后一个元素 只能删除一个</p><p> <code>2</code> pop() 没有参数</p><p> <code>3</code> pop完毕之后，返回的结果是 删除的那个元素</p><p> <code>4</code>原数组也会发生变化</p><ol start="4"><li><p>shift()可以删除数组的第一个元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line">arr.shift();</span><br><span class="line"><span class="built_in">console</span>.log(arr.shift());<span class="comment">//1 返回值是被删除的那个元素</span></span><br><span class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[2,3,4]</span></span><br></pre></td></tr></table></figure></li></ol></li></ol><p><strong>数组排序</strong></p><p>冒泡排序</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">13</span>,<span class="number">4</span>,<span class="number">77</span>,<span class="number">1</span>,<span class="number">7</span>];</span><br><span class="line">arr.sort();</span><br><span class="line"><span class="built_in">console</span>.log(arr);<span class="comment">//[1,13,4,7,77]</span></span><br><span class="line">js库里的sort方法遇到两位数的数无法正常排序</span><br><span class="line">解决方法：</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">13</span>,<span class="number">4</span>,<span class="number">77</span>,<span class="number">1</span>,<span class="number">7</span>];</span><br><span class="line">arr.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>) </span>{</span><br><span class="line"> <span class="keyword">return</span> a-b; 升序</span><br><span class="line"> <span class="keyword">return</span> b-a; 降序</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p><strong>获取数组元素索引方法</strong></p><table><thead><tr><th>方法名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>indexOf()</td><td>数组中查找给定元素的第一个索引</td><td>如果存在索引号返回索引号 如果不存在 返回-1</td></tr><tr><td>lastIndexOf()</td><td>在数组中的最后一个的索引</td><td>如果窜在索引号 返回索引号 如果不存在 返回-1</td></tr></tbody></table><p>返回数组元素索引号方法 indexOf() lastIndexOf()</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="string">'red'</span>,<span class="string">'green'</span>,<span class="string">'blue'</span>,<span class="string">'pink'</span>,<span class="string">'blue'</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr.indexOf(<span class="string">'blue'</span>));<span class="comment">//2</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.lastIndexOf(<span class="string">'bule'</span>));<span class="comment">//4</span></span><br></pre></td></tr></table></figure><p><strong>数组去重</strong></p><p>利用新数组.indexOf(数组元素) 如果返回-1 就说明新数组里没有该元素</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">unique</span>(<span class="params">arr</span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> newArr = [];</span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < arr.length; i++) {</span><br><span class="line"> <span class="keyword">var</span> index = newArr.indexOf(arr[i]);</span><br><span class="line"> <span class="comment">//console.log(index);</span></span><br><span class="line"> <span class="keyword">if</span> (index == -<span class="number">1</span>) {</span><br><span class="line"> <span class="comment">//newArr[newArr.length] = arr[i];</span></span><br><span class="line"> newArr.push(arr[i]);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> <span class="keyword">return</span> newArr;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(unique([<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>, <span class="string">'z'</span>, <span class="string">'f'</span>, <span class="string">'a'</span>, <span class="string">'c'</span>, <span class="string">'g'</span>, <span class="string">'a'</span>]));</span><br></pre></td></tr></table></figure><p><strong>数组转化为字符串</strong></p><table><thead><tr><th>方法名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>toString()</td><td>把数组转化成字符串，逗号分隔每一项</td><td>返回一个字符串</td></tr><tr><td>join(分隔符)</td><td>方法用于把数组中的所有元素转化为一个字符串</td><td>返回一个字符串</td></tr></tbody></table><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">toString()</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">'red'</span>,<span class="string">'blue'</span>,<span class="string">'green'</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr.toString());<span class="comment">//red,blue,green</span></span><br><span class="line"></span><br><span class="line">join()</span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">'red'</span>,<span class="string">'blue'</span>,<span class="string">'green'</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr.join());<span class="comment">//red,blue,green</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.join(<span class="string">'-'</span>));<span class="comment">//red-blue-green</span></span><br><span class="line"><span class="built_in">console</span>.log(arr.join(<span class="string">'/'</span>));<span class="comment">//red/blue/green</span></span><br></pre></td></tr></table></figure><p><strong>数组对象其他常用方法</strong></p><table><thead><tr><th>方法名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>concat()</td><td>连接两个或多个数组 不影响原数组</td><td>返回一个新的数组</td></tr><tr><td>slice()</td><td>数组截取slice(begin(包含)，end(不包含))</td><td>返回被截取项目的新数组</td></tr><tr><td>splice()</td><td>数组删除splice(第几个开始，要删除个数)</td><td>返回被删除项目的新数组 会影响原数组</td></tr></tbody></table><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">concat()例子</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">'blue'</span>,<span class="string">'red'</span>];</span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="string">'james'</span>,<span class="string">'dfsg'</span>];</span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="string">'yellow'</span>,<span class="string">'purple'</span>];</span><br><span class="line"><span class="built_in">console</span>.log(arr.concat(arr1,arr2));<span class="comment">//['blue','red','james','dfsg','yellow','purple']</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">slice()例子</span><br><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'banana'</span>,<span class="string">'orange'</span>,<span class="string">'lemon'</span>,<span class="string">'apple'</span>,<span class="string">'mango'</span>];</span><br><span class="line"><span class="keyword">var</span> citrus = fruits.slice(<span class="number">1</span>,<span class="number">3</span>);<span class="comment">//['organge','lemon']</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">splice()例子 移除数组的第三个元素，并在数组第三个位置添加新元素</span><br><span class="line"><span class="keyword">var</span> fruits = [<span class="string">'banana'</span>,<span class="string">'organge'</span>,<span class="string">'apple'</span>,<span class="string">'mango'</span>];</span><br><span class="line">fruits.splice(<span class="number">2</span>,<span class="number">2</span>,<span class="string">'lemon'</span>,<span class="string">'kiwi'</span>);<span class="comment">//['banana','lemon','kikw']</span></span><br></pre></td></tr></table></figure><hr><p>4.String字符串对象</p><ul><li><p>基本包装类型</p><p>为了方便操作基本数据类型，js还提供了三个特殊的引用类型：String、Number、Boolean</p><p>基本包装类型就是把简单的数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'andy'</span>;</span><br><span class="line"><span class="built_in">console</span>,log(str.length);</span><br><span class="line"></span><br><span class="line"><span class="comment">//1.生成临时变量，把简单的数据类型包装成为复杂的数据类型</span></span><br><span class="line"><span class="keyword">var</span> temp = <span class="keyword">new</span> <span class="built_in">String</span>(<span class="string">'andy'</span>);</span><br><span class="line"><span class="comment">//2.赋值给我们声明的字符变量</span></span><br><span class="line">str = temp;</span><br><span class="line"><span class="comment">//3.销毁临时变量</span></span><br><span class="line">temp = <span class="literal">null</span>;</span><br></pre></td></tr></table></figure><hr><p><strong>字符串的不可变性</strong></p><p>定义：里面的值不可变，看上去可以改变内容，其实是地址变了，内存中新开辟了一个内存空间</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'andy'</span>;</span><br><span class="line">str = <span class="string">'hello'</span>;</span><br><span class="line"><span class="comment">//当重新给str赋值时，常量'andy'不会被修改，依然在内存中</span></span><br><span class="line"><span class="comment">//重新给字符串赋值，会重新在内存中开辟空间，这个特点是字符串的不可变</span></span><br><span class="line"><span class="comment">//由于字符串的不可变，在大量拼接字符串时会有效率问题</span></span><br></pre></td></tr></table></figure><p></p></li></ul><hr><p><strong>字符串对象的常用方法</strong></p><p>tips：字符串的所有方法，都不会修改字符串本身(字符串是不可变的)，操作完成后会返回一个新的字符串</p><ol><li><p>根据字符返回位置</p><table><thead><tr><th>方法名</th><th>说明</th></tr></thead><tbody><tr><td>indexOf(‘要查找的字符’，[开始的位置])</td><td>返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号</td></tr><tr><td>lastIndexOf()</td><td>从后往前找，只找第一个匹配</td></tr></tbody></table></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'改革春风吹满地,春风吹满地'</span>；</span><br><span class="line"><span class="built_in">console</span>.log(str.indexOf(<span class="string">'春'</span>));<span class="comment">//2</span></span><br><span class="line"><span class="built_in">console</span>.log(str.indexOf(<span class="string">'春'</span>,<span class="number">3</span>));<span class="comment">//8</span></span><br></pre></td></tr></table></figure><p>案例：查找字符串’abcdoefgzzoobo’中所有o出现的位置以及次数</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'abcdoefgzzoobo'</span>;</span><br><span class="line"><span class="keyword">var</span> index = str.indexOf(<span class="string">'o'</span>);</span><br><span class="line"><span class="keyword">var</span> num = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span> (index !== -<span class="number">1</span>) {</span><br><span class="line"> <span class="built_in">console</span>.log(index);</span><br><span class="line"> num++;</span><br><span class="line"> index = str.indexOf(<span class="string">'o'</span>, index + <span class="number">1</span>);</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(num);</span><br></pre></td></tr></table></figure><hr><ol start="2"><li><p>根据位置返回字符(重点)</p><table><thead><tr><th>方法名</th><th>说明</th><th>使用</th></tr></thead><tbody><tr><td>charAt(index)</td><td>返回指定位置的字符(index 字符串的索引号)</td><td>str.charAt(0)</td></tr><tr><td>charCodeAt(index)</td><td>获取指定位置处字符的ASCII码(index索引号)</td><td>str.charCodeAt(0)</td></tr><tr><td>str[index]</td><td>获取指定位置处字符</td><td>HTML5,IE8+支持 和charAt()等效</td></tr></tbody></table><p><code>1</code>charAt(index) 根据位置返回字符</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'blue'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.charAt(<span class="number">3</span>));<span class="comment">//e</span></span><br><span class="line"><span class="comment">//遍历所有字符</span></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i<str.length;i++) {</span><br><span class="line"> <span class="built_in">console</span>.log(str.charAt(i));<span class="comment">//b,l,u,e</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><code>2</code>charCodeAt(index) 返回索引号的字符ASCII值，目的：判断用户按下了哪个键</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'purple'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.charCodeAt(<span class="number">2</span>));<span class="comment">//114</span></span><br></pre></td></tr></table></figure><p><code>3</code>str[index] 根据位置返回字符</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'red'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str[<span class="number">0</span>]);<span class="comment">//r</span></span><br></pre></td></tr></table></figure><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//判断一个字符串'avsdosfoebooweoa'中出现次数最多的字符，并统计其次数</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'avsdosfoebooweoa'</span>;</span><br><span class="line"><span class="keyword">var</span> obj = {};</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i < str.length; i++) {</span><br><span class="line"> <span class="keyword">var</span> strs = str.charAt(i);<span class="comment">//strs 是字符串的每一个字符</span></span><br><span class="line"> <span class="keyword">if</span> (obj[strs]) {</span><br><span class="line"> obj[strs]++;</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> obj[strs] = <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(obj);</span><br><span class="line"><span class="comment">//2.遍历对象</span></span><br><span class="line"><span class="keyword">var</span> max = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> ch = <span class="string">''</span>;</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> k <span class="keyword">in</span> obj) {</span><br><span class="line"> <span class="keyword">if</span>(obj[k]>max) {</span><br><span class="line"> max = obj[k];</span><br><span class="line"> ch = k;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(max);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'最多的字符是'</span>+ch);</span><br></pre></td></tr></table></figure><p>3.字符串操作方法(重点)</p><table><thead><tr><th>方法名</th><th>说明</th></tr></thead><tbody><tr><td>concat(str1,str2,str3…)</td><td>concat()方法用于连接两个或多个字符串，拼接字符串，等效于+，+更常用</td></tr><tr><td>substr(start,length)</td><td>从start位置开始(索引号)，length取的个数 重点记这个</td></tr><tr><td>slice(start,end)</td><td>从start位置开始，截取到end位置，end取不到(他们俩都是索引号)</td></tr><tr><td>substring(start,end)</td><td>从start位置开始，截取到end位置，end取不到，基本和slice相同 但是不接受负数值</td></tr></tbody></table><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>concat(<span class="string">'字符串1'</span>，<span class="string">'字符串2'</span>...)</span><br><span class="line"><span class="keyword">var</span> str =<span class="string">'andy'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.concat(<span class="string">'red'</span>));<span class="comment">//andyred</span></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span>substr(<span class="string">'截取的起始位置'</span>,<span class="string">'截取几个字符'</span>)</span><br><span class="line"><span class="keyword">var</span> str1 = <span class="string">'改革村风'</span>；</span><br><span class="line"><span class="built_in">console</span>.log(str1.substr(<span class="number">2</span>,<span class="number">2</span>));<span class="comment">//第一个2 是索引号 从第几个开始 第二个2 是取几个字符</span></span><br></pre></td></tr></table></figure><p>其他方法：//1.替换字符 replace(‘被替换的字符’,’替换为的字符’) 只能替换第一个</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'andya'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.replace(<span class="string">'a'</span>,<span class="string">'c'</span>));<span class="comment">//cndya</span></span><br><span class="line"><span class="keyword">while</span>(str.indexOf(<span class="string">'a'</span>)!==-<span class="number">1</span>）{</span><br><span class="line">str = str.replace(<span class="string">'a'</span>,<span class="string">'d'</span>); </span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(str);<span class="comment">//dndyd</span></span><br></pre></td></tr></table></figure><p>//2.字符转换为数组split(‘分隔符’) 前面学过join把数组转换为字符串</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'red,pink,blue'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">','</span>));<span class="comment">//[red,pink,blue]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'red&pink&blue'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">'&'</span>));<span class="comment">//[red,pink,blue]</span></span><br></pre></td></tr></table></figure><p>//3.转换大小写 toUpperCase() toLowerCase()</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'dsfsdfDOKJO'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.toUpperCase());<span class="comment">//DSFSDFDOKJO</span></span><br><span class="line"><span class="built_in">console</span>.log(str.toLowerCase());<span class="comment">//dsfsdfdokjo</span></span><br></pre></td></tr></table></figure></li></ol><h1 id="数据类型总结"><a href="#数据类型总结" class="headerlink" title="数据类型总结"></a>数据类型总结</h1><p> 1.<strong>简单数据类型与复杂数据类型</strong></p><p> 简单数据类型又叫做基本数据类型或者<font color=red>值类型</font>，复杂类型又叫做<font color=red>引用类型</font>。</p><ul><li><p>值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型</p><p>String,number,boolean,undefind,null</p></li><li><p>引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型</p><p>通过new关键字创建的对象(系统对象、自定义对象)，如Object、Array、Date等</p></li></ul><hr><p> 2.<strong>堆和栈</strong></p><p> 堆栈空间分配区别：</p><p> 1、栈(操作系统)：由于操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈</p><p> <font color=red>简单数据类型存放到栈里</font></p><p> 2、堆(操作系统)：存储复杂类型(对象)，一般由程序猿分配释放，若程序猿不释放，由垃圾回收机制回收。</p><p> <font color=red>复杂数据类型存放到堆里面</font></p><p></p><p> <font color=red>注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可让大家更容易理解代码的执行方式</font> </p><hr><p> 3 、4.<strong>简单类型的内存分配</strong></p><p> 简单数据类型null 返回的是一个空的对象 object</p><p> var timer = null;</p><p> console.log(typeof timer)//object</p><p> //如果有个变量我们以后打算存储为对象，暂时没想好放啥，这个时候就给null</p><p> 值类型(简单数据类型)：放在栈里面 里面直接开辟一个空间存放的是值</p><p> 引用类型：复杂数据类型，首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面</p><p></p><hr><p> 5、简单数据类型传参</p><p> 函数的形参可以看作是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈的空间的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">a</span>) </span>{</span><br><span class="line"> a++;</span><br><span class="line"> <span class="built_in">console</span>.log(a);</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> x = <span class="number">10</span>;</span><br><span class="line">fn(x);</span><br><span class="line"><span class="built_in">console</span>.log(x);</span><br></pre></td></tr></table></figure><p></p><hr><p> 6.复杂数据类型传参</p><p> 函数的形参可以看作是一个变量，当我们把引用数据类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>) </span>{</span><br><span class="line"> <span class="built_in">this</span>.name = name;</span><br><span class="line">}</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params">x</span>) </span>{ <span class="comment">//x=p</span></span><br><span class="line"> <span class="built_in">console</span>.log(x.name);<span class="comment">//刘德华</span></span><br><span class="line"> x.name = <span class="string">'张学友'</span>;</span><br><span class="line"> <span class="built_in">console</span>.log(x.name);<span class="comment">//张学友</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Person(<span class="string">'刘德华'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(p.name);<span class="comment">//刘德华</span></span><br><span class="line">f1(p);</span><br><span class="line"><span class="built_in">console</span>.log(p.name);<span class="comment">//张学友</span></span><br></pre></td></tr></table></figure><p></p>]]></content>
<categories>
<category> JS </category>
</categories>
<tags>
<tag> JS </tag>
</tags>
</entry>
<entry>
<title>Git</title>
<link href="/2019/09/11/Git/"/>
<url>/2019/09/11/Git/</url>
<content type="html"><![CDATA[<span id="more"></span><h2 id="git1-Git基础"><a href="#git1-Git基础" class="headerlink" title="git1. Git基础"></a>git1. Git基础</h2><h3 id="1-1-版本管理"><a href="#1-1-版本管理" class="headerlink" title="1.1 版本管理"></a>1.1 版本管理</h3><h4 id="1-1-1-什么是版本管理"><a href="#1-1-1-什么是版本管理" class="headerlink" title="1.1.1 什么是版本管理"></a>1.1.1 什么是版本管理</h4><p>版本管理是一种记录文件变化的方式，以便将来查阅特定版本的文件内容。</p><p><img src="assets/01.png"></p><h4 id="1-1-2-人为维护文档版本的问题"><a href="#1-1-2-人为维护文档版本的问题" class="headerlink" title="1.1.2 人为维护文档版本的问题"></a>1.1.2 人为维护文档版本的问题</h4><ol><li><p>文档数量多且命名不清晰导致文档版本混乱</p></li><li><p>每次编辑文档需要复制，不方便</p></li><li><p>多人同时编辑同一个文档，容易产生覆盖</p></li></ol><p><img src="assets/04.png"></p><h3 id="1-2-Git-是什么"><a href="#1-2-Git-是什么" class="headerlink" title="1.2 Git 是什么"></a>1.2 Git 是什么</h3><p>Git是一个版本管理控制系统（缩写VCS），它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来。</p><p><img src="assets/19.png"></p><h3 id="1-3-Git-安装"><a href="#1-3-Git-安装" class="headerlink" title="1.3 Git 安装"></a>1.3 Git 安装</h3><p><a href="https://git-scm.com/downloads">下载地址</a> </p><p>在安装的过程中，所有选项使用默认值即可。</p><h3 id="1-4-Git-基本工作流程"><a href="#1-4-Git-基本工作流程" class="headerlink" title="1.4 Git 基本工作流程"></a>1.4 Git 基本工作流程</h3><table><thead><tr><th>git仓库</th><th>暂存区</th><th>工作目录</th></tr></thead><tbody><tr><td>用于存放提交记录</td><td>临时存放被修改文件</td><td>被Git管理的项目目录</td></tr></tbody></table><p><img src="assets/05.png"></p><h3 id="1-5-Git-的使用"><a href="#1-5-Git-的使用" class="headerlink" title="1.5 Git 的使用"></a>1.5 Git 的使用</h3><h4 id="1-5-1-Git-使用前配置"><a href="#1-5-1-Git-使用前配置" class="headerlink" title="1.5.1 Git 使用前配置"></a>1.5.1 Git 使用前配置</h4><p>在使用 git 前，需要告诉 git 你是谁，在向 git 仓库中提交时需要用到。</p><ol><li>配置提交人姓名：<code>git config --global user.name 提交人姓名</code></li><li>配置提交人姓名：<code>git config --global user.email 提交人邮箱</code> </li><li>查看git配置信息：<code>git config --list</code> </li></ol><p><strong>注意</strong></p><ol><li><p>如果要对配置信息进行修改，重复上述命令即可。</p></li><li><p>配置只需要执行一次。</p></li></ol><h4 id="1-5-2-提交步骤"><a href="#1-5-2-提交步骤" class="headerlink" title="1.5.2 提交步骤"></a>1.5.2 提交步骤</h4><ol><li><code>git init</code> 初始化git仓库</li><li><code>git status</code> 查看文件状态</li><li><code>git add 文件列表</code> 追踪文件</li><li><code>git commit -m 提交信息</code> 向仓库中提交代码</li><li><code>git log</code> 查看提交记录</li></ol><h4 id="1-5-3-撤销"><a href="#1-5-3-撤销" class="headerlink" title="1.5.3 撤销"></a>1.5.3 撤销</h4><ul><li><p>用暂存区中的文件覆盖工作目录中的文件： <code>git checkout 文件</code></p></li><li><p>将文件从暂存区中删除： <code>git rm --cached 文件</code></p></li><li><p>将 git 仓库中指定的更新记录恢复出来，并且覆盖暂存区和工作目录：<code>git rest --hard commitID</code> </p></li></ul><p><img src="assets/07.png"></p><h2 id="2-Git进阶"><a href="#2-Git进阶" class="headerlink" title="2. Git进阶"></a>2. Git进阶</h2><h3 id="2-1-分支"><a href="#2-1-分支" class="headerlink" title="2.1 分支"></a>2.1 分支</h3><p>为了便于理解，大家暂时可以认为分支就是当前工作目录中代码的一份副本。</p><p>使用分支，可以让我们从开发主线上分离出来，以免影响开发主线。</p><p><img src="assets/08.png"></p><h4 id="2-1-1-分支细分"><a href="#2-1-1-分支细分" class="headerlink" title="2.1.1 分支细分"></a>2.1.1 分支细分</h4><ol><li><p>主分支（master）：第一次向 git 仓库中提交更新记录时自动产生的一个分支。</p><p><img src="assets/06.png"></p></li><li><p>、开发分支（develop）：作为开发的分支，基于 master 分支创建。</p><p><img src="assets/09.png"></p></li><li><p>功能分支（feature）：作为开发具体功能的分支，基于开发分支创建</p><p><img src="assets/10.png"></p></li></ol><p><strong>功能分支 -> 开发分支 -> 主分支</strong></p><h4 id="2-1-2-分支命令"><a href="#2-1-2-分支命令" class="headerlink" title="2.1.2 分支命令"></a>2.1.2 分支命令</h4><ul><li><p><code>git branch</code> 查看分支</p></li><li><p><code>git branch 分支名称</code> 创建分支</p></li><li><p><code>git checkout 分支名称</code> 切换分支</p></li><li><p><code>git merge 来源分支</code> 合并分支</p></li><li><p><code>git branch -d 分支名称</code> 删除分支（分支被合并后才允许删除）（-D 强制删除）</p></li></ul><h3 id="2-2-暂时保存更改"><a href="#2-2-暂时保存更改" class="headerlink" title="2.2 暂时保存更改"></a>2.2 暂时保存更改</h3><p>在git中，可以暂时提取分支上所有的改动并存储，让开发人员得到一个干净的工作副本，临时转向其他工作。</p><p>使用场景：分支临时切换</p><ul><li>存储临时改动：<code>git stash</code></li><li>恢复改动：<code>git stash pop</code></li></ul><h2 id="3-Github"><a href="#3-Github" class="headerlink" title="3. Github"></a>3. Github</h2><p>在版本控制系统中，大约90%的操作都是在本地仓库中进行的：暂存，提交，查看状态或者历史记录等等。除此之外，如果仅仅只有你一个人在这个项目里工作，你永远没有机会需要设置一个远程仓库。</p><p>只有当你需要和你的开发团队共享数据时，设置一个远程仓库才有意义。你可以把它想象成一个 “文件管理服务器”，利用这个服务器可以与开发团队的其他成员进行数据交换。</p><h3 id="3-1-注册"><a href="#3-1-注册" class="headerlink" title="3.1 注册"></a>3.1 注册</h3><ol><li><p>访问<a href="https://github.com/">github</a>首页，点击 Sign up 连接。（注册）</p><p><img src="assets/11.png"></p></li><li><p>填写用户名、邮箱地址、GitHub登陆密码</p><p><img src="assets/12.png"></p></li><li><p>选择计划</p><p><img src="assets/13.png"></p></li><li><p>填写 GitHub 问题</p><p><img src="assets/14.png"></p></li><li><p>验证邮箱</p><p><img src="assets/15.png"></p></li><li><p>GitHub 个人中心</p><p><img src="assets/16.png"></p></li></ol><h3 id="3-2-多人协作开发流程"><a href="#3-2-多人协作开发流程" class="headerlink" title="3.2 多人协作开发流程"></a>3.2 多人协作开发流程</h3><ul><li>A在自己的计算机中创建本地仓库</li><li>A在github中创建远程仓库</li><li>A将本地仓库推送到远程仓库</li><li>B克隆远程仓库到本地进行开发</li><li>B将本地仓库中开发的内容推送到远程仓库</li><li>A将远程仓库中的最新内容拉去到本地</li></ul><p><img src="assets/20.png"></p><p><img src="assets/21.png"></p><h3 id="3-3-创建仓库"><a href="#3-3-创建仓库" class="headerlink" title="3.3 创建仓库"></a>3.3 创建仓库</h3><ol><li><p>填写仓库基本信息</p><p><img src="assets/17.png"></p></li><li><p>将本地仓库推送到远程仓库</p><p><img src="assets/18.png"></p><ol><li><p>git push 远程仓库地址 分支名称</p></li><li><p>git push 远程仓库地址别名 分支名称</p></li><li><p>git push -u 远程仓库地址别名 分支名称</p><p> -u 记住推送地址及分支，下次推送只需要输入git push即可</p></li><li><p>git remote add 远程仓库地址别名 远程仓库地址</p></li></ol></li></ol><h3 id="3-4-拉取操作"><a href="#3-4-拉取操作" class="headerlink" title="3.4 拉取操作"></a>3.4 拉取操作</h3><h4 id="3-4-1-克隆仓库"><a href="#3-4-1-克隆仓库" class="headerlink" title="3.4.1 克隆仓库"></a>3.4.1 克隆仓库</h4><p>克隆远端数据仓库到本地：<code>git clone 仓库地址</code></p><h4 id="3-4-2-拉取远程仓库中最新的版本"><a href="#3-4-2-拉取远程仓库中最新的版本" class="headerlink" title="3.4.2 拉取远程仓库中最新的版本"></a>3.4.2 拉取远程仓库中最新的版本</h4><p>拉取远程仓库中最新的版本：<code>git pull 远程仓库地址 分支名称</code></p><h3 id="3-5-解决冲突"><a href="#3-5-解决冲突" class="headerlink" title="3.5 解决冲突"></a>3.5 解决冲突</h3><p>在多人同时开发一个项目时，如果两个人修改了同一个文件的同一个地方，就会发生冲突。冲突需要人为解决。</p><h3 id="3-6-跨团队协作"><a href="#3-6-跨团队协作" class="headerlink" title="3.6 跨团队协作"></a>3.6 跨团队协作</h3><ol><li>程序员 C fork仓库</li><li>程序员 C 将仓库克隆在本地进行修改</li><li>程序员 C 将仓库推送到远程</li><li>程序员 C 发起pull reqest</li><li>原仓库作者审核</li><li>原仓库作者合并代码</li></ol><h3 id="3-7-ssh免登陆"><a href="#3-7-ssh免登陆" class="headerlink" title="3.7 ssh免登陆"></a>3.7 ssh免登陆</h3><p>https协议仓库地址：<a href="https://github.com/itcast-frontEnd/git-demo.git">https://github.com/itcast-frontEnd/git-demo.git</a></p><p><img src="assets/22.png"></p><p>生成秘钥：<code>ssh-keygen</code></p><p>秘钥存储目录：C:\Users\用户\.ssh</p><p>公钥名称：id_rsa.pub</p><p>私钥名称：id_rsa</p><p><img src="assets/23.png"></p><p><img src="assets/24.png"></p><h3 id="3-8-GIT忽略清单"><a href="#3-8-GIT忽略清单" class="headerlink" title="3.8 GIT忽略清单"></a>3.8 GIT忽略清单</h3><p>将不需要被git管理的文件名字添加到此文件中，在执行git命令的时候，git就会忽略这些文件。</p><p>git忽略清单文件名称：**.gitignore**</p><p>将工作目录中的文件全部添加到暂存区：<code>git add .</code></p>]]></content>
<categories>
<category> Git </category>
</categories>
<tags>
<tag> Git </tag>
</tags>
</entry>
</search>