前端——JavaScript
<p> JavaScript简称JS，是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的行为，用户交互及前后端的数据传输等。</p><p>JavaScript 组成</p>
<ol>
<li>核心语法 - ECMAScript (ES5-ES6) 规范了JavaScript的基本语法</li>
<li class="_mce_tagged_br">浏览器对象模型 -BOM Browser Object Model，提供了一系列操作浏览器的方法</li>
<li class="_mce_tagged_br">文档对象模型 -DOM Document Object Model ，提供了一系列操作的文档的方法</li>
</ol>
<p> 脚本可位于 HTML 的 <body> 或 <head> 部分中，通常的做法是把函数放入 <head> 部分中，或者放在页面底部。脚本代码必须包含在<script>标签中。</p>
<h1>JS使用</h1>
<p class="_mce_tagged_br">语法：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)"><!--</span><span style="color: rgba(0, 128, 0, 1)">实现点击按钮在控制台输出</span><span style="color: rgba(0, 128, 0, 1)">--></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">onclick</span><span style="color: rgba(0, 0, 255, 1)">="console.log('Hello World');"</span><span style="color: rgba(0, 0, 255, 1)">></span>点击<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h2>文档内嵌</h2>
<p> <script>标签可以书写在文档的任意位置（<head>或<body>），书写多次，一旦加载到script标签就会立即执行内部的JavaScript代码，因此不同的位置会影响代码最终的执行效果。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="text/javascript"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">
alert(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">网页警告框</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<h2>外部链接</h2>
<p> 创建外部的JavaScript文件 XX.js，在HTML文档中使用<script src=""></script>引入</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script </span><span style="color: rgba(255, 0, 0, 1)">src</span><span style="color: rgba(0, 0, 255, 1)">="index.JavaScript"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p>注意 ：<script></script>既可以实现内嵌 JavaScript 代码，也可以实现引入外部的 JavaScript 文件，但是只能二选一。</p>
<h1><strong><span style="font-family: 宋体">JavaScript 输入和输出语句</span></strong></h1>
<h2><span style="font-family: 宋体">显示数据</span></h2>
<p><span style="font-family: 宋体"><strong>window.alert()</strong>：弹出警告框</span></p>
<div class="cnblogs_code">
<pre><script><span style="color: rgba(0, 0, 0, 1)">
window.alert(</span>"内容"<span style="color: rgba(0, 0, 0, 1)">);
</span></script></pre>
</div>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1433301/201908/1433301-20190804104241152-487496551.png" alt="" width="251" height="74"></p>
<p><strong>confirm("你真的要关闭吗")</strong>;：“确定”返回True，“取消”返回flase。</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1433301/201908/1433301-20190804111552913-1831532400.png" alt="" width="339" height="101"></p>
<p><span style="font-family: 宋体"><strong>document.write()</strong>：在js中写入HTML标签，可以直接显示</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain">可以识别HTML标签，脚本代码可以在文档任何地方书写，如果是普通写入（不涉及事件），区分代码的书写位置插入</span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain">文档渲染结束后，<strong>再次执行此方法，会重写网页内容</strong></span></li>
</ul>
<div class="cnblogs_code">
<pre>document.write("<h1>这是一个标题</h1>"<span style="color: rgba(0, 0, 0, 1)">);
document.write(</span>"<p>这是一个段落。</p>");</pre>
</div>
<p><span style="font-family: 宋体"><strong>innerHTML</strong>：写入到HTML元素</span></p>
<div class="cnblogs_code">
<pre>x=document.getElementById("demo");<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">查找元素</span>
x.innerHTML="Hello JavaScript"; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">改变内容</span></pre>
</div>
<p><span style="font-family: 宋体"><strong>console.log()</strong>：控制台输出，多用于代码调试</span></p>
<p style="text-align: center"><span style="font-family: 宋体"><img src="https://img2018.cnblogs.com/blog/1433301/201908/1433301-20190804104312387-1767373780.png" alt="" width="232" height="75"></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">prompt("请输入一个数值："); 在网页弹框接收用户输入，返回用户输入的内容</span></p>
<p class="md-end-block md-p" style="text-align: center"><span class="md-plain" style="font-family: 宋体"><img src="https://img2018.cnblogs.com/blog/1433301/201908/1433301-20190804104134941-484711218.png" alt="" width="226" height="89"></span></p>
<h1 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">基础语法</span></h1>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"> JavaScript是由语句组成,语句由关键字，变量，常量，运算符，方法组成。</span><span class="md-plain" style="font-family: 宋体"><strong>分号“；”作为语句结束的标志</strong>，也可以省略，但是不写分号，浏览器会自动添加，会增加浏览器的运行压力。</span><span class="md-plain" style="font-family: 宋体">JavaScript严格区分大小写；</span><span class="md-plain" style="font-family: 宋体"><strong>注释语法</strong><span class="md-softbreak"> <span class="md-plain"><strong>单行注释使用 //</strong><span class="md-softbreak"> ，<span class="md-plain"><strong>多行注释使用 /* */</strong>。</span></span></span></span></span></p>
<h2 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">变量</span></h2>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">作用 : 用于存储程序运行过程中可动态修改的数据</span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">语法 : 使用关键var声明,自定义变量名</span></p>
<ul>
<li><span style="font-family: 宋体">var a; //变量声明</span></li>
<li><span style="font-family: 宋体">a = 100; //变量赋值</span></li>
<li><span style="font-family: 宋体">var b = 200; //声明并赋值</span></li>
<li><span style="font-family: 宋体">var m,n,k; //同时声明多个变量</span></li>
<li><span style="font-family: 宋体">var j = 10,c = 20; //同时声明并赋值多个变量</span></li>
<li><span style="font-family: 宋体">person={fistName:"John"} // <strong>对象</strong>赋值</span></li>
</ul>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">命名规范 :</span></p>
<ol>
<li><span style="font-family: 宋体">变量名，常量名，函数名，方法名由数字，字母，下划线，$组成，禁止以数字开头</span></li>
<li class="_mce_tagged_br"><span style="font-family: 宋体">禁止与关键字冲突</span></li>
<li class="_mce_tagged_br"><strong><span style="font-family: 宋体">变量名严格区分大小写</span></strong></li>
<li class="_mce_tagged_br"><span style="font-family: 宋体">变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"</span></li>
</ol>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">使用注意 :</span></p>
<ol>
<li class="md-end-block md-p"><span style="font-family: 宋体"><span class="md-plain">变量如果</span>省略var关键字,并且未赋值,直接访问会报错</span></li>
<li class="_mce_tagged_br"><span style="font-family: 宋体">变量使用var关键字声明但未赋值,变量初始值为undefined</span></li>
<li class="md-end-block md-p _mce_tagged_br"><span style="font-family: 宋体">变量省略var关键字声明,已被赋值<span class="md-plain">,可正常使用.影响变量作用域</span></span></li>
</ol>
<h2 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">常量</span></h2>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"> 存储一经定义就无法修改的数据，</span><span style="font-family: 宋体">常量一经定义,不能修改,强制修改会报错，命名规范同变量,为了区分变量,常量名采用全大写字母</span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">语法 : 必须在声明的同时赋值</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> PI = 3.14;</pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">操作小数位<span class="md-softbreak"> <span class="md-plain">toFixed(n); 保留小数点后 n 位<span class="md-softbreak"> <span class="md-plain">使用：</span></span></span></span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> num = 3.1415926<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">保留当前变量小数点后两位</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> res = num.toFixed(2); </pre>
</div>
<h2 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">数据类型</span></h2>
<p class="md-end-block md-p"><strong><span class="md-plain" style="font-family: 宋体">整数</span></strong></p>
<p class="md-end-block md-p"><span style="font-family: 宋体"><span class="md-plain">十进制表示 </span>var a = 100;</span></p>
<p><span style="font-family: 宋体">八进制表示 以0为前缀 var b = 021; //结果为十进制的 17</span></p>
<p><span style="font-family: 宋体">使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出</span></p>
<p><strong><span style="font-family: 宋体">小数</span></strong></p>
<p><span style="font-family: 宋体">小数点表示 </span><span style="font-family: 宋体">var m = 1.2345;</span></p>
<p class="_mce_tagged_br"><span style="font-family: 宋体">科学计数法 例 : 1.5e3 e表示10为底,e后面的数值表示10的次方数 1.5e3 等价于 1.5 * 10(3)</span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>字符串 string</strong></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span class="md-softbreak"><span class="md-plain"> 由一个或多个字符组成,使用""或''表示，每一位字符都有对应的Unicode编码</span></span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> s = "abc"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> s1 = "张三"<span style="color: rgba(0, 0, 0, 1)">;
consloe.log(s.length) </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 计算字符串长度</span></pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>布尔类型 boolean</strong></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span class="md-softbreak"><span class="md-plain"> 只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0</span></span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> isSave = <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> isChecked = <span style="color: rgba(0, 0, 255, 1)">false</span>;</pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>undefined </strong><span class="md-softbreak"> <span class="md-plain"><strong>特殊值</strong><br></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span class="md-softbreak"><span class="md-plain"> 变量声明未赋值时显示undefined</span></span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> a;
console.log(a);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">undefined</span></pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>null 空类型</strong></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span class="md-softbreak"><span class="md-plain"> 定义对象引用时使用null，表示对象为空，null 和 undefined 的值相等，但类型不等。</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>typeof</strong>检测变量数据类型</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">typeof</span> undefined <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> undefined</span>
<span style="color: rgba(0, 0, 255, 1)">typeof</span> <span style="color: rgba(0, 0, 255, 1)">null</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> object</span>
<span style="color: rgba(0, 0, 255, 1)">null</span> === undefined <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> false</span>
<span style="color: rgba(0, 0, 255, 1)">null</span> == undefined <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> true</span></pre>
</div>
<h2 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">数据类型转换</span></h2>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">不同类型的数据参与运算时,需要转换类型</span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>转换字符串类型</strong> </span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span class="md-softbreak"><span class="md-plain">toString()<span class="md-softbreak"> <span class="md-plain">返回转换后的字符串</span></span></span></span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = 100<span style="color: rgba(0, 0, 0, 1)">;
a </span>= a.toString(); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">"100"</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> b = <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">;
b </span>= b.toString(); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">"true"</span></pre>
</div>
<p class="md-end-block md-p"><strong><span class="md-plain" style="font-family: 宋体">转换Number类型</span></strong></p>
<p><span style="font-family: 宋体"> Number(param) 如果是数字,返回number数字，如果不是，返回NaN</span></p>
<p><span style="font-family: 宋体"> isNan(num) 如果是数字false，否则返回true。</span></p>
<p><span style="font-family: 宋体"><strong>parseInt(param)</strong> <strong>参数为要解析的数据 </strong></span></p>
<p><span style="font-family: 宋体">作用 : 从数据中解析整数值</span></p>
<ol>
<li><span style="font-family: 宋体">如果参数为非字符串类型,会自动转成字符串 </span></li>
<li><span style="font-family: 宋体">从左向右依次对每一位字符转number，转换失败则停止向后解析，返回结果</span></li>
</ol>
<p><strong><span style="font-family: 宋体">parseFloat(param)</span></strong><span style="font-family: 宋体">：</span><span style="font-family: 宋体">提取number值，包含整数和小数部分</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">运算符</span></h2>
<p><strong><span class="md-plain" style="font-family: 宋体">转义字符</span></strong></p>
<p><span class="md-plain" style="font-family: 宋体">使用反斜杠(\)来进行转义，转义字符的具体算法同C语言类似。</span></p>
<p><span class="md-plain" style="font-family: 宋体">\' 单引号</span></p>
<p><span class="md-plain" style="font-family: 宋体">\n 换行</span></p>
<p><strong><span style="font-family: 宋体">赋值运算符 </span></strong></p>
<p><span style="font-family: 宋体">= 将右边的值赋给左边变量</span></p>
<p><strong><span style="font-family: 宋体">算数运算符</span></strong></p>
<p><span style="font-family: 宋体">+ - * / % 加 减 乘 除 取余</span></p>
<p><strong><span style="font-family: 宋体">符合运算符</span></strong></p>
<p><span style="font-family: 宋体">+= -= *= /= %=</span></p>
<p><strong><span style="font-family: 宋体">自增或自减运算符</span></strong></p>
<p><span style="font-family: 宋体">++ 变量的自增，在自身基础上进行 +1</span></p>
<p><span style="font-family: 宋体">-- 变量的自减，在自身基础上进行 -1</span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体; color: rgba(128, 128, 128, 1)">注意：</span></p>
<p><span style="font-family: 宋体; color: rgba(128, 128, 128, 1)">自增或自减运算符在单独与变量结合时，放前和放后没有区别</span></p>
<p><span style="font-family: 宋体; color: rgba(128, 128, 128, 1)">如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/--,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / --</span></p>
<p class="md-end-block md-heading"><strong><span class="md-plain" style="font-family: 宋体">关系运算符/比较运算符</span></strong></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span style="font-family: 宋体">> < </span><br><span style="font-family: 宋体">>= <=</span><br><span style="font-family: 宋体">==(相等) !=(相等)</span><br><span style="font-family: 宋体">===(全等) !==(不全等)</span></pre>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false</span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">使用</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">字符串与字符串之间的比较<span class="md-softbreak"> <span class="md-plain">依次比较每位字符的Unicode码，只要某位字符比较出结果，就返回最终结果</span></span></span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain" style="font-family: 宋体">其他情况<span class="md-softbreak"> <span class="md-plain">一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false</span></span></span></li>
</ul>
<p class="md-end-block md-p"><strong><span class="md-plain" style="font-family: 宋体">相等与全等</span></strong></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">相等 : 不考虑数据类型，只做值的比较(包含自动类型转换)</span></p>
<p class="md-end-block md-p _mce_tagged_br"><span class="md-plain" style="font-family: 宋体">全等 : 不会进行数据类型转换，要求数据类型一致并且值相等才判断全等</span></p>
<h4 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">逻辑运算符</span></h4>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>&& 逻辑与</strong><span class="md-softbreak"> ：<span class="md-plain">表达式同时成立，最终结果才为true；1则1</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>|| 逻辑或</strong><span class="md-softbreak"> ：<span class="md-plain">表达式中只要有一个成立,最终结果即为true; 有1则1</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><strong>! 逻辑非</strong><span class="md-softbreak"> ：<span class="md-plain">对已有表达式的结果取反<span class="md-softbreak"> <span class="md-plain">注意 : 除零值以外，所有值都为真</span></span></span></span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">三目运算符</span></h4>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">语法 :</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span style="font-family: 宋体">表达式1 ? 表达式2 : 表达式3;</span></pre>
<p class="md-end-block md-p md-focus"><span class="md-plain" style="font-family: 宋体">过程：<span class="md-softbreak"><span class="md-tab"><span class="md-plain">判断表达式1是否成立，返回布尔值<span class="md-softbreak"> <span class="md-tab"> <span class="md-plain">如果表达式1成立，执行表达式2；<span class="md-softbreak"><span class="md-tab"><span class="md-plain">如果表达式1不成立，执行表达式3；</span></span></span></span></span></span></span></span></span></span></p>
<h1 class="md-end-block md-heading"><span class="md-plain">JS对象</span></h1>
<p class="md-end-block md-p"><span class="md-plain"> 对象是由属性和方法组成的,使用点语法访问，对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> person={firstname:"John", lastname:"Doe", id:5566<span style="color: rgba(0, 0, 0, 1)">};
</span><span style="color: rgba(0, 0, 255, 1)">var</span> person =<span style="color: rgba(0, 0, 0, 1)"> {
firstName:</span>"John"<span style="color: rgba(0, 0, 0, 1)">,
lastName:</span>"Doe"<span style="color: rgba(0, 0, 0, 1)">,
age:</span>50<span style="color: rgba(0, 0, 0, 1)">,
eyeColor:</span>"blue"<span style="color: rgba(0, 0, 0, 1)">
};</span></pre>
</div>
<p>对象属性有两种寻址方式：</p>
<div class="cnblogs_code">
<pre>name=<span style="color: rgba(0, 0, 0, 1)">person.lastname;
name</span>=person["lastname"];</pre>
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">数组 对象</span></h2>
<p> 数组由 <strong>综括号[ ]</strong> 包围。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> cars=<span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Array();
cars[</span>0]="Saab"<span style="color: rgba(0, 0, 0, 1)">;
cars[</span>1]="Volvo"<span style="color: rgba(0, 0, 0, 1)">;
cars[</span>2]="BMW"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 或者这样表示</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> cars=<span style="color: rgba(0, 0, 255, 1)">new</span> Array("Saab","Volvo","BMW"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> cars=["Saab","Volvo","BMW"<span style="color: rgba(0, 0, 0, 1)">];
</span><span style="color: rgba(0, 0, 255, 1)">var</span> aee2=; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">一维数组</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> arr2 = [,,]; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">二维数组</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> r1 = arr2; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">内层数组</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> num = r1; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">值 1</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> num2 = arr2;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">简写</span></pre>
</div>
<p class="md-end-block md-heading"><span class="md-plain">特点</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain">数组用于存储若干数据，自动为每位数据分配下标，从0开始</span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain">数组中的元素不限数据类型，长度可以动态调整</span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain">动态操作数组元素：根据元素下标读取或修改数组元素，arr</span></li>
</ul>
<p class="md-end-block md-p"><span class="md-plain">属性 : <strong>length</strong> 表示数组长度,可读可写</span></p>
<p class="md-end-block md-p"><span class="md-plain">方法 :</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain"><strong>push(data)：</strong><span class="md-softbreak"><span class="md-plain">在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开<span class="md-softbreak"> <span class="md-plain">返回添加之后的数组长度</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>pop()：</strong><span class="md-softbreak"><span class="md-plain">移除末尾元素<span class="md-softbreak"> <span class="md-plain">返回被移除的元素</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>unshift(data)：</strong><span class="md-softbreak"><span class="md-plain">在数组的头部添加一个或多个元素<span class="md-softbreak"> <span class="md-plain">返回添加之后的数组长度</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>shift()：</strong><span class="md-softbreak"><span class="md-plain">移除数组的第一个元素<span class="md-softbreak"> <span class="md-plain">返回被移除的元素</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>toString()：</strong><span class="md-softbreak"><span class="md-plain">将数组转换成字符串类型<span class="md-softbreak"> <span class="md-plain">返回字符串结果</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>join(param</strong>)：<span class="md-softbreak"><span class="md-plain">将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接<span class="md-softbreak"> <span class="md-plain">返回字符串</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>reverse()：</strong><span class="md-softbreak"><span class="md-plain"><strong>倒序排列</strong><span class="md-softbreak"> <span class="md-plain">返回重排的数组,注意该方法直接修改原数组的结构</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>sort()：</strong><span class="md-softbreak"><span class="md-plain">默认按照Unicode编码<strong>升序排列</strong><span class="md-softbreak"> <span class="md-plain">返回重排后的数组,直接修改原有数组，sortASC()自定义升序，sortDESC()自定义降序。</span></span></span></span></span></li>
</ul>
<h2>字符串对象 String </h2>
<p><span class="md-plain">字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始。</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str = "100"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> str2 = <span style="color: rgba(0, 0, 255, 1)">new</span> String("hello");</pre>
</div>
<p class="md-end-block md-p"><span class="md-plain">方法</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain"><strong>length</strong>：获取字符串长度</span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>toUpperCase()</strong> ：转大写字母，返回转换后的字符串,不影响原始字符串</span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><strong>toLowerCase()</strong> ：转小写字母，<span class="md-softbreak"><span class="md-plain">返回转换后的字符串,不影响原始字符串</span></span></span></span></span></span></span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><strong>charAt(index)</strong><span class="md-tab"> ：<span class="md-plain">获取指定下标的字符</span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-tab"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><strong>charCodeAt(index)</strong> ：获取指定下标的字符编码。<span class="md-softbreak"><span class="md-plain">参数可以省略，默认为0</span></span></span></span></span></span></span></span></span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain"><span class="md-plain">获取指定字符的下标</span></span>
<ul class="ul-list" data-mark="+">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain"><strong>indexOf(str,fromIndex)</strong><span class="md-softbreak"> <span class="md-plain">: 从前向后查询，找到即返回</span></span></span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain">参数 :<span class="md-softbreak"> <span class="md-plain">str 表示要查找的字符串<span class="md-softbreak">，<span class="md-plain">fromIndex 表示起始下标,默认为0</span></span></span></span></span></span></span></span></span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain">返回 :<span class="md-softbreak"> <span class="md-plain">返回指定字符的下标,查找失败返回-1</span></span></span></span></span></span></span></span></span></span></span></span></span></li>
</ul>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain"><strong>lastIndexOf(str,fromIndex)</strong><span class="md-softbreak"> <span class="md-plain">: 获取指定字符最后一次出现的下标,从后向前查找,找到即返回</span></span></span></p>
<ul>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain">参数 :<span class="md-softbreak"> <span class="md-plain">str 必填,表示要查找的内容<span class="md-softbreak"> <span class="md-plain">fromIndex<span class="md-tab"> <span class="md-plain">选填，指定起始下标</span></span></span></span></span></span></span></span></span></span></span></p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain"><strong>substring(startIndex,endIndex)</strong> 截取字符串，<span class="md-plain">根据指定的下标范围截取字符串，</span></span></p>
<ul>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-softbreak"><span class="md-plain">参数 :<span class="md-softbreak"> <span class="md-plain">startIndex<span class="md-tab"> <span class="md-plain">表示起始下标<span class="md-softbreak"> <span class="md-plain">endIndex<span class="md-tab"> <span class="md-plain">表示结束下标，可以省略，省略表示截止末尾，<strong>取不到最后一位,[min,max)</strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
</li>
</ul>
</li>
<li><strong>substr(startIndex,len)</strong>：根据下标截取指定长度的字符串</li>
<li class="_mce_tagged_br"><strong>split(param)</strong>：将字符串按照指定的字符进行分割，以数组形式返回分割结果
<ul>
<li class="_mce_tagged_br">参数 : 指定分隔符，必须是字符串中存在的字符，如果字符串中不存在，分割失败，仍然返回数组</li>
</ul>
</li>
</ul>
<h2 class="_mce_tagged_br">正则表达式对象 RegExp</h2>
<p>借助正则表达式实现字符串中固定格式内容的查找和替换 </p>
<p>var reg1 = /正则表达式/修饰符;</p>
<p>修饰符 : </p>
<ul>
<li>i : ignorecase 忽略大小写 </li>
<li>g : 全局匹配（查找所有匹配而非在找到第一个匹配后停止）。</li>
<li>m：多行匹配</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> reg1 = /微软/<span style="color: rgba(0, 0, 0, 1)">ig;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> reg2 = <span style="color: rgba(0, 0, 255, 1)">new</span> RegExp('正则表达式','修饰符'); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">正则表达式对象可以接收一个变量</span></pre>
</div>
<p class="md-end-block md-p"><span class="md-plain">字符串方法 :</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain"><strong>lastIndex</strong> : 可读可写，表示下一次匹配的起始索引</span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>test(str)</strong>：验证字符串中是否存在满足正则匹配模式的内容，存在则返回true，<span class="md-plain">不存在返回false</span></span></li>
<li class="md-end-block md-p"><span class="md-plain"><strong>search(regExp/subStr)</strong>：检索指定的字符串，返回检索到的字符串的起始索引。</span></li>
<li class="md-end-block md-p"><span class="md-plain"><span class="md-plain"><span class="md-plain"><strong>match(regExp/subStr)</strong>：<span class="md-softbreak"><span class="md-plain">查找字符串中满足正则格式或满足指定字符串的内容<span class="md-softbreak"> </span></span></span></span></span></span>
<ul>
<li class="md-end-block md-p"><span class="md-plain">返回 : 数组,存放查找结果</span></li>
</ul>
</li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain"><span class="md-plain"><strong>replace(regExp/subStr,newStr)</strong>：<span class="md-softbreak"><span class="md-plain">根据正则表达式或字符串查找相关内容并进行替换<span class="md-softbreak"> </span></span></span></span></span></li>
<ul>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain">返回 : 替换后的字符串,不影响原始字符串。</span></li>
</ul>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> str="efbabcbe"<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> reg2=<span style="color: rgba(0, 0, 255, 1)">new</span> RegExp("a","ig");<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">使用正则表达式来匹配字符 "a"</span>
console.log(reg2.test(str)); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开始匹配 true</span>
console.log(reg2.lastIndex); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">查看下一次匹配的索引位置 4</span>
reg2.lastIndex=0; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">重置起始的索引位置</span>
console.log(reg2.test(str)); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">第二次查询 true</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">search</span>
console.log(str.search(f/i)) // 1
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> match和replace的用法案例var arr=str.match(/b/ig);</span>
console.log(arr.toString()); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> b,b,b</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> str2=str.replace(reg,"i"); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将查询后得到的a替换成i</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">输出替换后的str值</span>
console.log(str); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> efbabcbe</span>
console.log(str2); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> efiaicie</span></pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="color: rgba(136, 136, 136, 1)">注意 ：</span></p>
<ol>
<li class="md-end-block md-p"><span class="md-plain" style="color: rgba(136, 136, 136, 1)">默认情况下，正则表达式对象不能重复调用方法，<span class="md-softbreak"> <span class="md-plain">如果重复调用，结果会出错：<span class="md-softbreak"> <span class="md-plain">由于 lastIndex 保存再一次匹配的起始下标，<span class="md-softbreak"> <span class="md-plain">重复调用时，不能保证每次都从下标0开始<span class="md-softbreak"> <span class="md-plain">验证，可以手动调整 lastIndex 为 0。</span></span></span></span></span></span></span></span></span></li>
<li class="md-end-block md-p"><span class="md-plain" style="color: rgba(136, 136, 136, 1)">只有正则对象设置全局匹配 g ，该属性才起作用。</span></li>
</ol>
<h2>Math 对象</h2>
<p>Math对象主要提供一些列数学运算的方法</p>
<p><strong>圆周率 </strong>: Math.PI</p>
<p class="_mce_tagged_br"><strong>自然对数 </strong>: Math.E</p>
<p><strong>Math.random()</strong>; 生成0-1之间的随机数</p>
<p class="_mce_tagged_br"><strong>Math.ceil(x);</strong> 对x向上取整,忽略小数位,整数位+1</p>
<p class="_mce_tagged_br"><strong>Math.floor(x);</strong> 对x向下取整,舍弃小数位,保留整数位</p>
<p class="_mce_tagged_br"><strong>Math.round(x);</strong> 对x四舍五入取整数</p>
<h2>日期对象</h2>
<ul>
<li>getTime() 读取或设置当前时间的毫秒数：</li>
<li>getFullYear() 获取年</li>
<li class="_mce_tagged_br">getMonth() 获取月</li>
<li class="_mce_tagged_br">getDate() 获取日</li>
<li class="_mce_tagged_br">getHours() 获取小时</li>
<li class="_mce_tagged_br">getMinutes() 获取分钟</li>
<li class="_mce_tagged_br">getSeconds() 获取秒数</li>
<li class="_mce_tagged_br">getTime() 获取GUI时间</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义一个日期获取当前时间</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> dt=<span style="color: rgba(0, 0, 255, 1)">new</span> Date();<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">参数为空表示当前日期</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">获取年</span>
console.log(dt.getFullYear()); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">2019</span>
console.log(dt.getMonth()+1);<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">8</span>
console.log(dt.getDate());<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">6</span>
console.log(dt.getHours()); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">23</span>
console.log(dt.getMinutes());<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">53</span>
console.log(dt.getSeconds());<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">57</span>
console.log(dt.getTime());<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">1565106837275</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">国庆节日</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> dt2=<span style="color: rgba(0, 0, 255, 1)">new</span> Date("2019/10/01 00:00:00"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> num=dt2-dt;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">两时间相减，得毫秒数</span>
console.log(num/1000/3600/24);</pre>
</div>
<h1 class="md-end-block md-heading"><span class="md-plain md-expand" style="font-family: 宋体">流程控制</span></h1>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">控制代码的执行顺序，</span><span class="md-plain" style="font-family: 宋体">在一个ID中尽量不能取ID</span></p>
<h2><span style="font-family: 宋体">if结构</span></h2>
<p><strong><span style="font-family: 宋体">简单的if语句</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(条件表达式){
<span style="color: rgba(0, 128, 0, 1)">//表达式成立时执行的代码段</span>
}</span> </pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体; color: rgba(136, 136, 136, 1)">注意 : </span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体; color: rgba(136, 136, 136, 1)">除已0、0.0、空字符串、undefined、NaN、null是false是以外,其他值都为true。</span></li>
<li class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体; color: rgba(136, 136, 136, 1)"><span class="md-softbreak"><span class="md-tab"><span class="md-plain">{ }可以省略,一旦省略，if语句只控制其后的第一行代码,只有当if语句只有一句话的时候才能够省略。</span></span></span></span></li>
</ul>
<p class="md-end-block md-p"><strong><span class="md-plain" style="font-family: 宋体">if - else 语句</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(条件表达式){
</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)">条件成立时执行</span>
}<br><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)">条件不成立时选择执行</span>
}</pre>
</div>
<p class="md-end-block md-p"><strong><span class="md-plain" style="font-family: 宋体">if-else if-else 语句</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(条件1){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">条件1成立时执行</span>
}<br><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(条件2){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">条件2成立时执行</span>
}<br><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(条件3){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">条件3成立时执行</span>
}<br>...<br><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">条件不成立时执行</span>
}</pre>
</div>
<p class="md-end-block md-heading"><strong><span class="md-plain" style="font-family: 宋体">switch 语句</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">switch</span><span style="color: rgba(0, 0, 0, 1)">(value){
</span><span style="color: rgba(0, 0, 255, 1)">case</span><span style="color: rgba(0, 0, 0, 1)"> 值1 :
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">value与值1匹配全等时,执行的代码段</span>
<span style="color: rgba(0, 0, 255, 1)">break</span>; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">结束匹配</span>
<span style="color: rgba(0, 0, 255, 1)">case</span><span style="color: rgba(0, 0, 0, 1)"> 值2 :
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">value与值2匹配全等时,执行的代码段</span>
<span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">case</span><span style="color: rgba(0, 0, 0, 1)"> 值3 :
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">value与值3匹配全等时,执行的代码段</span>
<span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)">:
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">所有case匹配失败后默认执行的语句</span>
<span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
<ol>
<li><span style="font-family: 宋体">switch语句用于值的匹配,case用于列出所有可能的值;只有switch()表达式的值与case的值匹配全等时,才会执行case对应的代码段</span></li>
<li><span style="font-family: 宋体">break用于结束匹配,不再向后执行;可以省略,break一旦省略,会从当前匹配到的case开始,向后执行所有的代码语句,直至结束或碰到break跳出</span></li>
<li><span style="font-family: 宋体">default用来表示所有case都匹配失败的情况,一般写在末尾,做默认操作</span></li>
</ol>
<h2 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">循环结构</span></h2>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span class="md-softbreak"><span class="md-plain">根据条件,重复执行某段代码</span></span></span></p>
<p class="md-end-block md-p"><strong><span class="md-plain">for循环</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)">(定义循环变量;循环条件;更新循环变量){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 循环体;</span>
}</pre>
</div>
<p class="md-end-block md-p md-focus"><span class="md-plain">循环控制 :</span></p>
<ol>
<li class="md-end-block md-p md-focus"><span class="md-plain">break 强制结束循环</span></li>
<li class="md-end-block md-p md-focus"><span class="md-plain">continue 结束当次循环,开始下一次循环</span></li>
</ol>
<p><strong><span class="md-plain">for in 循环</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> person={fname:"John",lname:"Doe",age:25<span style="color: rgba(0, 0, 0, 1)">};
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (x <span style="color: rgba(0, 0, 255, 1)">in</span> person)<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> x 为属性名</span>
<span style="color: rgba(0, 0, 0, 1)">{
txt</span>=txt +<span style="color: rgba(0, 0, 0, 1)"> person;
}</span></pre>
</div>
<p class="md-end-block md-p"><strong><span class="md-plain" style="font-family: 宋体">while循环</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">while</span><span style="color: rgba(0, 0, 0, 1)">(循环条件){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 条件满足时执行的代码段</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 更新循环变量;</span>
}</pre>
</div>
<p class="md-end-block md-p"><strong><span class="md-plain" style="font-family: 宋体">do-while循环</span></strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">do</span><span style="color: rgba(0, 0, 0, 1)">{
<span style="color: rgba(0, 128, 0, 1)"> // 循环体;
// 更新循环变量</span>
}</span><span style="color: rgba(0, 0, 255, 1)">while</span>(循环条件);</pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">与while循环的区别 :</span></p>
<ul class="ul-list" data-mark="+">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">while循环先判断循环条件,条件成立才执行循环体</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">do-while循环不管条件是否成立,先执行一次循环体</span></p>
</li>
</ul>
<h1 class="md-end-block md-heading md-focus"><span class="md-plain" style="font-family: 宋体">函数</span></h1>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"> <span class="md-tab"> <span class="md-plain">封装一段待执行的代码，函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)</span></span></span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">函数声明</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> 函数名(参数列表){
函数体;
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> 返回值;
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">函数调用</span>
函数名(参数列表);</pre>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">函数表达式</span></h3>
<p class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体"> 通过表达式定义函数</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x = <span style="color: rgba(0, 0, 255, 1)">function</span> (a, b) {<span style="color: rgba(0, 0, 255, 1)">return</span> a *<span style="color: rgba(0, 0, 0, 1)"> b};
</span><span style="color: rgba(0, 0, 255, 1)">var</span> z = x(4, 3);</pre>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">匿名函数</span></h3>
<p>匿名函数：省略函数名的函数。匿名函数会“自己调用自己”和“自动调用”。</p>
<p>语法为：</p>
<div class="cnblogs_code">
<pre>(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (){
函数体; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 我将调用自己</span>
<span style="color: rgba(0, 0, 0, 1)">})();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 带参</span>
(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (形参){
})(实参); </span></pre>
</div>
<p>案例</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">定义一个带参数匿名函数</span>
(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(name,age){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> str=name+",hello!今年你的年龄是:"+<span style="color: rgba(0, 0, 0, 1)">age;
objTip</span>=document.getElementById("tip"<span style="color: rgba(0, 0, 0, 1)">);
objTip.innerText</span>=<span style="color: rgba(0, 0, 0, 1)">log.ab;
})(</span>"张三",19); </pre>
</div>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span style="color: rgba(255, 0, 0, 1)">和上面的案例合在一起讲解</span>，定义变量接收匿名函数</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> fn = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (){};
fn(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">函数调用</span></pre>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">缺省参数</span></h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span> myFunction(x, y = 10<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> y is 10 if not passed or undefined</span>
<span style="color: rgba(0, 0, 255, 1)">return</span> x +<span style="color: rgba(0, 0, 0, 1)"> y;
}
myFunction(</span>5); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出 15, y 参数的默认值</span></pre>
</div>
<h3>arguments 对象</h3>
<p> argument 对象<strong>包含了函数调用的<span style="color: rgba(255, 0, 0, 1)">参数数组</span></strong>。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">统计所有参数的和</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
x </span>= sumAll(1, 123, 500, 115, 44, 88<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sumAll() {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> i, sum = 0<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (i = 0; i < arguments.length; i++<span style="color: rgba(0, 0, 0, 1)">) {
sum </span>+=<span style="color: rgba(0, 0, 0, 1)"> arguments;
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> sum;
}</span></pre>
</div>
<h2>调用函数</h2>
<p> 函数属于HTML页面，在浏览器中定义的函数会自动变为window对象的函数。当函数没有被自身的对象调用时 this 的值就会变成全局对象</p>
<p>myFunction() 和 window.myFunction() 是一样的：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> myFunction(a, b) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> a *<span style="color: rgba(0, 0, 0, 1)"> b;
}
window.myFunction(</span>10, 2); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> window.myFunction(10, 2) 返回 20</span></pre>
</div>
<p> 函数作为方法调用，<span style="color: rgba(255, 0, 0, 1)">this指的是，调用函数的那个对象</span>。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> myObject =<span style="color: rgba(0, 0, 0, 1)"> {
firstName:</span>"John"<span style="color: rgba(0, 0, 0, 1)">,
lastName: </span>"Doe"<span style="color: rgba(0, 0, 0, 1)">,
fullName: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.firstName + " " + <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.lastName;
}
}
myObject.fullName(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 返回 "John Doe"</span></pre>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">JSON格式函数</span></h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> log=<span style="color: rgba(0, 0, 0, 1)">{
ab:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> "ok"<span style="color: rgba(0, 0, 0, 1)">
},
cd:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
</span><span style="color: rgba(0, 0, 255, 1)">return</span> "no"<span style="color: rgba(0, 0, 0, 1)">
}
};
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">调用函数</span>
document.getElementById("tip").innerText=log.ab();</pre>
</div>
<h3 class="md-end-block md-heading"><span class="md-plain" style="font-family: 宋体">作用域</span></h3>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">JavaScript中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据</span></p>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">全局变量和全局函数</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">只要在函数外部使用var关键字定义的变量，或函数都是全局变量和全局函数,在任何地方都可以访问</span></li>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain" style="font-family: 宋体">所有省略var关键字定义的变量，一律是全局变量</span></li>
</ul>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">局部变量/局部函数</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体">在函数内部使用var关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问</span></li>
</ul>
<p class="md-end-block md-p"><span class="md-plain" style="font-family: 宋体"><span class="md-softbreak"><span class="md-plain"> 局部作用域中访问变量或函数,首先从当前作用域中查找,当前作用域中没有的话,向上级作用域中查找,直至全局作用域</span></span></span></p>
<h1 class="md-end-block md-heading"><span class="md-plain">DOM 文档对象模型</span></h1>
<p class="md-end-block md-p"><span class="md-plain"> DOM全称为“Document Object Model”，文档对象模型，提供操作HTML文档的方法。<span style="color: rgba(136, 136, 136, 1)">（注：每个html文件在浏览器中都视为一篇文档，操作文档实际就是操作页面元素。）</span></span>通过javaScript，我们能够操作HTML元素。为了做到这将事情，我们首先要找到该元素（元素、属性、文本内容、注释）</p>
<ul>
<li class="md-end-block md-p">通过 <strong>id</strong> 找HTML元素</li>
<li class="md-end-block md-p">通过<strong>标签名</strong>找HTML元素</li>
<li class="md-end-block md-p">通过<strong>类名</strong>找HTML元素</li>
</ul>
<h2>获取元素节点</h2>
<p><strong>通过<span style="color: rgba(255, 0, 0, 1)"> id</span> 查找 HTML 元素</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x=document.getElementById("intro");</pre>
</div>
<ul>
<li class="md-fences md-end-block ty-contain-cm modeLoaded">参 数 : 标签元素的ID名</li>
<li class="cm-string">返回值 : 元素节点</li>
</ul>
<p><strong>通过 <span style="color: rgba(255, 0, 0, 1)">标签名 </span>查找HTML元素</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> y=document.getElementsByTagName("p");</pre>
</div>
<ul>
<li>参数 : 标签名</li>
<li>返回值 : 节点列表，需要从节点列表中获取具体的元素节点对象，具有 .length 属性</li>
</ul>
<p class="md-end-block md-p"><strong>通过 <span style="color: rgba(255, 0, 0, 1)">类名 </span>查找HTML元素</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x=document.getElementsByClassName("intro");</pre>
</div>
<ul>
<li class="md-fences md-end-block ty-contain-cm modeLoaded">参 数 : 类名(class属性值)</li>
<li class="cm-keyword">返回值 : 节点列表‘’，具有 .length 属性</li>
</ul>
<p class="md-end-block md-p"><strong><span class="md-plain">根据 <span style="color: rgba(255, 0, 0, 1)">name </span>属性值取元素列表</span></strong></p>
<p class="md-fences md-end-block ty-contain-cm modeLoaded"><span class="cm-keyword">document.<span class="cm-property">getElementsByName(<span class="cm-string">"name_name");</span></span></span></p>
<ul>
<li class="md-fences md-end-block ty-contain-cm modeLoaded">参数 : name属性值</li>
<li class="md-fences md-end-block ty-contain-cm modeLoaded"><span class="cm-comment">返回 : 节点列表，具有 .length 属性</span></li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> elems = <span style="color: rgba(128, 0, 128, 1)">document</span>.getElementsByName("<span style="color: rgba(128, 0, 128, 1)">name_name</span>");</pre>
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">添加/删除/替换 元素节点</span></h2>
<h3><span class="md-plain">添加</span></h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="div1"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="p1"</span><span style="color: rgba(0, 0, 255, 1)">></span>这是一个段落。<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> para </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.createElement(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">p</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">); </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 创建<p>元素</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> node </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.createTextNode(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">这是一个新的段落。</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 为 <p> 元素创建一个新的文本节点</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> para.appendChild(node); </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 将文本节点添加到 <p> 元素中</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 在一个已存在的元素中添加 p 元素</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> element </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.getElementById(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">div1</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">); </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 查找已存在的元素</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> <strong><span style="color: rgba(255, 0, 0, 1)">element.appendChild(para)</span></strong>; </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)">//</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 128, 0, 1)"> 添加到已存在的元素中</span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p><span class="md-plain"> appendChild()是添加新元素到尾部，insertBefore()是添加新元素到指定元素之前。只需要把最后一行改为：<strong><span style="color: rgba(255, 0, 0, 1)">element.insertBefore(para, child);</span></strong>即可。<br></span></p>
<h3><span class="md-plain">删除</span></h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="div1"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="p1"</span><span style="color: rgba(0, 0, 255, 1)">></span>这是一个段落。<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> parent </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.getElementById(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">div1</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> child </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.getElementById(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">p1</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
<strong><span style="color: rgba(255, 0, 0, 1)">parent.removeChild(child);
</span></strong></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<h3><span class="md-plain">替换</span></h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="div1"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="p1"</span><span style="color: rgba(0, 0, 255, 1)">></span>这是一个段落。<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> para </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.createElement(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">p</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> node </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.createTextNode(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">这是一个新的段落。</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
para.appendChild(node);
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> parent </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.getElementById(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">div1</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> child </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.getElementById(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">p1</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
<span style="color: rgba(255, 0, 0, 1)"><strong>parent.replaceChild(para, child);
</strong></span></span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p> </p>
<p> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">改变HTML元素</span></h2>
<p class="md-end-block md-heading"><strong><span class="md-plain">改变HTML输出流</span></strong></p>
<div class="cnblogs_code">
<pre>document.write(<p>Hello World</p>);</pre>
</div>
<p class="md-end-block md-heading"><strong><span class="md-plain">改变HTML内容</span></strong></p>
<ul>
<li>innerHTML : 读取或设置元素文本内容，可识别标签语法</li>
<li>innerText : 设置元素文本内容，不能识别标签语法</li>
<li>value : 读取或设置表单控件的值 input</li>
</ul>
<div class="cnblogs_code">
<pre><p id="p1">Hello World!</p>
<script><span style="color: rgba(0, 0, 0, 1)">
document.getElementById(</span>"p1").innerHTML="新文本!"<span style="color: rgba(0, 0, 0, 1)">;
</span></script></pre>
</div>
<p><strong>改变HTML属性</strong></p>
<p class="md-end-block md-p"><span class="md-plain">通过元素节点对象的方法操作标签属性</span></p>
<ul>
<li>elem.getAttribute("attrname"); // 返回指定属性的属性值</li>
<li>elem.setAttribute("attrname","value"); // 为元素添加属性和属性值</li>
<li>elem.removeAttribute("attrname"); // 移除指定属性</li>
<li>document.getElementById(id).attribute=新属性值</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> spans=document.getElementsByTagName("span"<span style="color: rgba(0, 0, 0, 1)">);
spans[</span>0].setAttribute("title","这是一个首页"<span style="color: rgba(0, 0, 0, 1)">);
spans[</span>1].setAttribute("title",spans.getAttribute("title"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> --------------通过“.”语法访问属性---------------------- </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
document.getElementById(</span>"image").src="landscape.jpg";</pre>
</div>
<p class="md-end-block md-p"><span class="md-plain"> 可以使用点语法 访问或设置 元素属性</span></p>
<p> h1.id = "d1"; //set 方法<br> console.log(h1.id); //get 方法<br> h1.id = null; //remove 方法</p>
<p class="md-end-block md-p"><span class="md-plain">注意：</span></p>
<ul>
<li>属性值以字符串表示</li>
<li class="_mce_tagged_br">class属性需要更名为className，避免与关键字冲突,例如： h1.className = "c1 c2 c3";</li>
</ul>
<div class="cnblogs_code">
<pre>document.getElementById("tip").className="red fs";</pre>
</div>
<h2 class="md-end-block md-heading"><span class="md-plain">改变元素样式</span></h2>
<p class="md-end-block md-p"> 访问元素节点的style属性，使用<strong>点语法</strong>操作对象的CSS样式</p>
<div class="cnblogs_code">
<pre>document.getElementById("id").style.property="新样式"
<span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">---------------------案例-----------------------</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
document.getElementById(</span>"p2").style.color="blue"<span style="color: rgba(0, 0, 0, 1)">;
document.getElementById(</span>"p2").style.fontFamily="Arial"<span style="color: rgba(0, 0, 0, 1)">;
document.getElementById(</span>"p2").style.fontSize="larger";</pre>
</div>
<p class="md-end-block md-p"><span class="md-plain">注意 :</span></p>
<ul>
<li class="md-end-block md-p _mce_tagged_br"><span class="md-plain">属性值以<strong>字符串形式</strong>给出，单位不能省略</span></li>
<li class="md-end-block md-p md-focus _mce_tagged_br"><span class="md-plain">如果css属性名包含连接符，使用JS访问时，一律去掉连接符，改为驼峰. font-size -> fontSize</span></li>
</ul>
<h2><span class="md-plain">使用事件</span></h2>
<p class="md-end-block md-p"><span class="md-plain"> 由指定元素监听相关的事件，并且绑定事件处理函数，DOM允许我们通过触发事件来执行代码。比如：元素被点击、页面被加载、输入框被修改...<br></span></p>
<p class="md-end-block md-p"><span class="md-plain"><strong>鼠标事件</strong></span></p>
<ul>
<li><strong>onclick</strong> // 单击</li>
<li><strong>ondblclick</strong> // 双击</li>
<li><strong>onmouseover</strong> // 鼠标移入</li>
<li><strong>onmouseout</strong> // 鼠标移出</li>
<li><strong>onmousemove</strong> // 鼠标移动</li>
<li><strong>onmousedown</strong> // 鼠标键 按下</li>
<li><strong>onmouseup </strong>// 鼠标键 释放</li>
</ul>
<div class="cnblogs_code">
<pre><input onclick="alert('你输入有误！')" type="button" value="点一下" /></pre>
</div>
<p class="md-end-block md-p"><strong>文档或元素加载完毕</strong></p>
<ul>
<li><strong>onload </strong> // 元素或文档加载完毕</li>
<li><strong>onunload </strong>// 离开页面是触发事件</li>
</ul>
<p><span style="color: rgba(128, 128, 128, 1)">onload 事件可用于检测访问者的浏览器类型和浏览器版本信息，来加载网页的正确版本。</span></p>
<p><span style="color: rgba(128, 128, 128, 1)">onload 和 onunload 事件可用于处理 cookie。</span></p>
<p class="md-end-block md-p"><strong>表单控件状态监听</strong></p>
<ul>
<li><strong>onfocus </strong>// 文本框获取焦点</li>
<li><strong>onblur </strong> // 文本框失去焦点</li>
<li><strong>oninput </strong>// 实时监听输入</li>
<li><strong>onchange </strong>// 两次输入内容发生变化时触发，或元素状态改变时触发</li>
<li><strong>onsubmit </strong>// form元素监听，点击提交按钮后触发,通过返回值布尔值控制数据是否可以发送给服务器</li>
</ul>
<h3>事件绑定方式</h3>
<p class="md-end-block md-p"><span class="md-plain"><strong>内联方式</strong><span class="md-softbreak"> <span class="md-plain">将事件名称作为标签属性绑定到元素上</span></span></span></p>
<div class="cnblogs_code">
<pre><button onclick="alert()">点击</button></pre>
</div>
<p class="md-end-block md-p"><span class="md-plain"><strong>动态绑定</strong><span class="md-softbreak"> <span class="md-plain">通过元素节点，在Script中绑定添加事件</span></span></span></p>
<div class="cnblogs_code">
<pre>btn.onclick = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (){
};</span></pre>
</div>
<p>addEventListener() 向指定元素添加事件</p>
<div class="cnblogs_code">
<pre>document.getElementById("myBtn").addEventListener("click", displayDate);</pre>
</div>
<ul>
<li>第一个参数：事件类型</li>
<li>第二个参数：事件触发后调用的函数</li>
</ul>
<p>注意：addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件，只会先后执行。</p>
<h1>浏览器对象模型 BOM</h1>
<p> BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列<strong>操作浏览器的属性和方法</strong>。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。</p>
<h2>window对象</h2>
<p> 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。</p>
<p> <strong>全局变量是 window 对象的属性</strong>。</p>
<p> <strong>全局函数是 window 对象的方法</strong>。（甚至DOM也是window对象）</p>
<div class="cnblogs_code">
<pre>window.document.getElementById("header"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">----------- 与此相同 -----------------</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
document.getElementById(</span>"header");</pre>
</div>
<p>浏览器窗口的尺寸</p>
<ul>
<li>window.innerHeight：浏览器窗口的内部高度(包括滚动条)</li>
<li>window.innerWidth：浏览器窗口的内部宽度(包括滚动条)</li>
</ul>
<p>或者</p>
<ul>
<li>document.body.clientHeight：浏览器窗口的内部高度(包括滚动条)</li>
<li>document.body.clientWidth：浏览器窗口的内部宽度(包括滚动条)</li>
</ul>
<h3>窗口的打开和关闭</h3>
<ul>
<li><span style="font-family: 宋体"><strong>window.open("URL")</strong> //新建窗口访问指定的URL</span></li>
<li><span style="font-family: 宋体"><strong>window.close()</strong> //关闭当前窗口</span></li>
<li>window.moveTo() 移动当前窗口</li>
<li>window.resizeTo() 调整当前窗口的尺寸</li>
<li>screen.availWidth 返回 屏幕 宽带</li>
<li>screen.availHeight 返回 屏幕 高度</li>
</ul>
<h3>location</h3>
<p class="md-end-block md-p"> 获取当前页面的地址（URL），并把浏览器重定向到新的页面。</p>
<p class="md-end-block md-p"><span class="md-plain">属性 :</span></p>
<ul>
<li class="md-end-block md-p"><span class="md-plain"><strong>location.href</strong>：设置或读取当前窗口的地址栏信息</span></li>
</ul>
<p>方法 :</p>
<ul>
<li><strong>location.assign("URL")</strong>：重新加载新的文档</li>
<li><strong>location.reload(param)</strong>：重载页面(刷新)，参数默认为false，表示从缓存中加载，设置为true，强制从服务器根目录加载</li>
</ul>
<h3>history</h3>
<p> 保存当前窗口所访问过的URL</p>
<p>属性：</p>
<ul>
<li><strong>history.length</strong>：返回当前窗口访问过的URL数量</li>
</ul>
<p>方法 :</p>
<ul>
<li><strong>history.back()</strong>：浏览器后退按钮</li>
<li><strong>history.forward()</strong>：对应前进按钮，访问记录中的下一个URL</li>
<li><strong>history.go(n)</strong>： 参数为number值，翻阅几条历史记录，正值表示前进，负值表示后退</li>
</ul>
<h2>弹窗</h2>
<p class="md-end-block md-heading"><span class="md-plain">有三种弹窗：</span><span class="md-plain">警告框、确认框、提示框。</span></p>
<ul>
<li><strong>alert()</strong> // 警告框</li>
<li><strong>confirm()</strong> // 确认框</li>
<li><strong>prompt()</strong> // 带输入框的弹框</li>
</ul>
<p>alert("内容"); 普通的网页弹框</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1433301/201908/1433301-20190804104241152-487496551.png" alt="" width="251" height="74"></p>
<p>confirm("你真的要关闭吗"); “确定”返回True，“取消”返回flase。</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1433301/201908/1433301-20190804111552913-1831532400.png" alt="" width="339" height="101"></p>
<p>prompt("sometext", "defaultvalue"); 在网页弹框接收用户输入，返回用户输入的内容</p>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/blog/1433301/201908/1433301-20190804104134941-484711218.png" alt="" width="226" height="89"></p>
<h2>计时事件</h2>
<p><span class="md-plain" style="font-family: 宋体"> 通过JavaScript，在一个设定的时间间隔之后来执行代码。</span></p>
<h3>setInterval </h3>
<p> <span class="md-plain" style="font-family: 宋体">周期性定时器，</span><span style="font-family: 宋体">每隔一段时间就执行一次代码。</span></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> timerID = setInterval(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">,interval);</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">需求：在控制台每隔一秒输出一次“ok”</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> taskId=setInterval(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
console.log(</span>"ok"<span style="color: rgba(0, 0, 0, 1)">);
},</span>1000);</pre>
</div>
<p><span style="font-family: 宋体"><strong>参数</strong> : </span></p>
<ul>
<li><span style="font-family: 宋体"> function : 需要执行的代码，可以传入函数名或匿名函数 </span></li>
<li><span style="font-family: 宋体"> interval : 时间间隔，默认以毫秒为单位 1s = 1000ms </span></li>
</ul>
<p><span style="font-family: 宋体"><strong>返回值</strong> : 返回定时器的ID，用于关闭定时器</span></p>
<h3>setTimeout</h3>
<p> 定时计时器，等待多久之后执行一次代码，只会执行一次</p>
<div class="cnblogs_code">
<pre>setInterval("function",milliseconds);</pre>
</div>
<p><strong>参数</strong>：</p>
<ul>
<li>function：JavaScript函数</li>
<li>milliseconds：间隔的毫秒数</li>
</ul>
<p><strong>返回</strong>：返回定时器的ID，用于关闭定时器</p>
<p><strong>关闭定时器</strong>，参数为定时器函数对象</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开启超时调用:</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> timerId = setTimeout(<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">,timeout);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">关闭指定id对应的定时器</span>
clearTimeout(timerId);</pre>
</div>
<h2>Cookie</h2>
<p> Cookie 用于存储 web 页面的用户信息。当web服务器向用户发送web页面时，在连接关闭后，服务端不会记录用户的信息，Cookie的作用就是用于解决“如何记录客户端的用户信息”</p>
<ul>
<li>当用户访问 web 页面时，他的名字可以记录在 cookie 中。</li>
<li>在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。</li>
</ul>
<p> 当浏览器从服务器请求web页面时，页面的cookie也会被添加到请求中。服务器通过这种方式来获取用户信息。</p>
<p>JavaScript 可以使用 <strong>document.cookie</strong> 属性来创建 、读取、及删除 cookie。</p>
<p><strong>创建Cookie</strong>：document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";</p>
<p><strong>读取Cookie</strong>：var x = document.cookie;</p>
<p><strong>修改Cookie</strong>：document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";</p>
<p><strong>删除Cookie</strong>：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";</p>
<p><span style="color: rgba(136, 136, 136, 1)"> 删除 cookie 只需设置 expires 参数为以前的时间即可；删除时不必指定 cookie 值。</span></p>
<h3>JavaScript Cookie 实例</h3>
<p>在以下实例中，我们将创建 cookie 来存储访问者名称。</p>
<p>首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。</p>
<p>访问者下一次访问页面时，他会看到一个欢迎的消息。</p>
<p>在这个实例中我们会创建 3 个 JavaScript 函数:</p>
<ol>
<li>设置 cookie 值的函数</li>
<li>获取 cookie 值的函数</li>
<li>检测 cookie 值的函数</li>
</ol>
<h4>设置 cookie 值的函数</h4>
<p>首先，我们创建一个函数用于存储访问者的名字：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> setCookie(cname,cvalue,exdays)
{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> d = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date();
d.setTime(d.getTime()</span>+(exdays*24*60*60*1000<span style="color: rgba(0, 0, 0, 1)">));
</span><span style="color: rgba(0, 0, 255, 1)">var</span> expires = "expires="+<span style="color: rgba(0, 0, 0, 1)">d.toGMTString();
document.cookie </span>= cname + "=" + cvalue + "; " +<span style="color: rgba(0, 0, 0, 1)"> expires;
}</span></pre>
</div>
<p>以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。</p>
<p>该函数设置了 cookie 名、cookie 值、cookie过期时间。</p>
<h4>获取 cookie 值的函数</h4>
<p> 然后，我们创建一个函数用户返回指定 cookie 的值：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getCookie(cname)
{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> name = cname + "="<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> ca = document.cookie.split(';'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">for</span>(<span style="color: rgba(0, 0, 255, 1)">var</span> i=0; i<ca.length; i++<span style="color: rgba(0, 0, 0, 1)">)
{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> c =<span style="color: rgba(0, 0, 0, 1)"> ca.trim();
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (c.indexOf(name)==0) <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> c.substring(name.length,c.length);
}
</span><span style="color: rgba(0, 0, 255, 1)">return</span> ""<span style="color: rgba(0, 0, 0, 1)">;
}</span></pre>
</div>
<p>cookie 名的参数为 cname。</p>
<p>创建一个文本变量用于检索指定 cookie :cname + "="。</p>
<p>使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。</p>
<p>循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca.trim())。</p>
<p>如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。</p>
<p>如果没有找到 cookie, 返回 ""。</p>
<h4>检测 cookie 值的函数</h4>
<p>最后，我们可以创建一个检测 cookie 是否创建的函数。</p>
<p>如果设置了 cookie，将显示一个问候信息。</p>
<p>如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> checkCookie()
{
</span><span style="color: rgba(0, 0, 255, 1)">var</span> username=getCookie("username"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (username!=""<span style="color: rgba(0, 0, 0, 1)">)
{
alert(</span>"Welcome again " +<span style="color: rgba(0, 0, 0, 1)"> username);
}
</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)">
{
username </span>= prompt("Please enter your name:",""<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (username!="" && username!=<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">)
{
setCookie(</span>"username",username,365<span style="color: rgba(0, 0, 0, 1)">);
}
}
}</span></pre>
</div>
<h1><span class="md-plain" style="font-family: 宋体">异常</span></h1>
<ul>
<li>try：测试代码块的异常。</li>
<li>catch:处理异常。</li>
<li>throw：抛出异常</li>
<li>finally：无论是否有触发异常，该语句都会执行。</li>
</ul>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">try</span><span style="color: rgba(0, 0, 0, 1)"> {
... </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">异常的抛出</span>
} <span style="color: rgba(0, 0, 255, 1)">catch</span><span style="color: rgba(0, 0, 0, 1)">(err) {
... </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">异常的捕获与处理</span>
} <span style="color: rgba(0, 0, 255, 1)">finally</span><span style="color: rgba(0, 0, 0, 1)"> {
... </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">结束处理</span>
}</pre>
</div>
<p>案例：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>请输出一个 5 到 10 之间的数字:<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="demo"</span><span style="color: rgba(255, 0, 0, 1)"> type</span><span style="color: rgba(0, 0, 255, 1)">="text"</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">button </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="button"</span><span style="color: rgba(255, 0, 0, 1)"> onclick</span><span style="color: rgba(0, 0, 255, 1)">="myFunction()"</span><span style="color: rgba(0, 0, 255, 1)">></span>测试输入<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">p </span><span style="color: rgba(255, 0, 0, 1)">id</span><span style="color: rgba(0, 0, 255, 1)">="message"</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">function</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> myFunction() {
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">var</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> message, x;
message </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.getElementById(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">message</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">);
message.innerHTML </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">""</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;
x </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> document.getElementById(</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">demo</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">).value;
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">try</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> {
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(x </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">==</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">""</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">)</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">throw</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">值为空</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(isNaN(x)) </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">throw</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">不是数字</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;
x </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> Number(x);
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(x </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"><</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">5</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">) </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">throw</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">太小</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">if</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(x </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">></span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">10</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">) </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">throw</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">太大</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;
}
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">catch</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">(err) {
message.innerHTML </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">=</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">错误: </span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">"</span> <span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">+</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)"> err;
}
}
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">script</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<p style="text-align: center"><img src="https://img2018.cnblogs.com/i-beta/1433301/202002/1433301-20200212163358104-895832314.png" alt=""></p>
<p style="text-align: center"> </p><br><br>
来源：https://www.cnblogs.com/LXP-Never/p/11246835.html
頁:
[1]