JavaScript知识整理
资料书：《JavaScript+jQuery交互式Web前端开发》黑马程序员编著
编程软件：Dreamweaver 说明：这个编程工具对于css3的某些属性不能正常使用，所以有时会使用Webstorm，这次的内容一般的前端编程工具也可以正常运行。
文中有错的地方请及时更正，谢谢！
效果图：
代码分享：
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ECMAScript、DOM、BOM</title>
<link rel="stylesheet" type="text/css" href="js1_CSS.css" />
</head>
<body>
<p style="text-align: center;font-weight: bold;font-size: 16px;">ECMAScript、DOM、BOM知识总结</p>
<hr size="2px" color="blue" />
<ul>
<li class="one3"><a href="#one">JavaScript介绍</a></li>
<li class="one3"><a href="#two">JavaScript基础</a></li>
<li class="one3"><a href="#three">JavaScript函数</a></li>
<li class="one3"><a href="#four">JavaScript对象</a></li>
<li class="one3"><a href="#five">DOM</a></li>
<li class="one3"><a href="#six">BOM</a></li>
<li class="one3"><a href="#seven">JavaScript网页特效</a></li>
</ul>
<br />
<h3 id="one">JavaScript介绍</h3>
<p>JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web也买你。对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为。结构是网页的骨架，样式是网页的外观，行为是网页的交互逻辑。JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎进行解释执行，把一个原本只用来显示的页面转变成支持用户交互的页面程序。</p>
<ul><li>JavaScript的诞生：在1995年时，Netscape(网景)公司(现在的Mozilla公司)的布兰登.艾奇在网景导航者浏览器上首次设计出来JavaScript。Netscape最初将这个脚本语言命名为LiveScript，后来Netscape公司与Sun公司(2009年被oracle公司收购)合作之后将其改名为JavaScript，这是由于当时Sun公司推出的Java语言备受关注，Netscape公司为了营销借用了Java这个名称，但实际上JavaScript与Java的关系就像”雷峰塔“与”雷锋“，它们本质上是两种不同的编程语言。</li></ul>
<p class="one1">
<span class="one2">特点和组成：</span>JavaScript是一种脚本语言，类似的脚本语言有TyepScript、PHP、python等。非脚本语言如C和C++，脚本语言依赖于解释器，只有在被调用时自动进行解释或编译。
</p>
<ul><li>常用开发工具：一款优秀的开发工具能够极大的提高程序开发效率与体验。常用的开发工具有Visual Studio Code、Sublime Text、HBuilder、Adobe Dreamweaver和Webstorm。</li></ul>
<ul><li>JavaScript入门</li></ul>
<p class="one1">
<span class="one2">代码书写位置：</span>在网页中编写JavaScript代码时，有三种书写位置，分别是行内式(不推荐使用)、内嵌式和外部式。在html中还有一种嵌入JavaScript代码的方法，就是使用伪协议，<a href="javascript:alert('伪协议')">点我</a>，
在代码中，html属性中的"javascript:"就表示伪协议，后面是一段JavaScript代码。当单机这个超链接后，就会弹出alert警告框，在实际开发中，不推荐使用这种方式。
<span class="one2">注释：</span>使用注释有利于增强代码的可读性。JavaScript支持单行注释和多行注释。单行注释："//"；多行注释："/* */"；在VS Code编辑器中，可以使用快捷键对当前选中的 行添加注释或取消注释，单行注释"Ctrl+/"，多行注释"Shift+alt+/"。
<span class="one2">输入和输出语句：</span>JavaScript是一门编程语言，可以在网页中实现用户交互效果。值得注意的是：当有多个</script>结束标签时，内嵌的结束标签可以使用"\"来对符号进行转义，避免代码提前结束。
</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>语句</th>
<th>说明</th>
</tr>
<tr>
<td>alert('msg')</td>
<td>浏览器弹出警告框</td>
</tr>
<tr>
<td>console.log('msg')</td>
<td>浏览器控制台输出信息</td>
</tr>
<tr>
<td>prompt('msg')</td>
<td>浏览器弹出输入框，用户可以输入内容</td>
</tr>
</table>
<ul><li>JavaScript变量</li></ul>
<p class="one1">
<span class="one2">变量的定义和使用：</span>变量是程序在内存中申请的一块用来存放数据的空间。变量的使用分为声明和赋值两步：JavaScript中使用var关键字用来声明变量。变量声明后未赋值则会输出undefined，直接输出一个未定义的变量则会报错。
</p>
<h3 id="two">JavaScript基础</h3>
<p>任何一门语言，掌握基本语法都是学好这门语言的第一步。本节主要针对数据类型、数据类型转换、运算符、流程控制、分支结构、循环结构及JavaScript中数组的内容。</p>
<ul><li>数据类型及其转换：计算机中，不同的数据所需占用的存储空间是不同的，为了充分利用存储空间，在编程语言中就定义了多种不同的数据类型。而数据类型转换，就是把某一种数据类型转换成另一种数据类型。</li></ul>
<p class="one1">
<span class="one2">变量的数据类型及其分类：</span>JavaScript是一种弱类型语言，不用提前声明变量的书类型，程序运行过程中比变量的数据类型会被自动确定。数据类型分为基本数据类型和复杂数据类型(或称引用数据类型)两大类；
基本数据类型：Boolean(布尔型)、String(字符串型)、Number(数字型)、Null(空型)和Undefined(未定义型)
复杂数据类型：Object(对象)
<span class="one2">五种数据类型：</span>
数字型：可以用来保存整数或浮点数(小数)。一般情况下，数字是使用十进制来表示的，常见的有二进制、八进制(数字前带0)、十进制和十六进制(数字前带0x)。数字型的最大值和最小值可以用Number.MAX_VALUE和Number.MIN_VALUE来获取，
当超出范围时，会有Infinity(无穷大)和-Infinity(无穷小)两种结果,NaN表示非数值的情况。
字符串型：字符串是计算机中用于表示文本的一系列字符，在JavaScript中使用单引号或双引号来包裹字符串。单双可以互相嵌套，在字符串中使用特殊符号时，可以使用转义字符"\"来完成。字符串长度通过length获取，访问字符串直接使用索引访问，
而字符串的拼接则用"+"。
布尔型：布尔型有两个值，true和false，表示真和假，常用于逻辑判断和异步处理。
undefined和null：一个变量声明后没有赋值，则变量的值就是undefined，也可以给变量赋一个null值，null一般用来表示空对象指针。
<span class="one2">数据类型检测和数据类型间的转换：</span>在开发中，可以使用(typeof 变量)来检测变量的数据类型。值得注意的是检测null值时返回的是object，这是JavaScript最初实现时的遗留问题，ECMAScript仍在沿用。
字面量：是指原代码中的固定值的表示法。
</p>
<p class="beforeImg">转换为字符串型：数据类型转换成字符串型有三种方式，分别是利用"变量+ "" "、变量.toString()和String(变量)。null和undefine则无法使用toString()方式转换，对于数字类型的变量，可以通过在toString()小括号中传入参数来进行进制转换。</p>
<p class="beforeImg">转换为数字型：转换为数字型：常见的有四种方式，分别是parseInt()转换为整数、parseFloat()转换为浮点数、Number()转换为数字型和算术运算符隐式转换，对于转换前的类型有一定的区分，转换的结果有0、NaN和对应的数字。
此外，parseInt的第二个参数可以设置转换的进制。</p>
<p class="beforeImg">转换为布尔型：在转换为布尔型时使用Boolean()，代表空、否定的值会被转换为false，如空字符串、0、NaN、null和undefined，其余的值均为true。</p>
<ul><li>运算符：运算符也称为操作符，用于实现赋值、比较和执行算术运算等功能的符号。</li></ul>
<p class="one1">
<span class="one2">算术运算符：</span>用于对两个变量或值进行算术运算，分别有"+"、"-"、"*"、"/"和"%"。其中，运算顺序遵循”先乘除后加减“的原则；取模运算时符号取决于被模数(%左边的数)；
开发中尽量避免利用浮点数运算，JavaScript的精度问题会导致计算结果的偏差，可以先转化为整数计算后再转化为小数；使用"+"和"-"可以表示正数或负数。
<span class="one2">递增和递减运算符：</span>使用递增(++)、递减(--)运算符可以快速地对变量的值进行递增和递减操作，它属于一元运算符，只对一个表达式进行操作；前置和后置递增减符号表示的结果不同。
<span class="one2">比较和逻辑运算符：</span>比较和逻辑运算符用于对两个或多个数据进行比较，其结果是一个布尔值，即true或false。其中比较运算符中的"==="表示全等，即变量的值和类型都要相等。
<span class="one2">位运算符：用来对数据进行二进制运算，将参与运算的操作数视为由二进制(0和1)组成的32位的串。</span>
<span class="one2">赋值和三元运算符：</span>赋值运算符用于将运算符右边的值赋给左边的变量，在JavaScript中，除了使用"="进行赋值外，还可以使用"+="相加并赋值、"-="相减并赋值、"*="相乘并赋值等。
三元运算符是需要3个操作数的运算符，运算的结果根据给定条件决定。语法：条件表达式？表达式1：表达式2
<span class="one2">运算符的优先级：</span> 表达式中所有运算符参与运算的先后顺序称作运算符的优先级。此外，位复杂的表达式适当地添加圆括号，可避免复杂的运算符优先级法则，让代码更为清除且可以避免错误的发生。
</p>
<ul><li>流程控制：在一个程序执行的过程中，代码的执行顺序会直接影响执行结果，很多时候需要通过控制代码的执行顺序来完成要实现的功能。流程控制主要有3中结构，分别时顺序结构、分支结构和循环结构。值得一提的是";"和"{}"表示语句分隔符。</li></ul>
<ul><li>分支结构：在代码由上到下执行的过程中，根据不同的条件，执行不同的代码，从而得到不同的结果。</li></ul>
<p class="one1">
<span class="one2">if相关语句：</span>if语句：单分支语句；if...else：双分支语句；if...else if...else：多分支语句；
<span class="one2">switch语句：</span>也成为多分支语句，功能与if...else if...if语句类似，不同的是它只能针对某个表达式的值作出判断，从而决定执行哪一段代码。语法：switch(表达式){case 值1:代码段1；break;...default:代码段n；}
其中，default是可选的，表示默认情况下执行的代码段，可以根据实际需要来设置。表达式的值为数字型或字符串型。
</p>
<ul><li>循环结构：用来实现一段代码的重复执行。</li></ul>
<p class="one1">
<span class="one2">for语句：</span>在程序中，一组被重复执行的语句成为循环体，能否重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句成为循环语句。
for语句是最常用的循环语句，适合循环次数已知的情况，语法：for(初始化变量；条件表达式；操作表达式){循环体；}循环嵌套是指在一个循环中嵌套另一个循环，经常用于多维的数据处理。例如：生成三角形的星星图案、生成九九乘法表。
<span class="one2">while语句：</span>可以在条件表达式为true的前提下，循环执行指定的一段代码，直到条件表达式为false时结束循环。语法：while(条件表达式){循环体；}
<span class="one2">do...while语句：</span>和while语句类似，其区别在于，do...whlie会无条件地执行一次循环体中的代码，再判断条件，根据条件决定是否循环执行；而while是先判断条件，再根据条件决定是否执行循环体。
语法：do{循环体；}while(条件表达式)；
<span class="one2">continue和break关键字：</span>continue关键字可以在for、while以及do...while循环体中使用，用来立即跳出本次循环，也就是跳过了continue后面的代码，继续下一次循环。
break可以用在switch语句和循环语句中，在循环语句中使用时，其作用是立即跳出整个循环，也就是结束循环。此外，break语句还可跳转到指定的标签语句处，实现循环嵌套中的多层跳转。标签语句的语法：label:statement。break label实现跳转。
</p>
<ul><li>数组及其元素的操作：数组(Array)是一种复杂的数据类型，属于Object(对象)类型，用来将一组数组集合在一起，通过一个变量就可以访问一组数据。使用数组时会搭配循环语句使用，从而很方便对一组数据进行处理。数组元素操作包括修改数组长度，对数组进行添加元素、修改元素、删除元素等操作。利用分支语句、循环语句还可以实现数组元素筛选、反转数组元素的顺序。</li></ul>
<p class="one1">
<span class="one2">创建数组：</span>在JavaScript中有两种常见的创建数组的方式，一种是使用"new Array()"创建数组，一种是使用字面量"[]"来创建数组。
<span class="one2">访问和遍历：</span>在数组中，每个元素都有索引(或称为下标)，数组中的元素使用索引来进行访问。语法："数组名[索引]"。
在实际开发中，经常需要对数组进行遍历，即将数组中的元素全部访问一遍，这可以用for循环来实现，在for循环中让索引从0开始自增。常见的例子有从数组中找到最大值和最小值。
<span class="one2">元素的操作：</span>数组元素的操作包括修改数组长度、对数组进行添加元素、修改元素、删除元素等操作。利用分支语句、循环语句还可以实现数组元素筛选、反转数组元素的顺序。
</p>
<p class="beforeImg">修改数组长度：使用"数组名.length"可以获取或修改数组的长度。当length的值大于数组中原来的元素个数，则缺少的元素会占用索引位置，称为空元素(empty表示空元素)；
当length的值小于数组中原来的元素个数，多余的数组元素将会被舍弃。</p>
<p class="beforeImg">新增或修改数组元素：通过数组索引可以新增或修改元素，如果给定的索引超过了数组中的最大索引，则表示新增元素，否则表示修改元素。</p>
<p class="beforeImg">筛选数组、删除指定的数组元素和反转数组元素顺序都需要添加一个辅助数组。值得一提的是：ES6中还提供了另外一种方式--解构赋值。可以把数组中的元素分别赋给a、b、c,
当左侧的变量数量小于右侧的元素的个数时，则忽略多余的元素；当左侧的变量数量大于右侧的元素个数时，则多余的的便来给你会被初始化为undefined。</p>
<ul><li>数组排序和二维数组：数组排序是将数组中的元素排列成一个有序的序列，在计算机中完成数组的排序需要使用算法，常见的算法有冒泡排序、插入排序等。</li></ul>
<p class="one1">
<span class="one2">冒泡和插入排序：</span>冒泡排序是一种非常容易理解的排序算法。在冒泡排序的过程中，按照要求从小到大排序或从大到小排序，不断比较数组中相邻两个元素的值，较小或较大的元素前移。
插入排序是冒泡排序的优化，是一种直观的简单排序算法。实现原理是通过有序数组元素的存储，对未排序的数组元素，在已排序的数组中从最后一个元素向第一个元素遍历，找到相应的位置并插入。其中，待排序数组的第1个元素会被看作一个有序的数组，
从第2个至最后一个元素会被看作是一个无序数组。
<span class="one2">二维数组：</span>创建二维数组同样有两种方式，分别是new Array()和字面量([[],[]])的方式来创建，二位数组通过"数组名[行][列]"的方式进行访问和添加。
</p>
<h3 id="three">JavaScript函数</h3>
<p>使用函数可以避免相同功能代码的重复编写，将程序中的代码模块化，提高程序的可读性，减少开发者的工作量，便于后期的维护。</p>
<ul><li>函数和返回值</li></ul>
<p class="one1">
<span class="one2">函数的声明和调用：</span>语法：function 函数名(){函数体代码;}，其中，function是声明函数的关键字，必须全部使用小写字母。函数声明后并不会执行，只有调用函数的时候才会执行。调用语法："函数名()"。
函数具有封装代码的效果，也就是把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。
<span class="one2">函数的参数和返回值：</span>在函数内部的代码中，未确定的值可以通过函数的参数从外部接受进来，一个函数可以通过传入不同的参数来完成不同的擦欧总。函数的参数分为形参和实参。
JavaScript函数允许函数的形参和实参个数不同，当实参数量多于形参数量时，多余的实参会被忽略，除非使用(arguments)才能接收多余的实参；当实参数量小于形参时，多出来的形参类似一个已声明未赋值的变量，其值为undefined；
函数的执行结果需要通过函数的返回值来确定。语法：(return 返回值)，其中return可以结束一个函数，返回值可以是字符型、数字型和数组。
</p>
<ul><li>函数进阶和作用域：掌握函数表达式、回调函数、递归函数等有利于深入理解函数。通常来说，一段代码中所用到的名字(如变量名)并不总是有效和有用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域机制可以有效减少命名冲入的情况发生。</li></ul>
<p class="one1">
<span class="one2">函数表达式和回调函数：</span>函数表达式是将声明的函数赋值给一个变量，通过变量完成函数的调用和参数的传递。语法：var 变量名=function(参数列表){函数体;}。
函数表达式的定义必须在声明之前，而函数声明则没有此要求。此外，由于给这个变量赋值的函数没有函数名，所以这个函数也称匿名函数。将匿名函数赋值给变量之后，变量就能像函数一样调用。
arguments关键字：JavaScript中，arguments是当前函数的一个内置对象，所有函数都内置了一个arguments对象，该对象保存了函数调用时传递的所有的实参。
在函数中访问arguments对象，可以获取函数调用时传递来的所有实参。注意，函数外不能使用。
回调函数指的是一个函数A作为参数传递个也给函数B，在B的函数体内条用函数A，此时，称函数A为回调函数。其中，匿名函数常用作函数的参数传递，实现回调函数。
<span class="one2">递归调用：</span>是函数嵌套调用中一种特殊的调用，指的是一个函数在其函数体内调用自身的过程。需要注意的是，递归调用虽然在遍历维数不固定的多维数组时非常合适，但它占用的内存和资源比较多，同时难以实现和维护，因此在开发中不建议使用。
<span class="one2">作用域的分类和作用域链：</span>变量需要在作用范围内才可以被使用，作用范围称为作用域。JavaScript根据作用域使用的范围不同，划分为全局作用域、函数作用域和块级作用域(ES6提供的)；
在一个函数内部声明另一个函数时，就会出现函数嵌套的效果。当函数嵌套时，内层函数只能在外层函数作用域内执行；内层函数的变量会在当前作用域中寻找，若未找到，则继续向上一层级的作用域中寻找，直到全局作用域，
这种链式的查询关系为作用域链。
</p>
<p class="beforeImg">全局变量：不在任何函数内声明的变量(显式定义)或在函数内省略var声明的变量(隐式定义)都称为全局变量，在同一个页面文件中的所有脚本内都可以使用。</p>
<p class="beforeImg">局部变量：在函数体内利用var关键字定义的变量称为局部变量，仅在该函数体内有效。</p>
<p class="beforeImg">块级变量：ES6提供的let关键字声明的变量称为块级变量，仅在"{}"中间有效，如if、for或while语句等。</p>
<ul><li>闭包函数和预解析</li></ul>
<p class="one1">
<span class="one2">闭包函数：</span>闭包就是有权访问另一函数作用域内变量(局部变量)的函数。主要用途：1、可以在函数外部读取函数内部的变量；2、可以让变量的值始终保持在内存中。
注意：由于闭包会使得函数中的变量一直被保存在内存中，内存消耗很大，所以滥用闭包可能会降低程序的处理速度，造成内存消耗等问题。
<span class="one2">预解析：</span>JavaScript代码是由浏览器中的JavaScript解析器来执行的，JavaScript解析器在运行JavaScript代码的时候会进行预解析，也就是提前对代码中的var变量声明和function函数声明进行解析，再执行其他代码。
</p>
<h3 id="four">JavaScript对象</h3>
<p>JavaScript中，对象可以看作无序的集合数据类型，由若干的键值对组成，世界上的万物都可看作对象，每个对象都带有属性和方法。对象可以用来统一管理多个数据。</p>
<ul><li>对象和内置对象：在计算机中，一个网页、一个与远程服务器建立的连接也可以看成是"对象"。为了方便程序开发，JavaScript提供了很多常用的内置对象，包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。</li></ul>
<p class="one1">
<span class="one2">对象的定义及创建：</span>在JavaScript中，对象是一种数据类型，由属性和方法组成的一个集合。属性是指十五的特征，方法是指事物的行为。
在代码中，属性可以看成是对象中保存的一个变量，使用"对象.属性名"表示；方法可以看成是对象中保存的一个函数，使用"对象.方法名()"进行访问。
可以分别用字面量和构造函数来创建对象。在JavaScript中，对象的字面量就是用花括号"{}"来包裹对象中的成员，每个成员使用"key:value"的形式来保存，key表示属性名或方法名，value表示相应的值。多个对象成员之间用","隔开。
还可以使用new Object()的方式进行创建对象，之后通过访问的方式向对象中增加成员。也可以使用构造函数的形式创建对象，语法new 构造函数名()，此时函数名的首字母应大写，其中小括号中可以传递参数给构造函数，如果没有参数，小括号可以省略。
静态成员：静态成员不需要创建实例对象就能使用，可以通过构造函数名直接访问或设置成员。遍历对象的属性和方法：使用for...in语法可以遍历对象中的所有属性和方法。
语法：for(var k in obj){}其中，k是一个变量名，可以自定义，表示键名。k用来获取当前成员的key，使用obj[j]可以获取对应的成员值，使用obj[j]()可以调用对象中的函数。此外，当判断一个对象中的成员是否存在时，可以使用in运算符。返回true或false。
<span class="one2">内置对象：</span>JavaScript提供的内置对象非常多，学习内置对象最好的方法是查阅网络上的最新文档。网址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript。
</p>
<ul><li>Math和Date对象：Math对象用来对数字进行与数学相关的运算，该对象不是构造函数，不需要实例化对象，可以直接使用其静态属性和静态方法。JavaScript中的日期对象用来处理日期和时间。</li></ul>
<p class="one1">
<span class="one2">Math对象的使用：</span>Math对象的属性和方法，其中PI、random()和round(x)要格外注意。
<span class="one2">日期对象的使用：</span>JavaScript中的对象需要使用new Date()实例化对象才能使用，Date()是日期对象的构造函数。可以传入一些参数，来表示具体的时间，默认为当前时间。在获取到日期对象后，直接输出对象得到的是一个字符串来表示当前的日期和时间。
如果想要用其他格式来表示这个日期和时间，可以通过调用日期对象的相关方法来实现，日期对象的常用方法分为get和set两大类。查阅网址进行学习。
</p>
<ul><li>数组和字符串对象：JavaScript中的数组对象可以使用new Array或字面量"[]"来创建，在创建以后，就可以调用数组对象提供的一些方法来实现对数组的操作了，如添加或删除数组元素、数组排序、数组索引等。在JavaScript中，字符串对象提供了一些用于对字符串进行处理的属性和方法，可以很方便地实现字符串的查找、截取、替换、大小写转换等。</li></ul>
<p class="one1">
<span class="one2">数组对象的操作：</span>数组类型的检测分别可以使用instanceof运算符和Array.isArray()方法。添加或删除数组元素；数组排序；数组索引；数组转换为字符串；其他方法；
<span class="one2">字符串对象的操作：</span>根据字符串返回索引位置；根据位置返回字符；字符串操作方法；
</p>
<ul><li>值类型和引用类型：在JavaScript中，基本数据类型又称为值类型，复杂数据类型(对象)又称为引用数据类型。引用类型的特点是，变量中保存的仅仅是一个引用的地址，当对变量进行赋值时，并不是将对象复制了一份，而是将两个变量指向了同一个对象的引用。当一个对象只被一个变量引用的时候，如果这个变量又被重新赋值，则该对象就会变成没有任何变量引用的情况，这时候就会由JavaScript的垃圾回收机制自动释放。</li></ul>
<h3 id="five">DOM</h3>
<p>在web api阶段主要学习DOM和BOM，实现页面交互功能，本章将针对如何在JavaScript中利用DOM获取元素及操作元素进行介绍。</p>
<ul><li>Web API和DOM简介：Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。文档对象模型(DOM)，是w3c组织推荐的处理可扩展标记语言(html或者xml)的标准编程接口。w3c定义了一系列的DOM接口，利用DOM可完成对html文档内所有元素的获取、访问、标签属性和央视的设置等操作。</li></ul>
<p class="one1">
<span class="one2">Web API与API的关系：</span>API(应用程序编程接口)是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能。开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。
Web API是主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API。
<span class="one2">DOM和DOM树：</span>DOM中将html文档视为树结构，所以被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
文档：一个页面就是一个文档。元素：页面中的所有标签都是元素。节点：网页中的所有内容，在文档树中都是节点(如元素节点、属性节点、文本节点、注释节点等)。DOM会把所有的节点都看作是对象，这些对象拥有自己的属性和方法。
</p>
<ul><li>获取元素：在开发中，想要操纵页面上的某个部分(如控制一个div元素的显示或隐藏、修改div元素的内容等)，需要先获取到该部分对应的元素，再对其进行操作。</li></ul>
<p class="one1">
<span class="one2">根据id、标签、name获取元素及html5新增获取元素</span>
</p>
<p class="beforeImg">根据id获取元素：getElementById()方法是由document对象提供的用于查找元素的方法。该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。
语法：document.getElementById("id");需要注意的是，JavaScript中严格区分大小写，所以在书写时一定要遵守书写规范，否则程序会报错。</p>
<p class="beforeImg">根据标签获取元素：两种方式，分别是通过document对象获取元素和通过element对象获取元素，语法：document.getElementsByTagName("标签名");和element.getElementsByTagName("标签名");其中，element是元素对象的统称。
通过元素可以查找该元素的子元素或后代元素，实现局部查找元素的效果，而document对象是从整个文档中查找元素。由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，
或称为伪数组，它可以像数组一样用索引来访问对象，但不能使用push()等方法。使用Array.isArray()也可以整明它不是一个数组。</p>
<p class="beforeImg">根据name获取元素：通过name属性来获取元素应使用document.getElementsByName()方法，一般用于获取表单元素。name属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。</p>
<p class="one1">
<span class="one2">html5中新增了getElementsByClassName()、querySelector()和querySelectorAll()方法，在使用时需要考虑到浏览器的兼容性问题。</span>
</p>
<p class="beforeImg">根据类名获取：document.getElmentsByClassName()方法，用于通过类名来获得某些元素集合。</p>
<p class="beforeImg">querySelector()和querySelectorAll()：querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法用于返回指定选择器的所有元素对象集合。</p>
<p class="one1">
<span class="one2">document对象的属性：document对象提供了一些属性，可用于获取文档中的元素。例如，获取所有表单的标签，图片标签等。</span>
</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>属性</th>
<th>说明</th>
</tr>
<tr>
<td>document.body</td>
<td>返回文档的body元素</td>
</tr>
<tr>
<td>document.title</td>
<td>返回文档的title元素</td>
</tr>
<tr>
<td>document.documentElement</td>
<td>返回文档的html元素</td>
</tr>
<tr>
<td>document.forms</td>
<td>返回对文档中所有Form对象的引用</td>
</tr>
<tr>
<td>document.images</td>
<td>返回对文档中所有Image对象的引用</td>
</tr>
</table>
<ul><li>事件基础及操作元素：在获取到元素后，如果需要为元素添加交互行为，就要用到事件来实现。在JavaScript中，DOM操作可以改变网页内容、结构和样式。</li></ul>
<p class="one1">
<span class="one2">认识事件和事件三要素：</span>事件由事件源、事件类型和事件处理程序3部分组成，又称为事件三要素。事件源：触发事件的元素；事件类型：如click单击事件；事件处理程序：事件触发后要执行的代码(函数形式)，也称事件处理函数。
<span class="one2">操作元素的内容、属性和样式</span>
</p>
<p class="beforeImg">操作元素内容：在JavaScript中，要想操作元素内容，首先要获取到该元素。利用DOM提供的属性实现对元素内容的操作。</p>
<p style="text-align: center">操作元素内容的常用属性</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>属性</th>
<th>说明</th>
</tr>
<tr>
<td>element.innerHTML</td>
<td>设置或返回元素开始和结束标签之间的HTML，包括HTML标签，同时保留空格和换行</td>
</tr>
<tr>
<td>element.innerText</td>
<td>设置或返回元素的文本内容，在返回的时候会去除HTML标签和多余的空格、换行，在设置的时候会进行特殊字符转义</td>
</tr>
<tr>
<td>element.textContent</td>
<td>设置或者返回指定节点的文本内容，同时保留空格和换行</td>
</tr>
</table>
<p class="beforeImg">操作元素属性：在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性。语法：访问：元素对象.属性名；设置：元素对象.属性名=属性值；</p>
<p class="beforeImg">操作元素样式：操作元素样式有两种方式，一种是操作style属性，另一种是操作className属性。其中，通过style方式访问或者获取元素的样式语法：元素对象.style.样式属性名，样式属性对应css样式名，但需要去掉css样式名里的半字线"-"，
并将半字线后面的英文的首字母大写。例如，设置字体的大小的样式名font-size，对应的样式属性名为fontSize。第二种方式为操作类名的方式更改元素样式，语法为："元素对象.className"。访问className属性的值表示获取元素的类名，
为className属性赋值表示更改元素类名。如果元素有多个类名，在className中以空格分隔。</p>
<ul><li>排他操作</li></ul>
<p class="one1">
<span class="one2">排他思想：</span>简单理解就是排除掉其他的(包括自己)，然后再给自己设置想要实现的效果。排他思想的实现步骤就是所有元素全部清除与设置当前元素。
</p>
<ul><li>属性和自定义属性：在HTML中，元素有一些自带的属性，如div元素的属性有id、class、title、style。开发者也可以为元素添加自定义属性。在实际开发中，自定义属性有很广泛的应用。例如保存一些在JavaScript中用到的数据。</li></ul>
<p class="one1">
<span class="one2">获取、设置和移除属性</span>
</p>
<p class="beforeImg">获取元素属性值：在DOM对象中可以使用"element.属性"的方式来获取内置的属性值，但是DOM对象并不能直接使用点语法获取到自定义属性的值，在DOM中可以使用：元素对象.getAttribute('属性')方法来返回指定元素的属性值。</p>
<p class="beforeImg">设置属性值：在DOM对象中可以使用element.属性='值'的方式来设置内置的属性值，并且针对于自定义属性，提供了"element.setAttribute('属性','值')"的方式进行设置，对设置了自定义属性的标签，在浏览器中的HTML结构中可以看到该属性。</p>
<p class="beforeImg">移除属性：在DOM中使用"element.removeAttribute('属性')"的方式来移除元素属性。</p>
<p class="one1">
<span class="one2">设置和获取自定义属性：</span>一般的自定义属性可以通过getAttribute('属性')方法来获取，但是有些自定义属性很容易引起歧义，不容易判断是元素的自带属性还是自定义属性。
因此，HTML5新增了自定义属性的规范。在HTML5中规定通过"data-属性名"的方式设置自定义属性。
</p>
<p class="beforeImg">设置属性值：元素的"data-*"自定义属性有两种设置方式。分别是在html和JavaScript中设置自定义属性，html：语法，<div data-index="2"></div>其中，data-index就是一种自定义属性，"data-"是自定义属性的前缀，
index是开发者自定义的属性名。JavaScript：可以通过setAttribute('属性',"值")或者"元素对象.dataset.属性名='值'"两种方式设置自定义属性，
需要注意的是，通过后者的方式只能设置以"data-"开头的自定义属性。例：element.dataset.index='2',其中在浏览器中查看元素时显示，data-index。</p>
<p class="beforeImg">获取属性值：在DOM操作中，提供了两种获取属性值的方式，第1种通过getAttribute()方式，该方式可以获取内置属性或者自定义属性；第2中是使用html5新增的"element.dataset.属性"或者"element.dataset['属性']"方式，推荐使用第1种，
第2种存在兼容性问题。</p>
<ul><li>节点操作：HTML文档可以看作是一个节点树，网页中的所有内容都是节点(包括元素、属性、文本、注释等)。</li></ul>
<p class="one1">
<span class="one2">认识节点和节点层级：</span>HTML DOM树中的所有节点均可通过JavaScript进行访问，因此，可以利用操作节点的方式操作HTML中的元素。一般来说，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这3个基本属性。
常见的节点类型：元素节点：nodeType为1；属性节点：nodeType为2；文本节点：nodeType为3。文本节点包含文字、空格、换行等。在实际开发中，节点操作主要操作的是元素节点，开发者可以根据nodeType的值来判断是否为元素节点。
节点层级：DOM中将HTML文档视为树结构，一个HTML文件可以看作是左右元素组成的一个节点数，各元素节点之间有级别的划分。节点之间的层级关系，最常见的是父子兄弟层级关系。
根节点：<html>标签是整个文档的根节点，有且仅有一个。父节点：指的是某一个节点的上级节点。子节点：指的是某一个节点的下级节点。兄弟节点：两个节点同属于一个父节点。
获取父级、子级、兄弟节点：
父级节点：在JavaScript中，可以使用parentNode属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回null，语法格式为：obj.parentNode，其中，obj是一个DOM对象。
子级节点：在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合。1、childNodes属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合。childNodes属性返回值里面包含了元素节点、
文本节点等其他类型的节点，可以通过nodeType来进行筛选。值得一提的是，childNodes属性在IE6~IE8中不会获取文本节点，在IE9及以上版本和主流浏览器中则可以获取文本节点。在实际开发中不提倡使用childNodes。
2、children是一个可读属性，返回所有子元素节点。children只返回子元素节点，其余节点不返回。目前各大浏览器都支持该属性，在实际开发中推荐使用children。3、firstChild属性和lastChild属性，前者返回第一个子节点，后者返回最后一个子节点，
如果找不到则返回null。节点包括文本节点和元素节点等。4、firstElementChild和lastElementChild属性分别返回第一个子元素节点和最后一个子元素节点，如果找不到返回null，这两个属性有兼容性问题。实际开发中，
考虑到操作方便和兼容性问题通常使用"obj.children[索引]"的方式来获取子元素节点。
兄弟节点：在JavaScript中，可以使用nextSibling属性来获得下一个兄弟节点，使用previousSibling属性来获得上一个兄弟节点。返回值包含元素节点或者文本节点等。如果找不到，返回null。对于直接获得兄弟元素节点，
可以使用nextElementSibling和previousElementSibling属性来获得下一个兄弟元素节点和上一个兄弟元素节点。找不到返回null。这两个属性也具有兼容性，IE9以上才支持。
<span class="one2">创建、添加、删除和复制节点：</span>在获取元素节点后，可以利用DOM提供的方法实现节点的创建、添加、删除和复制。
创建节点：1、document.write()：如果页面文档流加载完毕，再调用会导致页面重绘。2、element.innerHTML:将内容写入某个DOM节点，不会导致页面全部重绘。3、document.createElement("tagName"):创建由tagName指定的HTML元素，
创建多个元素时效率稍微第一点，但是结构更加清晰。
添加和删除节点：在DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加节点，node.removeChild(child)用于删除节点。1、appendChild(child):将一个节点添加到指定父节点的子节点列表末尾，类似于css中的after伪元素。
2、insertBefore(child,指定元素位置):将一个节点添加到父节点的指定子节点前面，类似于css中的before伪元素。3、removeChild(child):用于删除节点，该方法从DOM中删除一个节点，返回删除的节点。
复制节点：在DOM中，提供了node.cloneNode()方法，返回调用该方法的节点的一个副本，也称为克隆节点或者拷贝节点。语法："需要被复制的节点.cloneNode(true/false)"。参数为空或false是浅拷贝，即只复制节点本身，不复制里面的子节点；
参数为true是深拷贝，即会复制节点本身及里卖弄所有的子节点。
</p>
<ul><li>事件进阶和事件对象</li></ul>
<p class="one1">
<span class="one2">注册和删除事件</span>
注册事件：在JavaScript中，注册事件(绑定事件)有两种方式，即传统方式注册事件和事件监听方式注册事件。1、传统方式：在JavaScript中，经常使用on开头的事件(如onclick)，为操作的DOM元素对象添加事件与事件处理程序。
语法：元素对象.事件=事件处理程序。例，元素对象.onclick=function(){}。其中，使用这种方式注册时间的特点在于注册事件的唯一性，即同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。
2、事件监听方式：为了给同一个DOM对象的同一个事件添加多个事件处理程序，DOM 2级事件模型中引入了事件流的概念，可以让DOM对象通过事件监听的方式实现事件的绑定。由于不同浏览器采用的事件流实现方式不同，
事件监听的实现存在兼容性问题。根据浏览器的内核，可以把浏览器划分为两大类，一类是早期版本的IE浏览器(如IE6~IE8)，一类是遵循W3C标准的浏览器。(1)早期IE浏览器：DOM对象.attachEvent(type,callback)；
其中，参数type指的是为DOM对象绑定的事件类型，是由on与事件名称组成的，如onclick。参数callback表示事件的处理程序。(2)标准浏览器：DOM对象.addEventListener(type,cllback,[capture]);其中，参数capture默认值为false，
表示在冒泡阶段完成事件处理，将其设置为true时，表示在捕获阶段完成事件处理。以上两种浏览器，在实现事件监听时除了语法不同外，事件处理程序的触发顺序也不相同。前者按添加的顺序倒序执行，后者按添加的顺序正序执行。
删除事件：在保证事件监听的处理程序是一个有名的函数时，开发中可根据实际需求移出DOM对象的事件监听，同样要考虑兼容性问题，1、传统方式：DOM对象.onclick；2、早期浏览器：DOM对象.detachEvent(type,callback)；
3、标准浏览器：DOM对象.removeRventListener(type,callback)；
<span class="one2">DOM事件流：</span>事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，事件传播的过程就是事件流。在浏览器发展的历史中，网景(Netscape)公司团队的事件流采用事件捕获方式，
指的是事件流传播的顺序应该是从DOM树的最上层开始出发一直到发生事件的元素节点。而微软公司的事件流采用事件冒泡方式，指的是事件流传播的顺序应该是从发生时间的元素节点到DOM树的根节点。W3C对网景和微软提出的方案进行了中和处理，
规定事件发生后，首先是先事件捕获，但不会对事件进行处理，然后进行到目标阶段，执行当前元素对象的事件处理程序，但它会被看成是冒泡阶段的一部分；最后实现事件的冒泡，逐级对事件进行处理。
<span class="one2">认识事件对象：</span>当一个事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是event，只有有了事件，event才会存在，它是系统自动创建的，不需要传递参数。
事件对象是一系列相关数据的集合。
<span class="one2">事件对象的使用及其常用属性和方法</span>
事件对象的使用：虽然所有的浏览器都支持事件对象event，但是不同的浏览器获取事件对象的方式不同。在标准浏览器中会将一个event都对象直接传入到事件处理程序中，而早期版本的IE浏览器(IE6~IE8)中，仅能通过window.event才能获取事件对象，
语法：var 事件对象=window.event；W3C内置浏览器：DOM对象.事件=function(event){}；开发中用var e=event || window.event来获取事件对象。
<p style="text-align:center">事件对象的常用属性和方法，通常采用"||"来解决兼容问题</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>属性</th>
<th>说明</th>
<th>浏览器</th>
</tr>
<tr>
<td>e.target</td>
<td>返回触发事件的对象</td>
<td>标准浏览器</td>
</tr>
<tr>
<td>e.srcElement</td>
<td>返回触发事件的对象</td>
<td>IE6~IE8使用</td>
</tr>
<tr>
<td>e.type</td>
<td>返回事件的类型</td>
<td>所有浏览器</td>
</tr>
<tr>
<td>e.stopPropagation()</td>
<td>阻止事件冒泡</td>
<td>标准浏览器，所获得的事件类型不带on</td>
</tr>
<tr>
<td>e.cancalBubble</td>
<td>阻止事件冒泡</td>
<td>IE6~IE8使用</td>
</tr>
<tr>
<td>e.preventDefault()</td>
<td>阻止默认事件(默认行为)</td>
<td>标准浏览器</td>
</tr>
<tr>
<td>e.returnValue</td>
<td>阻止默认事件(默认行为)</td>
<td>IE6~IE使用</td>
</tr>
</table>
</p>
<p class="one1">
对比e.target和this的区别：在事件处理函数中，e.target返回的是触发事件的对象，而this返回的是绑定事件的对象。
事件委托：原理是不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父结点上，让其利用事件冒泡的原理影响到每个子节点。这样做只操作了一次DOM，提高了程序的性能。
</p>
<ul><li>鼠标和键盘事件：鼠标是计算机的一种输入设备，也是计算机显示系统纵横坐标定位的指示器，所以鼠标事件是Web开发中最常用的一类时间。键盘事件是指用户在使用键盘时触发的事件。对于鼠标和键盘事件这里不做介绍。</li></ul>
<p class="one1">
<span class="one2">鼠标事件的方法：</span>1、禁止鼠标右击菜单：contextmenu主要控制应该何时显示上下文菜单，主要应用与程序员取消默认的上下文菜单。2、禁止鼠标选中：selectstart事件是鼠标开始选择文字时就会触发，如果禁止鼠标选中，需要禁止该事件的默认行为。
例：document.addEventListener('contextmenu/selectstart',function(e){e.preventDefault();})。
<table align="center">
<tr bgcolor="#C0C0C0">
<th>事件名称</th>
<th>事件触发时机</th>
</tr>
<tr>
<td>onclick</td>
<td>单击鼠标左键时触发</td>
</tr>
<tr>
<td>onfocus</td>
<td>获得鼠标指针焦点触发</td>
</tr>
<tr>
<td>onblur</td>
<td>失去鼠标指针焦点触发</td>
</tr>
<tr>
<td>onmouseover</td>
<td>鼠标指针经过时触发</td>
</tr>
<tr>
<td>onmouseout</td>
<td>鼠标指针离开时触发</td>
</tr>
<tr>
<td>onmousedown</td>
<td>当按下任意鼠标按键时触发</td>
</tr>
<tr>
<td>onmouseup</td>
<td>当释放任意鼠标按键时触发</td>
</tr>
<tr>
<td>onmousemove</td>
<td>在元素内当鼠标指针移动时持续触发</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">键盘事件的方法：</span>需要注意的是，keypass事件保存的按键值是ASCII码，keydown和keyup事件保存的按键值是虚拟键码，keydown和keypress如果按住不放的话，会重复触发该对应事件。keyup和keydown事件不区分字母
大小写，而keypress区分字母大小写。在发生keydown和keypress事件时，event事件对象的keycode属性会包含一个值，该值与键盘上的特定值对应。keycode的值与ASCII码对应的值相同。例，keycode值为13表示Enter键，keycode值为9表示Tab键。
可参考MDN手册查看。
<table align="center">
<tr bgcolor="#C0C0C0">
<th>事件名称</th>
<th>时间触发时机</th>
</tr>
<tr>
<td>keypress</td>
<td>某个键盘按键被按下时触发。不识别功能键，如Ctrl、Shift、箭头等</td>
</tr>
<tr>
<td>keydown</td>
<td>某个键盘按键被按下时触发</td>
</tr>
<tr>
<td>keyup</td>
<td>某个键盘按键被松开时触发</td>
</tr>
</table>
</p>
<h3 id="six">BOM</h3>
<ul><li>BOM简介和window对象常见事件：在实际开发中，使用JavaScript开发Web程序时，经常需要对浏览器进行访问及其他的操作，实现浏览器与页面之间的动态交互效果。为此，BOM提供了很多用于访问浏览器的对象。</li></ul>
<p class="one1">
<span class="one2">认识BOM及其与DOM的区别</span>
认识BOM：浏览器对象模型(Brower Object Model，BOM)提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。但是BOM缺乏标准，
JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，而BOM最初是Netscape网景浏览器标准的一部分。
BOM与DOM的区别：DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document,主要学习的操作页面元素。DOM是W3C标准规范。BOM是浏览器对象模型，是把浏览器当作一个对象来看待，它的顶级对象是window，
主要学习的是浏览器窗口交互的一些对象。BOM是浏览器厂商在各自浏览器上定义的，兼容性较差。
<span class="one2">BOM的构成：</span>BOM提供了很多的对象。这些对象用于访问浏览器，被称为浏览器对象。各内置对象之间按照某种层次组织起来的模型统称为浏览器对象模型。BOM的核心对象是window，其他对象称为window的子对象，它们以属性的方式添加到window
对象中的。window--document、location、navigator、screen、history。window对象是浏览器顶级对象，具有双重角色，既是JavaScript访问浏览器窗口的一个接口，又是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性
和方法。在前面的知识中，之所以省略var也可以直接为一个未声明变量赋值，是因为这个变量自动转换为了window对象的属性。前面学习的alert()、prompt()实际上都属于window对象的方法，在调用的时候省略了前面的"window"。由于window对象中
本来就有一个name属性，所以在全局作用域下声明的便来给你不推荐使用name作为变量名，以避免和window对象的name属性冲突。
<span class="one2">窗口事件</span>
窗口加载事件：window.onload是窗口(页面)加载事件，当文档内容(包括图像、脚本文件、css文件等)完全加载完成会触发该事件，调用该事件对应的事件处理函数。JavaScript代码是从上往下依次执行的，如果要在页面加载完成后执行某些代码，
又想要把这些代码写到页面任意的地方，可以把代码写到window.onload事件处理函数中。此时需要注意传统的注册事件执行最后一次事件函数，而标准浏览器的注册事件可以执行多个事件。
document.DOMContentLoaded加载事件会在DOM加载完成时触发。这里所说的加载不包括css样式表、图片和flash动画等额外内容的加载，因此，该事件的优点在于执行的时机更快，适用于页面中图片很多的情况。
调整窗口大小事件：当调整window窗口大小的时候会触发window.onresize事件，调用事件处理函数。其中，可以使用window.innerWidth获取当前屏幕的宽度。
</p>
<ul><li>定时器</li></ul>
<p class="one1">
<span class="one2">定时器方法：</span>浏览网页时，经常看到轮播图效果，即每隔一段时间，图片就会自动切换一次；或者在商品页面看到商品倒计时功能，这些动画就用到了定时器。定时器就是在指定时间后执行特定操作，或者让程序代码每隔一段时间执行一次，实现间歇操作。
<p style="text-align: center">定时器方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>方法</th>
<th>说明</th>
</tr>
<tr>
<td>setTimeout(函数，时间)</td>
<td>在指定的毫秒数后调用函数或执行一段代码</td>
</tr>
<tr>
<td>setInterval(函数，时间)</td>
<td>按照指定的周期(以毫秒计)来调用函数或执行一段代码</td>
</tr>
<tr>
<td>clearTimeout(定时器名字)</td>
<td>取消由setTimeout()方法设置的定时器</td>
</tr>
<tr>
<td>clearInterval(定时器名字)</td>
<td>取消由setTimeout()方法设置的定时器</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">this指向：</span>this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁。一般情况下this的最终指向的是调用它的对象。
1、在全局作用域或者普通函数中，this指向全局对象window。
2、在对象的方法中，谁调用的方法，this就指向谁。
3、构造函数中的this指向的是新创建的实例。
</p>
<ul><li>JavaScript执行机制：JavaScript的定时器可以完成一些异步操作。例如，同时设置多个定时器，每个定时器都在3秒后执行一段代码，则3秒后，这些定时器中的代码都会执行。JavaScript的定时器虽然没有java中的多线程那样强大，但在开发中也能满足大部分的需求。</li></ul>
<p class="one1">
<span class="one2">单线程：</span>JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致，即JavaScript视为处理页面中用户的交互，以及操作DOM而诞生的。单线程就意味着，所有的任务需要排队，
前一个任务结束，才会执行后一个任务，这样所导致的问题是，如果JavaScript执行的时间太长，就会造成页面的渲染不连贯，导致页面渲染加载有阻塞的感觉。
<span class="one2">同步和异步：</span>为了更好地利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是JavaScript出现了同步和异步的概念。
同步：就是前一个任务结束后在执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：就是在做一件事的同时，可以去处理其他的事情。
同步任务都是在主线程上执行的，会形成一个执行栈，而异步任务是通过回调函数实现的。一般来说，异步任务有3种类型，1、普通事件：如clifk、resize等；2、资源加载：如load、error等；3、定时器：如setInterval()、setTimeout()。
<span class="one2">执行机制：</span>在JavaScript中，同步任务是优先执行的，它们会被放入执行栈中执行，而异步任务(回调函数)则被放入任务队列中。一旦执行栈中的所有绒布任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务就会结束等待状态，
进入执行栈，开始执行。注意，此时执行栈中的异步任务按调用的顺序执行，并不按顺序执行。
</p>
<ul><li>location对象：location对象比较特别，它既是window对象的属性，同时也是document对象的属性，window.location等同于document.location，它们是引用了同一个对象。location对象不仅提供了与当前显示文档相关的信息，而且还提供了用户获取和设置窗体的URL。</li></ul>
<p class="one1">
<span class="one2">URL的组成：</span>location对象与URL相关。在Internet上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，访问标记符称为统一资源定位符(Uniform Resource Locator,URL)。在URL中，包含了网络协议、
服务器的主机名、端口号、资源名称字符串、参数以及锚点。
<p style="text-align: center">URL组成说明</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>各部分</th>
<th>说明</th>
</tr>
<tr>
<td>protocol</td>
<td>网络协议，常用的如http、ftp、mailto等</td>
</tr>
<tr>
<td>host</td>
<td>服务器的主机名，如www.example.com</td>
</tr>
<tr>
<td>port</td>
<td>端口号，可选，省略时使用协议的默认端口，如http默认端口为80</td>
</tr>
<tr>
<td>path</td>
<td>路径，如"/web/index.html"</td>
</tr>
<tr>
<td>query</td>
<td>参数，为键值对的形式，通过"&"符号分隔，如"a=3&b=4"</td>
</tr>
<tr>
<td>fragment</td>
<td>锚点，如"#res"，表示页面内部的锚点</td>
</tr>
</table>
</p>
<p class="one1">
<span class="one2">location的属性和方法：</span>BOM中location对象提供的属性，可以更改当前用户在浏览器中访问的URL，实现新文档的载入、重载以及替换等功能。location对象提供的方法用于改变URL地址的方法，所有主流浏览器都支持。
<p style="text-align: center">location对象的属性</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>属性</th>
<th>说明</th>
</tr>
<tr>
<td>location.search</td>
<td>返回(或设置)当前URL的查询部分("?"之后的部分)</td>
</tr>
<tr>
<td>location.hash</td>
<td>返回一个URL的锚部分(从"#"开始的部分)</td>
</tr>
<tr>
<td>location.host</td>
<td>返回URL的主机名和端口</td>
</tr>
<tr>
<td>location.hostname</td>
<td>返回URL的主机名</td>
</tr>
<tr>
<td>location.href</td>
<td>返回完整的URL</td>
</tr>
<tr>
<td>location.pathname</td>
<td>返回URL的路径名</td>
</tr>
<tr>
<td>location.port</td>
<td>返回一个URL服务器使用的端口号</td>
</tr>
<tr>
<td>location.protocol</td>
<td>返回一个URL协议</td>
</tr>
</table>
<p style="text-align: center">location对象的方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>方法</th>
<th>说明</th>
<th>参数</th>
</tr>
<tr>
<td>assign</td>
<td>location.assign():载入一个新的文档</td>
<td>接受的参数为URL地址</td>
</tr>
<tr>
<td>reload()</td>
<td>location.reload():重新加载当前文档</td>
<td>唯一参数，是一个布尔类型值，为true时，绕过缓存直接重新下载</td>
</tr>
<tr>
<td>replace()</td>
<td>location.replace():用新的文档替换当前文档，覆盖浏览器当前记录</td>
<td>只接受一个要导航到的URL参数且调用后不能返回到前一个页面</td>
</tr>
</table>
</p>
<ul><li>nacigator对象：navigator对象包含有关浏览器的信息，但是每个浏览器中的navigator对象中都有一套自己的属性，下面列举了主流浏览器中存在的属性和方法。</li></ul>
<p style="text-align: center">navigator对象的属性和方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>分类</th>
<th>名称</th>
<th>说明</th>
</tr>
<tr>
<td rowspan="6">属性</td>
<td>appCodeName</td>
<td>返回浏览器的内部名称</td>
</tr>
<tr>
<td>appName</td>
<td>返回浏览器的完整名称</td>
</tr>
<tr>
<td>appVersion</td>
<td>返回浏览器的平台和版本信息</td>
</tr>
<tr>
<td>cookieEnabled</td>
<td>返回指明浏览器中是否启用Cookie的布尔值</td>
</tr>
<tr>
<td>platform</td>
<td>返回运行浏览器的操作系统平台</td>
</tr>
<tr>
<td>userAgent</td>
<td>返回由客户端发送到服务器的User-Agent头部的值</td>
</tr>
<tr>
<td>方法</td>
<td>javaEnabled()</td>
<td>指定是否在浏览器中启用Java</td>
</tr>
</table>
<ul><li>history对象：BOM中提供的history对象，可以对用户在浏览器中访问过的URL历史记录进行操作。处于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现"后退"和"前进"的功能。</li></ul>
<p style="text-align: center">history对象的属性和方法</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>分类</th>
<th>名称</th>
<th>说明</th>
</tr>
<tr>
<td>属性</td>
<td>length</td>
<td>返回历史列表中的网址数</td>
</tr>
<tr>
<td rowspan="3">方法</td>
<td>back()</td>
<td>加载history列表中的前一个URL</td>
</tr>
<tr>
<td>forword()</td>
<td>加载history列表中的下一个URL</td>
</tr>
<tr>
<td>go()</td>
<td>加载history列表中的某个具体页面</td>
</tr>
</table>
<h3 id="seven">JavaScript网页特效</h3>
<p>通过学习JavaScript网页特效中的三大系列，主要包括offset系列、client系列和scroll系列，可以实现模态框拖曳、放大镜等交互效果。</p>
<ul><li>元素偏移量offset系列：offset的含义是偏移量，使用offset的相关属性可以动态地获取元素的位置、大小等。</li></ul>
<p class="one1">
<span class="one2">offset概述：</span>在获取元素的位置和大小时，返回的是数值，没有单位，获取到的元素高度和宽度包括padding、边框和内容区域的宽度。在offset中没有提供offsetRight和offsetBottom属性，只有offsetLeft和offsetTop两个属性或获取位置。
在使用时该元素的父元素一定要设置定位position。如果没有设置定位，则返回的是body。
<p style="text-align: center">offset系列属性</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>属性</th>
<th>说明</th>
</tr>
<tr>
<td>offsetLeft</td>
<td>返回元素相对其带有定位的父元素左边框的偏移</td>
</tr>
<tr>
<td>offsetTop</td>
<td>返回元素相对其带有定位的父元素上方的偏移</td>
</tr>
<tr>
<td>offsetWidth</td>
<td>返回自身的宽度(包括padding、边框和内容区域的宽度)。注意返回数值不带单位</td>
</tr>
<tr>
<td>offsetHeight</td>
<td>返回自身的高度(包括padding、边框和内容区域的高度)。注意返回数值不带单位</td>
</tr>
<tr>
<td>offsetParent</td>
<td>返回作为该元素带有定位元素的父级元素(如果父级都没有定位则返回body)</td>
</tr>
</table>
<span class="one2">offset与style的区别：</span>想要获取元素的大小位置，使用offset更为合适；而想要给元素更改值，则需要使用style来改变。
<p style="text-align: center">offset与style的区别</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>Offset</th>
<th>style</th>
</tr>
<tr>
<td>offset可以得到任意样式表中的样式值</td>
<td>style只能得到行内样式表中的样式值</td>
</tr>
<tr>
<td>offset系列获得的数值是没有单位的</td>
<td>style.width获得的是带有单位的字符串</td>
</tr>
<tr>
<td>offsetWidth包含padding、border、width的值</td>
<td>style.width获得的是不包含padding、border的值</td>
</tr>
<tr>
<td>offsetWidth等属性是只读属性，只能获取不能赋值</td>
<td>style.width是可读写属性，可以获取也可以赋值</td>
</tr>
</table>
</p>
<ul><li>元素可视区client系列：client的中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。例如，可以动态地得到元素的边框大小、元素大小等。</li></ul>
<p style="text-align: center">client系列属性</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>属性</th>
<th>说明</th>
</tr>
<tr>
<td>clientLeft</td>
<td>返回元素左边框的大小</td>
</tr>
<tr>
<td>clientTop</td>
<td>返回元素上边框的大小</td>
</tr>
<tr>
<td>clientWidth</td>
<td>返回自身的宽度(包含padding)，内容区域的宽度(不含边框)。注意返回数值不带单位</td>
</tr>
<tr>
<td>clientHeight</td>
<td>返回自身的高度(包含padding)，内容区域的高度(不含边框)。注意返回数值不带单位</td>
</tr>
</table>
<ul><li>元素滚动scroll系列：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。</li></ul>
<p style="text-align: center">scroll系列属性</p>
<table align="center">
<tr bgcolor="#C0C0C0">
<th>属性</th>
<th>说明</th>
</tr>
<tr>
<td>scrollLeft</td>
<td>返回被卷去的左侧距离，返回数值不带单位</td>
</tr>
<tr>
<td>scrollTop</td>
<td>返回被卷去的上方距离，返回数值不带单位</td>
</tr>
<tr>
<td>scrollWidth</td>
<td>返回自身的宽度，不含边框。注意返回数值不带单位</td>
</tr>
<tr>
<td>scrollHeight</td>
<td>返回自身的高度，不含边框。注意返回数值不带单位</td>
</tr>
</table>
<hr size="2px" color="blue" />
<p style="text-align: center;font-size: 16px;font-weight: bold">未完待续...</p>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
a {
text-decoration: none;
}
.one1 {
white-space: pre;
margin-top:-20px;
margin-bottom:-20px;
}
.one2 {
color: red;
font-style: italic;
font-weight: bold;
}
table{
border: 1px solid #6B3435;
border-collapse: collapse;
}
th,td{border: 1px solid #6B3435;white-space: pre;}
.beforeImg:before {
content: url("arrow.jpg");
}
.beforeImg {
text-indent: 8em;
white-space: pre;
}
.one3 {
display: inline-block;float: left;background-color: pink;width: 250px;font-size: 18px;
}
未完待续，敬请期待...
1729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
