JavaScript相关

  • 1、前言
  • 2、JavaScript
    • 2.1、JavaScript概念
    • 2.2、JavaScript组成
    • 2.3、JavaScript的使用
    • 2.4、ECMAScript
      • 2.4.1、基础语法
      • 2.4.2、数据类型
      • 2.4.3、操作符和表达式
      • 2.4.4、if分支语句
      • 2.4.5、switch分支语句
      • 2.4.6、for循环语句
      • 2.4.7、while循环语句
      • 2.4.8、break、continue语句
      • 2.4.9、函数function
      • 2.4.10、数组Array
      • 2.4.11、String类型的常用方法
    • 2.5、DOM
      • 2.5.1、DOM概念
      • 2.5.2、DOM节点
      • 2.5.3、DOM方法
      • 2.5.4、DOM属性
    • 2.6、事件
    • 2.7、BOM
      • 2.7.1、Window对象
      • 2.7.2、Location对象
      • 2.7.3、History对象
      • 2.7.4、Navigator对象
      • 2.7.5、Screen对象
    • 2.8、例子

1、前言

就算是后端开发，有时候也需要写一点JS代码，所以对JavaScript还是有必要了解。前端HTML和CSS挺简单，JavaScript有难度，所以JavaScript玩的溜的人还是很厉害的。作为后端开发人员，我们了解JS中基本的内容就行，有兴趣的话当然可以深入研究去精通。

2、JavaScript

2.1、JavaScript概念

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

小结：JavaScript是一种基于对象和事件驱动的客户端脚本语言，最初的设计是为了检验HTML表单输入的正确性，起源于Netspace公司的LiveScript语言。现发展为一门强大的编程语言。它与Java语言没有任何关系，只是名称上类似。

2.2、JavaScript组成

完整的JavaScript由ECMAScript（核心）、DOM（Document Object Model，文档对象模型）、BOM（Browser Object Model，浏览器对象模型）这三部分组成。

图示如下：

说明如下：

  • ECMAScript：JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准。
  • DOM：文档对象模型，是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物。
  • BOM：浏览器对象模型，对浏览器窗口进行访问和操作。BOM作为JavaScript的一部分，并没有相关标准的支持，每一个浏览器都有自己的实现。

2.3、JavaScript的使用

在HTML中通过使用<script></script>标签来引入JavaScript脚本。可以放在<head></head>里面，也可以放在<body></body>里面，一般是放在末尾。如下：


两种方式引入的区别是加载顺序不一样，根据需求选择放在哪里。可以引入外部的js文件，如上面，也可以自己在标签内写js代码。

2.4、ECMAScript

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会，英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是javascript的一个标准，但实际上后两者是ECMA-262标准的实现和扩展。

它JavaScript的核心部分，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。

2.4.1、基础语法

（1）注释与分号

注释有单行注释//和多行注释/**/，如下：

<script>//console.log(111);/*console.log(111);console.log(111);console.log(111);*/
</script>

一般语句结束使用分号，如果省略，则由解析器确定语句结尾。好的习惯是每句JS代码后面都加上分号;，因为解析器可能会断句错误。

（2）标识符

指变量、函数、属性名字，或者函数的参数。标识符的命名规则如下：

  • 由字母、数字、下划线或美元符号组成。
  • 不能以数字开头。
  • 不能使用关键字、保留字作为标识符。

（3）变量

ECMAScript的变量是松散类型，松散类型的定义是可以用来保存任何类型的数据，也就是说每个变量仅仅是一个用于保存值的占位符而已。变量的声明要使用var操作符，如下：

<script>// 变量的声明var id;console.log(id);// 变量赋值id = 'id1001';console.log(id);// 可以声明的同时赋值var name = '云过梦无痕';console.log(name);// 可以同时声明赋值多个变量var age = 25,address = '湖北武汉',sex = '男';console.log(age + "\n" + address + "\n" + sex);
</script>


注意：ECMAScript中的一切（变量、函数名和操作符）都区分大小写。

2.4.2、数据类型

分为基本数据类型和复杂数据类型。基本数据类型有Undefined、Null、Boolean、Number、String5种。复杂数据类型有Object。如下图：

这里说的主要是5种基本数据类型。

（1）undefined类型

声明了一个变量，但未赋值，那么它就是一个undefined类型的数据。undefined类型只有一个值，即特殊的undefined。如下：

<script>// 声明变量，不赋值var age,sex;console.log(age);console.log(sex);
</script>


（2）null类型

null值表示一个空对象指针，如果定义的变量准备在将来用于保存对象，那么最好将变量值初始化为null值。undefined值是派生自null值的，所以undefined==null的返回结果是true。如下：

<script>// 变量初始化为nullvar name = null;var address = null;console.log(name);console.log(address);console.log(name == address);console.log(undefined == null);console.log(null == undefined);
</script>


（3）number类型

number类型用于表示整数和浮点数。NaN即Not a Number的缩写，即非数值，是一个特殊的数值。任何涉及到NaN的操作都会返回NaN。 NaN与任何值都不相等，包括自身。

  • isNaN(n)：用于检测n是否为非数值，返回结果布尔值，参数可以是任何类型，isNaN()对接收的数值，先尝试转换为数值，再检测是否为非数值。
  • Number(n)：将n强制转换数值类型。
  • parseInt(n)：提取数值，且必须是以数字开头。
  • parseFloat(n)：从第一个字符开始解析每个字符，直至遇到一个无效的浮点数字符为止。

如下：

<script>var name = 'ycz',age = 25,id = '10010';// isNaN判断是否为非数字，返回布尔值// 会尝试先转换成数值类型console.log(isNaN(name));console.log(isNaN(age));console.log(isNaN(id));console.log(isNaN(height));// typeof操作符判断数据的类型console.log(typeof(id));// Number强制转换成数值类型id = Number(id);console.log(typeof(id));var weight = '67.5kg',height = '182.54cm';// parseInt提取数字开头的整数值console.log(parseInt(weight));console.log(parseInt(height));console.log("十六进制0xe表示的十进制数是：" + parseInt('0xe',16));//parseFloat提取数字开头的浮点数，遇到无效浮点字符为止console.log(parseFloat(weight));console.log(parseFloat(height));var m = '0123',n = '0.123asbd';console.log(parseInt(m));console.log(parseFloat(m));console.log(parseInt(n));console.log(parseFloat(n));
</script>


（4）string类型

String类型表示由0或多个16位Unicode字符组成的字符序列，即是字符串。字符串可以由双引号或单引号表示。

  • str.toString()：将str转换为字符串，返回str的一个副本。
  • String(str)：将str转换为字符串。

如下：

<script>var name = 'ycz',age = 25,b = true,address = null;console.log(typeof(age));// toString方法转换为String类型ageStr = age.toString();console.log(typeof(ageStr));console.log(typeof(age));// String方法转换为String类型b2 = String(b);console.log(typeof(b2));addressStr = String(address);console.log(typeof(addressStr));console.log(typeof(address));
</script>


（5）boolean类型

表示真假，false表示假，true表示真。除了0之外的所有数字，都可以转换为布尔值true，除了""之外的所有字符，都可以转为布尔值true，null和undefined转换为布尔值false。

  • Boolean(n)：将一个值转换为布尔值。

如下：

<script>var a = true,b = false;console.log(typeof(a));console.log(typeof(b));console.log(typeof(a.toString()));var x = 0,y=5;console.log(Boolean(x));console.log(Boolean(y));var m = 'ycz',n = '',t = null, q;console.log(Boolean(m));console.log(Boolean(n));console.log(Boolean(t));console.log(Boolean(q));
</script>

2.4.3、操作符和表达式

将同类型的数据，用运算符号按一定的规则连接起来的、有意义的式子称为表达式。操作符有以下5种。

（1）算数操作符

+、-、*、/、%、递增、递减。如下：

<script>var a = 20,b = 5;console.log(a + b);console.log(a - b);console.log(a * b);console.log(a / b);console.log(a % b);a++;b--;console.log(a);console.log(b);
</script>


（2）逻辑操作符

逻辑操作符有&&、||、!三种，返回布尔值。

  • &&：如果第一个操作数隐式类型转换后为true，则返回第二个操作数，否则返回第一个操作数。
  • ||：如果第一个操作数隐式类型转换后为true，则返回第一个操作数，否则返回第二个操作数。如果两个操作数都是null、NaN、undefined，则返回null、NaN、undefined。
  • ！：返回相反的布尔值。

