首页 › JavaScript论坛 › 狂神说笔记——JavaScript快速入门11

做个好男人 發表於 2021-8-17 11:10:00

狂神说笔记——JavaScript快速入门11

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
                  </svg>
                  <h1>JavaScript快速入门</h1>
<h2>1.前端知识体系</h2>
<p>&nbsp; &nbsp; 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。</p>
<h3>1.前端三要素</h3>
<ul><li> <p>HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容。</p> </li><li> <p>CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。</p> </li><li> <p>JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为</p> </li></ul>
<h3>2.结构层（HTML）</h3>
<ul><li>略</li></ul>
<h3>3.表现层（CSS）</h3>
<p>  CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：</p>
<ul><li>语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；</li><li>没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；</li></ul>
<p>  这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【<strong>CSS预处理器</strong>】的工具,提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。</p>
<blockquote>
<p>什么是CSS预处理器？</p>
<ul><li>CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。</li></ul>
</blockquote>
<ul><li>常用的CSS预处理器有哪些：
<ul><li>SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。</li><li>LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。</li></ul> </li></ul>
<h3>4.行为层（JavaScript）</h3>
<p>  JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。</p>
<ul><li> <p><strong>JavaScript框架</strong>：</p>
<ul><li>JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；</li><li>Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–&gt;2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）；</li><li>React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；</li><li>Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；</li><li>Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能。</li></ul> </li><li> <p><strong>UI框架</strong>：</p>
<ul><li>Ant-Design：阿里巴巴出品，基于React的UI框架；</li><li>ElementUI、iview、ice：饿了么出品，基于Vue的UI框架；</li><li>BootStrap：Teitter推出的一个用于前端开发的开源工具包；</li><li>AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架。</li></ul> </li><li> <p>JavaScript构建工具：</p>
<ul><li>Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript。</li><li>WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载。</li></ul> </li></ul>
<h3>5.三端同一</h3>
<ul><li><strong>混合开发</strong>（Hybrid App）</li><li>主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：
<ul><li>云打包：HBuild -&gt; HBuildX，DCloud 出品；API Cloud</li><li>本地打包： Cordova（前身是 PhoneGap）</li></ul> </li></ul>
<h2>2.什么是JavaScript</h2>
<h3>1.概述</h3>
<ul><li>javaScript是一门世界上最流行的脚本语言。</li><li>开发历程10天。</li><li><mark>一个合格的后端人员，必须精通JavaScript</mark>！</li></ul>
<h3>2.历史</h3>
<ul><li>百度词条</li><li>ECMAScript它可以理解为JavaScript的一个标准。最新版本已经到ES6版本！但是大部分浏览器还只停留在支持ES5代码上！</li><li>开发环境——线上环境，版本不一致。</li></ul>
<h2>3.快速入门</h2>
<h3>1.引入JS</h3>
<ul><li>内部标签</li></ul>
<pre><code class="prism language-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span><span class="token constant">JS01</span><span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> script标签内，写JavaScript代码 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hello,world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>


<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>这里也可以存放<span class="token constant">JS</span>代码<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/bc57242b7e9c4386a8f1cc0f48eb9be9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>外部引入</li></ul>
<pre><code class="prism language-js"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"js/qj.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/2ad431ba896641d9b86cb029f8b968ad.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<p><img src="https://img-blog.csdnimg.cn/9c43360bd91b4e17aa9cf74a17230054.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>2.基本语法入门</h3>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>基本语法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- JavaScript严格区分大小写 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token comment">// 1. 定义变量   变量类型 变量名 = 变量值</span>
      <span class="token keyword">var</span> score <span class="token operator">=</span> <span class="token number">46</span><span class="token punctuation">;</span>

      <span class="token comment">// 2. 条件控制</span>
      <span class="token comment">// alert(num);</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>score <span class="token operator">&gt;</span> <span class="token number">60</span> <span class="token operator">&amp;&amp;</span> score <span class="token operator">&lt;</span> <span class="token number">70</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"成绩为:60~70"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>score <span class="token operator">&gt;</span> <span class="token number">70</span> <span class="token operator">&amp;&amp;</span> score <span class="token operator">&lt;</span> <span class="token number">80</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"成绩为:70~80"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"other"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>score<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 在浏览器的控制台打印输出变量</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/f8b388ac501e46b4b4eab8c0e71e0ca0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>浏览器必备调试须知。</li></ul>
<p><img src="https://img-blog.csdnimg.cn/cf8d16633d0643f7b06d710ca61b92c8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>3.数据类型</h3>
<blockquote>
<p>数值，文本，图形，音频，视频</p>
</blockquote>
<ul><li>变量：var a</li><li>JS不区分小数和整数，Number。</li></ul>
<pre><code class="prism language-js"><span class="token number">123</span> <span class="token comment">// 整数123</span>
<span class="token number">123.1</span> <span class="token comment">// 浮点数123.1</span>
<span class="token number">1.123e3</span> <span class="token comment">// 科学计数法</span>
<span class="token operator">-</span><span class="token number">99</span> <span class="token comment">// 负数</span>
<span class="token number">NaN</span>        <span class="token comment">// not a number</span>
<span class="token number">Infinity</span> <span class="token comment">// 表示无限大</span>
</code></pre>
<ul><li> <p>字符串：‘abc’ “abc”</p> </li><li> <p>布尔值：true，false</p> </li><li> <p>逻辑运算符</p>
<ul><li>&amp;&amp; 两个都为真，结果为真</li><li>|| 一个为真，结果为真</li><li>! 真即假，假即真</li></ul> </li><li> <p>比较运算符</p>
<ul><li>=，如：1与"1"</li><li>== 等于（类型不一样，值一样，也会判断为true）</li><li>=== 绝对等于（类型一样，值一样，结果为true）</li><li>尽量不要使用 == 比较，因为：
    <ul><li>NaN === NaN，这个与所有的数值都不相等，包括自己。</li><li>只能通过isNaN（NaN）来判断这个数是否是NaN。</li></ul> </li></ul> </li><li> <p>浮点数</p>
<ul><li>尽量避免使用浮点数进行运算，存在精度问题！</li></ul> <pre><code class="prism language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token operator">/</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token punctuation">(</span><span class="token number">1</span><span class="token operator">-</span><span class="token number">2</span><span class="token operator">/</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token operator">/</span><span class="token number">3</span><span class="token operator">-</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token operator">-</span><span class="token number">2</span><span class="token operator">/</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">&lt;</span><span class="token number">0.00000001</span><span class="token punctuation">;</span>
</code></pre> </li></ul>
<p><img src="https://img-blog.csdnimg.cn/a78c0f29ec624a7c814d6c94ef4116df.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li> <p>null 和 undefined</p>
<ul><li>null 空；</li><li>undefined 未定义；</li></ul> </li><li> <p>数组</p>
<ul><li>Java的数组必须是相同类型的对象，JS中不需要这样。</li></ul> </li></ul>
<pre><code class="prism language-js"><span class="token comment">// 保证代码的可读性，尽量使用[]</span>
<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token string">'hello'</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 第二种定义方法</span>
<span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>取数字下标：如果越界了，就会报undefined。</li></ul>
<p><img src="https://img-blog.csdnimg.cn/8fa86407dd4e49be81fc44e2f648e3ba.png#pic_center" alt="在这里插入图片描述"></p>
<ul><li>对象：是大括号，数组是中括号。
<ul><li>每个属性之间使用逗号隔开，最后一个属性不需要逗号。</li></ul> </li></ul>
<pre><code class="prism language-js"><span class="token comment">// Person person = new Person(1,2,3,4,5);</span>

<span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
        name<span class="token operator">:</span><span class="token string">'Tom'</span><span class="token punctuation">,</span>
        age<span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">,</span>
        tags<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'js'</span><span class="token punctuation">,</span><span class="token string">'java'</span><span class="token punctuation">,</span><span class="token string">'web'</span><span class="token punctuation">,</span><span class="token string">'...'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
<ul><li>取对象值。</li></ul>
<pre><code class="prism language-js">person<span class="token punctuation">.</span>name
<span class="token comment">// "Tom"</span>
person<span class="token punctuation">.</span>age
<span class="token comment">// 3</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/6154b3878efb4db89a526ea66518e673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>4.检查格式</h3>
<p><img src="https://img-blog.csdnimg.cn/8002367fcc0344708fb4d045abc95617.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>格式<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--
    前提:IDEA需要设置支持ES6语法，'use strict';
      严格检查模式，预防JavaScript的随意性导致产生的一些问题
      必须写在JavaScript的第一行！
      局部变量建议都使用let去定义。
    --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token string">'use strict'</span><span class="token punctuation">;</span>
      <span class="token comment">// 全局变量</span>
      <span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
      <span class="token comment">// ES6 let</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/ebb4e803e7464e5eb383c89d2ceb2d0c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h2>4.数据类型</h2>
