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. 办公电脑变买为租，“企业惊变”背后神秘推手
  2. eclipse的操作
  3. Maximum Xor Secondary(单调栈好题)
  4. 《位运算技巧以及Leetcode的一些位运算题目》
  5. 1215B. The Number of Products
  6. std::future详解
  7. Sandy引擎学习笔记：摄影机
  8. 拆解前苏联产荧光数码管计算器，内部电路结构彪悍！
  9. 矩阵连乘问题的算法分析
  10. MFC调用Qt生成的dll
  11. Python+OpenCV：图像Shi-Tomasi角点检测器
  12. 【转】JAVA成长之路
  13. android viewflipper 动画,Android ViewFlipper动画
  14. delphi2010安装
  15. ddk开发 c语言,ddk_helloWDM_原代码是网上高手的杰作
  16. 山体滑坡动画用什么软件制作_做施工动画是用什么软件来做
  17. win32_mfc 理论资料 供自己查阅
  18. 我国的5年计划与软件项目计划-滚动计划
  19. 在线视频插上“大数据翅膀”
  20. SAP ABAP SD常用函数或BAPI

热门文章

  1. nie题目-游戏排行榜设计
  2. Google将推出音乐下载服务？
  3. 适合房产中介使用的房产管理系统源码哪个比较好用?
  4. 2022给闺蜜的生日贺卡祝福语
  5. php中volist怎么循环,Thinkphp的volist标签嵌套循环使用教程_PHP
  6. 双11，前端程序员别漏了这几样
  7. 码农：曾diss我技术的人如今没工作找我，太具讽刺意义了！
  8. 在Delphi中如何使用TTask并行程序进行多线程下载
  9. 唐宇迪学习笔记1：Python环境安装、Pytho科学计算库——Numpy
  10. 基于STM32的麦克纳姆轮小车的寻迹实现