如下：

<script>var a = true,b = false;console.log(a && b);console.log(a || b);console.log(!(a && b))var x = null,y = null;console.log(x && y);console.log(x || y);console.log(!(x && y));
</script>


（3）赋值操作符

=、+=、-=、*=、/=、%=，用于对变量进行赋值。如下：

<script>var a = 20, b= 5;// a = a + ba += b;console.log(a);// a = a - ba -= b;console.log(a);// a = a * ba *= b;console.log(a);// a = a / ba /= b;console.log(a);// a = a % ba %= b;console.log(a);
</script>


（4）比较操作符

>、<、>=、<=、==（恒等于）、===（全等于）、!=（不等）、!==（全不等）。

== 只比较值是否相等，===比较值的同时比较数据类型是否相等，!=只比较值不等，!==比较值和类型都不等。比较操作符返回布尔值。如下：

<script>var a = 20, b = '20';var c = a == b;var d = a === b;console.log(c);console.log(d);var e = null,f;console.log(e == f);console.log(e === f);
</script>


（5）三目操作符

条件?代码1:代码2

条件为true，执行代码1，否则执行代码2。

<script>var score = 76;var res = score < 60 ? '成绩不及格！' : '成绩及格！';console.log(res);
</script>

2.4.4、if分支语句

语法格式：

语法一：if(condition){代码1;
}语法二：if(condition){代码1;
}else{代码2;
}语法三：if(condition1){代码1;
}else if(condition2){代码2;
}else{代码3;
}

如下：