<h3>1.字符串</h3>
<ul><li>正常字符串我们使用 单引号，或者双引号包裹；</li><li>注意转义字符 \</li></ul>
<pre><code class="prism language-js"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>字符串<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test01\'测试'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test02\n测试'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test03\t测试'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Test04\u4e2d测试'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/059b9e89c0ea4fc5b7e38408bbb584f3.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>多行字符串编写</li></ul>
<pre><code class="prism language-js"><span class="token comment">// tab 上面 esc下面</span>
<span class="token keyword">var</span> msg<span class="token operator">=</span>
    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">hello
            world
         你好呀
         JavaScript</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</code></pre>
<ul><li>模板字符串</li></ul>
<pre><code class="prism language-js"><span class="token keyword">let</span> name<span class="token operator">=</span><span class="token string">'Subei'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> age<span class="token operator">=</span><span class="token number">6</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> msg<span class="token operator">=</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">哇哈哈，</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
</code></pre>
<ul><li>字符串长度</li></ul>
<pre><code class="prism language-js">str<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/ab4090dd8b20424b9ca277e130ffc502.png#pic_center" alt="在这里插入图片描述"></p>
<ul><li>字符串的可变性，不可变。</li></ul>
<p><img src="https://img-blog.csdnimg.cn/3e98840f6cae4354b013332017d9ad33.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>大小写转换。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> str<span class="token operator">=</span><span class="token string">'subeily'</span><span class="token punctuation">;</span>
<span class="token comment">// 注意，这里是方法，不是属性了</span>
str<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
str<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/f3fc98eed8aa40e2ae9ccd4df4b700f5.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>console.log(str.indexOf(‘b’));</li><li>substring，从0开始。</li></ul>
<pre><code class="prism language-js">str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 从第一个字符串截取到最后一个字符串</span>
str<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1,3)</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/65adbfe5ab30413fa2dcf6085e531715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>2.数组</h3>
<ul><li>Array可以包含任意的数据类型。
<ul><li>长度：arr.length；
    <ul><li>注意：假如给arr.lennth赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失；</li></ul> </li><li>indexOf，通过元素获得下标索引；
    <ul><li>字符串的"1"和数字 1 是不同的；</li></ul> </li><li>slice（）：截取Array的一部分，返回的一个新数组，类似于String中substring；</li><li><strong>push()，pop()尾部</strong>；</li><li><strong>unshift(),shift() 头部</strong>；</li><li>排序：sort()；</li><li>元素反转：reverse()；</li><li>concat()；
    <ul><li>注意：concat()并没有修改数组，只是会返回一个新的数组。</li></ul> </li><li>连接符：join()；打印拼接数组，使用特定的字符串连接。</li><li>多维数组。</li></ul> </li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>        <span class="token comment">// 通过下标取值和赋值</span>
arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span>        <span class="token comment">// 长度</span>
arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// 通过元素获得下标索引</span>
arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token number">92</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">;</span>
arr<span class="token punctuation">.</span>concat<span class="token punctuation">;</span>
arr<span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">,</span><span class="token string">"b"</span><span class="token punctuation">,</span><span class="token string">"c"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
arr<span class="token punctuation">;</span>
arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'+'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">9</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr2<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/ee89eb83e0504a31b8a97b77782aa279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<p><img src="https://img-blog.csdnimg.cn/837aafe936fe4eac93998108259bec35.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>3.对象</h3>
<pre><code class="prism language-js"><span class="token keyword">var</span> 对象名 <span class="token operator">=</span> <span class="token punctuation">{</span>
        属性名：属性值，
        属性名：属性值，
        属性名：属性值
<span class="token punctuation">}</span>
<span class="token comment">// 定义了一个person对象，它有四个属性</span>
<span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
        name<span class="token operator">:</span><span class="token string">"subei"</span><span class="token punctuation">,</span>
        age<span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">,</span>
        email<span class="token operator">:</span><span class="token string">"294563152@QQ.com"</span><span class="token punctuation">,</span>
        score<span class="token operator">:</span><span class="token number">72</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
