JavaScript学习总结（二）

JavaScript是面向对象的语言，但 JavaScript 不使用类。JavaScript 基于 prototype，而不是基于类的。

可以参考详解Javascript中prototype属性即上一篇博文。
一、JS使用
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
1、<script>标签可以放在<body> 或 <head> 标签中，其中建议放在<head> 标签中，避免对网页内容整洁。
2、应用外部脚本使用<script> 标签的 "src" 属性中设置该 .js 文件，例如：<script src="myScript.js"></script>。

二、JS语法
1、JavaScript 对大小写是敏感的。
2、数据类型：（1）Number可以是整数或者是小数、或者科学计数(e)；
（2）String字符串用单引号或者双引号；
（3）Array数组使用方括号表示；
（4）Object对象使用大括号表示；
3、使用关键字 var 来定义变量。
4、JavaScript 语句使用分号分隔，注意：在 JavaScript 中，用分号来结束语句是可选的。建议使用分号分隔，养成良好的编程习惯。
5、JavaScript 会忽略多余的空格。即多个空格视为一个空格，您可以向脚本添加空格，来提高其可读性。
6、在文本字符串中使用反斜杠对代码行进行换行。注意只能是文本字符串。
例如：document.write("你好 \
世界!");
7、JavaScript 注释：单行注释以 // 开头；多行注释以 /* 开始，以 */ 结尾。
注意：CSS单行注释以 // 开头；多行注释以 /* 开始，以 */ 结尾；Html注释<! --注释说明内容 -->；

三、JS变量
1、变量的定义：变量必须以字母或者 $ 或 _ 符号开头；
2、JavaScript 数据类型向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
3、使用 var 关键词来声明变量：
（1）一条语句中声明很多变量：以 var 开头，并使用逗号分隔变量；
（2）声明也可横跨多行；
（3）用var关键字声明的变量，未经初始化时，保存的是一个特殊的值——undefined。例如：var carname;在执行过以下语句后，变量 carname 的值将是 undefined；
（4）如果重新声明 JavaScript 变量，该变量的值不会丢失；
（5）JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
注意：这是面向对象的编程思想，而不是JS中的对象类型。
4、局部变量：函数内部使用var声明的变量；
5、全局变量：函数外声明的变量，称为全部变量；其中，函数内部不使用var声明的变量为全局变量；

四、JS数据类型
1、值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
注意：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。其中Undefined 这个值表示变量不含有值，可以通过将变量的值设置为 null 来清空变量。
2、引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注意：数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
3、使用关键词 "new" 来声明其类型，例如：var carname=new String;
注意：不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用；
4、创建JavaScript 数组：
（1）var cars=new Array();cars[0]="Saab";
（2）var cars=new Array("Saab","Volvo","BMW");
（3）var cars=["Saab","Volvo","BMW"];
5、js中每个数据类型都是对象（除了null和undefined）；

五、JavaScript 对象
js中每个数据类型都是对象（除了null和undefined）；
1、JavaScript对象使用花括号表示，对象的属性使用键值对表示，键与值以冒号分割；对象的方法定义了一个函数，并作为对象的属性存储。
2、对象方法定义：methodName : function() { code lines }；
3、访问对象的属性和方法：
（1）调用对象属性：objectName.属性名；或者objectName["属性名"]；
（2）调用对象方法：objectName.methodName()；
（3）objectName.methodName；是返回的函数体；

六、JavaScript 函数