<script>var age = 25;if(age < 18){//alert方法浏览器会弹框提示alert('小孩子不许上网！');} else{alert('欢迎成年人！');}
</script>


<script>//prompt方法是弹出提示，让用户输入值，输入完点击确定，不输入则判定为nullvar age = prompt('请输入你的年龄：');if(isNaN(age) || age > 120){alert('请输入有效年龄！');} else if(age < 18 ){alert('少年时期！');} else if (age <= 30){alert('青年时期！');} else if (age < 60){alert('油腻时期！');} else {alert('老年时期！');}
</script>




2.4.5、switch分支语句

语法：

switch(expression){case value:statement1;break;case value:statement2;break;case value:statement3;break;……default:statement;
}

如下：

<script>// 获取周中的天数，0 - 6 表示星期天-星期六var weekDay = new Date().getDay();var res = null;switch(weekDay){case 0:res = '天';break;case 1:res = '一';break;case 2:res = '二';break;case 3:res = '三';break;case 4:res = '四';break;case 5:res = '五';break;default:res = '六';}alert('今天是星期' + res + '！');
</script>

2.4.6、for循环语句

语法：

for(语句1;语句2;语句3){循环体代码;
}

<script>var count = null;for(var i=1;i<=100;i++){if(i%2 == 0){document.write(i + "\t");count++;}if(count % 10 == 0){document.write('<br/>');            }}document.write('<br/>' + '1到100之间的偶数有：' + count + '个！');
</script>

2.4.7、while循环语句

语法：

语法1：
while(条件){ 循环体代码;
}语法2：
do{循环体代码;
}while(条件);

for循环适合已知次数的循环体，而while循环适合未知次数的循环体。

如下：

<script>var i = 1;while(i <= 100){if(i % 10 == 0){document.write(i + '\t');}i++; }
</script>


<script>var i = 1;do{if (i % 10 == 0){document.write(i + '\t');}i++;}while(i<=100);
</script>

2.4.8、break、continue语句

break是立即退出循环体，continue是结束本次循环，继续开始下一次循环。break可以用在while循环和for循环中，而continue只能用于for循环中。如下：

<script>var i = 1;while(i<=100){document.write('现在的值：' + i + '<br/>');i++;if(i > 15){break;}}
</script>


<script>for(var i=1;i<=20;i++){if(i % 2 == 0){continue;} document.write('现在的值：' + i + '<br/>');}
</script>

2.4.9、函数function

JS中可以定义函数，然后进行调用。

（1）函数的定义

函数使用function定义声明，后跟一组参数以及函数体，语法如下：

function functionName([arg0,arg1……argn]){statements
}

functionName是函数名，属于标识符。arg0,arg1……argn是函数的参数，[]中的内容是可选项，即函数可不带参数。

如下：

<script>// 定义函数function f1_demo(name){alert('我的名字是：' + name + '！');}//调用函数f1_demo('云过梦无痕');
</script>


（2）函数的返回值

函数可以有返回值，可以没有返回值。任何函数可以通过return语句来返回一个值。说明如下：

  • 函数会在执行完return语句之后停止并立即退出。
  • return语句可以不带有任何返回值，用于提前停止函数执行又不需要返回值的情况。

如下：

<script>function sum_add(m,n,p){var sum = m + n + p;return sum;}var sum = sum_add(10,25,21);alert('和值是：' + sum);
</script>


   function demo(arg){if(isNaN(arg)){//非数值，直接结束，不返回值return;} else{return arg * 2;}}var res = demo('ycz');alert('值为：' + res);
</script>



（3）函数的参数arguments

ECMAScript中的参数在内部用一个数组来表示，在函数体内通过arguments对象来访问这个数组参数。

说明：

  • arguments对象只是与数组类似，并不是Array的实例。
  • []语法访问它的每一个元素，按索引访问，从0开始。
  • length属性确定传递参数的个数。

如下：

<script>function fun_demo(){console.log('函数的参数个数为：' + arguments.length);console.log('函数的第3个参数为：' + arguments[2]);}fun_demo(1,2,3,4,5);function fun_demo2(m,n){// 相当于给m赋值arguments[0] = 25;console.log('第一个参数为：' + m);}fun_demo2(25,21);
</script>


<script>// 求一组数的平均数，个数未知function avg_count(){document.write('一共有' + arguments.length + '个参数！');var sum = 0;for(var i = 0;i < arguments.length - 1 ;i++){sum += arguments[i];}var avg = sum / arguments.length;return avg;}var res = avg_count(10,20,30);document.write('平均数为：' + res + '<br/>');var res2 = avg_count(10,20,30,40,50,60,70,80,90,100);document.write('平均数为：' + res2);
</script>


如果不知道函数的参数个数的话，那么使用内置参数arguments是个很好的选择。

2.4.10、数组Array

Array是属于复杂类型Object的。ECMAScript中的数组与其它语言中的数组不太一样，因为可以在同一个数组中存储不同类型的元素项，而Java中的数组存储的必须是同种类型数据的集合。数组的创建如下：

// 直接给定一个长度容量
var a = new Array(length);// 直接放元素
var a = new Array(...);// 使用[]
var a = ["","","",...];

数组元素的访问使用下标来进行，从索引0开始，注意数组下标的越界问题。使用length属性可以获取数组的元素个数。

如下：

<script>// 创建数组var arr0 = new Array(25,null,'yan',false,'cheng');for(var i=0;i<arr0.length;i++){document.write('第' + (i+1) + '个元素：' + arr0[i] + '<br/>');}document.write('<hr/>');// 创建数组var arr2 = new Array(3);// 逐个元素赋值arr2[0] = 'red';arr2[1] = 'yellow';arr2[2] = 'blue';for(var i=0;i<arr2.length;i++){document.write('第' + (i+1) + '个元素：' + arr2[i] + '<br/>');}document.write('<hr/>');// 创建数组var arr3 = ['yan','cheng','zhi'];document.write('此数组的元素个数为：' + arr3.length + '<br/>');for(var i=0;i<arr3.length;i++){document.write('第' + (i+1) + '个元素：' + arr3[i] + '<br/>');}
</script>


数组的常用方法如下：

  • push(a)：将参数a添加到数组的尾部，返回新数组的长度值。
  • unshift(a)：将参数a添加到数组的头部，返回新数组的长度值。
  • pop()：删除数组的最后一个元素，返回被删除的那个元素。
  • shift()：删除数组中的第一个元素，返回被删除的那个元素。
  • join(separator)：以指定连接符把数组中的所有元素连为一个串，返回字符串值。
  • reverse()：颠倒数组中元素的顺序，返回一个数组。
  • sort()：对数组的元素进行排序，返回一个数组。
  • concat(arr,arr2,…)：用于连接两个或多个数组，返回一个新的数组。
  • slice(start,end)：从已有的数组中截取片段。start（必需）规定从何处开始选取。如是负数，则用数组长度加上该数，即是其开始位置。end（可选）规定从何处结束选取，是数组末尾的数组下标。
  • splice(index,count)：删除从索引index开始的多个元素，返回删除的元素组成的数组。
  • indexOf(searchvalue,startIndex)：从数组的开头（位置0）开始向后查找，返回值为查找项（只限于第一个）在数组中的位置索引，即number类型值，没有找到则返回值-1。
  • lastIndexOf(searchvalue,endIndex)：从数组末尾开始查找元素，类似indexOf()方法，但第二个参数是结束的索引位。

示例如下：

<script>var arr = new Array('cheng');document.write('数组的元素个数为：' + arr.length + '<br/>');document.write('<hr/>');// 数组末尾添加元素arr.push('zhi');document.write('数组的元素个数为：' + arr.length + '<br/>');for(var i=0;i<arr.length;i++){document.write('第' + (i+1) +'个元素为：' + arr[i] + '<br/>');   }document.write('<hr/>');// 数组头部添加元素arr.unshift('yan');document.write('数组的元素个数为：' + arr.length + '<br/>');for(var i=0;i<arr.length;i++){document.write('第' + (i+1) +'个元素为：' + arr[i] + '<br/>');  }document.write('<hr/>');// 删除数组尾部元素arr.pop();document.write('数组的元素个数为：' + arr.length + '<br/>');for(var i=0;i<arr.length;i++){document.write('第' + (i+1) +'个元素为：' + arr[i] + '<br/>'); }document.write('<hr/>');// 删除数组头部元素arr.shift();document.write('数组的元素个数为：' + arr.length + '<br/>');for(var i=0;i<arr.length;i++){document.write('第' + (i+1) +'个元素为：' + arr[i] + '<br/>');   }document.write('<hr/>');var arr2 = ['yun','guo','meng','wu','heng'];// 以指定连接符连接数组元素var res = arr2.join("===>");document.write('连接后的字符串：' + res + '<br/>' + '<hr/>');for(var i=0;i<arr2.length;i++){document.write('第' + (i+1) +'个元素为：' + arr2[i] + '<br/>');    }document.write('<hr/>');// 数组反转var arr3 = arr2.reverse();for(var i=0;i<arr3.length;i++){document.write('第' + (i+1) +'个元素为：' + arr3[i] + '<br/>');   }document.write('<hr/>');// 数组排序，是按照字母顺序排列的，数值也按照字符串来排序var arr4 = arr2.sort();for(var i=0;i<arr4.length;i++){document.write('第' + (i+1) +'个元素为：' + arr4[i] + '<br/>'); }var num = [1,4,56,32,3,53,12];// 数组元素按照大小升序排列num.sort(function(x,y){return x - y;});document.write('<hr/>');for(var i=0;i<num.length;i++){document.write('第' + (i+1) +'个元素为：' + num[i] + '<br/>'); }document.write('<hr/>');// 数组元素按照大小降序排列num.sort(function(x,y){return y - x;});document.write('<hr/>');for(var i=0;i<num.length;i++){document.write('第' + (i+1) +'个元素为：' + num[i] + '<br/>');   }document.write('<hr/>');// 数组连接var arr5 = num.concat(arr2);for(var i=0;i<arr5.length;i++){document.write('第' + (i+1) +'个元素为：' + arr5[i] + '<br/>'); }// 截取数组var arr6 = arr5.slice(0,num.length);document.write('<hr/>');for(var i=0;i<arr6.length;i++){document.write('第' + (i+1) +'个元素为：' + arr6[i] + '<br/>'); }document.write('<hr/>');// 删除从指定索引位置开始的多个元素，返回被删除元素组成的数组var arr7 = arr6.splice(0,3);for(var i=0;i<arr7.length;i++){document.write('被删除的第' + (i+1) +'个元素为：' + arr7[i] + '<br/>');  }document.write('删除后原数组的长度变为：' + arr6.length);document.write('<hr/>');var arr8 = ['云','过','云','之','梦','彼','云','痕'];var result = arr8.indexOf('云',1);document.write('云字的索引位：' + result + '<br/>');var result2 = arr8.lastIndexOf('云');document.write('云字的索引位：' + result2);
</script>



2.4.11、String类型的常用方法

string类型在JS中属于基本类型。常用的方法如下：

  • charAt(index)：返回index索引位置的字符。
  • charCodeAt(index)：返回index索引位置的字符对应的ASCII编码。
  • indexOf(str)：从字符串中搜索给定的子字符串，返回子字符串（仅限第一个）的位
    置索引。没有找到该子串，则返回-1。
  • lastIndexOf(str)：与indexOf方法类似，不过是从末尾开始搜索。
  • slice(start,end)：截取字符串，返回截取的片段。start为必需参数，开始位置，为负数时用字符串长度加上该数，即是开始位置。end为可选参数，表示到哪里结束，end本身不在截取范围之内，省略时截取到末尾。
  • substring(start,len)：功能同slice()完全一样，区别是当参数为负数时，自动将参数归至0。而且，substring()会将较小的数作为开始位置，将较大的数作为结束位置。
  • substr(start,len)：从指定索引位置开始截取指定长度字符串。start为必需参数，起始位置，当其为负数时，用字符串长度加上该数，即为起始位置。len为可选参数。
  • split(separator)：使用指定分隔符把字符串分割成字符串数组，返回数组。
  • replace(regex/substr,replacement)：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，返回一个替换后的string字符串。regex为必需参数，规定子字符串或要替换的模式的RegExp对象。replacement为必需参数，一个字符串值。
  • toUpperCase()：字符串转换成大写。
  • toLowerCase()：字符串转换成小写。
<script>var name = 'yanchengzhi';// 返回指定索引的字符var char = name.charAt(6);document.write('索引位置6的字符是：' + char + '<br/>');var asc = name.charCodeAt(6);document.write('索引位置6的字符的ACSII码值是：' + asc + '<br/>');var email = '1760587119@qq.com';// 查找子串第一次出现的位置var index = email.indexOf('@qq');document.write('@qq第一次出现的位置是：：' +  index + '<br/>');// 查找子串最后一次出现的位置var last_index = email.lastIndexOf('1');document.write('1最后一次出现的位置是：：' +  last_index + '<br/>');// 截取子串document.write('截取后的子串是：' +  email.slice(10) + '<br/>');document.write('截取后的子串是：' +  email.slice(10,13) + '<br/>');document.write('截取后的子串是：' +  email.slice(-7,13) + '<br/>');// 截取子串document.write('截取后的子串是：' +  email.substring(10) + '<br/>');document.write('截取后的子串是：' +  email.substring(10,13) + '<br/>');document.write('截取后的子串是：' +  email.substring(-10,13) + '<br/>');// 截取子串document.write('截取后的子串是：' +  email.substr(10) + '<br/>');document.write('截取后的子串是：' +  email.substr(10,7) + '<br/>');document.write('截取后的子串是：' +  email.substr(-7,7) + '<br/>');var url = 'www.ycz.abcd.com';// 以指定分隔符分割串，返回数组var arr = url.split('.');for(var i=0;i<arr.length;i++){document.write('第' + (i+1) + '个字符串是：' + arr[i] + '<br/>');}// 获取后缀名function getsuffix(fileName){var index = fileName.indexOf('.');var suffix = fileName.substring(index+1);return suffix;}document.write('该文件的后缀名是：' +  getsuffix('灵剑尊.txt') + '<br/>');document.write('该文件的后缀名是：' +  getsuffix('乐逍遥.mp3') + '<br/>');document.write('该文件的后缀名是：' +  getsuffix('山海经随手笔记.docx') + '<br/>');// 替换字符串中的字符或子串，只会替换第一个var url2 = url.replace('.','点');document.write('替换后的子串是：' +  url2 + '<br/>');var str = 'I am a Single Dog';document.write('转换为大写是：' +  str.toUpperCase() + '<br/>');document.write('转换为小写是：' +  str.toLowerCase() + '<br/>');// 下划线转驼峰function toTuoFeng(str){var arr = str.split('_');var result = arr[0];for(var i=1;i<arr.length;i++){result += arr[i].charAt(0).toUpperCase() + arr[i].substr(1);}return result;}document.write('转换为驼峰是：' +  toTuoFeng('yan_cheng_zhi_de_yun') + '<br/>');
</script>

2.5、DOM

2.5.1、DOM概念

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战"，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM（文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物。DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。我们了解HTML DOM就可以了，HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。换言之，HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

2.5.2、DOM节点

在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。如下：

  • 整个文档是一个文档节点。
  • 每个HTML元素是元素节点。
  • HTML元素内的文本是文本节点。
  • 每个HTML属性是属性节点。
  • 注释是注释节点。

节点树

HTML DOM将HTML文档视作树结构，这种结构被称为节点树DOM Tree，如下：

通过HTML DOM，树中的所有节点均可通过JavaScript进行访问。所有HTML元素（节点）均可被修改，也可以创建或删除节点。

节点父、子和同胞

节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。说明如下：

  • 在节点树中，顶端节点被称为根（root）。
  • 每个节点都有父节点、除了根（它没有父节点）。
  • 一个节点可拥有任意数量的子节点。
  • 同胞是拥有相同父节点的节点。

示例如下：

说明如下：

  • <html>节点没有父节点，它是根节点。
  • <head>节点和<body>节点是<html>节点的子节点。
  • <head>节点和<body>节点是同胞节点。
  • <meta>节点和<title>节点是<head>节点的子节点。
  • <title>节点的子节点是测试这个文本节点。
  • <meta>节点和<title>节点是同胞节点。
  • <div>节点、<ul>节点、<ol>节点是<body>节点的子节点。
  • <div>节点、<ul>节点、<ol>节点是同胞节点。
  • <div>节点的子节点是元素1这个文本节点。
  • <li>节点是<ul>节点的子节点，也是<ol>节点的子节点。
  • <li>节点的子节点有<i>节点、<b>节点和文本节点。
  • <i>节点和<b>节点的子节点只有文本节点。

以上就是HTML文档中所有节点之间的关系。

2.5.3、DOM方法

方法是我们可以在节点（HTML元素）上执行的动作。所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性，方法是能够执行的动作，比如添加或修改元素。常用的方法如下：

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title>
</head>
<body><div class="box" id="box">元素1</div><ul id="list"><li><i>前端界面开发</i></li><li class="on"><b>服务器开发</b></li><li><i>UI设计</i></li></ul><ol><li>JavaScript原生</li><li>JavaScript框架</li></ol><p class = "one">坚持总有收获。</p><p class = "one">保持进步，保持虚心。</p><div id = 'd1'><h3>灵剑尊</h3></div>
<script src="./js/demo.js" type="text/javascript"></script>
</body>
</html>

// 通过id获取元素
var box = document.getElementById('box');
// 为元素设置样式
box.style.fontSize = '30px';
box.style.fontWeight = 'bold';
box.style.color = 'red';
box.style.fontStyle = 'italic';
// 通过标签获取元素节点列表（可能不止一个）
// 获取节点中的所有li标签元素
var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){// 为所有li元素设置字体颜色lis[i].style.color = 'blue';// 为第1、2个li元素设置样式if (i==0 || i==1){lis[i].style.background = '#ccc';// 为第3、4个li元素设置样式} else if (i==2 || i==3){lis[i].style.background = '#2f2e2a';// 其他li元素的样式} else {lis[i].style.background = 'pink';}
}
// 通过class获取所有节点列表
var classes = document.getElementsByClassName('one');
for(var i=0;i<classes.length;i++){var txt = classes[i].innerHTML;console.log('文本内容是：' + txt);
}
// 创建文本节点
var txt = document.createTextNode('总会有一天释怀过去。');
// 创建元素节点
var h2 = document.createElement('h2');
// 元素节点添加文本子节点
h2.appendChild(txt);
// 元素节点添加到body节点中
document.body.appendChild(h2);// 获取class为one的节点列表
var ones = document.getElementsByClassName('one');
// 文本节点
var addTxt1 = document.createTextNode('云过梦无痕');
var addTxt2 = document.createTextNode('爱江山更爱美人');
for(var i=0;i<ones.length;i++){ones[0].appendChild(addTxt1);ones[1].appendChild(addTxt2);
}
// 获取元素
var d = document.getElementById('d1');
// 获取子节点
var h3 = document.getElementById('d1').getElementsByTagName('h3')[0];
// 移除元素子节点
d.removeChild(h3);// 文本节点
var t = document.createTextNode('替换的内容');
// 元素节点
var p = document.createElement('p');
p.appendChild(t);
// 替换节点
var rh = document.getElementsByTagName('h2')[0];
// 第一个参数为新节点，第二个参数为旧节点
rh.parentNode.replaceChild(p,rh);var t2 = document.createTextNode('hello world！');
var p2 = document.createElement('p');
p2.appendChild(t2);
//在指定节点之前添加节点
var s = document.getElementById('box');
// 第一个参数为要添加的节点，第二个参数为在哪个节点之前
document.body.insertBefore(p2,s);
// 为节点添加属性，并设置属性值
var pd = document.getElementById('d1');
pd.setAttribute('name','ycz');
// 获取节点属性
var name = pd.getAttribute('name');
var iName = pd.getAttribute('id');
console.log('name属性值：' + name);
console.log('id属性值：' + iName);
// 删除节点的属性
pd.removeAttribute('name');
console.log('name属性值：' + pd.getAttribute('name'));


2.5.4、DOM属性

属性是节点（HTML元素）的值，能够获取或设置。常用的属性如下：

  • innerHTML：获取、设置、替换元素的内容。这个属性非常有用。
  • nodeName：规定节点的名称。nodeName是只读的，元素节点的nodeName与标签名相同，属性节点的nodeName与属性名相同，文本节点的nodeName始终是#text，文档节点的nodeName始终是 #document。
  • nodeValue：规定节点的值。元素节点的nodeValue是undefined或null，文本节点的 nodeValue是文本本身，属性节点的nodeValue是属性值。
  • nodeType：返回节点的类型。nodeType是只读的，如下说明：
  • parentNode：获取节点（元素）的父节点。
  • childNodes：获取节点（元素）的所有子节点，返回数组。
  • attributes：获取节点（元素）的所有属性节点，返回数组。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title>
</head>
<body><div id = 'love'><h2>我喜欢你。</h2></div><p>仅此而已</p>
<script src="./js/demo.js" type="text/javascript"></script>
</body>
</html>

var div = document.getElementById('love');
// 获取元素内容
var content = div.innerHTML;
console.log(content);
var p = document.getElementsByTagName('p')[0];
var c2 = p.innerHTML;
console.log(c2);
// 替换元素内容
div.innerHTML = '<h3>我想告诉你。</h3>' ;
// 设置元素内容
p.innerHTML = '如果你相信的话。';
// 获取节点名称
var divName = div.nodeName;
// 获取节点值
var divValue = div.nodeValue;
// 获取节点类型
var divType = div.nodeType;
console.log(divName + '======>' + divValue + '======>' + divType);
// 获取节点的所有子节点
var txts = p.childNodes;
console.log(txts[0].nodeName + '======>' + txts[0].nodeValue + '======>' + txts[0].nodeType);
// 获取节点的所有属性节点
var a = div.attributes;
console.log(a[0].nodeName + '======>' + a[0].nodeValue + '======>' + a[0].nodeType);
// 获取节点的父节点
var parent = div.parentNode;
console.log(parent.nodeName + '======>' + parent.nodeValue + '======>' + parent.nodeType);



DOM有非常多的方法和属性，这里只是简单的说一下比较常用的几种，可以翻阅相关API文档。

2.6、事件

事件是发生在HTML元素上的“事情”。当在HTML页面中使用JavaScript时，JavaScript 能够“应对”这些事件。即事件可以是浏览器或用户做的某些事情，是文档或浏览器窗口中发生的一些特定的交互瞬间。直接在HTML元素标签内添加事件，执行脚本。

常见的事件如下：

  • onload：页面加载时触发。
  • onclick：鼠标点击时触发。
  • onmouseover：鼠标划过时触发。
  • onmouseout：鼠标离开时触发。
  • onmousedown：鼠标按钮在元素上按下时触发。
  • onmousemove：在鼠标指针移动时触发。
  • onmouseup：在元素上松开鼠标按钮时触发。
  • onfocus：获得焦点时触发。
  • onblur：失去焦点时触发。
  • onchange：域的内容改变时发生。
  • onsubmit：表单中的确认按钮被点击时发生。
  • onresize：当调整浏览器窗口的大小时触发。
  • onscroll：拖动滚动条滚动时触发。
  • onkeydown：在用户按下一个键盘按键时触发。
  • onkeypress：在键盘按键被按下并释放一个键时发生。
  • onkeyup：在键盘按键被松开时触发。
  • keyCode：返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="./css/demo.css"/>
</head>
<!--为body绑定加载事件，事件绑定函数-->
<body onload="addContent()"><p id = 'one'></p><!--按钮绑定鼠标点击事件--><button type="button" id = 'btn1' onclick = "alert('点击按钮时弹出！')">点击我！</button><br><button type="button" id = 'btn2' class='lock'>锁定</button><br><br><br><!--绑定鼠标划过事件和鼠标离开事件--><div class = 'd1' id = 'd1' οnmοuseοver="addGreen()" οnmοuseοut="changeColor()">春情缱绻</div><!--绑定鼠标按下事件、鼠标松开事件、鼠标移动事件--><h1 id = 'd2' οnmοusedοwn="mouseDown()" οnmοuseup="mouseUp()" οnmοusemοve="mouseMove()">乐逍遥</h1><input type="text" id = 'name' placeholder="请输入内容："/><br><br><div><p class="text">您还可以输入<span><em id="count">30</em>&nbsp;/&nbsp;30</span>：</p><div class="intro"><textarea id="text" cols="30" rows="5" maxlength="30" placeholder="请输入内容"></textarea></div></div><br><br><div class="box2" id="box2">请选择你喜欢的颜色：<select name="color" id="menu"><option value="">请选择</option><option value="red">红色</option><option value="green">绿色</option><option value="yellow">黄色</option><option value="orange">橘色</option><option value="pink">粉色</option></select></div>
<script src="./js/demo.js" type="text/javascript"></script>
</body>
</html>

.lock {color: #fff;font-size: 20px;text-align: center;width: 240px;height: 50px;line-height: 30px;background: blue;border-radius: 8px;cursor: pointer;margin-top: 30px;
}.unlock {color: #fff;font-size: 20px;text-align: center;width: 240px;height: 50px;line-height: 30px;background: orange;border-radius: 8px;cursor: pointer;margin-top: 30px;
}.text span {font-weight: bold;color: #f00;
}.box2{width: 300px;height: 300px;border: 1px solid pink;overflow: auto;
}

function addContent(){// 获取元素var p = document.getElementById('one');p.innerHTML = '加载完毕后添加内容！';
}// 获取按钮元素
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){if(this.className == 'lock'){this.className = 'unlock';this.innerHTML = '解锁';} else if(this.className == 'unlock'){this.className = 'lock';this.innerHTML = '锁定';}
}function addGreen(){var ele = document.getElementById('d1');ele.style.background = 'green';
}function changeColor(){var ele = document.getElementById('d1');ele.style.background = 'pink';
}var ele = document.getElementById('d2');
function mouseDown(){ele.innerHTML = '鼠标已按下！';
}function mouseUp(){ele.innerHTML = '鼠标松开了！';
}function mouseMove(){console.log('鼠标在移动！');
}var input = document.getElementById('name');
input.onfocus = function(){this.style.background = 'pink';
}input.onblur = function(){this.style.background = 'gray';
}// 获取节点元素
var text = document.getElementById('text');
var count = document.getElementById('count');
text.onkeyup = function(){var wordLenth = text.value.length;count.innerHTML = 30 - wordLenth;
}// 获取节点元素
var box2 = document.getElementById('box2');
var menu = document.getElementById('menu');
menu.onchange = function(){var value = this.value;if(value == ''){box2.style.background = 'white';} else {box2.style.background = value;}
}

点击按钮：


点击蓝色的锁定按钮：


再点击：

鼠标移动到段落上：

离开：

点击这个标题，鼠标左键不放：


松开左键：

点击进这个文本框聚焦：

离开文本框，点击别处：

在多行文本域中输入内容：




下拉框选择一个：



在开发中JS事件用的非常频繁，熟悉每个事件，对于我们后端开发来说很有好处。

2.7、BOM

浏览器对象模型(Browser Object Model,简称BOM)是浏览器的内置对象管理模型。在前端页面开发时，可以通过对浏览器的内置对象进行控制，提高Html页面的动态效果，增强用户对页面文件的体验。

BOM对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持，每一个浏览器都有自己的实现，虽然有一些非事实的标准，但还是给开发者带来一定的麻烦。

BOM对象

BOM提供多个对象，包括：Window、Navigator、Screen、History、Location等。其中Window对象为顶层对象，其他对象都为Window对象的子对象。

如下图示：

2.7.1、Window对象

Window是浏览器的一个实例，在浏览器中，Window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global全局对象。它表示浏览器打开的窗口、标签或者框架(若当前页面里包含多个iframe，会为每个iframe创建Window对象)。Window对象不会被实例化。

调用属性和方法都作为window的静态成员。调用Window对象的成员时，可以省略前面的window。如：window.alert() 可写成 alert() 。

注意：所有的全局变量和全局方法都被归在window上。

常用方法如下：

  • alert(message)：浏览器显示带有一段消息和一个确认按钮的警告框。
  • confirm(message)：显示一个带有指定消息和OK及取消按钮的对话框。如果用户点击确定按钮，则confirm返回true，如果点击取消按钮，则返回false。
  • prompt(text,defaultText)：text是要在对话框中显示的纯文本，defaultText是默认的输入文本，这个是可选参数。如果用户单击提示框的取消按钮，则返回null，如果单击确定按钮，则返回用户输入字段当前显示的文本。
  • open(pageURL,name,parameters)：打开一个新的浏览器窗口或查找一个已经命名的窗口。pageURL是窗口路径，name是窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用），parameters是窗口参数（各参数用逗号分隔）。
  • close()：将关闭window指定的顶层浏览器窗口。某个窗口可以通过调用self.close() 或只调用close()来关闭其自身。只有通过JavaScript代码打开的窗口才能够由JavaScript代码关闭。这阻止了恶意的脚本终止用户的浏览器。
  • setTimeout(code,millisec)：用于在指定的毫秒数后调用函数或计算表达式，会返回一个ID值。code是要调用的函数或要执行的JavaScript代码，millisec是在执行代码前需要等待的毫秒数。setTimeout()只执行code一次，如果要多次调用，可以使用setInterval()或者让code自身再次调用setTimeout()。
  • clearTimeout(id_of_settimeout)：取消由setTimeout()方法设置的timeout，参数是setTimeout方法返回的ID值，参数必须。
  • setInterval(code,millisec)：按照指定的周期（以毫秒计）来调用函数或计算表达式。会返回一个ID值。setInterval()方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
  • clearInterval(id_of_setinterval)：可取消由setInterval()设置的timeout。参数必须是由setInterval()返回的ID值。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title>
</head>
<body onload = 'showTime(),showTime2()'><button type="button" id = 'btn1'>弹出警告框</button><br><br><button type="button" id = 'btn2'>弹出对话框</button><br><br><button type="button" id = 'btn3'>输入我的姓名</button><br><br><button type="button" id = 'btn4'>打开百度首页</button><br><br><button type="button" id = 'btn5'>关闭本窗口</button><br><br><button type="button" id = 'btn6'>点击后十秒钟弹出窗口</button><br><br><button type="button" id = 'start' onclick = 'startCount()'>开始计数</button><input type="text" id = 'count' /><button type="button" id = 'end' onclick = 'stopCount()'>停止计数</button><button type="button" id = 'reset' onclick = 'resetZero()'>重置为0</button><br><br><span id = 'showTime' style='font-size: 30px;font-weight: bold'></span>&nbsp; &nbsp; &nbsp;    <button type="button" id = 's1'>停止计时</button>&nbsp;&nbsp;<button type="button" id = 's2'>开始计时</button><br><br><span id = 'showTime2' style='font-size: 20px;font-weight: bold;color: orange'></span>&nbsp; &nbsp; &nbsp;    <button type="button" id = 's3'>停止计时</button>&nbsp;&nbsp;<button type="button" id = 's4'>开始计时</button>
<script>var btn1 = document.getElementById('btn1');btn1.onclick = function(){alert('欢迎来到本站点！');}var btn2 = document.getElementById('btn2');btn2.onclick = function(){var flag = confirm('是否确认当前为本人操作？');if(flag){alert('你已经确定！');} else{alert('您取消了当前操作！');}}var btn3 = document.getElementById('btn3');btn3.onclick = function(){var name = prompt('请输入您的姓名：','未知');console.log('您的姓名是：' + name);}var btn4 = document.getElementById('btn4');btn4.onclick = function(){window.open('https://www.baidu.com');}var btn5 = document.getElementById('btn5');btn5.onclick = function(){window.close();}var btn6 = document.getElementById('btn6');btn6.onclick = function(){setTimeout('alert("你好鸭，2021！")',10000);   }var id;var a = 0;var input = document.getElementById('count');function startCount(){input.value = a;a++;id = setTimeout('startCount()',1000);}function stopCount(){clearTimeout(id);}function resetZero(){a = 0;input.value = a;}var t;function showTime(){var time = document.getElementById('showTime');time.innerHTML = getCurrentTime();t = setTimeout('showTime()',1000);}// 获取当前时间function getCurrentTime(){var today = new Date();var year = today.getFullYear();var month = checkTime(today.getMonth() + 1);var day = checkTime(today.getDate());var hour = checkTime(today.getHours());var minute = checkTime(today.getMinutes());var second = checkTime(today.getSeconds());var timeNow = year + '年' + month + '月' + day + '日' + ' ' + hour + '时' + minute + '分' + second + '秒';return timeNow;}// 月日时分秒小于10的，前面加0function checkTime(a){if (a<10){return '0' + a;} else {return a;}}var s1 = document.getElementById('s1');s1.onclick = function(){clearTimeout(t);}var s2 = document.getElementById('s2');s2.onclick = function(){showTime();}function showTime2(){var time = document.getElementById('showTime2');time.innerHTML = getCurrentTime();}var t2 = setInterval('showTime2()',1000);var s3 = document.getElementById('s3');s3.onclick = function(){clearInterval(t2);}var s4 = document.getElementById('s4');s4.onclick = function(){t2 = setInterval('showTime2()',1000);}</script>
</body>
</html>

点击：


点击：


点击确定：

点击取消：

点击：


点击确定：

输入自定义值确定：

点击：


成功跳转。

点击：

成功关闭窗口。

点击：

十秒钟后出现弹窗：

点击开始计数：



一直在变，点击停止计数：

停止了，点击重置为0：

重置成功。


这两个时间是一直在变的，点击停止计时按钮，计时会停止，点击开始计时，又会每秒钟变化一次。

2.7.2、Location对象

Location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。可对当前页面的URL进行操作，如：导航到新的页面、获取URL信息等。window.location或者location来进行调用。

常用方法如下：

  • assign(url)：加载新的文档。
  • reload()：重新加载当前文档，传参true从服务器开始加载，相当于刷新。
  • replace(url)：用新的文档替换当前文档。

常用的属性如下：

  • hash：设置或返回从井号 (#) 开始的URL（锚）。
  • host：设置或返回主机名和当前URL的端口号。
  • hostname：设置或返回当前URL的主机名。
  • href：设置或返回完整的URL。
  • pathname：设置或返回当前URL的路径部分。
  • port：设置或返回当前URL的端口号。
  • protocol：设置或返回当前URL的协议。
  • search：设置或返回从问号 (?) 开始的 URL（查询部分）。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title>
</head>
<body><button type="button" id = 'loadDoc'>加载新文档</button><br><br><button type="button" id = 'reloadDoc'>重新加载此文档</button><br><br><button type="button" id = 'replaceDoc'>替换此文档</button><br><br>
<script>var url = 'https://www.baidu.com';var btn = document.getElementById('loadDoc');btn.onclick = function(){window.location.assign(url);}var btn2 = document.getElementById('reloadDoc');btn2.onclick = function(){window.location.reload();}var btn3 = document.getElementById('replaceDoc');btn3.onclick = function(){window.location.replace(url);}window.location.hash = '#yzc111111';console.log(window.location.hash);console.log(window.location.href);console.log(window.location.host);console.log(window.location.hostname);console.log(window.location.pathname);console.log(window.location.protocol);console.log(window.location.prot);console.log(window.location.search);</script>
</body>
</html>


点击第一个按钮：

点击第二个按钮：

当前页面重新刷新。

点击第三个按钮：

当前文档替换成了百度首页内容，且不允许后退。

浏览器console控制台：

2.7.3、History对象

History对象保存了用户在浏览器中访问页面的历史记录。可对当前页的浏览历史进行操作，如：前进、后退等。出于安全考虑，不能知道浏览了哪些URL。

常用方法及属性如下：

  • back()：加载history列表中的前一个URL。
  • forward()：加载history列表中的下一个URL。
  • go()：加载history列表中的某个具体页面。
  • length：返回浏览器历史列表中的URL数量。

History对象权当了解就可以了，用的不多。

2.7.4、Navigator对象

Navigator对象包含浏览器信息。如：获取浏览器名称、版本信息、操作系统平台信息等。调用方式window.navigator或者navigator。

常用属性如下：

常用方法：

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title>
</head>
<body>
<script>console.log('浏览器代码名：' + window.navigator.appCodeName);console.log('浏览器的次级版本:' + window.navigator.appMinorVersion);console.log('浏览器名称：' + window.navigator.appName);console.log('浏览器的平台和版本信息：' + window.navigator.appVersion);console.log('当前浏览器的语言' + window.navigator.browserLanguage);console.log('浏览器是否开启Cookie?' + window.navigator.cookieEnabled);console.log('浏览器的cpu等级' + window.navigator.cpuClass);console.log('当前系统是否处于脱机状态？' + window.navigator.onLine);console.log('运行浏览器的操作系统平台：' + window.navigator.platform);console.log('OS使用的默认语言：' + window.navigator.systemLanguage);console.log('user-agent头部的值：' + window.navigator.userAgent);console.log('浏览器是否启用了Java？' + window.navigator.javaEnabled());// 获取浏览器类型function getBrowserType(){var browser;var userAgent = window.navigator.userAgent.toLowerCase();if(userAgent.indexOf('msie') > -1){browser = 'IE浏览器';} else if(userAgent.indexOf('chrome') > -1){browser = '谷歌浏览器或含有谷歌内核';} else if(userAgent.indexOf('opera') > -1){browser = 'opera浏览器';} else {browser = '未知浏览器';}return browser;}console.log('当前浏览器：' + getBrowserType());</script>
</body>
</html>

2.7.5、Screen对象

Screen对象包含有关客户端显示屏幕的信息。如获取屏幕高度、宽度等。调用方式window.screen或者screen。

常用属性如下：

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title>
</head>
<body>
<script>console.log('显示屏幕宽度：' + window.screen.availWidth);console.log('显示屏幕高度：' + window.screen.availHeight);console.log('调色板的比特深度：' + window.screen.bufferDepth);console.log('调色板的比特深度：' + window.screen.colorDepth);console.log('显示屏幕的每英寸水平点数：' + window.screen.deviceXDPI);console.log('显示屏幕的每英寸垂直点数：' + window.screen.deviceYDPI);console.log('用户是否在显示控制面板中启用了字体平滑：' + window.screen.fontSmoothingEnabled);console.log('显示屏幕的宽度：' + window.screen.width);console.log('显示屏幕的高度：' + window.screen.height);console.log('显示屏幕每英寸的水平方向的常规点数：' + window.screen.logicalXDPI);console.log('显示屏幕每英寸的垂直方向的常规点数：' + window.screen.logicalYDPI);console.log('显示屏幕的颜色分辨率（比特每像素）：' + window.screen.pixelDepth);console.log('屏幕的刷新率：' + window.screen.updateInterval);</script>
</body>
</html>


可以看到，大部分属性都不支持。

2.8、例子

模拟导航图自动切换场景，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><link rel="stylesheet" href="./css/demo.css" />
</head>
<body><div class = "main" id = "main"><div class = "menu-box"></div><!--主菜单--><div class = "menu-content" id = "menu-content"><div class="menu-item"><a href="#"><span>手机、配件</span><i>&#xe665;</i></a></div><div class="menu-item"><a href="#"><span>电脑</span><i>&#xe665;</i></a></div><div class="menu-item"><a href="#"><span>家用电器</span><i>&#xe665;</i></a></div><div class="menu-item"><a href="#"><span>家具</span><i>&#xe665;</i></a></div></div><!--子菜单--><div class = "sub-menu hide" id = "sub-menu"><!--手机、配件--><div class="inner-box"><div class="sub-inner-box"><div class="title">手机、配件</div><div class="sub-row"><span class="bold mr10">手机配件：</span><a href="#">手机壳</a><span class="mr10 ml10">/</span><a href="#">手机存储卡</a><span class="mr10 ml10">/</span><a href="#">USB数据线</a><span class="mr10 ml10">/</span><a href="#">耳机</a><span class="mr10 ml10">/</span><a href="#">充电器</a></div><div class="sub-row"><span class="bold mr10">运营商：</span><a href="#">中国移动</a><span class="mr10 ml10">/</span><a href="#">中国联通</a><span class="mr10 ml10">/</span><a href="#">中国电信</a></div><div class="sub-row"><span class="bold mr10">智能设备：</span><a href="#">智能手环</a><span class="mr10 ml10">/</span><a href="#">智能家居</a><span class="mr10 ml10">/</span><a href="#">智能手表</a><span class="mr10 ml10">/</span><a href="#">其他配件</a></div><div class="sub-row"><span class="bold mr10">娱乐设备：</span><a href="#">耳机</a><span class="mr10 ml10">/</span><a href="#">音响</a><span class="mr10 ml10">/</span><a href="#">收音机</a><span class="mr10 ml10">/</span><a href="#">麦克风</a></div></div></div><!--电脑--><div class="inner-box"><div class="sub-inner-box"><div class="title">电脑</div><div class="sub-row"><span class="bold mr10">电脑：</span><a href="#">笔记本</a><span class="mr10 ml10">/</span><a href="#">平板</a><span class="mr10 ml10">/</span><a href="#">一体机</a></div><div class="sub-row"><span class="bold mr10">电脑配件：</span><a href="#">显示器</a><span class="mr10 ml10">/</span><a href="#">CPU</a><span class="mr10 ml10">/</span><a href="#">主板</a><span class="mr10 ml10">/</span><a href="#">硬盘</a><span class="mr10 ml10">/</span><a href="#">电源</a><span class="mr10 ml10">/</span><a href="#">显卡</a><span class="mr10 ml10">/</span><a href="#">其他配件</a></div><div class="sub-row"><span class="bold mr10">游戏设备：</span><a href="#">游戏机</a><span class="mr10 ml10">/</span><a href="#">游戏手柄</a><span class="mr10 ml10">/</span><a href="#">立体耳机</a></div><div class="sub-row"><span class="bold mr10">网络产品：</span><a href="#">路由器</a><span class="mr10 ml10">/</span><a href="#">网络机顶盒</a><span class="mr10 ml10">/</span><a href="#">交换机</a><span class="mr10 ml10">/</span><a href="#">网卡</a><span class="mr10 ml10">/</span><a href="#">存储卡</a></div><div class="sub-row"><span class="bold mr10">外部产品：</span><a href="#">鼠标</a><span class="mr10 ml10">/</span><a href="#">键盘</a><span class="mr10 ml10">/</span><a href="#">大容量移动硬盘</a><span class="mr10 ml10">/</span><a href="#">U盘</a><span class="mr10 ml10">/</span><a href="#">鼠标垫</a><span class="mr10 ml10">/</span><a href="#">电脑清洁设备</a></div></div></div><!--家用电器--><div class="inner-box"><div class="sub-inner-box"><div class="title">家用电器</div><div class="sub-row"><span class="bold mr10">电视：</span><a href="#">国产品牌</a><span class="mr10 ml10">/</span><a href="#">韩国品牌</a><span class="mr10 ml10">/</span><a href="#">日本品牌</a><span class="mr10 ml10">/</span><a href="#">美国品牌</a></div><div class="sub-row"><span class="bold mr10">空调：</span><a href="#">柜式</a><span class="mr10 ml10">/</span><a href="#">中央</a><span class="mr10 ml10">/</span><a href="#">壁挂式</a></div><div class="sub-row"><span class="bold mr10">冰箱：</span><a href="#">双门</a><span class="mr10 ml10">/</span><a href="#">三门</a><span class="mr10 ml10">/</span><a href="#">多门</a><span class="mr10 ml10">/</span><a href="#">对开门</a></div><div class="sub-row"><span class="bold mr10">洗衣机：</span><a href="#">滚筒式洗衣机</a><span class="mr10 ml10">/</span><a href="#">迷你洗衣机</a><span class="mr10 ml10">/</span><a href="#">洗烘一体机</a></div><div class="sub-row"><span class="bold mr10">厨房电器：</span><a href="#">油烟机</a><span class="mr10 ml10">/</span><a href="#">洗碗机</a><span class="mr10 ml10">/</span><a href="#">燃气机</a></div></div></div><!--家具--><div class="inner-box"><div class="sub-inner-box"><div class="title">家具</div><div class="sub-row"><span class="bold mr10">家纺：</span><a href="#">被子</a><span class="mr10 ml10">/</span><a href="#">枕头</a><span class="mr10 ml10">/</span><a href="#">床垫</a><span class="mr10 ml10">/</span><a href="#">床上四件套</a></div><div class="sub-row"><span class="bold mr10">灯具：</span><a href="#">台灯</a><span class="mr10 ml10">/</span><a href="#">顶灯</a><span class="mr10 ml10">/</span><a href="#">吊灯</a><span class="mr10 ml10">/</span><a href="#">应急灯</a><span class="mr10 ml10">/</span><a href="#">节能灯</a></div><div class="sub-row"><span class="bold mr10">厨具：</span><a href="#">烹饪锅局</a><span class="mr10 ml10">/</span><a href="#">餐具</a><span class="mr10 ml10">/</span><a href="#">菜板刀具</a></div><div class="sub-row"><span class="bold mr10">家装：</span><a href="#">地毯</a><span class="mr10 ml10">/</span><a href="#">沙发套垫</a><span class="mr10 ml10">/</span><a href="#">装饰字画</a><span class="mr10 ml10">/</span><a href="#">照片墙</a><span class="mr10 ml10">/</span><a href="#">窗帘</a></div><div class="sub-row"><span class="bold mr10">生活用品：</span><a href="#">收纳用品</a><span class="mr10 ml10">/</span><a href="#">浴室用品</a><span class="mr10 ml10">/</span><a href="#">雨衣雨伞</a></div></div></div></div><!--轮播图--><div class="banner" id="banner"><a href="#"><div class="banner-slide slide1 slide-active"></div></a><a href="#"><div class="banner-slide slide2"></div></a><a href="#"><div class="banner-slide slide3"></div></a></div><!--上一张按钮--><a href="javascript:void(0)" class="button prev" id="prev"></a><!--下一张按钮--><a href="javascript:void(0)" class="button next" id="next"></a><!--圆点导航--><div class="dots" id="dots"><span class="active"></span><span></span><span></span></div></div>
<script type="text/javascript" src='./js/demo.js'></script>
</body>
</html>

* {padding: 0;margin: 0;
}body {color: #14191e;font-family: '微软雅黑';
}/*引用字体*/
@font-face {font-family: 'iconfont';src: url(../fonts/iconfont.eot);src: url(../fonts/iconfont.eot) format('embebded-opentype'),url(../fonts/iconfont.svg#iconfog) format('svg'),url(../fonts/iconfont.ttf) format('truetype'),url(../fonts/iconfont.woff) format('woff');}.menu-box {width: 244px;height: 460px;background: rgba(7,17,27,0.5);position: absolute;left: 0;top: 0;opacity: 0.5;z-index: 1;
}.menu-content {width: 244px;height: 454px;position: absolute;left: 0;top: 0;padding-top: 6px;z-index: 2;
}a:link,a:visited {color: #333;text-decoration: none;
}.menu-item {height: 64px;font-size: 16px;line-height: 66px;position: relative;padding: 0 24px;cursor: pointer;
}.menu-item a {color: #fff;font-size: 16px;height: 63px;border-bottom: 1px solid rgba(255,255,255,0.2);padding: 0 8px;display: block;
}.menu-item a:link,.menu-item a:visited {color: #fff;
}.menu-item i {color: rgba(255,255,255,0.5);font-family: "iconfont";font-size: 24px;font-weight: normal;font-style: normal;position: absolute;top: 2px;right: 32px;
}.sub-menu {width: 730px;height: 458px;background: #fff;border: 1px solid #d9dde1;position: absolute;top: 0;left: 244px;z-index: 99;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);
}.inner-box {width: 100%;height: 100%;background-image: url(../images/fe.png);background-repeat: no-repeat;display: none;
}.sub-inner-box{width: 652px;margin-left: 40px;overflow: hidden;
}.title {color: #f01414;font-size: 16px;line-height: 16px;font-weight: bold;margin: 28px 0 30px 0;
}.sub-row {margin-bottom: 25px;
}.bold {font-weight: bold;
}.mr10{margin-right: 10px;
}.ml10{margin-left: 10px;
}.hide{display: none;
}.main {width: 1200px;height: 460px;position: relative;margin: 30px auto;overflow: hidden;
}.banner {width: 1200px;height: 460px;position: relative;overflow: hidden;
}.slide1{background-image: url(../images/bg1.jpg);
}.slide2{background-image: url(../images/bg2.jpg);
}.slide3{background-image: url(../images/bg3.jpg);
}.slide-active{display: block;
}.banner-slide {width: 1200px;height: 460px;background-repeat: no-repeat;float: left;display: none;
}.button {width: 40px;height: 80px;background: url(../images/004.png) no-repeat center center;position: absolute;top: 50%;left: 244px;margin-top: -40px;
}.button:hover {background-color: #333;opacity: 0.8;filter: alpha(opacity=80);
}.prev {transform: rotate(180deg);
}.next {left: auto;right: 0;
}.dots {text-align: right;position: absolute;right: 80px;bottom: 24px;
}.dots span {width: 12px;height: 12px;border-radius: 50%;background: rgba(7,17,27,0.4);box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;display: inline-block;margin-left: 10px;cursor: pointer;
}.dots .active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background: #fff;
}

// 封装一个方法，代替getElementById
function byId(id){return typeof(id)==='string'?document.getElementById(id):id;
}var index=0,timer=null,// banner图的所有div元素，列表pics=byId("banner").getElementsByTagName("div"),// 圆点导航的所有span元素，列表dots=byId("dots").getElementsByTagName("span"),// 前一张按钮元素prev=byId("prev"),// 后一张按钮元素next=byId("next"),// 图片的张数len=pics.length,// 主菜单元素menu=byId("menu-content"),// 子菜单元素subMenu=byId("sub-menu"),// 子菜单项，列表innerBox=subMenu.getElementsByClassName("inner-box"),// 主菜单项，列表menuItems=menu.getElementsByClassName("menu-item");function slideImg(){// 整个容器元素var main = byId('main');// 绑定鼠标离开事件main.onmouseout = function(){// 设置定时器timer = setInterval(function(){index++;if(index >= len){index = 0;}changeImg();},1000);}// 点击圆点图标切换图片for(var i=0;i<len;i++){dots[i].id = i;dots[i].onclick = function(){index = this.id;changeImg();}}// 点击下一张图标切换图片next.onclick = function(){index++;if(index >= len){index = 0;}changeImg();}// 点击上一张切换图片prev.onclick = function(){index--;if(index < 0){index = len - 1;}changeImg();}// 绑定鼠标滑过事件main.onmouseover = function(){// 清除定时器if(timer){clearInterval(timer);}}// 主菜单绑定鼠标离开事件menu.onmouseout = function(){subMenu.className = 'sub-menu hide';}// 子菜单绑定鼠标悬停事件subMenu.onmouseover = function(){this.className = 'sub-menu';}// 子菜单绑定鼠标离开事件subMenu.onmouseout = function(){this.className = 'sub-menu hide';}for(var i=0;i<menuItems.length;i++){menuItems[i].setAttribute('data-index',i);menuItems[i].onmouseover = function(){subMenu.className = 'sub-menu';var idx = this.getAttribute('data-index');for(var j=0;j<innerBox.length;j++){innerBox[j].style.display = 'none';menuItems[j].style.background = 'none';}menuItems[idx].style.background = 'rgba(0,0,0,0.1)';innerBox[idx].style.display = 'block';}}}// 图片切换function changeImg(){for(var i=0;i<len;i++){pics[i].style.display = 'none';dots[i].className = '';}pics[index].style.display = 'block';dots[index].className = 'active';}slideImg();

效果：



轮播图每秒自动切换，点击圆点导航按钮可以切换图片，点击上一张、下一张图片可以切换图片。




鼠标悬停在主菜单项上，对应的子菜单自动显示。

鼠标离开主菜单项，子菜单隐藏。

JavaScript相关相关推荐

  1. 关于JavaScript相关文章

    http://www.cnblogs.com/xia520pi/archive/2012/05/12/2497013.html 关于JavaScript相关文章 1)JavaScript框架之继承机制 ...

  2. javascript 相关小的知识点集合

    本文主要是列出一些javascript 相关的,不限于javascript的,容易记错或者遗忘的小知识,小技巧. 1.javascript中的false 在 JavaScript,常见的 false ...

  3. JavaScript相关笔记及案例

    JavaScript 一.JavaScript简介 1 什么是JavaScript JavaScript简称JS,由网景公司开发的客户端脚本语言,不需要编译,可以直接运行 Web前端三层: 结构层HT ...

  4. JavaScript 相关面试题目

    JavaScript 为什么javascript是单线程? 如果js是多线程的,在运行时多个线程同时对DOM元素进行操作,那具体以哪个线程为主就是个问题了 HTML5新的标准中允许使用new Work ...

  5. react中文文档、英文文档及JavaScript相关文档及web前端相关资料

    一. react中文文档 https://doc.react-china.org 二. react英文文档 https://reactjs.org 三.react Github https://git ...

  6. JavaScript相关图书推荐

    JavaScript语言精粹(修订版) 作      者 Douglas Crockford(道格拉斯·克罗克福德) 著:赵泽欣 等 译 出 版 社 电子工业出版社 出版时间 2012-09-01 版 ...

  7. JavaScript相关面试题:setTimeout的运行机制

    文章目录 setTimeout简介 JavaScript 单线程 setTimeout运行机制 setTimeout简介 setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它 ...

  8. 清除string内容_前端面试之javascript相关内容整理一

    1.js有哪些数据类型?(死记就行,好嗨哟) 答:js基本数据类型:String.Number.Boolean.Null.undefined 混合数据类型:Object(Array) 2.手写AJAX ...

  9. 面试相关 JavaScript

    JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === "strin ...

最新文章

  1. ROS 总结（二）：创建URDF模型
  2. Linux驱动基础：MSM平台AP/CP通信机制
  3. virtual server2005下创建citrix集群的一点记录
  4. EF里查看/修改实体的当前值、原始值和数据库值以及重写SaveChanges方法记录实体状态...
  5. 获得Class引用的三种方式?Class.forName()、getClass以及.class的使用
  6. python嵌套循环_关于Python嵌套循环代码优化
  7. docker打包部署flask镜像
  8. Codeforces Round #442 (Div. 2) 877E - Danil and a Part-time Job dfs序+线段树
  9. 适用于5G网络的SAF Spectrum Compact 频谱仪
  10. 图神经网络的直推式(Transductive)学习与归纳(Inductive)学习
  11. speedoffice表格的外框线怎么设置？
  12. CESM优化——Intel编译器编译安装NetCDF库（C+Fortran）
  13. 风口的猪-中国牛市（动态规划）----百度2016研发工程师在线编程题
  14. CTF-MISC文件隐写总结(图片,音频,视频,压缩包等文件)
  15. IPv6系列-彻底弄明白有状态与无状态配置IPv6地址
  16. wps斜杠日期格式_使用WPS处理日期数据格式的方法
  17. AnnotationConfigApplicationContext@51016012 has not been refreshed yet
  18. 作为一个程序员的年终总结。
  19. 商业版微信小程序开发流程
  20. 关于自动更换xp桌面的壁纸。

热门文章

  1. Mybatis实现关联表查询
  2. 深入理解耦合度及解耦方法
  3. SQL Server时区
  4. 十大流氓软件及卸载方法整理
  5. dump烧饼修改器的实现代码
  6. 在word中调用CDR(coreldraw)图形，变形的问题解决方法介绍！
  7. 由于没有远程桌面授权服务器可以提供许可证，远程会话连接已断开
  8. 【C语言学习疑难杂症】Stack arround the variable was corrupted问题
  9. Java 实验 容器题目 保皇游戏
  10. 计算机的随机数函数,使用rand()函数生成随机数