person<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">"subeiLY"</span><span class="token punctuation">;</span>
person<span class="token punctuation">.</span>name
person<span class="token punctuation">.</span>str<span class="token punctuation">;</span>
<span class="token keyword">delete</span> person<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
person<span class="token punctuation">;</span>
person<span class="token punctuation">.</span>str <span class="token operator">=</span> <span class="token string">"num23"</span><span class="token punctuation">;</span>
person<span class="token punctuation">;</span>
<span class="token string">'score'</span> <span class="token keyword">in</span> person
<span class="token comment">// 继承</span>
<span class="token string">'toString'</span> <span class="token keyword">in</span> person<span class="token punctuation">;</span>
person<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">'toString'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
person<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">'age'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>JS中对象，{…}表示一个对象，建制对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！</li><li>JavaScript中的所有的键都是字符串，值是任意对象！</li><li>对象赋值：</li></ul>
<p><img src="https://img-blog.csdnimg.cn/02341860a4a440dcaba6777bd5ac2ce6.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li> <p>使用一个不存在的对象属性，不会报错！undefined。</p> </li><li> <p>动态的删减属性，通过delete删除对象的属性。</p> </li></ul>
<p><img src="https://img-blog.csdnimg.cn/2b274c3f57794f2dbefa326a8771d57c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li> <p>动态的添加，直接给新的属性添加值即可。</p> </li><li> <p>判断属性值是否在这个对象中！xxx in xxx。</p> </li></ul>
<p><img src="https://img-blog.csdnimg.cn/4eda85d617194bad890013ecb24a802c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>判断一个属性是否是这个对象自身拥有的 hasOwnProperty()。</li></ul>
<p><img src="https://img-blog.csdnimg.cn/cf1866f858b4472885475657f2e6e15b.png#pic_center" alt="在这里插入图片描述"></p>
<h3>4.流程控制</h3>
<ul><li>IF判断。</li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title01<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>age<span class="token operator">&lt;=</span><span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">// 第一个判断</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"subei"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>age<span class="token operator">&lt;</span><span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">{</span>   <span class="token comment">// 第二个判断</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"subeiLY"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span><span class="token comment">// 否则</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"NULL~~~"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<ul><li>while循环判断，注意避免死循环！</li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token number">12</span><span class="token punctuation">;</span>
      <span class="token keyword">while</span><span class="token punctuation">(</span>age<span class="token operator">&lt;</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            age <span class="token operator">=</span> age <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      
      <span class="token keyword">do</span><span class="token punctuation">{</span>
            age <span class="token operator">=</span> age <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token keyword">while</span><span class="token punctuation">(</span>age<span class="token operator">&lt;</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/ef0ccc76007048fb93318d771447a9af.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>for循环判断。</li></ul>
<pre><code class="prism language-JS">for(let i=0;i&lt;100;i++){
    console.log(i);
}
</code></pre>
<ul><li> <p>for-each循环。</p>
<ul><li>ES5.1特征：</li></ul> <pre><code class="prism language-js"><span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span><span class="token number">99</span><span class="token punctuation">,</span><span class="token number">56</span><span class="token punctuation">,</span><span class="token number">34</span><span class="token punctuation">,</span><span class="token number">75</span><span class="token punctuation">,</span><span class="token number">128</span><span class="token punctuation">,</span><span class="token number">69</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 函数</span>
age<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> </li></ul>
<p><img src="https://img-blog.csdnimg.cn/e6037f2a247547528abb9c89ab13a5ee.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>for……in——下标：</li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token keyword">var</span> age <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span><span class="token number">99</span><span class="token punctuation">,</span><span class="token number">56</span><span class="token punctuation">,</span><span class="token number">34</span><span class="token punctuation">,</span><span class="token number">75</span><span class="token punctuation">,</span><span class="token number">128</span><span class="token punctuation">,</span><span class="token number">69</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> num <span class="token keyword">in</span> age<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>age<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"存在！"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>age<span class="token punctuation">[</span>num<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/26216fcd9f8f4af38104e7882700e0e1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>5.Map和Set</h3>
<ul><li>Map</li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token comment">// ES6 Map</span>
      <span class="token comment">// 学生成绩，学生姓名</span>
      <span class="token comment">// var names = ["Tone","jay","sony"];</span>
      <span class="token comment">// var scores = ;</span>
      
      <span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'Tone'</span><span class="token punctuation">,</span><span class="token number">92</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">'jay'</span><span class="token punctuation">,</span><span class="token number">84</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">'sony'</span><span class="token punctuation">,</span><span class="token number">96</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> name <span class="token operator">=</span> map<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'Tone'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 通过key获得value</span>
      map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'admin'</span><span class="token punctuation">,</span><span class="token number">123456</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 新增</span>
      map<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'Tone'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//删除</span>
      
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/d3b2797ee1564913954da7cb582b7440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>Set：无序不重复的集合。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> set <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
set<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 添加</span>
set<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 删除</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>set<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 是否包含某个元素</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/554d826988094d3b8bf0bdb186359157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>6.iterator</h3>
<ul><li>使用iterator来遍历迭代我们Map，Set！</li><li>遍历数组</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">7</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> x <span class="token keyword">of</span> arr<span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul><li>遍历Map</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">'Tone'</span><span class="token punctuation">,</span><span class="token number">92</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">'jay'</span><span class="token punctuation">,</span><span class="token number">84</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">'sony'</span><span class="token punctuation">,</span><span class="token number">96</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> x <span class="token keyword">of</span> map<span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul><li>遍历Set</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> set <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span><span class="token number">66</span><span class="token punctuation">,</span><span class="token number">45</span><span class="token punctuation">,</span><span class="token number">16</span><span class="token punctuation">,</span><span class="token number">72</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> x <span class="token keyword">of</span> set<span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<h2>5.函数</h2>
<h3>1.定义函数</h3>
<blockquote>
<p>方式一</p>
</blockquote>
<ul><li>绝对值函数</li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>函数<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token keyword">function</span> <span class="token function">abs</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>x<span class="token operator">&gt;=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">return</span> x<span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token operator">-</span>x<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<ul><li>一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined。</li></ul>
<blockquote>
<p>方式二</p>
</blockquote>
<pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">abs</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>x<span class="token operator">&gt;=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token operator">-</span>x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<ul><li>function(x){…}这是一个匿名函数。但是可以吧结果赋值给abs，通过abs就可以调用函数！</li><li>方式一和方式二等价！</li></ul>
<blockquote>
<p>调用函数</p>
</blockquote>
<pre><code class="prism language-js"><span class="token function">abs</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// 12</span>
<span class="token function">abs</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">36</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// 36</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/c1153059e0c04e3e8012c77c463fd835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>参数问题：javaScript可以传任意个参数，也可以不传递参数。</li><li>参数进来是否存在问题？假设不存在参数，如何规避？</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">abs</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token comment">// 手动抛出异常来判断</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> x<span class="token operator">!==</span> <span class="token string">'number'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">throw</span> <span class="token string">'Not a Number'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>x<span class="token operator">&gt;=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token operator">-</span>x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<blockquote>
<p>arguments</p>
</blockquote>
<ul><li><code>arguments</code>是一个JS免费赠送的关键字；</li><li>代表：传递进来的所有参数，是一个数组！</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token function-variable function">abs</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"x=&gt;"</span><span class="token operator">+</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> arguments<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arguments<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>x<span class="token operator">&gt;=</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token operator">-</span>x<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/8183f346c2684696a2ab9697407f500d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数。</li></ul>
<blockquote>
<p>rest</p>
</blockquote>
<pre><code class="prism language-js"><span class="token comment">// 以前</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length<span class="token operator">&gt;</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>arguments<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token comment">// ....</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// ES6引入的新特性，获取除了已经定义的参数之外的所有参数</span>
<span class="token keyword">function</span> <span class="token function">aaa</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b<span class="token punctuation">,</span><span class="token operator">...</span>rest</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"a=&gt;"</span> <span class="token operator">+</span> a<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"b=&gt;"</span> <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>rest<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">aaa</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/2d872e48cbe149a4b172da9dda030266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>rest参数只能写在最后面，必须用…标识。</li></ul>
<h3>2.变量的作用域</h3>
<ul><li>在javascript中，var定义变量实际是有作用于的。假设在函数体重声明，则在函数体外不可以使用。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">str</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    x <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
x <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught ReferenceError: x is not defined</span>
</code></pre>
<ul><li>如果两个函数使用了相同的变量名，只要在函数内部就不冲突。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">str</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    x <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">str2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">'A'</span><span class="token punctuation">;</span>
    x <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/42aa07ca4c1d48c881ed0a2a81628d5c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>内部函数可以访问外部函数的成员，反之则不行。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">num</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

    <span class="token comment">// 内部函数可以访问外部函数的成员，反之则不行</span>
    <span class="token keyword">function</span> <span class="token function">num2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">var</span> y <span class="token operator">=</span> x <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span><span class="token comment">// 2</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">var</span> z <span class="token operator">=</span> y <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span><span class="token comment">// Uncaught ReferenceError: y is not defined</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/91b09c5b357c414d95ec1089abd4da86.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>假设，内部函数变量和外部函数变量，重名！</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">num</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> x<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">num2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">'A'</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inner'</span> <span class="token operator">+</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'outer'</span> <span class="token operator">+</span> x<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">num2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">num</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/532abccd5adc4014875f9818d391aa38.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>假设在JavaScript中，函数查找变量从自身函数开始~， 由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。</li></ul>
<blockquote>
<p>提升变量的作用域</p>
</blockquote>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">f2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> y<span class="token punctuation">;</span>
    <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"x"</span><span class="token operator">+</span>y<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
    y <span class="token operator">=</span> <span class="token string">'y'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">f2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 输出:xundefined</span>
</code></pre>
<ul><li>说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">ft2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> y<span class="token punctuation">;</span>
    <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">"x"</span> <span class="token operator">+</span> y<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
    y <span class="token operator">=</span> <span class="token string">'y'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul><li>这个是在javascript建立之初就存在的特性。 养成规范：所有 的变量定义都放在函数的头部，不要乱放，便于代码维护；</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">de</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span>
    y<span class="token operator">=</span>x<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">,</span>
      z<span class="token punctuation">,</span>i<span class="token punctuation">,</span>a<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<blockquote>
<p>全局变量</p>
</blockquote>
<pre><code class="prism language-js"><span class="token comment">// 全局变量</span>
x <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/3066103531d4402786cd7441775978b9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>全局对象Windows</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">'xxx'</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>alert() 这个函数本身也是一个window的变量；</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token string">'xxx'</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> old_alter <span class="token operator">=</span> window<span class="token punctuation">.</span>alert<span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function-variable function">alert</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// alter()失效了</span>
window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 恢复</span>
window<span class="token punctuation">.</span>alert <span class="token operator">=</span> old_alter<span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">453</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，就会报错 Refrence。</li></ul>
<blockquote>
<p>规范</p>
</blockquote>
<ul><li>由于我们的所有变量都会绑定到window上。如果不同的JS文件，使用了相同的全局变量，就会产生冲突—&gt;如何减少这样的冲突？</li></ul>
<pre><code class="prism language-js"><span class="token comment">// 唯一全局变量</span>
<span class="token keyword">var</span> subei <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 定义全局变量</span>
subei<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'subeiLY'</span><span class="token punctuation">;</span>
subei<span class="token punctuation">.</span><span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span>b</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> a<span class="token operator">+</span>b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<ul><li>自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~<br> jQuery中就是使用的该方法：jQuery.name，简便写法：<strong>$()</strong></li></ul>
<blockquote>
<p>局部作用域</p>
</blockquote>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">bbb</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">bbb</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>ES6的let关键字，解决了局部作用域冲突的问题！</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">bbb</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// Uncaught ReferenceError: i is not defined</span>
<span class="token punctuation">}</span>

<span class="token function">bbb</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>建议大家都用let去定义局部作用域的变量；</li></ul>
<blockquote>
<p>常量</p>
</blockquote>
<ul><li>在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> <span class="token constant">PI</span><span class="token operator">=</span><span class="token string">'3.14'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token constant">PI</span><span class="token operator">=</span><span class="token string">'213'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>在ES6引入了常量关键字 <code>const</code>。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">const</span> <span class="token constant">PI</span> <span class="token operator">=</span> <span class="token string">'3.14'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token constant">PI</span> <span class="token operator">=</span> <span class="token string">'123'</span><span class="token punctuation">;</span>        <span class="token comment">// Uncaught SyntaxError: Identifier 'PI' has already been declared</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">PI</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/eb8879b258aa40a690bddc0d65d4ff56.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>3.方法</h3>
<blockquote>
<p>定义方法</p>
<ul><li>方法就是把函数放在对象的里面，对象只有两个东西：属性和方法。</li></ul>
</blockquote>
<pre><code class="prism language-js"><span class="token keyword">var</span> subeily <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">'哇哈哈'</span><span class="token punctuation">,</span>
    birth<span class="token operator">:</span><span class="token number">2000</span><span class="token punctuation">,</span>
    <span class="token comment">// 方法</span>
    <span class="token function-variable function">age</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 今年-出生年</span>
      <span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> now<span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>birth<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// 属性</span>
subeily<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token comment">// 方法，注意带()</span>
subeily<span class="token punctuation">.</span><span class="token function">age</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>this.代表什么？拆开上main的代码看看。</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 今年-出生年</span>
    <span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> now <span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>birth<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> subei <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">'可乐'</span><span class="token punctuation">,</span>
    birth<span class="token operator">:</span> <span class="token number">2002</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span>getAge
<span class="token punctuation">}</span>

subei<span class="token punctuation">.</span><span class="token function">age</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/51c257d0be05435895cee909a4d80ac2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>this是无法指向的，是默认指向调用它的那个对象的；</li></ul>
<blockquote>
<p>apply</p>
</blockquote>
<ul><li>在JS中可以控制this指向</li></ul>
<pre><code class="prism language-js"><span class="token keyword">function</span> <span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 今年-出生年</span>
    <span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> now <span class="token operator">-</span><span class="token keyword">this</span><span class="token punctuation">.</span>birth<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> subei <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">'可乐'</span><span class="token punctuation">,</span>
    birth<span class="token operator">:</span> <span class="token number">2002</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span>getAge
<span class="token punctuation">}</span>

<span class="token comment">// subei.age();</span>

<span class="token keyword">var</span> xiaosan <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">'xiaosan'</span><span class="token punctuation">,</span>
    birth<span class="token operator">:</span><span class="token number">2001</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span>getAge
<span class="token punctuation">}</span>

