首页 › JavaScript论坛 › 前端基础-JavaScript

陈宏源 發表於 2019-11-7 19:53:00

前端基础-JavaScript

<h2>JavaScript语言基础</h2>
<h4>　　ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现；<br>        　　尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：</h4>
<h4>        　　JS输入 document.body.contentEditable=True # 即可修改网页内容</h4>
<h4><span style="color: rgba(255, 0, 0, 1)">　　核心（ECMAScript）</span> <br>                　　<span style="color: rgba(255, 0, 0, 1)">文档对象模型（DOM） Document object model (整合js，css，html)</span><br><span style="color: rgba(255, 0, 0, 1)">                　　浏览器对象模型（BOM） Broswer object model（整合js和浏览器）</span></h4>
<h4>　　JavaScript引入方式</h4>
<h4><span style="color: rgba(255, 0, 0, 1)">　　　　# 建议卸载head标签中 因为html文件是从上至下执行,谁在前头先执行谁</span></h4>
<h4><span style="color: rgba(255, 0, 0, 1)">                　　　　</span>1.Script标签内写代码<br>                        　　　　　　&lt;script type="text/javascript"&gt;<br>                          　　　　　　// 在这里写你的JS代码 // type="text/javascript" 说明当前script标签中文本的类型<br>                        　　　　　　&lt;/script&gt;</h4>
<h4>                　　　　2.引入额外的JS文件<br>                        　　　　　　&lt;script src="js文件名"&gt;&lt;/script&gt;</h4>
<h4>&nbsp;</h4>
<h4>　　<span style="color: rgba(255, 0, 0, 1)">注释：</span><br>                　　　　// 这是单行注释</h4>
<h4>                　　　　/*<br>                　　　　这是<br>                　　　　多行注释<br>                　　　　*/</h4>
<p>&nbsp;</p>
<h4> 　　<span style="color: rgba(255, 0, 0, 1)">结束符：</span><br>                　　　　JavaScript中的语句要以分号（;）为结束符。</h4>
<h4>&nbsp;&nbsp;</h4>
<h4> 　　<span style="color: rgba(255, 0, 0, 1)">声明变量</span><br>                        　　　　JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。<br>                        　　　　声明变量使用 var 变量名; 的格式来进行声明</h4>
<h4>                        　　<span style="color: rgba(255, 0, 0, 1)">注意：</span><br>                                　　　　变量名是区分大小写的。<br>                                　　　　推荐使用驼峰式命名规则。<br>                                　　　　保留字(关键字)不能用做变量名。</h4>
<h4>　　<span style="color: rgba(255, 0, 0, 1)">关键字：</span><br>                                　　　　</h4>
<h4> 　　<span style="color: rgba(255, 0, 0, 1)">JavaScript数据类型</span><br>                        　　　　JavaScript拥有动态类型</h4>
<h4>　　　　JavaScript不区分整型和浮点型，就只有一种<span style="color: rgba(255, 0, 0, 1)">数字类型</span>。</h4>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">转化数据类型</span> <br>                                　　　　　　　　parseInt 转化为数字类型 # 一般用于取整 例如 "20a" 使用后 为20&nbsp;<br>                                　　　　　　　　parseFloat 转回为小数类型<br>               </h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> x; <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 此时x是undefined</span>
<span style="color: rgba(0, 0, 255, 1)">var</span> x = 1; <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, 255, 1)">var</span> x = "Alex" <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)">还有一种NaN，表示不是一个数字（Not a Number）。
parseInt(</span>"ABC") <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。</span></pre>
</div>
<p>&nbsp;</p>
<h4><span style="color: rgba(255, 0, 0, 1)">　　　　字符串(String)</span><br>                                　　　　　　var x ='字符串'<br>                                　　　　　　拼接字符串一般使用"+"</h4>
<h4> 　　　　　　<span style="color: rgba(255, 0, 0, 1)">常用方法：</span></h4>
<h4> 　　　　　　方法 　　　　　　　　　　 　　　　　　　　　　　　　　说明</h4>
<h4> 　　　　　　.length 　　　　　　　　　　　　　　　　　　　　　　　返回长度<br>                                　　　　　　.trim()        　　　　　　　　　　　　　 　　　　　　　　　　&nbsp;移除空白<br>                                　　　　　　.trimLeft()        　　        　　        　　　　　　&nbsp; &nbsp;　　　　　　　　　　移除左边的空白<br>                                　　　　　　.trimRight()        　　　　        　　　　　　&nbsp; 　　　　　　　　　　移除右边的空白<br>                                　　　　　　.charAt(n)        　　　　　　        　　　　        　　　　　　　　　　　返回第n个字符<br>                                　　　　　　.charCodeAt(n)        　　　　　　　　　 　　　　　　　　　　返回第n个字符的ascll码<br>                                　　　　　　.fromCharCode(ascll码) 　　　　 　　　　　　　　　　　返回ascll码对应的字符<br>                                　　　　　　.concat(value, ...)        　　　　        　　　　　　　　　　　　　　拼接<br>                                　　　　　　.indexOf(substring, start)        　　　　&nbsp; 　　　　　　　　　　获取第一次出现在字符串的位置 start为开始查找的位置<br>                                　　　　　　.lastindexOf(substirng,start) 　　&nbsp; &nbsp;　　　　　　　　　　&nbsp;获取最后一次出现在字符串的位置 start为开始查找的位置<br>                                　　　　　　.search() 　　　　　　　　　　　　 　　　　　　　　　　参数可以是正则表达式<br>                                　　　　　　.replace(匹配字符串/正则表达式,替换成的新字符串) 　　 　替换字符串<br>                                　　　　　　.substring(from, to)        　　　　　　　　　　　　　　　　        　&nbsp; 字符串提取,在指定范围内提取字符串,生成新字符串<br>                                　　　　　　.slice(start, end)        　　　　　　　　　　　　　　　　　　　切片<br>                                　　　　　　.toLowerCase()        　　　　　　　　　　　　　　　　　　        　 小写<br>                                　　　　　　.toUpperCase()        　　　　　　　　　　　　　　　　　　        　 大写<br>                                　　　　　　.split(delimiter, limit)        　　　　　　　　　　　　　　　　&nbsp; &nbsp;分割(limit可以不传)</h4>
<p>&nbsp;&nbsp;</p>
<p>&nbsp;</p>
<h4>　　　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">slice和substring的区别：</span><br>                                　　　　　　　　　　　　string.slice(start, stop)和string.substring(start, stop)：</h4>
<h4>                                　　　　　　　　　　　　两者的相同点：<br>                                　　　　　　　　　　　　　　如果start等于end，返回空字符串<br>                                　　　　　　　　　　　　　　如果stop参数省略，则取到字符串末<br>                                　　　　　　　　　　　　　　如果某个参数超过string的长度，这个参数会被替换为string的长度</h4>
<h4>                                　　　　　　　　　　　　substirng()的特点：<br>                                　　　　　　　　　　　　　　如果 start &gt; stop ，start和stop将被交换<br>                                　　　　　　　　　　　　　　如果参数是负数或者不是数字，将会被0替换</h4>
<h4>                                　　　　　　　　　　　　silce()的特点：<br>                                　　　　　　　　　　　　　　如果 start &gt; stop 不会交换两者<br>                                　　　　　　　　　　　　　　如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)<br>                                　　　　　　　　　　　　　　如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4> 　　　　<span style="color: rgba(255, 0, 0, 1)">布尔值</span><br>                                　　　　　　区别于Python，true和false都是小写。</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = <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> b = <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
</span>""(空字符串)、0、<span style="color: rgba(0, 0, 255, 1)">null</span>、undefined、NaN都是false。</pre>
</div>
<p>&nbsp;</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">null和undefined</span><br>                                　　　　　　null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;<br>                                　　　　　　undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。<br>                                　　　　　　null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。</h4>
<h4>&nbsp;</h4>
<h4> 　　　　<span style="color: rgba(255, 0, 0, 1)">对象(Object)</span><br>                        　　　　　　JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。</h4>
<h4>                        　　　　　　JavaScript 提供多个内建对象，比如 String、Date、Array 等等。<br>                        　　　　　　对象只是带有属性和方法的特殊数据类型。</h4>
<h4><br>                        　　　　　　数组 # 数组根据索引取值<br>                                　　　　　　　　数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = ;
console.log(a[</span>1]); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 输出"ABC"</span></pre>
</div>
<p>&nbsp;</p>
<h4><br>                                　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">常用方法：</span><br>                                        　　　　　　　　　　方法        　　　　　　        　&nbsp; 说明<br>                                        　　　　　　　　　　.length        　　　　　　&nbsp; 数组的大小<br>                                        　　　　　　　　　　.push(ele)        　　        　　&nbsp; &nbsp;尾部追加元素<br>                                        　　　　　　　　　　.pop()        　　　　　　        　 获取尾部的元素并删除<br>                                        　　　　　　　　　　.unshift(ele)        　　　　&nbsp;头部插入元素<br>                                        　　　　　　　　　　.shift()        　　　　        　　　头部移除元素<br>                                        　　　　　　　　　　.slice(start, end)        　　&nbsp;切片<br>                                        　　　　　　　　　　.reverse()        　　　　        　&nbsp; 反转<br>                                        　　　　　　　　　　.join(seq)        　　　　        　&nbsp; 将数组元素连接成字符串<br>                                        　　　　　　　　　　.concat(val, ...)        　　　连接数组<br>                                        　　　　　　　　　　.sort()        　　　　　　　 排序(非准确排序)<br>                                        　　　　　　　　　　.forEach()        　　　　        　&nbsp;将数组的每个元素传递给回调函数<br>                                        　　　　　　　　　　.splice()        　　　　        　　 删除元素，按照索引删除 返回删除当前元素.splice(索引,个数,**args)如果个数是0,可以在**args中增加新元素插入数组中<br>                                        　　　　　　　　　　.map(function(item,index,array){return 数据处理})        　　　　　　        　返回一个数组元素调用函数处理后的值的新数组</h4>
<h4><span style="color: rgba(255, 0, 0, 1)"> 　　　　　　　　ecma5新增</span></h4>
<h4> 　　　　　　　　　　.indexOf(substring, start) 获取第一次出现在字符串的位置 start为开始查找的位置<br>                                        <br>                                        　　　　　　　　　　.forEach(function(item,index,array){// 遍历数组<br>                                                　　　　　　　　　　　　# item 当前遍历到的元素 <br>                                                　　　　　　　　　　　　# index 当前遍历到的下标<br>                                                　　　　　　　　　　　　# array 当前数组<br>                                        　　　　　　　　　　　　})<br>                                        <br>                                        　　　　　　　　　　.reduce(function(pre,next,index,array){ // 归并<br>                                                　　　　　　　　　　　　# pre 上一次遍历return后面的值<br>                                                　　　　　　　　　　　　# next 当前遍历到的元素<br>                                                　　　　　　　　　　　　# index 当前遍历到的下标<br>                                                　　　　　　　　　　　　# array 当前数组<br>                                        　　　　　　　　　　　　})<br>                                        <br>                                        　　　　　　　　　　.filter(function(item,index,array){ //过滤<br>                                                　　　　　　　　　　　　return 过滤条件<br>                                        　　　　　　　　　　　　})<br>                                        <br>                                        　　　　　　　　　　.some(function(item,index,array){ //判断return表达式在当前数组是否成立 成立返回true 否则false<br>                                                　　　　　　　　　　　　return 条件判断        <br>                                        　　　　　　　　　　　　})<br>                                        <br>                                        　　　　　　　　　　.every(function(item,index,array){ //与some一样 但要求每一项都符合,才返回true 有一项<br>                                                　　　　　　　　　　　　return 条件判断 <br>                                        　　　　　　　　　　　　})<br>                                        <br>                                </h4>
<h4>&nbsp;</h4>
<p>&nbsp;</p>
<h4> 　　　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">关于sort()需要注意：</span><br>                                　　　　　　　　　　　　如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。<br>                                　　　　　　　　　　　　如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：<br>                                　　　　　　　　　　　　若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。<br>                                　　　　　　　　　　　　若 a 等于 b，则返回 0。<br>                                　　　　　　　　　　　　若 a 大于 b，则返回一个大于 0 的值。</h4>
<div class="cnblogs_code">
<pre><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)"> sortNumber(a,b){
</span><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> arr1 =
arr1.sort(sortNumber)</span></pre>
</div>
<p>&nbsp;</p>
<h4>　　　　　　　<span style="color: rgba(255, 0, 0, 1)">关于遍历(for循环)可以使用下面的方式：</span></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> a = ;
</span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i=0;i&lt;a.length;i++<span style="color: rgba(0, 0, 0, 1)">) {
console.log(a);}</span></pre>
</div>
<p>&nbsp;</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">类型查询</span><br>                        　　　　　　typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。</h4>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">对变量或值调用 typeof 运算符将返回下列值之一：</span><br>                        　　　　　　　　undefined - 如果变量是 Undefined 类型的<br>                        　　　　　　　　boolean - 如果变量是 Boolean 类型的<br>                        　　　　　　　　number - 如果变量是 Number 类型的<br>                        　　　　　　　　string - 如果变量是 String 类型的<br>                        　　　　　　　　object - 如果变量是一种引用类型或 Null 类型的</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4> 　　<span style="color: rgba(255, 0, 0, 1)">运算符</span><br>                        　　　　算数运算符<br>                                　　　　　　+ - * / % ++ --<br>                        　　　　比较运算符<br>                                　　　　　　&gt; &gt;= &lt; &lt;= != == === !==<br>                                　　　　<span style="color: rgba(255, 0, 0, 1)">注意：</span><br>                                　　　　　　1 == "1" // true 弱等 # 不需要判断数据类型 只需要值相等即可<br>                                　　　　　　1 === "1"// false 强等 # 强等需要判断数据类型是否相同&nbsp;<br>                        　　　　逻辑运算符<br>                                　　　　　　&amp;&amp; || !<br>                        　　　　赋值运算符<br>                                　　　　　　= += -= *= /=</h4>
<h4><br>        　　<span style="color: rgba(255, 0, 0, 1)">流程控制</span><br>                　　　　if-else</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><span style="color: rgba(0, 0, 0, 1)">示例</span><br>var</span> a = 10<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (a &gt; 5<span style="color: rgba(0, 0, 0, 1)">){
console.log(</span>"yes"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
console.log(</span>"no"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<h4>　　　　if-else if-else</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)"><span style="color: rgba(0, 0, 0, 1)">示例</span><br>var</span> a = 10<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (a &gt; 5<span style="color: rgba(0, 0, 0, 1)">){
console.log(</span>"a &gt; 5"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (a &lt; 5<span style="color: rgba(0, 0, 0, 1)">) {
console.log(</span>"a &lt; 5"<span style="color: rgba(0, 0, 0, 1)">);
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
console.log(</span>"a = 5"<span style="color: rgba(0, 0, 0, 1)">);
}</span></pre>
</div>
<h4>　　　　switch(多条件判断)</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">示例
</span><span style="color: rgba(0, 0, 255, 1)">var</span> day = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date().getDay();#判断当前周几返回数字
</span><span style="color: rgba(0, 0, 255, 1)">switch</span><span style="color: rgba(0, 0, 0, 1)"> (day) {#绑定开关
</span><span style="color: rgba(0, 0, 255, 1)">case</span> 0<span style="color: rgba(0, 0, 0, 1)">:#如果是0返回周天
console.log(</span>"Sunday"<span style="color: rgba(0, 0, 0, 1)">);
</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> 1<span style="color: rgba(0, 0, 0, 1)">:
console.log(</span>"Monday"<span style="color: rgba(0, 0, 0, 1)">);
</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)">:#都不成立执行以下
console.log(</span>"..."<span style="color: rgba(0, 0, 0, 1)">)
}

# switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。</span></pre>
</div>
<p>&nbsp;</p>
<h4>　　<span style="color: rgba(255, 0, 0, 1)">循环</span></h4>
<h4><span style="color: rgba(255, 0, 0, 1)">　　　　</span>for循环&nbsp; &nbsp;#如果要提前结束循环 <span style="color: rgba(255, 0, 0, 1)">break</span>&nbsp;# 如果要跳出循环 <span style="color: rgba(255, 0, 0, 1)">continue</span></h4>
<div class="cnblogs_code">
<pre><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&lt;10;i++<span style="color: rgba(0, 0, 0, 1)">) {
console.log(i);
}</span></pre>
</div>
<p>&nbsp;</p>
<h4>　　　　do_while循环</h4>
<h4>　　　　　　# 与while区别</h4>
<h4> 　　　　　　　　while是先进行判断后再执行内容 <br>        　　　　　　　　do_while是先执行do中的内容后再进行判断</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">示例
</span><span style="color: rgba(0, 0, 255, 1)">var</span> i=1
<span style="color: rgba(0, 0, 255, 1)">do</span><span style="color: rgba(0, 0, 0, 1)">{
sum</span>+=1<span style="color: rgba(0, 0, 0, 1)">
i</span>++<span style="color: rgba(0, 0, 0, 1)">
}</span><span style="color: rgba(0, 0, 255, 1)">while</span>(i&lt;10<span style="color: rgba(0, 0, 0, 1)">){
console.log(sum)
}</span></pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>　　　　while循环</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">示例
</span><span style="color: rgba(0, 0, 255, 1)">var</span> i = 0<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">while</span> (i &lt; 10<span style="color: rgba(0, 0, 0, 1)">) {
console.log(i);
i</span>++<span style="color: rgba(0, 0, 0, 1)">;#i自增1
}</span></pre>
</div>
<p>&nbsp;</p>
<h4><span style="color: rgba(255, 0, 0, 1)"> 　　三元运算</span></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">示例
</span><span style="color: rgba(0, 0, 255, 1)">var</span> a = 1<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> b = 2<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">var</span> c = a &gt; b ? a (true返回的值): b(false返回的值)</pre>
</div>
<h4>&nbsp;</h4>
<h4>　　<span style="color: rgba(255, 0, 0, 1)">补充:前端抛错 跟python中raise类似</span><br>        　　　　throw关键字<br>        　　　　例如:<br>                　　　　　　if(error) throw error</h4>
<p>&nbsp;</p>
<h4>　　<span style="color: rgba(255, 0, 0, 1)">函数 function 定义函数关键字</span></h4>
<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)"> f1() {
    console.log(</span>"Hello world!"<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)"> 带参数的函数#JS函数传参数多或少都不会报错</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> f2(a, b) {
    console.log(arguments);</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 内置的arguments对象</span>