注意：区分开函数声明和函数表达式，函数表达式本质是一个匿名函数，是一个可执行语句；函数表达式存储在变量中，不需要函数名称，通常通过变量名来调用。
1、函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
2、函数可以定义在<script>标签内，JavaScript 函数语法：function functionname(var1,var2){// 执行代码}
注意：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
3、script标签中可以定义多个函数，多个函数之间可以不用分号分隔。由于函数声明不是一个可执行语句，所以不以分号结束。
注意：分号是用来分隔可执行JavaScript语句。
3、JavaScript 变量
（1）局部变量：在函数内容使用var声明的变量都是局部变量；
（2）全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。同时，函数体内未使用var声明的变量是全局变量。
注意：把值赋给尚未声明的变量，该变量将被自动作为 window对象的一个属性。即该变量是全局对象的可配置属性，可以删除。
注意：全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
4、JavaScript 变量的作用域：
作用域为可访问变量，对象，函数的集合。JavaScript 变量的生命期从它们被声明的时间开始。
（1）局部变量会在函数运行以后被删除。
（2）全局变量会在页面关闭后被删除。
注意：变量的有效性从声明开始，因此要注意语句的先后顺序。其中，访问函数不分语句先后。

七、Html事件属性结合JavaScript实现动态效果
通过Html标签的事件属性来触发JavaScript函数，实现网页的动态效果。
注意：Html的事件是属性，因此语法是：<element οnmοusedοwn="script">，例如：鼠标事件，<button οnclick="this.innerHTML=Date()">现在的时间是?</button>；
1、常见的Html事件属性
（1）窗口事件属性
onload：当文档加载时运行脚本；
onresize：当调整窗口大小时运行脚本；
onunload：当用户离开文档时运行脚本；
（2）表单事件属性
onblur：当元素失去焦点时运行脚本；
onchange：当元素值改变时运行脚本；
onfocus：当元素获得焦点时运行脚本；
onselect：在选取元素文本后触发脚本；
注意： <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>。
onsubmit：当提交表单时运行脚本；
（3）键盘事件属性
onkeydown：当按下按键时运行脚本；
onkeypress：当按下并松开按键时运行脚本；
onkeyup：当松开按键时运行脚本；
（4）鼠标事件属性
onclick：当单击鼠标时运行脚本；
ondblclick：当双击鼠标时运行脚本；
onmousedown：当按下鼠标按钮时运行脚本；
onmouseup：当松开鼠标按钮时运行脚本；
onmousemove：当鼠标指针移动时运行脚本；
onmouseout：当鼠标指针移出元素时运行脚本；
onmouseover：当鼠标指针移至元素之上时运行脚本；
注意：一些事件属性是相对的，例如：移入有效果，移出也要有效果；
（5）多媒体事件属性
onemptied：当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本；
onerror：当在元素加载期间发生错误时运行脚本；
onpause：当媒介数据暂停时运行脚本；
onloadstart：在浏览器开始寻找指定视频/音频（audio/video）触发；
onloadedmetadata ：在指定视频/音频（audio/video）的元数据加载后触发，其中元数据包含: 时长，尺寸大小（视频）；，文本轨道。
oncanplay：当媒介能够开始播放但可能因缓冲而需要停止时运行脚本；
注意：oncanplay和onloadedmetadata在网速很好的情况下，效果一样；

八、JavaScript 字符串
1、访问字符串：可以使用索引位置来访问字符串中的每个字符，字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
2、javascript中不是基于‘类的'，而是通过构造函数（constructor）和原型链（prototype chains）实现的。
（1）构造函数
构造函数就是对象的模板，对象就是构造函数的实例。使用new操作符来调用构造函数，并返回对象实例。例如：var a = new String（）；也可以自定义构造函数，用来创建对象。其中构造函数名称首字母建议大写。

注意：不建议使用构造函数创建对象，即利用new关键字来创建，这样会拖慢JavaScript执行速度。
（2）构造函数的缺点
同一个对象实例之间，无法共享属性方法。
3、prototype（参考详解Javascript中prototype属性）
js中每个数据类型都是对象（除了null和undefined），而每个对象都继承自另外一个对象，后者称为“原型”（prototype）对象，只有null除外，它没有自己的原型对象。
（1）原型对象上的所有属性和方法，都会被对象实例所共享。
（2）对于构造函数来说，prototype是作为构造函数的属性；对于对象实例来说，prototype是对象实例的原型对象。所以prototype即是属性，又是对象。
4、原型链（可以参照JAVA中的类，Object是所有类的父类，子类继承了父类的属性和方法）
对象的属性和方法，有可能是定义在自身，也有可能是定义在它的原型对象。所有一切的对象的原型顶端，都是Object.prototype，Object.prototype对象也有自己的原型对象，那就是没有任何属性和方法的null对象，而null对象没有自己的原型。
5、常用字符串函数
charAt()：返回指定索引位置的字符；
concat()：连接两个或多个字符串，返回连接后的字符串；
match()：找到一个或多个正则表达式的匹配；
replace()：替换与正则表达式匹配的子串；
split()：把字符串分割为字符串数组；
substring()：提取字符串中两个指定的索引号之间的字符；
trim()：去除字符串两边的空白；
indexOf()：返回字符串中检索指定字符第一次出现的位置，可以判断是否含有某个字符串。返回函数值从0开始。
6、使用+号连接两个字符串，要想在两个字符串之间增加空格，需要把空格插入其中一个字符串即可。
7、===表示绝对等于（值和类型均相等）；!==不绝对等于（值和类型有一个不相等，或两个都不相等）；

九、JavaScript语句
1、条件语句：if语句和switch语句，default关键字；
2、循环语句：for语句、for/in语句、while语句、
/while语句。
注意：for循环和for/in循环的区别：for...in 循环会自动跳过那些没被赋值的元素，例如：定义长度为3的数组，a[0]=0,a[1]=1,a[2]不进行赋值，forin结果为：0,1；for的结果为：0，1，undefined；而 for 循环则不会，没被赋值它会显示出 undefined。
3、for (语句 1; 语句 2; 语句 3){//代码}
（1）语句1代码块：循环开始前执行，可以初始化任意值，其中循环开始前已经设置变量初始值，语句1可以省略；
（2）语句2代码块：定义运行循环（代码块）的条件；
注意：语句2也可以省略，如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
（3）语句3代码块：循环执行后开始执行语句3，通常是改变变量的值；
注意：语句3也可以省略，改变条件可以写在循环体代码块中。
4、Break 和 Continue 语句：
（1）break 语句用于跳出循环。
（2）continue 的作用是结束本次循环，进入下一个迭代, 所以 continue 只能用于循环的代码块。

十、检测数据类型
1、使用 typeof 操作符来检测变量的数据类型。
注意：在JavaScript中，数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。
2、null是一个只有一个空值的特殊类型。主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
注意：可以使用null来清空对象。其中，变量赋值null，数据类型为Object。null是一个空对象，没有属性和方法。
3、undefined 是所有没有赋值变量的默认值，数据类型为undefined。
注意：任何变量都可以通过设置值为 undefined 来清空。类型为 undefined.
4、null 和 undefined 的值相等，但类型不等；
5、数组（Array）、日期（Date）和null的数据类型是object。
注意：js中每个数据类型都是对象（除了null和undefined），拥有属性和方法；
6、数据类型转换：
（1）全局方法 String() 可用于任何类型的数字，字母，变量，表达式转化为字符串；
（2）各数据类型的toString() 也可以转化为字符串；
7、Date日期函数：
getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()：从 Date 对象以四位数字返回年份。
getMonth()：从 Date 对象返回月份 (0 ~ 11)。
8、操作符（Operator ）“+” 可用于将变量转换为数字。例如：var y = "5"; var x = + y;
注意：如果变量不能转换，它仍然会是一个数字，但值为 NaN (代表非数字值的特殊值)。

十一、正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。可以用于文本搜索和文本替换。
1、语法：/正则表达式主体/修饰符(可选)，其中正则表达式搜索时不区分大小写。
2、修饰符的使用
（1）i表示执行对大小写不敏感的匹配。
（2）g表示执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
（3）m表示执行多行匹配。
2、正则表达式通常用于两个字符串方法 : search() 和 replace()。
（1）search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
（2）replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
3、RegExp 对象是一个预定义了属性和方法的正则表达式对象。
4、正则表达式方法：
（1）test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
（2）exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
5、理解正则表达式：正则表达式以什么开始，以什么结束，中间允许什么。

十二、JavaScript 错误处理
1、try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
注意： try 和 catch 是成对出现的。
2、finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
3、throw 语句允许我们创建自定义错误。
（1）语法：throw exception，其中异常可以是 JavaScript 字符串、数字、逻辑值或对象。

十四、JavaScript 调试
浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。
1、如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印输出变量值。例如：console.log(a);
2、debugger 关键字用于停止执行 JavaScript，并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。
注意：使用debugger 关键字必须是在调试环境下才起作用。
3、JavaScript 可以通过不同的方式来输出数据:
（1）使用 window.alert() 弹出警告框。注意：window可以省略。
（2）使用 document.write() 方法将内容写到 HTML 文档中。注意：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
（3）使用DOM的innerHTML 属性来获取或插入元素内容。
（4）使用 console.log() 写入到浏览器的控制台。
4、变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
注意：JavaScript 只有声明的变量会提升，初始化的不会。同样声明的函数也会自动提升。即函数声明可以放在后面不建议这样。
5、严格模式是规范代码编写：严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。

十五、JavaScript 使用误区
1、由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。不能对 return 语句进行断行。
2、JavaScript 不支持使用名字来索引数组，只允许使用数字索引。如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。执行这样操作后，数组的方法及属性将不能再使用。
3、代码块中定义的变量是全局变量。
4、JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
产生浮点数计算精度不准确的原因：在计算机角度，计算机算的是二进制，而不是十进制。二进制后变成了无线不循环的数，而计算机可支持浮点数的小数部分可支持到52位，所有两者相加，在转换成十进制，得到的数就不准确了，加减乘除运算原理一样。
（1）解决精度方案：利用Math对象的floor(x)方法，返回小于等于x的最大整数，对 x 进行向下舍入取整。
Math.floor( xxx * 10 ) / 10 // 精确到小数点后一位
例如：Math.floor(1.11*10)/10 // 精确到小数点后一位：1.1。

注意：Math.ceil(x) 方法可对一个数进行向上舍入取整。
5、判断条件中使用比较运算符是否相等为“==”。

十六、表单验证
1、数据验证：
（1）HTML 输入属性
（2）CSS 伪类选择器
（3）DOM 属性和方法
2、必填（或必选）项目：if (x==null || x=="")
3、E-mail 验证： var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)；
4、利用JavaScript语句根据Email的组成结构进行判断。
5、JavaScript 验证 API：
（1）DOM的约束验证方法
布尔方法：checkValidity()如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
（2）DOM的约束验证属性
validity布尔属性值，返回 input 输入值是否合法；例如：if (document.getElementById("id1").validity.rangeOverflow) ；
validationMessage浏览器错误提示信息；
willValidate指定 input 是否需要验证；

十七、JavaScript this 关键字
1、在对象方法中， this 指向调用它所在方法的对象。
2、单独使用 this，它指向全局(Global)对象。
3、函数使用中，this 指向函数的所属者。
4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。
注意：apply：最多只能有两个参数——新this对象和一个数组argArray。
call：它可以接受多个参数；

十八、JavaScript 关键字: let 和 const
1、ES6 可以使用 let 关键字来实现块级作用域。let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。
注意：使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。
2、在函数体外或代码块外使用 var 和 let 关键字声明的变量都是全局变量；
（1）在相同的作用域或块级作用域中，不能使用 let 关键字和 var 关键字声明的变量不能互相重置；
（2）let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的；
3、const 声明一个只读的常量，一旦声明，常量的值就不能改变。
（1）const在代码块中定义常量，作用域只在代码块中有效；
（2）使用 const 定义的对象或者数组，其中的内容是可以改变的，但是对象或数组的名称不能改变。

十九、JSON 学习
JSON 格式在语法上与创建 JavaScript 对象代码是相同的，数据使用键值对，都使用双引号。
注意：一般情况JavaScript对象的属性加不加引号都是可以的，效果一样。但是，属性为特殊字符时，一定要加引号。建议和Json格式一致，方便转化。
1、JSON 字符串转换为 JavaScript 对象使用JSON.parse()函数。
语法：JSON.parse(text[, reviver])，text:必需，一个有效的 JSON 字符串。reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。
2、将 JavaScript 值转换为 JSON 字符串使用JSON.stringify() 函数。
语法：JSON.stringify(value[, replacer[, space]])，value通常为对象或数组，
replacer可选：
（1）情况一：replacer为数组时，它是和第一个参数value是有关系的。一般来说，系列化后的结果是通过键值对来进行表示的。因此，如果第二个参数的值在第一个存在，那么就以第二个参数的值做key，第一个参数的值为value进行表示；如果不存在，第二个参数就忽略不显示。（可用于筛选数据）。
注意：当第一个参数value为数组时，第二个参数将被忽略，只是第一个参数被系列化了即只输出第一个参数。（双方不匹配）。
（2）情况二：replacer为方法时，那很简单，就是说把系列化后的每一个对象（记住是每一个）传进方法里面进行处理。
space：就是来做分隔符的，给每个文本值添加换行和空格缩进。通常可以为数字，如果space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

二十、javascript:void(0) 含义
void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
注意：void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行。
1、href="#"与href="javascript:void(0)"的区别
（1）# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。使用 # 来定位页面的具体位置，格式为：# + id。
（2）javascript:void(0), 仅仅表示一个死链接。

二十一、函数

注意：区分开函数声明和函数表达式，函数表达式本质是一个匿名函数，是一个可执行语句；函数表达式存储在变量中，不需要函数名称，通常通过变量名来调用。
1、函数声明：function functionName(parameters) {//执行代码}；
2、函数表达式即匿名函数：函数存储在变量中，不需要函数名称，通常通过变量名来调用。
注意：该匿名函数以分号结尾，因为它是一个执行语句。
3、构造函数：函数名称建议大写，function FunctionName(parameters) {//执行代码}；
通过构造函数利用new关键字来创建对象，因为会降低效率，不推荐使用，
4、自调用函数即匿名自我调用的函数(没有函数名):如果表达式后面紧跟()，则会自动调用。
语法：(function(){//执行代码})();
5、箭头函数：ES6 新增了箭头函数。
语法：(参数1, 参数2, …, 参数N) => { 函数声明 }；
当只有一个参数时，圆括号是可选的：单一参数 => {函数声明}；
如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}；
使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
6、函数参数：如果函数在调用时未提供隐式参数，参数会默认设置为： undefined。
7、JavaScript函数有个内置的对象arguments对象。argument对象包含了函数调用的参数数组。
8、函数调用：每种方式的不同在于 this 的初始化。随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。
9、函数闭包：内部函数可以访问它的父函数作用域中的局部变量。（利用了对象的原型链知识，对于未声明的变量或者方法会从自身向父类查找）。
function f1() {
var counter = 0;
function f2() {return counter += 1;}
return f2;
}
var c=f1();
在该实例中：调用函数f1时，调用f1的上下文环境；调用f2，调用f2的上下文环境，其中变量counter没有声明，会到上层作用域寻找，此时变量counter定义为0；在此调用函数f2时，函数f2的上下文环境中已经存在变量counter了，而不是引用函数f1上下文环境的变量counter。

二十二、HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
1、可以通过id、标签名和类名找到Html元素。
2、改变标签内容和属性：利用innerHtml和attribute；
3、改变 HTML 元素的样式：document.getElementById(id).style.property=新样式；
4、利用JavaScript对HTML DOM的事件属性做出指定效果。
5、DOM EventListener事件监听器：
（1）给标签添加事件：element.addEventListener(event, function, useCapture);
event是事件的类型，使用双引号；第二个参数是事件触发后调用的函数；第三个参数是个布尔值用于描述事件是冒泡还是捕获，默认值为false,即冒泡传递，当值为true时,事件使用捕获传递。该参数是可选的。
（2）可以向一个元素添加多个事件句柄。
（3）可以向同个元素添加多个同类型的事件句柄；
（4）可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
（5）事件传递方式：冒泡表示从里往外依次触发；捕获是从外往里依次触发；
（6）删除事件监听器：removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。语法：element.removeEventListener("mousemove", myFunction);
6、DOM 元素 (节点)的增删改：
（1）创建新的 HTML 元素 (节点) 利用appendChild()方法；
原理：先创建该元素，然后在已存在的元素添加该元素。
将新元素添加到开始位置，可以使用 insertBefore()方法；
（2）删除已存在的元素：先查找要删除的元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）；
（3）替换 HTML 元素原理类似创建新元素。
7、 HTML DOM 集合(Collection)：getElementsByTagName() 方法返回 HTMLCollection 对象。
注意：若 html 页面有变化且刚好添加或移除标签，getElementsByTagName()获取的值也会随之变化。
（1）HTMLCollection 对象的 length 属性定义了集合中元素的数量。
8、NodeList 对象是一个从文档中获取的节点列表 (集合) 。类似素组，但不是数组。
（1）getElementsByClassName()返回的是 NodeList 对象，而不是 HTMLCollection 对象。
（2）大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
注意：querySelectorAll()获取的是固定值。和getElementsByTagName()区分开。
（3）所有浏览器的 childNodes 属性返回的是 NodeList 对象。使用语法：element.childNodes。
节点类型包括：元素节点（1）、属性节点（2）、文本节点（3）、注释节点（8）。其中文本节点任意的文字、空格、换行、空白行都算是文本节点。

二十三、Number 对象
JavaScript采用64位浮点格式表示数字。
1、当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个无穷大值，在JavaScript中以Infinity表示。结果为负无穷大，在JavaScript中以-Infinity表示。
2、NaN 属性是代表非数字值的特殊值。可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。（not a number）。
3、toFixed(x)表示把数字转换为字符串，其中x用于指定小数的位数，遵从四舍五入。

二十四、字符串对象
对字符串处理使用位置（索引）可以访问字符串中任何的字符。（本质就是数组处理）。

二十五、Math（算数）对象
Math（算数）对象的作用是：执行常见的算数任务。
1、random() 来返回 0 到 1 之间的随机数。结合round() 方法可把一个数字舍入为最接近的整数。产生任意一个随机数。利用数组的知识选取任意字符。要联想到其应用。

二十六、RegExp 对象
正则表达式描述了字符的模式对象。语法：var patt=new RegExp(pattern,modifiers);或者var patt=/pattern/modifiers;
1、正则表达式对象的方法：test()方法搜索字符串指定的值，根据结果并返回真或假。
2、exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

二十七、JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。可以实现操作浏览器。
1、所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
2、HTML DOM 的 document 也是 window 对象的属性之一（注意：浏览器将Html文档加载展示，注意浏览器和文档的区别）
3、全局变量不能通过 delete 操作符删除；而 window 属性上定义的变量可以通过 delete 删除；例如：window.str="string";
4、有些自执行函数里面的变量，想要外部也访问到的话，在 window 对象上直接定义属性。
5、window.screen 对象包含有关用户屏幕的信息。screen.availWidth；screen.availHeight ；
6、window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
（1）location.hostname主机域名；pathname返回当前页面的路径和文件名；port主机端口号；protocol使用的 web 协议（http:// 或 https://）；
（2）location.href 属性返回当前页面的 URL；
（3）location.assign(//url) 方法加载新的文档。
7、window.history 对象包含浏览器的历史。
（1）history.back() - 与在浏览器点击后退按钮相同；
（2）history.forward() - 与在浏览器中点击向前按钮相同；
（3）可以用 history.go() 这个方法来实现向前，后退的功能。go() 里面的参数表示跳转页面的个数，正数前进，负数后退。
8、window.navigator 对象包含有关当前浏览器的相关信息。
（1）navigator.appCodeName浏览器代号；appName浏览器名称；navigator.cookieEnabled是否启用Cookies布尔值；platform硬件平台；userAgent用户代理；
（2）来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本；
9、JavaScript 中创建三种消息框：警告框、确认框、提示框
（1）警告框：window.alert("sometext") 方法可以不带上window对象，直接使用alert("sometext")方法。
（2）确认框：window.confirm("sometext") 方法可以不带上window对象，直接使用confirm("sometext")方法。
（3）提示框：window.prompt("sometext","defaultvalue");defaultvalue输入框默认提示信息。
10、JavaScript 计时事件
（1）myVar=window.setInterval("javascriptfunction",milliseconds);间隔指定的毫秒数不停地执行指定的代码；使用clearInterval(myVar) 方法用于停止 setInterval() 方法执行的函数代码。
注意：要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量；
（2）myVar= window.setTimeout("javascript function", milliseconds);指定毫秒数执行指定的代码；
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
（3）停止计时函数：clearTimeout(myVar)方法用于停止执行setTimeout()方法的函数代码。
11、Cookie 用于存储 web 页面的用户信息，Cookie 是一些数据, 存储于你电脑上的文本文件中，Cookie 以名/值对形式存储。用户名用username=用户名来指定，形式为："username=用户名; expires=Thu, 01 Jan 1970 00:00:00 GMT";

（一）什么是cookie

把web页面加载到浏览器所使用的HTTP是一种"无状态"协议,也就是说，当服务器把页面发送给浏览器之后，它就认为事物完成了，并不保存任何信息。这给在浏览器会话期间维持某种连续性带来了困难，比如记录用户已经访问或下载过哪些内容，或是记录用户在私有区域的登录状态。

cookie就是解决这个问题的一个途径。举例来说，cookie可以记录用户的最后一次访问，保存用户偏好设置的列表，或是当用户继续购物时保存购物车里的物品。在正确使用的情况下，cookie能够改善站点的用户体验。

cookie本身是一些短小的信息串，能够由页面保存在用户的计算机上，然后可以被其他页面读取。cookie一般都设置为在一定时间后失效。

（二） cookie的局限

浏览器对于能保存的cookie数量有所限制，通常是几百个或多一点。一般情况下，每个域名20个cookies是允许的，而每个域最多能保存4KB的cookie。

除了大小限制可能导致的问题，有很多原因都可能导致硬盘上的cookie消失，比如到达有效期了，或是用户清理cookie信息了，或是换用其他浏览器了。因此，永远都不应该使用cookie保存重要数据，而且在编写代码时一定要考虑到不能获取到所期望cookie时的情况

（三）Cookie参数

（1）expires：每个cookie都有一个失效日期，过期就自动删除了。expires属性要以GMT格林尼治标准时间之后更新为UTC（协调世界时）成为新的世间标准时间表示。如果没有设置这个属性，cookie的生命期就和当前浏览器会话一样长，会在浏览器关闭时自动删除。

（2）cookieName 和 cookieValue：cookieName和cookieValue就是在cookie字符串里看到的name=value里的名称和值。Cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

（1）JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。
（2）document.cookie 将以字符串的方式返回所有的 cookie；
（3）使用 JavaScript 读取 Cookie：var x = document.cookie;
（4）使用 JavaScript 修改Cookie：修改 cookie 类似于创建 cookie，旧的 cookie 将被覆盖。
（5）使用 JavaScript 删除 Cookie：只需要设置 expires 参数为以前的时间即可；
注意：当您删除时不必指定 cookie 的值。其中时间格式为GMT格式：expires=Thu, 01 Jan 1970 00:00:00 GMT；时间转化：var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString();

JavaScript学习总结（二）相关推荐

JavaScript学习（二十九）—JS常用的事件
JavaScript学习(二十九)-JS常用的事件一.页面相关事件 onload事件:当页面中所有的标签都加载完成后厨房该事件,格式:window.onload <body><sc ...
JavaScript学习（二十八）—事件冒泡和事件捕获
JavaScript学习(二十八)-事件冒泡和事件捕获一.什么是事件流? 简单说,事件流就是指事件的执行顺序,他包含两种模式:事件冒泡.事件捕获. (一).事件冒泡最常用的一种模式,就是指事件的执 ...
JavaScript学习（二十七）—解决IE以及IE8之前的浏览器下面的添加事件或者删除事件
JavaScript学习(二十七)-解决IE以及IE8之前的浏览器下面的添加事件或者删除事件 addEventListener和removeEventListener在IE8以及IE浏览器下面不支持, ...
JavaScript学习（二十六）—事件处理程序的添加与删除
JavaScript学习(二十六)-事件处理程序的添加与删除一.什么是事件? 所谓事件就是指用户或页面自身的某些行为,如点击鼠标,敲击键盘都是属于事件. 二.事件处理程序当事件被触发时会引起某些程 ...
JavaScript学习（二十五）—实现无缝滚动
JavaScript学习(二十五)-实现无缝滚动效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
JavaScript学习（二十三）—scrollTop练习
JavaScript学习(二十三)-scrollTop练习 <!DOCTYPE html> <html lang="en"><head>< ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
JavaScript学习（二十）—DOM中常用的属性
JavaScript学习(二十)-DOM中常用的属性 1.clientWidth属性作用:获取元素或页面的可视的区域的宽度格式:节点.clientWidth 2.clientHeight属性作用 ...
JavaScript 学习手册二
JavaScript 学习手册二:JS 数据类型第1关:JavaScript 数据类型介绍任务描述本关任务:在函数 objectTest() 内部定义了六个变量 a.b.c.d.e.f,并已经赋 ...
JavaScript学习总结二：js闭包(Closure)概念
闭包的两个特点: 1.作为一个函数变量的一个引用,当函数返回时,其处于激活状态. 2.一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 概念描述(个人理解仅供参考): 当一个函数嵌套中又嵌套了其 ...

JavaScript学习总结（二）

JavaScript学习总结（二）相关推荐

最新文章

热门文章