<span class="token function">getAge</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>xiaosan<span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre>
<p><img src="https://img-blog.csdnimg.cn/22d50aa02c2a48c6bc5c462266939d3b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h2>6.内部对象</h2>
<blockquote>
<p>标准对象</p>
</blockquote>
<pre><code class="prism language-js"><span class="token keyword">typeof</span> <span class="token number">123</span>
<span class="token keyword">typeof</span> <span class="token string">'123'</span>
<span class="token keyword">typeof</span> <span class="token boolean">true</span>
<span class="token keyword">typeof</span> <span class="token number">NaN</span>
<span class="token keyword">typeof</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token keyword">typeof</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">typeof</span> Math<span class="token punctuation">.</span>abs
<span class="token keyword">typeof</span> <span class="token keyword">undefined</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/0785dcc56d824d568c08c1f02e04d751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>1.Date</h3>
<pre><code class="prism language-js"><span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
now<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 年</span>
now<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 月</span>
now<span class="token punctuation">.</span><span class="token function">getData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 日</span>
now<span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 星期</span>
now<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 时</span>
now<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 分</span>
now<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 秒</span>

now<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 时间戳</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 时间戳转时间</span>
</code></pre>
<ul><li>转换</li></ul>
<pre><code class="prism language-js">now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">1625895623770</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
now<span class="token punctuation">.</span>toLocaleString<span class="token punctuation">;</span>    <span class="token comment">// 注意：调用是一个方式是，不是一个属性。</span>
now<span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
now<span class="token punctuation">.</span><span class="token function">toGMTString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/b6b533b701474786a3b5ad7995854434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h3>2.JSON</h3>
<blockquote>
<p>JSON是什么？</p>
<ul><li>早期，所有数据传输习惯使用XML文件！</li><li>JSON<strong>(</strong>JavaScript <strong>Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。</strong>。</li><li>简洁和清晰的层次结构使得JSON成为理想的数据交换语言。</li><li>易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。</li></ul>
</blockquote>
<ul><li>在javascript中，一切皆为对象，任何js支持的类型都可以用JSON表示。</li><li>格式：
<ul><li>对象都用{}</li><li>数组都用[]</li><li>所有的键值对，都是用key:value</li></ul> </li><li>JSON字符串和js对象转化</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> admin <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">"admin"</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span><span class="token number">31</span><span class="token punctuation">,</span>
    sex<span class="token operator">:</span><span class="token string">'M'</span>
<span class="token punctuation">}</span>