<span style="color: rgba(0, 0, 0, 1)">    console.log(arguments.length);
    console.log(a, b);
    }

</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)"> sum(a, b){
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> a +<span style="color: rgba(0, 0, 0, 1)"> b;
    }
sum(</span>1, 2);<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>
<span style="color: rgba(0, 0, 255, 1)">var</span> sum = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(a, b){
   </span><span style="color: rgba(0, 0, 255, 1)">return</span> a +<span style="color: rgba(0, 0, 0, 1)"> b;
    }
sum(</span>1, 2<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)">(a, b){
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> a +<span style="color: rgba(0, 0, 0, 1)"> b;
    })(</span>1, 2);</pre>
</div>
<p>&nbsp;</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">函数中的arguments参数</span><br>                        　　　　　　arguments把传入的参数都显示出来&nbsp;&nbsp;以数组的形式展现<br>                        　　　　　　arguments.length 传入参数的长度</h4>
<p>　　　　</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">注意：</span><br>                        　　　　　　<span style="color: rgba(255, 0, 0, 1)">函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回</span></h4>
<p>&nbsp;</p>
<h4> 　　<span style="color: rgba(255, 0, 0, 1)">函数的全局变量和局部变量</span><br>                        <span style="color: rgba(255, 0, 0, 1)">　　　　局部变量：</span><br>                                　　　　　　在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。</h4>
<h4>                        <span style="color: rgba(255, 0, 0, 1)">　　　　全局变量：</span><br>                                　　　　　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。</h4>
<h4>                        <span style="color: rgba(255, 0, 0, 1)">　　　　变量生存周期：</span><br>                                　　　　　　JavaScript变量的生命期从它们被声明的时间开始。<br>                                　　　　　　局部变量会在函数运行以后被删除。<br>                                　　　　　　全局变量会在页面关闭后被删除。</h4>
<h4>                        　　　　<span style="color: rgba(255, 0, 0, 1)">作用域：</span><br>                                　　　　　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。<br>                                　　　　　　调用函数的时候要往回找函数定义阶段；</h4>
<p>　　</p>
<h4> 　　　　<span style="color: rgba(255, 0, 0, 1)">闭包</span></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> city = "BeiJing"<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)"> f(){
</span><span style="color: rgba(0, 0, 255, 1)">　　var</span> city = "ShangHai"<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)"> inner(){
　　　　console.log(city);
　　　　}
　　</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> inner;
　　}
</span><span style="color: rgba(0, 0, 255, 1)">var</span> ret =<span style="color: rgba(0, 0, 0, 1)"> f();
ret();</span></pre>
</div>
<p>&nbsp;</p>
<h4><span style="color: rgba(255, 0, 0, 1)">　　词法分析</span><br>                                　　　　JavaScript中在调用函数的那一瞬间，会先进行词法分析。</h4>
<h4>                        　　　　<span style="color: rgba(255, 0, 0, 1)">词法分析的过程：</span><br>                        　　　　　　当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：</h4>
<h4>                                　　　　　　　　1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。<br>                                　　　　　　　　2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。<br>                                　　　　　　　　3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。</h4>
<h4>                                　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">函数内部无论是使用参数还是使用局部变量都到AO上找。</span></h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>　　<span style="color: rgba(255, 0, 0, 1)">内置对象和方法</span><br>                　　　　两种创建方法<br>                        　　　　　　1.直接创建<br>                        　　　　　　2. new + 内置对象创建<br>                        　　　　　　注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --&gt; string而 typeof s2 --&gt; Object</h4>
<p>　　</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">数据类型：</span><br>                        　　　　　　Number         数字对象<br>                        　　　　　　String        字符串对象<br>                        　　　　　　Boolean        布尔值对象<br>                        　　　　<span style="color: rgba(255, 0, 0, 1)">组合对象：</span><br>                        　　　　　　Array        数组对象<br>                        　　　　　　Math        数学对象<br>                        　　　　　　Date        日期对象<br>                        　　　　<span style="color: rgba(255, 0, 0, 1)">高级对象：</span><br>                        　　　　　　Object        自定义对象<br>                        　　　　　　Error        错误对象<br>                        　　　　　　Function        函数对象<br>                        　　　　　　RegExp        正则表达式对象<br>                        　　　　　　Global        全局对象</h4>
<p>&nbsp;</p>
<h4>　　<span style="color: rgba(255, 0, 0, 1)">自定义对象#JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。</span></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">直接创建示例：
</span><span style="color: rgba(0, 0, 255, 1)">var</span> a = {"name": "Alex", "age": 18<span style="color: rgba(0, 0, 0, 1)">};#自定义对象
console.log(a.name);#一种取值
console.log(a[</span>"age"<span style="color: rgba(0, 0, 0, 1)">]);#另一种取值
遍历对象中的内容：
</span><span style="color: rgba(0, 0, 255, 1)">var</span> a = {"name": "Alex", "age": 18<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 <span style="color: rgba(0, 0, 255, 1)">in</span><span style="color: rgba(0, 0, 0, 1)"> a){
console.log(i, a);#i为键名 a为对象
}</span></pre>
</div>
<div class="cnblogs_code">
<pre><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, 255, 1)">new</span> Object();<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 创建一个person对象</span>
person.name="Alex";<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> person对象的name属性</span>
person.age=18;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> person对象的age属性<br><span style="color: rgba(0, 0, 0, 1)">delete person.name;</span> // 删除属性<br></span></pre>
</div>
<p>&nbsp;</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">内置的Date对象</span><br>                        　　　　　　创建Date对象<br>                                　　　　　　var d1=new Date()</h4>
<h4>                        　　　　　　<span style="color: rgba(255, 0, 0, 1)">Date对象方法</span><br>                        　　　　　　　　Date()        返回当日的日期和时间。<br>                        　　　　　　　　getDate()        从 Date 对象返回一个月中的某一天 (1 ~ 31)。<br>                        　　　　　　　　getDay()        从 Date 对象返回一周中的某一天 (0 ~ 6)。<br>                        　　　　　　　　getMonth()        从 Date 对象返回月份 (0 ~ 11)。<br>                        　　　　　　　　getFullYear()        从 Date 对象以四位数字返回年份。<br>                        　　　　　　　　getYear()        请使用 getFullYear() 方法代替。<br>                        　　　　　　　　getHours()        返回 Date 对象的小时 (0 ~ 23)。<br>                        　　　　　　　　getMinutes()        返回 Date 对象的分钟 (0 ~ 59)。<br>                        　　　　　　　　getSeconds()        返回 Date 对象的秒数 (0 ~ 59)。<br>                        　　　　　　　　getMilliseconds()        返回 Date 对象的毫秒(0 ~ 999)。<br>                        　　　　　　　　getTime()        返回 1970 年 1 月 1 日至今的毫秒数。<br>                        　　　　　　　　getTimezoneOffset()        返回本地时间与格林威治标准时间 (GMT) 的分钟差。<br>                        　　　　　　　　getUTCDate()        根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。<br>                        　　　　　　　　getUTCDay()        根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。<br>                        　　　　　　　　getUTCMonth()        根据世界时从 Date 对象返回月份 (0 ~ 11)。<br>                        　　　　　　　　getUTCFullYear()        根据世界时从 Date 对象返回四位数的年份。<br>                        　　　　　　　　getUTCHours()        根据世界时返回 Date 对象的小时 (0 ~ 23)。<br>                        　　　　　　　　getUTCMinutes()        根据世界时返回 Date 对象的分钟 (0 ~ 59)。<br>                        　　　　　　　　getUTCSeconds()        根据世界时返回 Date 对象的秒钟 (0 ~ 59)。<br>                        　　　　　　　　getUTCMilliseconds()        根据世界时返回 Date 对象的毫秒(0 ~ 999)。<br>                        　　　　　　　　parse()        返回1970年1月1日午夜到指定日期（字符串）的毫秒数。<br>                        　　　　　　　　setDate()        设置 Date 对象中月的某一天 (1 ~ 31)。<br>                        　　　　　　　　setMonth()        设置 Date 对象中月份 (0 ~ 11)。<br>                        　　　　　　　　setFullYear()        设置 Date 对象中的年份（四位数字）。<br>                        　　　　　　　　setYear()        请使用 setFullYear() 方法代替。<br>                        　　　　　　　　setHours()        设置 Date 对象中的小时 (0 ~ 23)。<br>                        　　　　　　　　setMinutes()        设置 Date 对象中的分钟 (0 ~ 59)。<br>                        　　　　　　　　setSeconds()        设置 Date 对象中的秒钟 (0 ~ 59)。<br>                        　　　　　　　　setMilliseconds()        设置 Date 对象中的毫秒 (0 ~ 999)。<br>                        　　　　　　　　setTime()        以毫秒设置 Date 对象。<br>                        　　　　　　　　setUTCDate()        根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。<br>                        　　　　　　　　setUTCMonth()        根据世界时设置 Date 对象中的月份 (0 ~ 11)。<br>                        　　　　　　　　setUTCFullYear()        根据世界时设置 Date 对象中的年份（四位数字）。<br>                        　　　　　　　　setUTCHours()        根据世界时设置 Date 对象中的小时 (0 ~ 23)。<br>                        　　　　　　　　setUTCMinutes()        根据世界时设置 Date 对象中的分钟 (0 ~ 59)。<br>                        　　　　　　　　setUTCSeconds()        根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。<br>                        　　　　　　　　setUTCMilliseconds()        根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。<br>                        　　　　　　　　toSource()        返回该对象的源代码。<br>                        　　　　　　　　toString()        把 Date 对象转换为字符串。<br>                        　　　　　　　　toTimeString()        把 Date 对象的时间部分转换为字符串。<br>                        　　　　　　　　toDateString()        把 Date 对象的日期部分转换为字符串。<br>                        　　　　　　　　toGMTString()        请使用 toUTCString() 方法代替。<br>                        　　　　　　　　toUTCString()        根据世界时，把 Date 对象转换为字符串。<br>                        　　　　　　　　toLocaleString()        根据本地时间格式，把 Date 对象转换为字符串。<br>                        　　　　　　　　toLocaleTimeString()        根据本地时间格式，把 Date 对象的时间部分转换为字符串。<br>                        　　　　　　　　toLocaleDateString()        根据本地时间格式，把 Date 对象的日期部分转换为字符串。<br>                        　　　　　　　　UTC()        根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。<br>                        　　　　　　　　valueOf()        返回 Date 对象的原始值。</h4>
<h4>　</h4>
<h4> 　　　　<span style="color: rgba(255, 0, 0, 1)">****JSON对象</span><br>                　　　　　　JSON字符串转化为对象<br>                　　　　　　　　var obj = JSON.parse(str1)<br>                　　　　　　对象转换为JSON字符串<br>                　　　　　　　　var str=JSON.stringify(obj1)</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4> 　　　<span style="color: rgba(255, 0, 0, 1)">　Math对象</span><br>                　　　　　　abs(x)      返回数的绝对值。<br>                　　　　　　exp(x)      返回 e 的指数。<br>                　　　　　　floor(x)    对数进行下舍入。<br>                　　　　　　log(x)      返回数的自然对数（底为e）。<br>                　　　　　　max(x,y)    返回 x 和 y 中的最高值。<br>                　　　　　　min(x,y)    返回 x 和 y 中的最低值。<br>                　　　　　　pow(x,y)    返回 x 的 y 次幂。<br>                　　　　　　random()    返回 0 ~ 1 之间的随机数。<br>                　　　　　　round(x)    把数四舍五入为最接近的整数。<br>                　　　　　　sin(x)      返回数的正弦。<br>                　　　　　　sqrt(x)   返回数的平方根。<br>                　　　　　　tan(x)      返回角的正切。</h4>
<p>&nbsp;</p>
<h4><span style="color: rgba(255, 0, 0, 1)">　　　　RegExp对象#正则</span><br>                <span style="color: rgba(255, 0, 0, 1)">　　　　　　坑：</span><br>                        　　　　　　　　# 正则表达式中一定不要加空格；<br>                        　　　　　　　　# 如果text        待匹配字符不传值 默认传字符形式的 undefined 来判断；<br>                        　　　　　　　　# 当正则表达式使用了全局模式(g)，并且还让他检测一个字符串，此时会引出lastIndex，lastIndex会记住上一次匹配成功的位置，并把下一次要开始校验的位置记住；</h4>
<h4>                　　　　　　<span style="color: rgba(255, 0, 0, 1)">创建对象</span><br>                　　　　　　　　方法1：<br>                　　　　　　　　　　var re=new RegExp("正则表达式")<br>                　　　　　　　　　　re.text(待匹配字符)#判断待匹配字符是否符合正则 返回布尔值<br>                　　　　　　　　方法2：<br>                　　　　　　　　　　/正则表达式/.texe(待匹配字符)</h4>
<h4><br>                　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">// 关于匹配模式：g和i的简单示例</span><br>                        　　　　　　　　　　var s1 = "name:Alex age:18";</h4>
<h4>                        　　　　　　　　　　s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"<br>                        　　　　　　　　　　s1.replace(/a/g, "哈哈哈");   // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配<br>                        　　　　　　　　　　s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"全局匹配+不区分大小写</h4>
<h4><br>                　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">// String对象与正则结合的4个方法</span><br>                        　　　　　　　　　　var s2 = "hello world";</h4>
<h4>                        　　　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容</span><br><span style="color: rgba(255, 0, 0, 1)">                        　　　　　　　　　　s2.search(/h/g);      // 0                      查找字符串中符合正则表达式的内容位置</span><br><span style="color: rgba(255, 0, 0, 1)">                        　　　　　　　　　　s2.split(/o/g);         // ["hell", " w", "rld"]按照正则表达式对字符串进行切割</span><br><span style="color: rgba(255, 0, 0, 1)">                        　　　　　　　　　　s2.replace(/o/g, "s");// "hells wsrld"          对字符串按照正则进行替换</span></h4>
<h4>&nbsp;　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">// 关于分组 分组按$取 例如 $1</span></h4>
<h2>BOM和DOM</h2>
<h4>　　BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。</h4>
<h4>                　　DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。</h4>
<h4>&nbsp;</h4>
<h4>　　BOM：</h4>
<h4>　　　　Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。</h4>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">window对象</span><br>                        　　　　　　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。<br>                        　　　　　　全局变量是 window 对象的属性。全局函数是 window 对象的方法。</h4>
<p>　　　　</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">一些常用的Window方法：</span><br>                                　　　　　　window.innerHeight - 浏览器窗口的内部高度</h4>
<h4>                                　　　　　　window.innerWidth - 浏览器窗口的内部宽度</h4>
<h4>                                　　　　　　window.open() - 打开新窗口</h4>
<h4>                                　　　　　　window.open(URL,name,features,replace)</h4>
<h4>　　　　　　window.close() - 关闭当前窗口</h4>
<h4>                                　　　　　　window.opener - 父窗口 可以直接.父窗定义好的函数 父窗口执行</h4>
<h4>　　　　　　　　参数 　　　　　　　　描述<br>　　　　　　　　URL        　　　　　　　　一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。</h4>
<h4>　　　　　　　　name        　　　　　　　 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 &lt;a&gt; 和 &lt;form&gt; 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。</h4>
<h4>　　　　　　　　features        　　　　　　一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。</h4>
<h4>　　　　　　　　replace　　　　　　　　一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。</h4>
<h4>　　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">demo:</span>&nbsp; &nbsp;window.open ('URL', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')&nbsp;</h4>
<h4>　　　　　　　　　　demo参数解释： <br>　　　　　　　　　　　　&lt;SCRIPT LANGUAGE="javascript"&gt; js脚本开始； <br>　　　　　　　　　　　　window.open 弹出新窗口的命令； <br>　　　　　　　　　　　　URL:URL； <br>　　　　　　　　　　　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； <br>　　　　　　　　　　　　height=100 窗口高度； <br>　　　　　　　　　　　　width=400 窗口宽度； <br>　　　　　　　　　　　　top=0 窗口距离屏幕上方的象素值； <br>　　　　　　　　　　　　left=0 窗口距离屏幕左侧的象素值； <br>　　　　　　　　　　　　toolbar=no 是否显示工具栏，yes为显示； <br>　　　　　　　　　　　　menubar，scrollbars 表示菜单栏和滚动栏。 <br>　　　　　　　　　　　　resizable=no 是否允许改变窗口大小，yes为允许； <br>　　　　　　　　　　　　location=no 是否显示地址栏，yes为允许； <br>　　　　　　　　　　　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； <br>　　　　　　　　　　　　&lt;/SCRIPT&gt; js脚本结束</h4>
<h4>&nbsp;</h4>
<h4>　　　<span style="color: rgba(255, 0, 0, 1)">　window的子对象 #&nbsp;</span>navigator对象（了解即可）</h4>
<h4> 　　　　　　　浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。<br>                                　　　　　　　　navigator.appName　　　　// Web浏览器全称<br>                                　　　　　　　　navigator.appVersion　　　// Web浏览器厂商和版本的详细字符串<br>                                　　　　　　　　navigator.userAgent　　　 // 客户端绝大部分信息<br>                                　　　　　　　　navigator.platform　　　　// 浏览器运行所在的操作系统</h4>
<p>&nbsp;</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">screen对象（了解即可）屏幕对象，不常用。</span></h4>
<h4>                                　　　　　　一些属性：<br>                                　　　　　　　　screen.availWidth - 可用的屏幕宽度<br>                                　　　　　　　　screen.availHeight - 可用的屏幕高度</h4>
<p>　　　　</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">history对象（了解即可）</span><br>                        　　　　　　window.history 对象包含浏览器的历史。</h4>
<h4>　　　　　　浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。<br>                                　　　　　　　　history.forward()// 前进一页<br>                                　　　　　　　　history.back()// 后退一页</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4><span style="color: rgba(255, 0, 0, 1)">　　　</span>　<span style="color: rgba(255, 0, 0, 1)">local对象</span><br>                        　　　　　　window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。</h4>
<h4> 　　　　　　常用属性和方法：</h4>
<h4> 　　　　　　　　location.href 获取URL<br>                                　　　　　　　　location.href="URL" // 跳转到指定页面<br>                                　　　　　　　　location.assign(url)// 跳转指定页面<br>                                　　　　　　　　location.reload() 重新加载页面 可以传参 如果为true 强制加载 从服务区源头加载<br>                                　　　　　　　　location.replace(url)// 用新url替换当前页面,可以避免跳转前的历史记录 <br>                                　　　　　　　　location.hash# 锚点 实现页内跳转<br>                                　　　　　　　　location.post        # 浏览器的端口号</h4>
<p>　　　　</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">弹出框</span><br><span style="color: rgba(255, 0, 0, 1)">                                　　　　　　警告框</span></h4>
<h4>                                　　　　　　　　警告框经常用于确保用户可以得到某些信息。<br>                                　　　　　　　　当警告框出现后，用户需要点击确定按钮才能继续进行操作。                                        <span style="color: rgba(255, 0, 0, 1)">alert("你看到了吗？");</span></h4>
<p>&nbsp;</p>
<h4><span style="color: rgba(255, 0, 0, 1)">　　　　　　确认框</span></h4>
<h4> 　　　　　　　　确认框用于使用户可以验证或者接受某些信息。<br>                                　　　　　　　　当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。<br>                                　　　　　　　　如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。<span style="color: rgba(255, 0, 0, 1)">confirm("你确定吗？")</span></h4>
<p><span style="color: rgba(255, 0, 0, 1)">　　</span></p>
<h4><span style="color: rgba(255, 0, 0, 1)">　　　　　　提示框</span></h4>
<h4> 　　　　　　　　提示框经常用于提示用户在进入页面前输入某个值。<br>                                　　　　　　　　当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。<br>                                　　　　　　　　如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。 <span style="color: rgba(255, 0, 0, 1)">prompt("请在下方输入","你的答案")</span></h4>
<p>&nbsp;</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">计时相关</span><br>                        　　　　　　通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。<br>                                　　　　　　<span style="color: rgba(255, 0, 0, 1)">setTimeout()</span><br>                        　　　　　　语法：<br>                        　　　　　　　　var t=setTimeout("JS语句",毫秒)<br>                                　　　　　　　　setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。<br>                                　　　　　　　　setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。<br>                                　　　　　　<span style="color: rgba(255, 0, 0, 1)">clearTimeout() # 清除计时任务</span><br>                        　　　　　　语法：<br>                        　　　　　　　　clearTimeout(setTimeout_variable) # 例如上例的t</h4>
<h4> 　　　　　　<span style="color: rgba(255, 0, 0, 1)">setInterval() # 每隔多长时间做某事</span><br>                        　　　　　　语法：<br>                        　　　　　　　　setInterval("JS语句",时间间隔)<br>                        　　　　　　<span style="color: rgba(255, 0, 0, 1)">返回值</span><br>                        　　　　　　　　一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。<br>                                　　　　　　　　setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。<br>                                　　　　　　　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。</h4>
<h4>                                　　　　　　<span style="color: rgba(255, 0, 0, 1)">clearInterval() # 清除每隔多长时间做某事</span><br>                        　　　　　　语法：<br>                        　　　　　　　　clearInterval(setinterval返回的ID值)<br>                                　　　　　　　　clearInterval() 方法可取消由 setInterval() 设置的 timeout。<br>                                　　　　　　　　clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>　　DOM<br>                　　　　DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 <br>                　　　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。<br>                　　　　HTML DOM 模型被构造为对象的树。</h4>
<h4>                　　　　DOM标准规定HTML文档中的每个成分都是一个节点(node)：<br>                        　　　　文档节点(document对象)：代表整个文档<br>                        　　　　元素节点(element 对象)：代表一个元素（标签）   <br>                        　　　　属性节点(attribute对象)：代表一个属性，元素（标签）才有属性<br>                        　　　　注释是注释节点(comment对象)　</h4>
<h4> 　　　　JavaScript 可以通过DOM创建动态的 HTML：<br>                        　　　　JavaScript 能够改变页面中的所有 HTML 元素<br>                        　　　　JavaScript 能够改变页面中的所有 HTML 属性<br>                        　　　　JavaScript 能够改变页面中的所有 CSS 样式<br>                        　　　　JavaScript 能够对页面中的所有事件做出反应<br>                        　　　　<span style="color: rgba(255, 0, 0, 1)">注意：</span><br>                                　　　　　　涉及到DOM操作的JS代码应该放在文档的哪个位置。</h4>
<p>&nbsp;</p>
<h4>　　　<span style="color: rgba(255, 0, 0, 1)">　查找标签</span><br>                        　　　　　　直接查找<br>                        　　　　　　　　document.getElementById                         根据ID获取一个标签<br>                        　　　　　　　　document.getElementsByClassName           根据class属性获取标签<br>                        　　　　　　　　document.getElementsByTagName           根据标签名获取标签合集<br>                </h4>
<h4>　　　　　　　　document.getElementsByName 根据name属性获取标签 # name属性一般情况下 只有input标签节点才有</h4>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">补充:</span><br>                        　　　　　　　　document.queryselector("选择器") # 返回文档中匹配指定 CSS 选择器的一个元素。</h4>
<h4> 　　　　　　<span style="color: rgba(255, 0, 0, 1)">间接查找</span><br>                        　　　　　　　　parentElement                    父节点标签元素&nbsp; // parentNodes 父节点<br>                        　　　　　　　　children                               所有子标签&nbsp; //childNodes 子节点<br>                        　　　　　　　　firstElementChild               第一个子标签元素<br>                        　　　　　　　　lastElementChild                 最后一个子标签元素<br>                        　　　　　　　　nextElementSibling               下一个兄弟标签元素<br>                        　　　　　　　　previousElementSibling           上一个兄弟标签元素</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4>　　　　<span style="color: rgba(255, 0, 0, 1)">节点操作</span><br>                        　　　　　　<span style="color: rgba(255, 0, 0, 1)">创建节点</span><br>                        　　　　　　　　document.createElement(标签名)</h4>
<h4>                        　　　　　　<span style="color: rgba(255, 0, 0, 1)">添加节点</span><br>                        　　　　　　　　追加一个子节点（作为最后的子节点）<br>                        　　　　　　　　somenode.appendChild(newnode)；</h4>
<h4>                        　　　　　　　　把增加的节点放到某个节点的前边。<br>                        　　　　　　　　somenode.insertBefore(newnode,某个节点);</h4>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">删除节点</span><br>                        　　　　　　　　获得要删除的元素，通过父元素调用该方法删除。<br>                        　　　　　　　　somenode.removeChild(要删除的节点)&nbsp;&nbsp;// 要删除的标签节点.parentNode.removeChild(要删除的节点)</h4>
<h4><span style="color: rgba(255, 0, 0, 1)"> 　　　　　　替换节点</span><br>                        　　　　　　　　somenode.replaceChild(newnode, 某个节点);</h4>
<h4> 　　　　　　<span style="color: rgba(255, 0, 0, 1)">克隆节点</span><br>                        　　　　　　　　somenone.cloneNode()&nbsp;// 默认false 传入true就会复制元素节点html内容</h4>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">属性节点</span><br>                                　　　　　　　　获取文本节点的值：<br>                        　　　　　　　　var divEle = document.getElementById("d1")<br>                        　　　　　　　　divEle.innerText # 只获得文本<br>                        　　　　　　　　divEle.innerHTML # 获取标签</h4>
<h4> 　　　　　　<span style="color: rgba(255, 0, 0, 1)">设置文本节点的值：</span><br>                        　　　　　　　　var divEle = document.getElementById("d1")<br>                        　　　　　　　　divEle.innerText='值'#设置文本<br>                        　　　　　　　　divEle.innerHTML='值'#设置标签</h4>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">属性操作# attribute操作</span><br>                        　　　　　　　　var divEle = document.getElementById("d1");<br>                        　　　　　　　　divEle.setAttribute("age","18") # 设置自定义属性也可以设置自带属性<br>                        　　　　　　　　divEle.getAttribute("age") # 获取自定义属性也可以获取自带属性<br>                        　　　　　　　　divEle.removeAttribute("age") # 删除自定义属性也可以删除自带属性</h4>
<h4> 　　　　　　<span style="color: rgba(255, 0, 0, 1)">// 自带的属性还可以直接.属性名来获取和设置</span><br>                        　　　　　　　　imgEle.src<br>                        　　　　　　　　imgEle.src="..."</h4>
<h4> 　　　　　　<span style="color: rgba(255, 0, 0, 1)">获取值操作</span><br>                        　　　　　　　　elementNode.value<br>                        　　　　　　　　适用于以下标签：<br>                        　　　　　　　　.input   <br>                        　　　　　　　　.select<br>                        　　　　　　　　.textarea <br>                        　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">例如</span><br>                                　　　　　　　　　　var iEle = document.getElementById("i1");<br>                                　　　　　　　　　　console.log(iEle.value);</h4>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">class的操作</span><br>                        　　　　　　　　className获取所有样式类名(字符串)<br>                                　　　　　　　　# className = "" # 设置类属性</h4>
<h4>                        　　　　　　　　classList.remove(cls)删除指定类<br>                        　　　　　　　　classList.add(cls)添加类<br>                        　　　　　　　　classList.contains(cls)存在返回true，否则返回false<br>                        　　　　　　　　classList.toggle(cls)存在就删除，否则添加</h4>
<p>&nbsp;</p>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">指定CSS操作</span><br>                        　　　　　　　　JS操作CSS属性的规律：<br>                　　　　　　　　　　1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：</h4>
<h4>                        　　　　　　　　　　　　obj.style.margin=<br>                        　　　　　　　　　　　　obj.style.width=<br>                        　　　　　　　　　　　　obj.style.left=<br>                        　　　　　　　　　　　　obj.style.position=</h4>
<h4>                　　　　　　　　　　2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：</h4>
<h4>                        　　　　　　　　　　　　obj.style.marginTop=<br>                        　　　　　　　　　　　　obj.style.borderLeftWidth=<br>                        　　　　　　　　　　　　obj.style.zIndex=<br>                        　　　　　　　　　　　　obj.style.fontFamily=</h4>
<h4> 　　　　　<span style="color: rgba(255, 0, 0, 1)">　事件</span><br><span style="color: rgba(255, 0, 0, 1)">                　　　　　　　　常用事件</span><br>                　　　　　　　　　　onclick      当用户点击某个对象时调用的事件句柄。<br>                　　　　　　　　　　ondblclick   当用户双击某个对象时调用的事件句柄。</h4>
<h4>                　　　　　　　　　　onfocus      元素获得焦点。               // 练习：输入框<br>                　　　　　　　　　　onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.<br>                　　　　　　　　　　onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）</h4>
<h4>                　　　　　　　　　　onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.<br>                　　　　　　　　　　onkeypress   某个键盘按键被按下并松开。<br>                　　　　　　　　　　onkeyup      某个键盘按键被松开。<br>                　　　　　　　　　　onload         一张页面或一幅图像完成加载。 # window.onload=functon(){} 页面加载完成后执行<br>        <br>                　　　　　　　　　　onmousedown    鼠标按钮被按下。<br>                　　　　　　　　　　onmousemove    鼠标被移动。<br>                　　　　　　　　　　onmouseout   鼠标从某元素移开。<br>                　　　　　　　　　　onmouseover    鼠标移到某元素之上。</h4>
<h4>                　　　　　　　　　　onselect      在文本框中的文本被选中时发生。<br>                　　　　　　　　　　onsubmit      确认按钮被点击，使用的对象是form。</h4>
<p>&nbsp;</p>
<h4>　　　　　　<span style="color: rgba(255, 0, 0, 1)">补充: 事件对象</span><br><span style="color: rgba(255, 0, 0, 1)">        　　　　　　　　# 如何获取事件对象 Demo</span></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">HTML<br>&lt;</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)"> id</span><span style="color: rgba(0, 0, 255, 1)">="b1"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>按钮<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">button</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">JavaScript</span><br>window.onload = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
    b1 </span>= document.getElementById("b1"<span style="color: rgba(0, 0, 0, 1)">)
    b1.onclick </span>= <span style="color: rgba(0, 0, 255, 1)">function</span>(e){<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里的e 就是事件对象</span>
      <span style="color: rgba(0, 0, 255, 1)">var</span> eve = e || event<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 为了兼容ie浏览器 ie浏览器事件对象是window.event</span>
<span style="color: rgba(0, 0, 0, 1)">      console.log(eve)
      }
    }</span></pre>
