JavaScript相关

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中通过使用标签来引入JavaScript脚本。可以放在里面，也可以放在里面，一般是放在末尾。如下：


两种方式引入的区别是加载顺序不一样，根据需求选择放在哪里。可以引入外部的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>
	// 变量初始化为null
	var 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 + b
	a += b;
	console.log(a);
	// a = a - b
	a -= b;
	console.log(a);
	// a = a * b
	a *= b;
	console.log(a);
	// a = a / b
	a /= b;
	console.log(a);
	// a = a % b
	a %= 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方法是弹出提示，让用户输入值，输入完点击确定，不输入则判定为null
	var 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('
');			
		}
	}
	document.write('
' + '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 + '
');
		i++;
		if(i > 15){
     
			break;
		}
	}
</script>

<script>
	for(var i=1;i<=20;i++){
     
		if(i % 2 == 0){
     
			continue;
		} 
	   document.write('现在的值：' + i + '
');
	}
</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 + '
');
	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] + '
');
	}
	document.write('
');
	// 创建数组
	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] + '
');
	}
	document.write('
');
	// 创建数组
	var arr3 = ['yan','cheng','zhi'];
	document.write('此数组的元素个数为：' + arr3.length + '
');
	for(var i=0;i<arr3.length;i++){
     
		document.write('第' + (i+1) + '个元素：' + arr3[i] + '
');
	}
</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 + '
');
	document.write('
');
	// 数组末尾添加元素
	arr.push('zhi');
    document.write('数组的元素个数为：' + arr.length + '
');
	for(var i=0;i<arr.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr[i] + '
');	
	}
	document.write('
');
	// 数组头部添加元素
	arr.unshift('yan');
	document.write('数组的元素个数为：' + arr.length + '
');
	for(var i=0;i<arr.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr[i] + '
');	
	}
	document.write('
');
	// 删除数组尾部元素
	arr.pop();
	document.write('数组的元素个数为：' + arr.length + '
');
	for(var i=0;i<arr.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr[i] + '
');	
	}
	document.write('
');
	// 删除数组头部元素
	arr.shift();
	document.write('数组的元素个数为：' + arr.length + '
');
	for(var i=0;i<arr.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr[i] + '
');	
	}
	document.write('
');
	var arr2 = ['yun','guo','meng','wu','heng'];
	// 以指定连接符连接数组元素
	var res = arr2.join("===>");
	document.write('连接后的字符串：' + res + '
' + '
');
	for(var i=0;i<arr2.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr2[i] + '
');	
	}
	document.write('
');
	// 数组反转
	var arr3 = arr2.reverse();
	for(var i=0;i<arr3.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr3[i] + '
');	
	}
	document.write('
');
	// 数组排序，是按照字母顺序排列的，数值也按照字符串来排序
	var arr4 = arr2.sort();
	for(var i=0;i<arr4.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr4[i] + '
');	
	}
	var num = [1,4,56,32,3,53,12];
	// 数组元素按照大小升序排列
	num.sort(
		function(x,y){
     
			return x - y;
		}
		);
	document.write('
');
	for(var i=0;i<num.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + num[i] + '
');	
	}
	document.write('
');
	// 数组元素按照大小降序排列
	num.sort(
		function(x,y){
     
			return y - x;
		}
		);
	document.write('
');
	for(var i=0;i<num.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + num[i] + '
');	
	}
	document.write('
');
	// 数组连接
	var arr5 = num.concat(arr2);
	for(var i=0;i<arr5.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr5[i] + '
');	
	}
	// 截取数组
	var arr6 = arr5.slice(0,num.length);
	document.write('
');
	for(var i=0;i<arr6.length;i++){
     
	  document.write('第' + (i+1) +'个元素为：' + arr6[i] + '
');	
	}
	document.write('
');
	// 删除从指定索引位置开始的多个元素，返回被删除元素组成的数组
	var arr7 = arr6.splice(0,3);
	for(var i=0;i<arr7.length;i++){
     
	  document.write('被删除的第' + (i+1) +'个元素为：' + arr7[i] + '
');	
	}
	document.write('删除后原数组的长度变为：' + arr6.length);
	document.write('
');
	var arr8 = ['云','过','云','之','梦','彼','云','痕'];
	var result = arr8.indexOf('云',1);
	document.write('云字的索引位：' + result + '
');
	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 + '
');
	var asc = name.charCodeAt(6);
	document.write('索引位置6的字符的ACSII码值是：' + asc + '
');
	var email = '[email protected]';
	// 查找子串第一次出现的位置
	var index = email.indexOf('@qq');
	document.write('@qq第一次出现的位置是：：' +  index + '
');
	// 查找子串最后一次出现的位置
	var last_index = email.lastIndexOf('1');
	document.write('1最后一次出现的位置是：：' +  last_index + '
');
	// 截取子串
	document.write('截取后的子串是：' +  email.slice(10) + '
');
	document.write('截取后的子串是：' +  email.slice(10,13) + '
');
	document.write('截取后的子串是：' +  email.slice(-7,13) + '
');
	// 截取子串
	document.write('截取后的子串是：' +  email.substring(10) + '
');
	document.write('截取后的子串是：' +  email.substring(10,13) + '
');
	document.write('截取后的子串是：' +  email.substring(-10,13) + '
');
	// 截取子串
	document.write('截取后的子串是：' +  email.substr(10) + '
');
	document.write('截取后的子串是：' +  email.substr(10,7) + '
');
	document.write('截取后的子串是：' +  email.substr(-7,7) + '
');
	var url = 'www.ycz.abcd.com';
	// 以指定分隔符分割串，返回数组
	var arr = url.split('.');
	for(var i=0;i<arr.length;i++){
     
		document.write('第' + (i+1) + '个字符串是：' + arr[i] + '
');
	}
	// 获取后缀名
	function getsuffix(fileName){
     
		var index = fileName.indexOf('.');
		var suffix = fileName.substring(index+1);
		return suffix;
	}
	document.write('该文件的后缀名是：' +  getsuffix('灵剑尊.txt') + '
');
	document.write('该文件的后缀名是：' +  getsuffix('乐逍遥.mp3') + '
');
	document.write('该文件的后缀名是：' +  getsuffix('山海经随手笔记.docx') + '
');
	// 替换字符串中的字符或子串，只会替换第一个
	var url2 = url.replace('.','点');
	document.write('替换后的子串是：' +  url2 + '
');
	var str = 'I am a Single Dog';
	document.write('转换为大写是：' +  str.toUpperCase() + '
');
	document.write('转换为小写是：' +  str.toLowerCase() + '
');
	// 下划线转驼峰
	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') + '
');
</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）。
• 每个节点都有父节点、除了根（它没有父节点）。
• 一个节点可拥有任意数量的子节点。
• 同胞是拥有相同父节点的节点。

示例如下：

说明如下：

• 节点没有父节点，它是根节点。
• 节点和节点是节点的子节点。
• 节点和节点是同胞节点。
• 节点和