<span class="token comment">// 对象转化为JSON字符</span>
<span class="token keyword">var</span> jsonAdmin <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>admin<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// JSON字符转化为对象，参数为 JSON字符</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token string">'{"name":"subei","age":"22","sex":"W"}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre>
<p><img src="https://img-blog.csdnimg.cn/f5727a8557a24fac83afea63fac21c87.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>JSON和JS对象的区别：</li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token operator">:</span><span class="token string">'hello'</span><span class="token punctuation">,</span>b<span class="token operator">:</span><span class="token string">'javaScript'</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> json <span class="token operator">=</span> <span class="token string">'{"a":"hello","b":"javaScript"}'</span><span class="token punctuation">;</span>
</code></pre>
<h3>3.AJAX</h3>
<ul><li>原生的JS写法，xhr异步请求；</li><li>jQuery封装好的方法$(#name).ajax("")；</li><li>axios请求；</li></ul>
<h2>7.面向对象编程</h2>
<h3>1.什么是面向对象</h3>
<blockquote>
<p>javaScript、java、c#------面向对象；但是javaScript有些区别！</p>
</blockquote>
<ul><li> <p>类：模板</p> </li><li> <p>对象：具体实例</p> </li><li> <p>原型：</p> </li></ul>
<pre><code class="prism language-js"><span class="token keyword">var</span> Student <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">"subeiLY"</span><span class="token punctuation">,</span>
    age<span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">,</span>
    <span class="token function-variable function">run</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">" run...."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> xiaoming <span class="token operator">=</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span><span class="token string">"xiaoming"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> bird <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">fly</span><span class="token operator">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">" fly...."</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 原型对象</span>
<span class="token comment">// xiaoming.__proto__ = Student;</span>
xiaoming<span class="token punctuation">.</span>__proto__ <span class="token operator">=</span> bird<span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/ea5e5041b88a44728077ee89a9d89c1c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<p><img src="https://img-blog.csdnimg.cn/96ddec7da95a4b37992c4d995e92f543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<pre><code class="prism language-js"><span class="token comment">// ES6之前========================</span>
<span class="token keyword">function</span> <span class="token function">Student</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 给Student新增一个方法</span>
<span class="token class-name">Student</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<blockquote>
<p>Typora快速调整代码块格式快捷键：</p>
<ul><li>使用 <strong>‘Shift + Tab’</strong> 快速<strong>格式化</strong>代码。</li></ul>
</blockquote>
<blockquote>
<p>class集继承</p>
</blockquote>
<ul><li>class关键字，是在ES6引入的
<ol><li>定义一个类、属性、方法。</li></ol> </li></ul>
<pre><code class="prism language-js"><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token comment">// ES6之后========================</span>
    <span class="token comment">// 定义一个学生的类</span>
    <span class="token keyword">class</span> <span class="token class-name">Student</span><span class="token punctuation">{</span>
      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">var</span> xiaoming <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token string">"xiaoming"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> xiaohong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token string">"xiaohong"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre>
<pre><code>2. 继承
- 本质：查看对象原型。
</code></pre>
<pre><code class="prism language-js"><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token comment">// ES6之后========================</span>
    <span class="token comment">// 定义一个学生的类</span>
    <span class="token keyword">class</span> <span class="token class-name">Student</span><span class="token punctuation">{</span>
      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hello'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">class</span> <span class="token class-name">XStudent</span> <span class="token keyword">extends</span> <span class="token class-name">Student</span><span class="token punctuation">{</span>
      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>grade</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">super</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>grade <span class="token operator">=</span> grade<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token function">myGrade</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'2021级小学生入学'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">var</span> xiaoming <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Student</span><span class="token punctuation">(</span><span class="token string">"xiaoming"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> xiaohong <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XStudent</span><span class="token punctuation">(</span><span class="token string">"xiaohong"</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/cd7969b8625f418c891d1cb81fec5455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<blockquote>
<p>原型链：</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/9a4b2dfbd5f84825884f812e9c7fad51.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<h2>8.操作BOM对象</h2>
<blockquote>
<p>浏览器介绍</p>
</blockquote>
<p>javaScript和浏览器关系？</p>
<ul><li>JavaScript的诞生就是为了能在浏览器中运行！！！</li></ul>
<p>BOM：浏览器对象模型</p>
<ul><li>IE6~<strong>Edge</strong></li><li>Chrome</li><li>Vivaldi</li><li>FireFox</li><li>Opera</li></ul>
<p>第三方浏览器</p>
<ul><li>QQ浏览器</li><li>360浏览器</li></ul>
<blockquote>
<p>window</p>
</blockquote>
<pre><code class="prism language-js"><span class="token comment">// window代表浏览器窗口</span>
window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">undefined</span>
window<span class="token punctuation">.</span>innerHeight<span class="token punctuation">;</span>
<span class="token number">699</span>
window<span class="token punctuation">.</span>innerWidth
<span class="token number">158</span>
window<span class="token punctuation">.</span>outerHeight
<span class="token number">818</span>
window<span class="token punctuation">.</span>outerWidth
<span class="token number">1065</span>
</code></pre>
<blockquote>
<p>Navigator（不建议使用）</p>
</blockquote>
<pre><code class="prism language-js"><span class="token comment">// Navigator封装了浏览器的信息</span>
navigator<span class="token punctuation">.</span>appName

navigator<span class="token punctuation">.</span>appVersion

navigator<span class="token punctuation">.</span>userAgent

navigator<span class="token punctuation">.</span>platform
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/dd23c39ae10548edbde848ec1a8fcae2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>大多数时候，不会使用<code>navigator</code>对象，因为会被认为修改!</li><li>不建议使用这些属性来判断和编写代码。</li></ul>
<blockquote>
<p>screen：代表屏幕尺寸。</p>
</blockquote>
<pre><code class="prism language-js">screen<span class="token punctuation">.</span>width

screen<span class="token punctuation">.</span>height
</code></pre>
<blockquote>
<p>location(重要)：代表当前页面的URL 信息。</p>
</blockquote>
<pre><code class="prism language-js">location<span class="token punctuation">;</span>
<span class="token comment">// 设置新的地址</span>
location<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token string">'https://blog.csdn.net/m0_46153949'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/aca4849315d84dc89ffdf9349dd9c5b2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<blockquote>
<p>document（内容DOM）：document代表当前的页面，HTML DOM文档树。</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/bb4179b05d814b25bf9c3f951d34ffb0.png#pic_center" alt="在这里插入图片描述"></p>
<ul><li>获取具体的文档树节点。</li></ul>
<pre><code class="prism language-js"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span><span class="token constant">DOM</span><span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
      <span class="token keyword">var</span> dl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>dl id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>dt<span class="token operator">&gt;</span>java<span class="token operator">&lt;</span><span class="token operator">/</span>dt<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>dd<span class="token operator">&gt;</span>javaSE<span class="token operator">&lt;</span><span class="token operator">/</span>dd<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>dd<span class="token operator">&gt;</span>javaWeb<span class="token operator">&lt;</span><span class="token operator">/</span>dd<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>dd<span class="token operator">&gt;</span>javaEE<span class="token operator">&lt;</span><span class="token operator">/</span>dd<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>dl<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/2dc01312bf39473daf5b5a685a4afef6.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>获取cookie</li></ul>
<p><img src="https://img-blog.csdnimg.cn/2647419d89f941ceaa21eed4ad33a39e.png#pic_center" alt="在这里插入图片描述"></p>
<ul><li>劫持cookie原理：</li></ul>
<pre><code class="prism language-js"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"str.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>恶意人员获取本机cookie上传至其私人服务器 <span class="token operator">--</span><span class="token operator">&gt;</span>
</code></pre>
<ul><li>服务器端可以设置cookie为httpOnly。</li></ul>
<blockquote>
<p>history（不建议使用 ）：代表浏览器的历史记录。</p>
</blockquote>
<pre><code class="prism language-js">history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// 后退</span>
history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// 前进</span>
</code></pre>
<h2>9.DOM对象</h2>
<blockquote>
<p>核心</p>
</blockquote>
<p>浏览器网页就是一个Dom树形结构！</p>
<ul><li>更新：更新Dom节点</li><li>遍历Dom节点：得到Dom节点</li><li>删除：删除一个Dom节点</li><li>添加：添加一个新的节点</li></ul>
<p><mark>要操作一个Dom节点，就必须要先获得这个Dom节点</mark>。</p>
<blockquote>
<p>获得Dom节点</p>
</blockquote>
<pre><code class="prism language-js"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>Title<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>


<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"father"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>h1<span class="token operator">&gt;</span>标题一<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>p id<span class="token operator">=</span><span class="token string">"p1"</span><span class="token operator">&gt;</span>p1<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>p <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"p2"</span><span class="token operator">&gt;</span>p2<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>


<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token comment">// 对应CSS选择器</span>
    <span class="token keyword">var</span> h1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> p1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'p1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> p2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">'p2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> father <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'father'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">var</span> childerns <span class="token operator">=</span> father<span class="token punctuation">.</span>children<span class="token punctuation">;</span>    <span class="token comment">// 获取父节点下所有的子节点</span>
    father<span class="token punctuation">.</span>firstChild<span class="token punctuation">;</span>
    father<span class="token punctuation">.</span>lastChild<span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/4c3842116b4747c6824cc588ca36858d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>之后尽量都使用jQuery();</li></ul>
<blockquote>
<p>更新节点</p>
</blockquote>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    123
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> id1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'id1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<ul><li>操作
<ul><li><code>id1.innerText='456';</code> 修改文本的值。</li><li><code>id1.innerHTML='&lt;strong&gt;123&lt;/strong&gt;';</code> 可以解析HTML文本的标签。</li></ul> </li><li>操作CSS
<ul><li><code>id1.style.color = 'blue';</code> 修改文本颜色；</li><li><code>id1.style.fontSize='22px';</code> 修改文字大小；</li><li><code>id1.style.padding='2em';</code> 修改文本位置；</li></ul> </li></ul>
<p><img src="https://img-blog.csdnimg.cn/1d322aff3b984870ac082731bcad8267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<blockquote>
<p>删除节点</p>
<ul><li>删除节点的步骤：先获取父节点，再通过父节点删除自己。</li></ul>
</blockquote>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>father<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>标题一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>p1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>p1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>p2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>p2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> self <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'p1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> father <span class="token operator">=</span> p1<span class="token punctuation">.</span>parentElement<span class="token punctuation">;</span>
    father<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>self<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 删除是一个动态过程</span>
    father<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>father<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// father.removeChild(father.children);</span>
    <span class="token comment">// father.removeChild(father.children);</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<ul><li>注意：当<mark>删除多个节点</mark>时，children是在时刻变化的，删除节点的时候一定要注意。</li></ul>
<blockquote>
<p>插入节点</p>
</blockquote>
<ul><li>当获得了某个Dom节点，假设这个dom节点是空的，通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，就不能这么干了！会产生覆盖。</li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>se<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>javaSE<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>me<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>javaME<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ee<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>javaEE<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> js <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> list <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    list<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>js<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 追加到最后</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/77717152687a445b819f8ba89d4cd28c.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<blockquote>
<p>创建一个新的标签</p>
</blockquote>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>JavaScript<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>se<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>javaSE<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>me<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>javaME<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ee<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>javaEE<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> js <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 已经存在的节点</span>
    <span class="token keyword">var</span> list <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 通过JS创建一个新的节点</span>
    <span class="token keyword">var</span> newP <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">creatElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 创建一个p标签</span>
    newP<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">'newP'</span><span class="token punctuation">;</span>
    newP<span class="token punctuation">.</span>innerText <span class="token operator">=</span> <span class="token string">'Hello,subeiLY'</span><span class="token punctuation">;</span>
    <span class="token comment">// 创建一个标签节点</span>
    <span class="token keyword">var</span> myScript <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">creatElement</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    myScript<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span><span class="token string">'text/javascript'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 可以创建一个style标签</span>
    <span class="token keyword">var</span> myStyle <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">creatElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">// 创建了一个空style标签</span>
    myStyle<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">,</span><span class="token string">'text/css'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    myStyle<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'body{background-color:chartreuse;}'</span><span class="token punctuation">;</span>   <span class="token comment">// 设置标签内容</span>

    document<span class="token punctuation">.</span><span class="token function">getElementByTagName</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>myStyle<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<blockquote>
<p>insertBefore</p>
</blockquote>
<pre><code class="prism language-js"><span class="token keyword">var</span> ee <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'ee'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> js <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> list <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'list'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 要包含的节点.insertBefore(newNode,targetNode)</span>
list<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>js<span class="token punctuation">,</span>ee<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h2>10.操作表单</h2>
<blockquote>
<p>表单是什么？</p>
<ul><li>form-----DOM树</li></ul>
</blockquote>
<ul><li> <p>文本框----text</p> </li><li> <p>下拉框----select</p> </li><li> <p>单选框----radio</p> </li><li> <p>多选框----checkbox</p> </li><li> <p>隐藏域----hidden</p> </li><li> <p>密码框----password</p> </li><li> <p>…</p> </li><li> <p>表单的目的提交信息</p> </li></ul>
<blockquote>
<p>获得要提交的信息</p>
</blockquote>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>用户名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 多选框的值就是定义好的value --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>性别：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>man<span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>boy<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>男
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>sex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>woman<span class="token punctuation">"</span></span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>girl<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>女
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> input_text <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"username"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> boy_radio <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"boy"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> girl_radio <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"girl"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 得到输入框的值</span>
    <span class="token comment">// input_text.value;</span>
    <span class="token comment">// 修改输入框的值</span>
    input_text<span class="token punctuation">.</span>value<span class="token operator">=</span><span class="token string">"admin"</span><span class="token punctuation">;</span>

    <span class="token comment">// 对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值</span>
    boy_radio<span class="token punctuation">.</span>checked <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span><span class="token comment">// 赋值</span>
    <span class="token comment">// girl_radio.checked;// 查看返回的结果，是否为true，如果为true，则被选中。</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/ba2ededf7fc64ef2a1d5e3bc3bd0242e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>提交表单。md5加密密码，表单优化。</li></ul>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- MD5加密工具类 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> <span class="token punctuation">"</span>https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!--
      表达绑定提交事件
                οnsubmit= 绑定一个提交检测的函数，true;false
                将这个结果返回给表单，使用onsubmit接收
        --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://guozhivip.com/<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">onsubmit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>return aaa()<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>用户名：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>密码：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>md5-password<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!--绑定事件,onclick被点击--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">function</span> <span class="token function">aaa</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> username <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"username"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">var</span> pwd <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"password"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// console.log(uname.value);</span>
      <span class="token comment">// console.log(pwd.value);</span>
      <span class="token keyword">var</span> md5pwd <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"md5-password"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// MD5 算法</span>
      <span class="token comment">// pwd.value = md5(pwd,value);</span>
      md5pwd<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token function">mad5</span><span class="token punctuation">(</span>pwd<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// console.log(pwd.value);</span>
      <span class="token comment">// 可以校验判断表单内容，true就是通过提交，false就是阻止提交</span>
      <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<h2>11.jQuery</h2>
<p>JavaScript和jQuery的关系？</p>
<ul><li>jQuery库，里面存在大量的JavaScript函数</li></ul>
<blockquote>
<p>获取jQuery</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/6ad270ed05ba4205af0f88a689dbba87.png#pic_center" alt="在这里插入图片描述"></p>
<ul><li><strong>公式</strong>：$(selector).action()
<ul><li>jquery-3.5.1.js：官网获取地址，本地导入CDN。</li><li>直接引用在线CDN。</li></ul> </li></ul>
<p><img src="https://img-blog.csdnimg.cn/37ededb8a6364751bcf56f7bd5783550.png#pic_center" alt="在这里插入图片描述"></p>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lib/jquery-3.5.1.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--    &lt;script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"&gt;&lt;/script&gt;--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>test-jquery<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>点我<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// document.getElementById('id');</span>
    <span class="token comment">// 选择器为CSS选择器</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-jquery'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'hello,jQuery!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/be39f6c41579484e9b77f6f03f9fc933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<blockquote>
<p>选择器</p>
</blockquote>
<pre><code class="prism language-js"><span class="token comment">// 原生JS，选择器少，不方便记忆</span>
<span class="token comment">// 标签</span>
document<span class="token punctuation">.</span><span class="token function">getElementByTagName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// id</span>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// class</span>
document<span class="token punctuation">.</span><span class="token function">getElementByClassName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// jQuery CSS中的选择器它全部都能用！</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// 标签选择器</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#id1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// id选择器</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.class1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>click<span class="token punctuation">;</span>        <span class="token comment">// class选择器</span>
</code></pre>
<ul><li>文档工具站：http://jquery.cuishifeng.cn/</li></ul>
<blockquote>
<p>事件：鼠标事件、键盘事件，其他事件。</p>
</blockquote>
<pre><code class="prism language-js"><span class="token function">mousedown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span> <span class="token operator">--</span><span class="token operator">--</span>按下
<span class="token function">mouseenter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span>
<span class="token function">mouseleave</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span>
<span class="token function">mousemove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span> <span class="token operator">--</span><span class="token operator">--</span>移动
<span class="token function">mouseout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span>
<span class="token function">mouseover</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span>
<span class="token function">mouseup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">)</span>
</code></pre>
<pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
      <span class="token selector">#divMove</span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
            <span class="token property">border</span><span class="token punctuation">:</span> 1px solid deepskyblue<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!--获取当前鼠标坐标--&gt;</span>
mouse:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mouseMove<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>divMove<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    移动一下试试！
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// 加载完成后，响应事件</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#divMove'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mousemove</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#mouseMove'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">"x: "</span><span class="token operator">+</span>e<span class="token punctuation">.</span>pageX <span class="token operator">+</span> <span class="token string">",y: "</span><span class="token operator">+</span>e<span class="token punctuation">.</span>pageY<span class="token punctuation">)</span><span class="token punctuation">;</span>
       <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/73cc6974911a4c17b4aa5bc1f73b2c63.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<blockquote>
<p>操作DOM</p>
</blockquote>
<ul><li>节点文本操作</li></ul>
<pre><code class="prism language-js"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>Title<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"lib/jquery-3.5.1.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>ul id<span class="token operator">=</span><span class="token string">"test-ul"</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>li <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"js"</span><span class="token operator">&gt;</span>JavaScript<span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>li name<span class="token operator">=</span><span class="token string">"python"</span><span class="token operator">&gt;</span>Python<span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获得值</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token string">'设置值'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置值</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 获得值</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token string">'&lt;strong&gt;123&lt;/strong&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置值</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/d2765e63a1c74e9fae2f957874842257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>CSS的操作</li></ul>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"color"</span><span class="token punctuation">,</span><span class="token string">"red"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>元素的显示和隐藏；本质——display:none;</li></ul>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<ul><li>娱乐测试</li></ul>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#test-ul li'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/925d05df5a9b44d29cb79d53a415763b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2MTUzOTQ5,size_16,color_FFFFFF,t_70#pic_center" alt="在这里插入图片描述"></p>
<ul><li>未来ajax()；</li></ul>
<pre><code class="prism language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

$<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>url<span class="token operator">:</span><span class="token string">"test.html"</span><span class="token punctuation">,</span>context<span class="token operator">:</span>document<span class="token punctuation">.</span>body<span class="token punctuation">,</span><span class="token function-variable function">success</span><span class="token operator">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">"done"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h2>12.总结</h2>
<ul><li>jQuery小游戏网站：网站①，网站②。</li><li>jQuery小游戏——学生抽奖界面。</li></ul>
<pre><code class="prism language-js"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token constant">DOCTYPE</span> html<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>html<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>head<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>meta charset<span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>title<span class="token operator">&gt;</span>学生抽奖界面<span class="token operator">&lt;</span><span class="token operator">/</span>title<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
                        <span class="token operator">*</span><span class="token punctuation">{</span>
                                padding<span class="token operator">:</span> <span class="token number">0</span>px<span class="token punctuation">;</span>
                                margin<span class="token operator">:</span> <span class="token number">0</span>px<span class="token punctuation">;</span>
                                font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
                                font<span class="token operator">-</span>family<span class="token operator">:</span> <span class="token string">"宋体"</span><span class="token punctuation">;</span>
                                color<span class="token operator">:</span> #<span class="token number">00</span>ff00<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>shadow<span class="token operator">:</span> <span class="token number">7</span>px <span class="token number">10</span>px <span class="token number">1</span>px #<span class="token number">008800</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        body<span class="token punctuation">{</span>
                                background<span class="token operator">-</span>color<span class="token operator">:</span> #<span class="token number">000000</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>all<span class="token punctuation">{</span>
                                width<span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                                height<span class="token operator">:</span> <span class="token number">100</span>vh<span class="token punctuation">;</span>
                                perspective<span class="token operator">:</span> <span class="token number">500</span>px<span class="token punctuation">;</span>
                                overflow<span class="token operator">:</span> hidden<span class="token punctuation">;</span>
                                perspective<span class="token operator">:</span> <span class="token number">500</span>px<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>strs<span class="token punctuation">{</span>
                                display<span class="token operator">:</span> flex<span class="token punctuation">;</span>
                                width<span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                                height<span class="token operator">:</span> <span class="token number">100</span>vh<span class="token punctuation">;</span>
                                transition<span class="token operator">:</span> <span class="token number">3</span>s<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>strs div<span class="token punctuation">{</span>
                                width<span class="token operator">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
                                height<span class="token operator">:</span> <span class="token number">100</span>vh<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>cz<span class="token punctuation">{</span>
                                width<span class="token operator">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
                                height<span class="token operator">:</span> <span class="token number">10</span>vh<span class="token punctuation">;</span>
                                position<span class="token operator">:</span> absolute<span class="token punctuation">;</span>
                                top<span class="token operator">:</span> <span class="token number">90</span>vh<span class="token punctuation">;</span>
                                left<span class="token operator">:</span> <span class="token number">48</span><span class="token operator">%</span><span class="token punctuation">;</span>
                                font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">2</span>em<span class="token punctuation">;</span>
                                font<span class="token operator">-</span>weight<span class="token operator">:</span> <span class="token number">900</span><span class="token punctuation">;</span>
                                color<span class="token operator">:</span> red<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>shadow<span class="token operator">:</span> <span class="token number">1</span>px <span class="token number">1</span>px <span class="token number">1</span>px red<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>cz<span class="token operator">:</span>hover<span class="token punctuation">{</span>
                                color<span class="token operator">:</span> #<span class="token number">00</span>ff00<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>shadow<span class="token operator">:</span> <span class="token number">1</span>px <span class="token number">1</span>px <span class="token number">1</span>px #<span class="token number">008800</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>result<span class="token punctuation">{</span>
                                width<span class="token operator">:</span> <span class="token number">40</span><span class="token operator">%</span><span class="token punctuation">;</span>
                                height<span class="token operator">:</span> <span class="token number">80</span>px<span class="token punctuation">;</span>
                                position<span class="token operator">:</span> absolute<span class="token punctuation">;</span>
                                top<span class="token operator">:</span> <span class="token number">40</span>vh<span class="token punctuation">;</span>
                                left<span class="token operator">:</span> <span class="token number">30</span><span class="token operator">%</span><span class="token punctuation">;</span>
                                color<span class="token operator">:</span> #<span class="token number">00</span>ff00<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>shadow<span class="token operator">:</span> <span class="token number">1</span>px <span class="token number">1</span>px <span class="token number">1</span>px #<span class="token number">008800</span><span class="token punctuation">;</span>
                                font<span class="token operator">-</span>size<span class="token operator">:</span> <span class="token number">3</span>em<span class="token punctuation">;</span>
                                font<span class="token operator">-</span>weight<span class="token operator">:</span> <span class="token number">900</span><span class="token punctuation">;</span>
                                opacity<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
                                transition<span class="token operator">:</span> <span class="token number">2</span>s<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>rank<span class="token punctuation">{</span>
                                width<span class="token operator">:</span> <span class="token number">200</span>px<span class="token punctuation">;</span>
                                border<span class="token operator">:</span> <span class="token number">2</span>px solid #<span class="token number">00</span>FF00<span class="token punctuation">;</span>
                                position<span class="token operator">:</span> absolute<span class="token punctuation">;</span>
                                top<span class="token operator">:</span> <span class="token number">65</span>vh<span class="token punctuation">;</span>
                                left<span class="token operator">:</span> <span class="token number">85</span><span class="token operator">%</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>rank p<span class="token punctuation">{</span>
                                width<span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                                text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>shadow<span class="token operator">:</span> <span class="token number">0</span>px <span class="token number">0</span>px <span class="token number">0</span>px transparent<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>rank p<span class="token operator">:</span>hover<span class="token punctuation">{</span>
                                color<span class="token operator">:</span> yellow<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>update<span class="token punctuation">{</span>
                                width<span class="token operator">:</span> <span class="token number">500</span>px<span class="token punctuation">;</span>
                                height<span class="token operator">:</span> <span class="token number">30</span>vh<span class="token punctuation">;</span>
                                position<span class="token operator">:</span> absolute<span class="token punctuation">;</span>
                                top<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">35</span>vh<span class="token punctuation">;</span>
                                left<span class="token operator">:</span> <span class="token number">38</span><span class="token operator">%</span><span class="token punctuation">;</span>
                                background<span class="token operator">-</span>color<span class="token operator">:</span> black<span class="token punctuation">;</span>
                                border<span class="token operator">:</span> <span class="token number">1</span>px solid #<span class="token number">00</span>FF00<span class="token punctuation">;</span>
                                display<span class="token operator">:</span> flex<span class="token punctuation">;</span>
                                justify<span class="token operator">-</span>content<span class="token operator">:</span> center<span class="token punctuation">;</span>
                                transition<span class="token operator">:</span> <span class="token number">1</span>s<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token punctuation">.</span>tx<span class="token punctuation">{</span>
                                background<span class="token operator">:</span> transparent<span class="token punctuation">;</span>
                                margin<span class="token operator">-</span>top<span class="token operator">:</span> <span class="token number">15</span>vh<span class="token punctuation">;</span>
                                text<span class="token operator">-</span>align<span class="token operator">:</span> center<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                <span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>body<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"all"</span> ondblclick<span class="token operator">=</span><span class="token string">"update()"</span> onmousemove<span class="token operator">=</span><span class="token string">"moves(event)"</span><span class="token operator">&gt;</span>
                        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"strs"</span> id<span class="token operator">=</span><span class="token string">"strs"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
                        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"cz"</span> id<span class="token operator">=</span><span class="token string">"cz"</span> onclick<span class="token operator">=</span><span class="token string">"starts()"</span><span class="token operator">&gt;</span>开始<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
                        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"result"</span> id<span class="token operator">=</span><span class="token string">"result"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
                        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"rank"</span> id<span class="token operator">=</span><span class="token string">"rank"</span> onmousedown<span class="token operator">=</span><span class="token string">"rankdown()"</span> onmouseup<span class="token operator">=</span><span class="token string">"rankup()"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>历史记录<span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
                        <span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"update"</span> id<span class="token operator">=</span><span class="token string">"update"</span><span class="token operator">&gt;</span>
                                <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>
                                        <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> list<span class="token operator">=</span><span class="token string">"updatelist"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"tx"</span> id<span class="token operator">=</span><span class="token string">"tx"</span><span class="token operator">/</span><span class="token operator">&gt;</span>
                                        <span class="token operator">&lt;</span>datalist id<span class="token operator">=</span><span class="token string">"updatelist"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>datalist<span class="token operator">&gt;</span>
                                        <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"删除"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"tx"</span> onclick<span class="token operator">=</span><span class="token string">"update1()"</span><span class="token operator">/</span><span class="token operator">&gt;</span>
                                        <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"添加"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"tx"</span> onclick<span class="token operator">=</span><span class="token string">"update2()"</span><span class="token operator">/</span><span class="token operator">&gt;</span>
                                        <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"button"</span> value<span class="token operator">=</span><span class="token string">"取消"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"tx"</span> onclick<span class="token operator">=</span><span class="token string">"update3()"</span><span class="token operator">/</span><span class="token operator">&gt;</span>
                                <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
                        <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
                <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
                        <span class="token keyword">var</span> names <span class="token operator">=</span> <span class="token punctuation">[</span>
                                <span class="token string">"刘欣"</span><span class="token punctuation">,</span>
                                <span class="token string">"程贤政"</span><span class="token punctuation">,</span>
                                <span class="token string">"谢行"</span><span class="token punctuation">,</span>
                                <span class="token string">"邱思宇"</span><span class="token punctuation">,</span>
                                <span class="token string">"廖永胜"</span><span class="token punctuation">,</span>
                                <span class="token string">"刘东"</span><span class="token punctuation">,</span>
                                <span class="token string">"刘向鸿"</span><span class="token punctuation">,</span>
                                <span class="token string">"朱美琳"</span><span class="token punctuation">,</span>
                                <span class="token string">"刘佳"</span><span class="token punctuation">,</span>
                                <span class="token string">"董金杰"</span><span class="token punctuation">,</span>
                                <span class="token string">"张瑞"</span><span class="token punctuation">,</span>
                                <span class="token string">"赵文豪"</span><span class="token punctuation">,</span>
                                <span class="token string">"黄俊涛"</span><span class="token punctuation">,</span>
                                <span class="token string">"李小华"</span><span class="token punctuation">,</span>
                                <span class="token string">"黄建军"</span><span class="token punctuation">,</span>
                                <span class="token string">"余洋"</span><span class="token punctuation">,</span>
                                <span class="token string">"江琳"</span><span class="token punctuation">,</span>
                                <span class="token string">"张羽"</span><span class="token punctuation">,</span>
                                <span class="token string">"肖怀智"</span><span class="token punctuation">,</span>
                                <span class="token string">"王文宇"</span><span class="token punctuation">,</span>
                                <span class="token string">"向俊瑾"</span><span class="token punctuation">,</span>
                                <span class="token string">"秦渝均"</span><span class="token punctuation">,</span>
                                <span class="token string">"邓桂兰"</span><span class="token punctuation">,</span>
                                <span class="token string">"何洁"</span><span class="token punctuation">,</span>
                                <span class="token string">"陈广"</span><span class="token punctuation">,</span>
                                <span class="token string">"张士杰"</span><span class="token punctuation">,</span>
                                <span class="token string">"李丹"</span><span class="token punctuation">,</span>
                                <span class="token string">"肖晴"</span><span class="token punctuation">,</span>
                                <span class="token string">"张渝"</span><span class="token punctuation">,</span>
                                <span class="token string">"王子晓"</span><span class="token punctuation">,</span>
                                <span class="token string">"陆恋钰"</span><span class="token punctuation">,</span>
                                <span class="token string">"周兴怡"</span><span class="token punctuation">,</span>
                                <span class="token string">"黎雪彬"</span><span class="token punctuation">,</span>
                                <span class="token string">"刘琳"</span><span class="token punctuation">,</span>
                                <span class="token string">"杜涛"</span><span class="token punctuation">,</span>
                                <span class="token string">"米俊龙"</span><span class="token punctuation">,</span>
                                <span class="token string">"陈益巧"</span><span class="token punctuation">,</span>
                                <span class="token string">"周雪"</span><span class="token punctuation">,</span>
                                <span class="token string">"许小祥"</span><span class="token punctuation">,</span>
                                <span class="token string">"李林"</span><span class="token punctuation">,</span>
                                <span class="token string">"邓东华"</span><span class="token punctuation">,</span>
                                <span class="token string">"杨雪"</span>
                        <span class="token punctuation">]</span><span class="token punctuation">;</span>
                        <span class="token keyword">var</span> namess <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
                        <span class="token function">bg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token keyword">function</span> <span class="token function">bg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"strs"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span>
                                <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span><span class="token number">51</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                        <span class="token keyword">var</span> rdmnum <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span>names<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        <span class="token keyword">var</span> str <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span>
                                        str<span class="token operator">+=</span><span class="token string">'&lt;div&gt;'</span><span class="token punctuation">;</span>
                                        <span class="token keyword">var</span> rdmnum1 <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">;</span>
                                        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> h<span class="token operator">=</span>rdmnum1<span class="token punctuation">;</span>h<span class="token operator">&gt;</span><span class="token number">0</span><span class="token punctuation">;</span>h<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                                str<span class="token operator">+=</span><span class="token string">'&lt;font style="opacity: '</span><span class="token operator">+</span>h<span class="token operator">/</span><span class="token number">10</span><span class="token operator">+</span><span class="token string">';"&gt;'</span><span class="token operator">+</span>names<span class="token punctuation">[</span>rdmnum<span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'&lt;/font&gt;'</span><span class="token punctuation">;</span>
                                        <span class="token punctuation">}</span>
                                        str<span class="token operator">+=</span><span class="token string">'&lt;/div&gt;'</span><span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"strs"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">+=</span>str<span class="token punctuation">;</span>
                                <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">var</span> start1 <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
                        <span class="token keyword">var</span> num1 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
                        <span class="token keyword">function</span> <span class="token function">starts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                <span class="token keyword">if</span><span class="token punctuation">(</span>num1<span class="token operator">==</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                        start1<span class="token operator">=</span><span class="token function">setInterval</span><span class="token punctuation">(</span>bg<span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"cz"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token operator">=</span><span class="token string">"停止"</span><span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"strs"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform<span class="token operator">=</span><span class="token string">"translateZ(0px) translateY(0px)"</span><span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"result"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"0"</span><span class="token punctuation">;</span>
                                        num1<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>
                                <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
                                        <span class="token function">clearInterval</span><span class="token punctuation">(</span>start1<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"cz"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token operator">=</span><span class="token string">"开始"</span><span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"strs"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>transform<span class="token operator">=</span><span class="token string">"translateZ(450px) translateY(350px)"</span><span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"result"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>opacity<span class="token operator">=</span><span class="token string">"1"</span><span class="token punctuation">;</span>
                                        <span class="token keyword">var</span> rdmname <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"strs"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>childNodes<span class="token punctuation">[</span><span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>innerText<span class="token punctuation">;</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"result"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token operator">=</span><span class="token string">'恭喜'</span><span class="token operator">+</span>rdmname<span class="token operator">+</span><span class="token string">'同学中奖了'</span><span class="token punctuation">;</span>
                                        namess<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>rdmname<span class="token operator">+</span><span class="token string">' 中奖'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        <span class="token function">rank</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                        num1<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>
                                <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">rank</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"rank"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">'&lt;p&gt;历史记录&lt;/p&gt;'</span><span class="token punctuation">;</span>
                                <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>namess<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                        <span class="token keyword">if</span><span class="token punctuation">(</span>i<span class="token operator">==</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                                <span class="token keyword">break</span><span class="token punctuation">;</span>
                                        <span class="token punctuation">}</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"rank"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">+=</span><span class="token string">'&lt;p&gt;'</span><span class="token operator">+</span>namess<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'&lt;/p&gt;'</span><span class="token punctuation">;</span>
                                <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"update"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top<span class="token operator">=</span><span class="token string">"18vh"</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">updatelist</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"updatelist"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span>
                                <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>names<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                        document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"updatelist"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML<span class="token operator">+=</span><span class="token string">'&lt;option&gt;'</span><span class="token operator">+</span>names<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">'&lt;/option&gt;'</span>
                                <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span>
                        <span class="token function">updatelist</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token keyword">function</span> <span class="token function">update3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"update"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top<span class="token operator">=</span><span class="token string">"-35vh"</span><span class="token punctuation">;</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">update1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                <span class="token keyword">var</span> str <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                                <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span>names<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                        <span class="token keyword">if</span><span class="token punctuation">(</span>names<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">==</span>str<span class="token punctuation">)</span><span class="token punctuation">{</span>
                                                namess<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>names<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token operator">+</span><span class="token string">' 删除'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                                names<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>i<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                                <span class="token function">updatelist</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span>
                                                <span class="token function">rank</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                                <span class="token keyword">break</span><span class="token punctuation">;</span>
                                        <span class="token punctuation">}</span>
                                <span class="token punctuation">}</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">update2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                <span class="token keyword">var</span> str <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                                namess<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>str<span class="token operator">+</span><span class="token string">' 添加'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                names<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
                                <span class="token function">updatelist</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                <span class="token function">rank</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value<span class="token operator">=</span><span class="token string">''</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">var</span> x<span class="token punctuation">,</span>y<span class="token punctuation">,</span>start2<span class="token punctuation">;</span>
                        <span class="token keyword">function</span> <span class="token function">rankdown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                start2 <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span>rankmove<span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">rankup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                <span class="token function">clearInterval</span><span class="token punctuation">(</span>start2<span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">rankmove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"rank"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>left<span class="token operator">=</span>x<span class="token operator">-</span><span class="token number">20</span><span class="token operator">+</span><span class="token string">'px'</span><span class="token punctuation">;</span>
                                document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"rank"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>top<span class="token operator">=</span>y<span class="token operator">-</span><span class="token number">10</span><span class="token operator">+</span><span class="token string">'px'</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                        <span class="token keyword">function</span> <span class="token function">moves</span><span class="token punctuation">(</span><span class="token parameter">xy</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                                x<span class="token operator">=</span>xy<span class="token punctuation">.</span>clientX<span class="token punctuation">;</span>
                                y<span class="token operator">=</span>xy<span class="token punctuation">.</span>clientY<span class="token punctuation">;</span>
                        <span class="token punctuation">}</span>
                <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>html<span class="token operator">&gt;</span>
</code></pre>
<ul><li>如何巩固JS：看jQuery源码、游戏源码。</li><li>巩固HTML、CSS：扒网站。</li></ul>
               

</div>
<div id="MySignature" role="contentinfo">
    欢迎查阅<br><br>
来源：https://www.cnblogs.com/gh110/p/15153662.html

查看完整版本: 狂神说笔记——JavaScript快速入门11