</div>
<p>　　　　　　</p>
<h4>　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">事件流</span><br><span style="color: rgba(255, 0, 0, 1)">                　　　　　　　　　　</span>事件流描述的是页面接受事件的顺序<br>                　　　　　　　　　　事件流的三个阶段: 捕获,目标,冒泡</h4>
<p>&nbsp;</p>
<h4> 　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">事件对象详情</span><br>                　　　　　　　　　　eve.currentTarget        # 当前捕获节点的引用<br>                　　　　　　　　　　eve.pageX        # 事件发生点当前文档横坐标<br>                　　　　　　　　　　eve.pageY        # 事件发生点当前文档纵坐标<br>                　　　　　　　　　　eve.target        # 产生事件的节点引用<br>                　　　　　　　　　　eve.type                # 产生事件的类型 例如 click<br>                　　　　　　　　　　eve.which        # 针对键盘和鼠标事件</h4>
<h4>　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">eve属性</span></h4>
<h4> 　　　　　　　　　　属性 　　　　　　　　　　　　　　描述<br>                　　　　　　　　　　altKey        　　　　　　　　　　　　&nbsp; &nbsp;返回当事件被触发时，”ALT” 是否被按下。<br>                　　　　　　　　　　button        　　　　　　　　　　　　&nbsp; &nbsp;返回当事件被触发时，哪个鼠标按钮被点击。<br>                　　　　　　　　　　clientX        　　　　　　　　　　　　&nbsp; 返回当事件被触发时，鼠标指针的水平坐标。<br>                　　　　　　　　　　clientY        　　　　　　　　　　　　&nbsp; 返回当事件被触发时，鼠标指针的垂直坐标。<br>                　　　　　　　　　　ctrlKey        　　　　　　　　　　　　&nbsp; 返回当事件被触发时，”CTRL” 键是否被按下。<br>                　　　　　　　　　　metaKey        　　　　　　　　　　　&nbsp; &nbsp;返回当事件被触发时，”meta” 键是否被按下。<br>                　　　　　　　　　　relatedTarget        　　　　　　　　　&nbsp; 返回与事件的目标节点相关的节点。<br>                　　　　　　　　　　screenX        　　　　　　　　　　　　                                返回当某个事件被触发时，鼠标指针的水平坐标。<br>                　　　　　　　　　　screenY        　　　　　　　　　　        　　返回当某个事件被触发时，鼠标指针的垂直坐标。<br>                　　　　　　　　　　shiftKey        　　　　　　　　　　　　                                返回当事件被触发时，”SHIFT” 键是否被按下。</h4>
<h4><span style="color: rgba(255, 0, 0, 1)">        　　　　　　　　IE 属性(除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性)</span></h4>
<h4>                　　　　　　　　　　属性        　　　　　　　　　　　　　　                                        描述<br>                　　　　　　　　　　cancelBubble        　　　　　　　　　　如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。<br>                　　　　　　　　　　fromElement        　　　　        　　　　        　&nbsp; 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。<br>                　　　　　　　　　　keyCode        　　　　　　　　　　　　                                对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup<br>                　　　　　　　　　　offsetX,offsetY        　　　　　　　　　 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。<br>                　　　　　　　　　　returnValue        　　　　　　　　　　　如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为<br>                　　　　　　　　　　srcElement        　　　　　　　　　　&nbsp;&nbsp;&nbsp; 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。<br>                　　　　　　　　　　toElement        　　　　　　　　　　        　&nbsp; 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。<br>                　　　　　　　　　　x,y        　　　　　　　　　　　　　　　 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。</h4>
<h4>        <br>        <span style="color: rgba(255, 0, 0, 1)">　　　　　　　　标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性</span></h4>
<h4>                　　　　　　　　　　属性和方法        　　　　　　　　　　        　&nbsp;描述<br>                　　　　　　　　　　bubbles        　　　　　　　　　　　　&nbsp; 返回布尔值，指示事件是否是起泡事件类型。<br>                　　　　　　　　　　cancelable        　　　　　　　　　　　 返回布尔值，指示事件是否可拥可取消的默认动作。<br>                　　　　　　　　　　currentTarget        　　　　　　　　　　返回其事件监听器触发该事件的元素。<br>                　　　　　　　　　　eventPhase        　　　　　　　　　　&nbsp;        &nbsp; 返回事件传播的当前阶段。<br>                　　　　　　　　　　target        　　　　        　　　　　　　　        　 返回触发此事件的元素（事件的目标节点）。<br>                　　　　　　　　　　timeStamp        　　　　　　　　        　　&nbsp; &nbsp;&nbsp;返回事件生成的日期和时间。<br>                　　　　　　　　　　type        　　　　　　　　　　　　　　&nbsp; 返回当前 Event 对象表示的事件的名称。<br>                　　　　　　　　　　initEvent()        　　　　　　　　　　　&nbsp; &nbsp;初始化新创建的 Event 对象的属性。<br>                　　　　　　　　　　preventDefault()        　　　　　　　　&nbsp;&nbsp;        通知浏览器不要执行与事件关联的默认动作。<br>                　　　　　　　　　　stopPropagation()        　　　　　　　　不再派发事件。</h4>
<h4>&nbsp;</h4>
<h4> 　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">Event对象的一些兼容写法</span><br>                　　　　　　　　　　获得event对象兼容性写法 <br>                        　　　　　　　　　　　　event || (event = window.event);<br>                　　　　　　　　　　获得target兼容型写法 <br>                        　　　　　　　　　　　　event.target||event.srcElement<br>                　　　　　　　　　　阻止浏览器默认行为兼容性写法 <br>                        　　　　　　　　　　　　event.preventDefault ? event.preventDefault() : (event.returnValue = false);<br>                　　　　　　　　　　阻止冒泡写法 <br>                        　　　　　　　　　　　　event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);</h4>
<h4>                　　　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">阻止冒泡的方法</span><br>                        　　　　　　　　　　　　eve.cancelBubble = true<br>                        　　　　　　　　　　　　eve.stopPropagation()<br>                        <br>                　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">事件委托</span><br>                        　　　　　　　　　　父标签.事件 = function(){<br>                        　　　　　　　　　　　　tag = event.target||event.srcElement<br>                        　　　　　　　　　　　　if(tag.nodeName == "子标签name"){<br>                                　　　　　　　　　　　　　　对应事件操作                        <br>                                　　　　　　　　　　　　　　}<br>                        　　　　　　　　　　　　　}<br>        <br>        　　　　　　　　<span style="color: rgba(255, 0, 0, 1)">事件绑定和取消事件绑定方法的形式</span><br>                　　　　　　　　　　添加事件监听器: <br>                        　　　　　　　　　　　　# dom指的是当前节点<br>                        　　　　　　　　　　　　dom.addEventListener(事件名,处理函数,布尔值)<br>                　　　　　　　　　　移除事件监听器:<br>                        　　　　　　　　　　　　dom.removeEventListener(事件名,处理函数)<br>                　　　　　　　　　　ie下的事件监听器<br>                        　　　　　　　　　　　　添加: <br>                                　　　　　　　　　　　　　　dom.attachEvent(事件名,处理函数)<br>                        　　　　　　　　　　　　移除:<br>                                　　　　　　　　　　　　　　dom.detachEvent(事件名,处理函数)<br>                        </h4>
<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)"> on(dom, eventType, fn) {
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(dom.addEventListener) {
dom.addEventListener(eventType, fn);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(dom.attachEvent) {
dom.attachEvent(</span>'on' +<span style="color: rgba(0, 0, 0, 1)"> eventType, fn);
}
}
</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)"> un(dom, eventType, fn) {
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(dom.removeEventListener) {
dom.removeEventListener(eventType, fn, </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">);
} </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)">(dom.detachEvent) {
dom.detachEvent(</span>"on" +<span style="color: rgba(0, 0, 0, 1)"> eventType, fn)
}
}
}</span></pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4><br>                　　　　　　<span style="color: rgba(255, 0, 0, 1)">绑定方法&nbsp; #this 代表的是出发的当前标签</span></h4>
<h4>                        　　　　　　　　1.直接在html文件里面绑定事件=function(){内容}<br><br></h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">例如：
</span>&lt;div id="d1" onclick="changeColor(this);"&gt;点我&lt;/div&gt;
&lt;script&gt;
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> changeColor(ths) {
ths.style.backgroundColor</span>="green"<span style="color: rgba(0, 0, 0, 1)">;
}
</span>&lt;/script&gt;
<span style="color: rgba(255, 0, 0, 1)">注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。</span></pre>
</div>
<p>&nbsp;</p>
<h4><br>                        　　　　　　　　2.写在JS文件中，通过JS代码绑定#可用循环批量处理</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">例如：
</span>&lt;div id="d2"&gt;点我&lt;/div&gt;
&lt;script&gt;
<span style="color: rgba(0, 0, 255, 1)">var</span> divEle2 = document.getElementById("d2"<span style="color: rgba(0, 0, 0, 1)">);
divEle2.onclick</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)">this</span>.innerText="呵呵"<span style="color: rgba(0, 0, 0, 1)">;
}
</span>&lt;/script&gt;</pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2><br><span style="color: rgba(255, 0, 0, 1)">严格模式</span></h2>
<h4>        　　# 在严格模式下,浏览器会对JS的要求更加苛刻<br>        　　关键字 <span style="color: rgba(255, 0, 0, 1)">"use strict"</span><br>        　　"use strict"写在那个作用域下,这个作用域下所有代码遵循严格模式<br>                　<span style="color: rgba(255, 0, 0, 1)">　Ps: 尽量不要在全局作用域下使用</span><br><br>　　demo:<br>        　　　　未使用严格模式<br>        　　　　function demo1(){<br>                　　　　　　max = 10// 如果在给变量赋值时,没有使用var声明则当前全局变量进行处理<br>        　　　　}<br>        <br>        　　　　使用严格模式<br>        　　　　function demo2(){<br>                　　　　　　"use strict"<br>                　　　　　　max = 10 // 严格模式下 报错<br>        　　　　}</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h4><br>　　<span style="color: rgba(255, 0, 0, 1)">cookie　　</span></h4>
<h4>　　　　查询cookie        <br>                　　　　　　document.cookie<br>        　　　　设置cookie<br>                　　　　　　document.cookie = "key=value"+data # date 过期日期<br>                        　　　　　　var date = new Date<br>                        　　　　　　date.setDate(date.getDate()+num)<br>        　　　　修改cookie<br>　　　　　　document.cookie = "key=value2" # 相同的key会覆盖 达到修改的效果<br>        　　　　删除cookie<br>                　　　　　　document.cookie = "key=value"+data # date 过期日期<br>                        　　　　　　var date = new Date<br>                        　　　　　　date.setDate(date.getDate()-num) # 时间小于当前时间 删除</h4>

</div>
<div id="MySignature" role="contentinfo">
    Songzhibin<br><br>
来源：https://www.cnblogs.com/binHome/p/11813884.html

查看完整版本: 前端基础-JavaScript