JavaScript基础

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script><!-- 外部引用 -->
		<script type="text/javascript">
			// 书写位置
			// 警告框
			alert("我是head的scrpit");
		</script>
	</head>

	<body>
		<script type="text/javascript">
			alert("我是body中的scrpit")
		</script>
		<script type="text/javascript">
			alert("我是body中的scrpit2")
		</script>
	</body>

</html>
<script type="text/javascript">
	alert("我是html外部的script")
</script>

二、五种输出方式

alert()--->警告框

console.log()--->控制台输出

document.write()--->网页输出

prompt()--->输入框（将用户输入的值反回回来）

confirm()-->确定框（点击确定返回True或false）

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<script type="text/javascript">
			alert("警告框");
			console.log("我是控制台输出");//会堵塞后面的代码
			document.write("hello JavaScript");
			document.write("<h1>标题1</h1>");//输出标签
			var name = prompt("请输入姓名");
			console.log(name);
			var t = confirm("确定删除吗？");
			console.log(t);
		</script>
	</body>
</html>

三、运算符

算数运算符

（括号）可以改变运算顺序

字符串 + 字符串表示字符串之间的拼接

++ 或 -- 在变量后面，那么会在同级语境中最后执行

++ 或 -- 在变量前面，在变量的前面，那么在同级语境中，最先执行

关系运算符（比较运算符）

== != 只比较值的大小，和数据类型无关

=== !== 不仅比较值的大小，还需要比较数据类型是否相同

赋值运算符

逻辑运算符

与&& 左右同时为真，则为真

或|| 左右同时为假，则为假

非! 改变真假值

三目表达式

var y = 判断式 ? 值一（为真，变量等于值1） : 值二（为假，变量等于值2）

四、分支语句

单分支

<script type="text/javascript">
			if(条件){
				条件为真
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//输入姓名是否为王一
			var name = prompt("请输入姓名");
			if (name == ("王一")) {
				console.log("欢迎王一");
			}
		</script>
	</head>
	<body>
	</body>
</html>

双分支

<script type="text/javascript">
			if (条件) {
				为真
			} else{
				为假
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//输入成绩   >60及格  <60不及格
			var score = prompt("请输入成绩");
			if (score >=60) {
				console.log("成绩合格：" + score);
			} else{
				console.log("成绩不合格：" + score);
			}
		</script>
	</head>
	<body>
	</body>
</html>

多重分支

if分支

<script type="text/javascript">
			if (条件1) {
				条件1为真
			} else if (条件2){
				条件2为真
			}else if (条件3){
				条件3为真
			}else{
				条件3为假
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
            //输入成绩 >80优秀  >60及格  <60不及格
			var score = prompt("请输入成绩");
			if (score >=80) {
				console.log("成绩优秀：" + score);
			} else if (score >= 60){
				console.log("成绩合格：" + score);
			}else{
				console.log("成绩不合格：" + score);
			}
		</script>
	</head>
	<body>
	</body>
</html>

switch分支

switch 只能做全等比较

<script type="text/javascript">
			switch(值){
				case 值1: 
				如果等于值1
					break;
				case 值2:
				如果等于值2
					break;
				case 值3:
				如果等于值3
					break;
				default:
				所有的值都不满足
					break;
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
				var data = prompt("请输入1-7");
				switch(data){
					case "1":
						console.log("星期一");
						break;
					case "2":
						console.log("星期二");
						break;
					case "3":
						console.log("星期三");
						break;
					case "4":
						console.log("星期四");
						break;
					case "5":
						console.log("星期五");
						break;
					case "6":
						console.log("星期六");
						break;
					case "7":
						console.log("星期天");
						break;
					default:
						console.log("输入有误");
						break;
				}
		</script>
	</head>
	<body>
	</body>
</html>

五、循环语句

for循环

<script type="text/javascript">
			//表达式1：初始变量
			//表达式2：比较表达式
			//表达式3：变量的变化
			for(表达式1;表达式;表达式3){
				循环体内容
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//打印1-5
			for(var i=1;i<=5;i++){
				console.log(i);
			}
		</script>
	</head>
	<body>
	</body>
</html>

break 循环见到break直接终止

continue 循环见到continue终止本次循环

while循环

<script type="text/javascript">
			while(条件){
				循环体
			}
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//打印1-10
			var i =1;
			while(i<=10){
				console.log(i);
				i++;
			}
		</script>
	</head>
	<body>
	</body>
</html>

do while循环

<script type="text/javascript">
			do{
				循环体
			}while(条件);
		</script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var i=1;
			do{
				console.log(i);
				i++
			}while(i<=10);
		</script>
	</head>
	<body>
	</body>
</html>

do while第一次循环不比较条件

六、数组

数组

数组特点

数组是值的有序集合。

由于弱类型的原因，JavaScript中数组十分灵活、强大，不像是Java等强类型高级语言数组只能存

放同一类型或其子类型元素，JavaScript在同一个数组中可以存放多种类型的元素。

js数组长度也是可以动态调整的，可以随着数据增加或减少自动对数组长度做更改。

数组的基本要素

标识符:数组的名称，用于区分不同的数组

数组元素:向数组中存放的数据

元素下标(索引) :对数组元素进行编号，从0开始，数组中的每个元素都可以通过下标来访问

数组:数组名称，数组元素，数组下标，数组长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//数组的创建
			//1、new Array[]   创建对象的方式
			var array1 = new Array(3);
			//数组的索引（下标）从0开始
			array1[0] = 23;
			array1[1] = 90;
			array1[2] = 93;
			console.log(array1);
			//2、直接创建数组
			var array2= [10,20,30,40,50];
			console.log(array2);
			//数组长度   .length  返回数组长度
			console.log("array2的数组长度为：" + array2.length);
			//数组的遍历
			for(var i = 0;i < array2.length; i++){
				console.log(array2[i]);
			}
			//求和
			var sum = 0;
			for(var i = 0; i < array2.length; i ++){
				sum += array2[i];
			}
			console.log("数组求和结果为：" + sum);
			//拿取数组中的最后一位
			console.log("数组最后一个元素为：" + array2[array2.length - 1])
		</script>
	</head>
	<body>
	</body>
</html>

多维数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//多维数组
			var array = [[90,45],[23,67,90],[67,23,45,6]];
			//遍历多维数组
			for(var i =0; i < array.length; i ++){
				for(var j = 0; j < array[i].length; j ++){
					console.log(array[i][j]);
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

级联列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<select id="bt1">
			
		</select>
		<select id="bt2">
			
		</select>
		<script type="text/javascript">
			//document.getElementById() 通过id找到对应结构
			//.innerHTML 更改对应元素中的内容
			var array = ["河北","河南","山东","北京"];
			var str = "";
			for(var i = 0; i < array.length; i ++){
				str = str + "<option>" + array[i] + "</option>"; 
			}
			var bt1 = document.getElementById("bt1");
			bt1.innerHTML = str;
			var citys = [["石家庄","唐山","保定"],["郑州","洛阳","新乡"],["济南","泰安","青岛"],["朝阳","丰台"]];
			var str1 = "";
			for(var i = 0 ; i < citys[0].length; i++){
				str1 = str1 +  "<option>" + citys[0][i] + "</option>";
			}
			var bt2 = document.getElementById("bt2");
			bt2.innerHTML = str1;
			//onchange改变事件
			 bt1.onchange=function(){
				//select中.selectedIndex 表示当前选中的索引值
				var index = bt1.selectedIndex;
				var str1 = "";
				for(var i = 0; i < citys[index].length; i ++){
					str1 = str1 + "<option>" + citys[index][i] + "</option>";
				}
				bt2.innerHTML = str1;
			} 
			
		</script>
		
	</body>
</html>

数组的基本使用方法

arr1.concat(arr2) 将数组arr1和数组arr2进行合并，返回一个合并后的数组

arr1.join(“字符串a”) 将数组arr1，所有的元素用字符串a分隔转换为字符串

arr1.push(ele) 将元素ele，添加到数组arr1的末尾

arr.unshift(ele) 将元素ele,添加到数组arr的开始

arr.pop() 将数组arr的最后一个元素删除，返回删除的元素

arr.shift) 将数组arr的第一个元素删除，返回删除的元素

splice()

删除元素

arr.splice(开始索引,删除元素的个数);包含开始索引

插入元素

arr.splice(插入位置,0,插入的元素..)插入的元素可以有多个，元素之间用,分隔

arr.reverse() 数组倒置，返回倒置后的数组

arr.indexOf(ele) 查找元素ele在数组中首次出现的位置，返回元素所在的下标;若ele在数组中

不存在，那么返回-1

arr.lastIndexOf(ele) 查找元素ele在数组中最后一次出现的位置，返回元素所在的下标;若ele在数

组中不存在，那么返回-1

sort()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1、合并数组 .concat  保持原数组不变  返回新数组
			console.log("----------------合并数组-----------------");
			var array1 = [10,20,30];
			var array2 = [40,50,60];
			var array4 = [70,89,90];
			var array3 = array1.concat(array2,array4);
			console.log(array1);
			console.log(array2);
			console.log(array3);
			console.log(array4);
			//2、将数组转化为字符串  数组的类型 object（对象）
			//.join()  通过特殊字符串，将数组转化为字符串，返回新的字符串
			console.log("----------------数组转换字符串-----------------");
			var str1 = array1.join("+");//默认“,”
			console.log(str1);
			//改变数组长度
			console.log("----------------改变数组长度-----------------");
			//3、数组的末尾添加 .push()  可以追加多个参数  返回值新数组的长度
			var x = array1.push(100,110,120);
			console.log(x);
			console.log(array1);
			//4、数组的开头添加  unshift() 返回值新数组的长度
			var y = array2.unshift(1,2,3,4);
			console.log(y);
			console.log(array2);
			//5、末尾删除  .pop()  返回被删除的元素  不可以删除多个
			var z = array4.pop();
			console.log(z);
			console.log(array4);
			//6、开头删除  .shift()  返回被删除的元素  不可以删除多个
			var n = array4.shift();
			console.log(n);
			console.log(array4);
			console.log("----------------删除或增加任意位置的元素-----------------");
			var arr1 = [10,20,30,40,50,60,70];
			console.log(arr1);
			//7、删除 .splice(x,y)  x-->删除对应索引值的元素   y-->向后删多少个（包括自己本身）  返回被删除的元素的数组
			var m = arr1.splice(2,3);
			console.log(m);
			console.log(arr1);
			console.log("---------------------------------");
			//8、增加  .splice(x,y,z,z1,z2.....)  添加n个数据  x-->索引值  y-->向后删除多少  z-->插入的数据
			var arr2 = [40,50,60,70];
			var k = arr2.splice(1,0,90,78,29);
			console.log(k);
			console.log(arr2);
			console.log("----------------数组的倒置-----------------");
			//9、数组的倒置  .reverse()  返回倒置后数组  会改变原数组
			var l = arr2.reverse();
			console.log(l);
			console.log(arr2);
			console.log("----------------数组元素是否含有的判断-----------------");
			//10、判断数组中是否含有指定元素  .indexOf()  返回第一次出现的索引值，不含有返回-1
			var name1 = ["李四","张三","王五","赵六","小明","张三","小红"];
			console.log(name);
			var index1 = name1.indexOf("王一");
			console.log(index1);
			var index2 = name1.indexOf("张三");
			console.log(index2);
			//11、判断数组中是否含有指定元素  .lastIndexOf()  返回最后一次出现的索引值，不含有返回-1
			console.log("---------------------------------");
			var index3 = name1.lastIndexOf("王一");
			console.log(index3);
			var index4 = name1.lastIndexOf("张三");
			console.log(index4);
			console.log("----------------数组的排序-----------------");
			//12、数组的排序   .sort()  默认按照字符编号排序
			var arrSort1 = ["e","r","t","a","b"];
			console.log(arrSort1);
			arrSort1.sort();
			console.log(arrSort1);
		</script>
	</body>
</html>

七、字符串的基本方法

1.属性: length: 获取字符串长度。

2.方法:
charAt(i) 获取字符串中第i个位置的字符。(字符中的索引从0开始)

charCodeAt(i) 获取字符串中的第i个位置的字符的unicode编码

str1.concat(str2) 将字符串str1和str2拼接，返回新的字符串

str.slice(n,m) 截取n(包含)-m (不包含)之间的字符串

str.substring(n,m) 截取n(包含)-m (不包含)之间的字符串;省略参数m，截取到最后

str.substr(n,num) 从n开始截取，截取num个字符后三位str.substr(str.length-3,3)

str.indexOf(s) 查找子串s在字符串str中首次出现的位置。若子串s不存在，那么返回-1

str.lastIndexOf(s) 查找子串s在字符串str中最后一次出现的位置,若子串s不存在，那么返

回-1

str.toLowerCase() 将字符串str转换为小写

str.toUpperCase() 将字符串str转换为大写

str.replace(oldstr,newstr) 将字符串str中的oldstr替换为newstr;不加正则表达式时，只替换第

一个。

str.split(s) 将字符串ss,通过字符串s，切割为数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//字符串的原型是字符数组
			var str = "hello world";//--->var arr = ["h","e","l"]
			//1、长度获取  .length
			console.log(str.length);
			//2、获取字符串中单一字符. charAt(索引值)返回选中的字符
			console.log(str.charAt(1));
			//3、获取字符串中单一字符的unicode编码 、charCodeAt(索引值)  
			console.log(str.charCodeAt(1));
			//4、截取一段宁符串.slice(n,m) 1. 从第几项开始2. 到第几项  不包含m  返回的截取结果
			//如果第二个参数不填，那么表示从第一 个参数开始 到最后全部都截取
			console.log(str.slice(1,4));
			console.log(str.slice(1));
			//5、substring(n,m)
			console.log(str.substring(1,4));
			//6、截取一段字符串. substr(n,m) 1. 从第几项开始2.包含截取多少
			console.log(str.substr(1,3));
			//截取后三位
			console.log(str.substr(str.length - 3 ,3));
			如果第二个参数不填，那么表示从第一 个参数开始 到最后全部都截取
			console.log(str.substr(1));
			//7、判断字符串中是否还有指定的内容
			console.log(str.indexOf("ll"));
			console.log(str.lastIndexOf("o"));
			//8、字符串的大小写转换
			//. toUppercase()  全部转化成大写  不改变原始字符串  返回一个新的字符串
			//. toLowercase()  全部转为成小写  不改变原始字符串  返回一个新的字符串
			console.log(str.toUpperCase());
			console.log(str.toLocaleLowerCase());
			//9、字符串替换. replace("替换"，"结果")  不改变原始字符串  返回一个新的字符串
			var str1 = "hello world 小明"
			console.log(str1.replace("小明","**"));
			//10、如何将字符串根据特殊字符转化为数组  .split("字符")  返回新的数组
			var str2 = "html;css,javaScript;java;c;c++"
			console.log(str2.split(";"));
		</script>
	</body>
</html>

八、函数

概念

函数是由一系列语句构成的代码块，主要用于完成特定的功能。如果把函数比作一台机器的话，

那么每个机器的作用各不相同，比如，爆米花机器，放入玉米出来的是爆米花。

作用

函数需要的作用是为了方便编程，提高程序的重复利用率;方便调试程序，方便维护。一个功能，

可以分解成若干的函数，提高程序的开发效率以及程序代码的利用率。

声明

//1、关键字定义法
function 函数名(参数,参数1,参数2,......){
	函数体
}
//调用函数
函数名(实参,实参1,实参2,....)
//2、通过变量来定义函数
var fun = function(参数,参数1,参数2,...){
	函数体
}
//调用
fun(实参,实参1,实参2,...)

函数的默认提升功能: 不管函数写在什么位置，都会提到最高

变量的默认提升功能:声明变量，会提升到上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1、关键字定义法
			//function  --->一种数据类型
			function show(){
				console.log("床前明月光");
				console.log("疑是地上霜");
				console.log("举头望明月");
				console.log("低头思故乡");
			}
			//调用函数
			show();
			//定义一个函数计算n-m的和
			function fun(n,m){
				var sum = 0;
				for(var i = n;i <= m ; i++){
					sum += i;
				}
				console.log(sum);
			}
			fun(1,100);
		</script>
	</body>
</html>

九、作用域和return

作用域

一个变量所生效的范围

全局作用域: 一个变量在js的任意位置，都可以使用

全局变量：定义在涵数外面的都是全局变量

局部作用域:只能在固定的代码码内部使用(涵数内部)

局部变量：定义在涵数内部的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str1 = "hello world";//全局变量
			function fun1(){
				console.log(str1);
			}
			fun1();
			console.log("--------------------------");
			
			/* function fun2(){
				var str2 = "hello world";//局部变量
				//js的垃圾回收机制:定义在函数内部变量，在函数运行完成之后  全部销毁
				console.log(str2);
			}
			console.log(str2);
			console.log("--------------------------"); */
			
			var str3 = "hello world";//全局变量
			function fun3(){
				//局部定义的变量就算和全局变量的名字相同，不改变全局变量
				var str3 = "你好世界";
				console.log(str3);
			}
			fun3();
			console.log(str3);
			console.log("--------------------------");
			
			var str4 = "hello world";//全局变量
			function fun4(){
				//在函数内部改变全局变量  省略var
				str4 = "你好世界";
				console.log(str4);
			}
			fun4();
			console.log(str4);
			console.log("--------------------------");
			
			var str5 = "hello world";//全局变量
			function fun5(){
				//在函数内部改变全局变量  省略var
				console.log(str5);
				var str5 = "你好世界";
			}
			fun5();
			console.log(str5);
			console.log("--------------------------");	
			
			//1~100的和
			function fun6(){
				var sum = 0;
				for(var i = 1; i <= 100; i ++){
					sum += i;
				}
				return sum;
			}
			var sum = fun6();
			console.log(sum);
		</script>
	</body>
</html>

十、系统函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num = 3.14;
			//1、parseInt() 1、数值取整，返回取整结果   2.数据类型转换可以将字符串数字，转换为数值
			//注意:  1.如果字符串中，既包含数字又包含字符，那么就将开头得数字转化出来
			//       2.如果字符串中是字符开头，则转化后得结果NaN (not a number)
			console.log(parseInt(num));
			var str1 = "3.24";
			console.log(parseInt(num)+parseInt(str1));
			var str2 = "3hello";
			console.log(parseInt(str2))
			var str3 = "he3llo";
			console.log(parseInt(str3));
			console.log("-----------------------------");
			//2、paseFloat() 1. 数值保留小数		2. 数据类型转换可以将字符串数字，转换为数值
			//注意： 1.如果字符串中，既包含数字又包含字符，那么就将开头得数字转化出来
			//		2.如果字符串中是字符开头， 则转化后得结果NAN (not a number)
			var str4 = "8.13";
			console.log(parseFloat(str4));
			console.log("-----------------------------");
			//3.Number()	将变量转化为数值型	只要字符串中包含字符那么都转化不了
			var str5 = "222.12xx";
			console.log(Number(str5));
			console.log("-----------------------------");
			//4、isNaN()	判断一个变量是否为非数值
			//true 1  false 0
			var str6 = "hello";
			console.log(isNaN(str6));
			console.log("-----------------------------");
			//5、instanceof	判断一个变量是否属于某种数据类型（这个变量必须通过 类创建得），返回 true false	插件多
			//数组 函数 对象 都是引用数据类型
			//数值 布尔值 字符 undefined 都是基本数据类型
			var str7 = "hello word";
			console.log(str7 instanceof String);
			var str8 = new String("hello word");
			console.log(str8 instanceof String);
			//6、将变量转换为字符串  .toString()
			var str9 = 1234;
			console.log(typeof(str9));
			console.log(str9.toString());
		</script>
	</body>
</html>

十一、对象

什么是对象

对象是属性(变量)和方法(函数)的集合体

什么是属性以及什么是方法?

如何使用对象?

Javascript所有的事物都是对象

Object是所有对象的基础对象，所有其他的对象都来源于Object

创建对象:

var obj = new Object();

添加/获取属性:

添加属性:对象.属性=值;

获取属性: var 变量=对象.属性;

添加/调用方法:

添加方法:对象.方法名= function(参数列表){ }

调用方法:对象.方法名(参数列表)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1、原型拓展法
			var persont = new Object();
			persont.name = "王一";
			persont.age = 13;
			persont.color = "红色";
			persont.run = function(){
				console.log("跑");
			}
			persont.jump = function(){
				console.log("跳");
			}
			console.log(persont.name);
			console.log(persont.run());
			console.log(persont);
			console.log("----------------------------");
			//2、直接定义法
			var p = {
				name : "王一",
				age : 13,
				color :  "黄色",
				run:function(){
					console.log("跑");
				},
				jump:function(){
					console.log("跳");
				},
				showName:function(){
					//this对象	this指向当前对象
					console.log(this.name);
				},
			}
			console.log(p.name);
			p.name = "王五";
			console.log(p.name);
			p.name = "AAA";
			p.showName();
			console.log("----------------------------");
			//基本数据类型	Number String boolean undefined NULL(空对象 object)
			//引用数据类型	Array Function Object
			
			//基本数据类型的数据传递 只传递值
			var x = 123;
			var y = x;
			y = 200;
			console.log(x);
			console.log(y);
			console.log("----------------------------");
			//引用数据类型的数据传递 传递的是存储的变量地址
			var array = [1,2,3];
			console.log(array)
			var z = array;
			z[1] = 20;
			console.log(array)
			console.log(z)
		</script>
	</body>
</html>

十二、常用对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1、Math	数学对象
			var x = Math.PI;
			//1、1	属性
			console.log(x);
			console.log("------------------------");
			//1、2	方法
			//.min()	一组数的最小值，不能传数组
			//.max()	一组数的最大值
			var a = Math.min(1,2,45,6);
			console.log(a)
			var b = Math.max(1,2,45,6);
			console.log(b)
			console.log("------------------------");
			//1、3	进位和退位	纯数值的字符串可以使用
			//.ceil()	进位,省略小数,直接进1
			//.floor()	退位;省略小数,直接忽略
			///round()	四舍五入
			var c = 10.5;
			console.log(Math.ceil(c));
			console.log(Math.floor(c));
			console.log(Math.round(c));
			console.log("------------------------");
			//1、4	随机数
			//.random()	产生一个0~1随机数（不包含0和1）0<x<1
			console.log(Math.random() * 100);
			console.log("+++++++++++++++++++++++++++++++++++++++++++");
			//2、Date	日期对象
			//如果不传参数，那么创建就是当前日期的日期对象
			var date1 = new Date();
			console.log(date1);
			//可以传参数，年，月，月,时， 分，秒，返回规定的日期对象
			var date2 = new Date(2022,9,12,12,35,45);
			console.log(date2);
			var date3 = new Date();
			//2、1	getFullYear	通过日期对象	获取当前对应的年份
			console.log(date3.getFullYear());
			//2、2	setFullYear	设置当前日期对象的年份
			date3.setFullYear(2023);
			console.log(date3);
			console.log("------------------------");
			var date4 = new Date();
			//2、3	获取月份	.getMonth() 日期的对象的月份 0-11
			console.log(date4.getMonth());
			//2、4	设置月份	.setMonth() 日期的对象的月份 0-11
			date4.setMonth(9);
			console.log(date4);
			console.log("------------------------");
			//2、5	.getDate()	获取日期
			var date5 = new Date();
			console.log(date5.getDate());
			console.log("------------------------");
			//2、6	.getDay()	获取星期几	星期日返回0
			console.log(date5.getDay());
			console.log("------------------------");
			//2、7	.getTime()	返回距离1970，1，1时间 返回秒数
			console.log(date5.getTime());
			console.log("------------------------");
			//2、8	.setTime()	设置毫秒
			date5.setTime(60000);
			console.log(date5);
		</script>
	</body>
</html>

十三、DOM介绍

DOM (Document Object Model)即文档对象模型

DOM中的三个字母，D (文档)可以理解为整个Web加载的网页文档;0(对象)可以理解为类似window

对象之类的东西，可以调用属性和方法，这里我们说的是document对象;M(模型)可以理解为网页

文档的树型结构。

DOM有三个等级，分别是DOM1、DOM2、DOM3，并且DOM1在1998 年10月成为W3C标准。

DOM1所支持的浏览器包括IE6+、Firefox、 Safari、Chrome和Opera1. 7+。

PS: IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览

器有一定的差异。

W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作分别为:

getElementById(id) :通过id获取DOM元素

getElementsByTagName (tagName) :通过标签名称获取DOM元素，返回数组

getElementsByClassName (className) :通过c lassName获取元素，返回数组

getElementsByName (name) :通过name属性获取DOM元素，返回数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: crimson;
			}
			.a{
				width: 100px;
				height: 100px;
				background-color: #ff00ff;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box1">
			<div class="a">
				
			</div>
		</div>
		<div class="box" id="box2">
			
		</div>
		<img src="image/a1.jpg" alt="加载中" class="a">
		<script type="text/javascript">
			//1、通过id获取元素	document.getElementById(id) 返回找到的元素,是唯一的元素
			var box1 = document.getElementById("box1");
			console.log(box1);
			console.log("---------------");
			//2、通过class获取元素 document.getElementsByClassName(class)	返回的一组元素
			//(数组(类数组))	一个元素，也是放入到数组中
			var box2 = document.getElementsByClassName("box");
			console.log(box2);
			var box3 = document.getElementsByClassName("box")[1];
			console.log(box3);
			console.log("---------------");
			//3、通过标签名获取元素	document.getElementsByTagName(标签名) 返回的一组元素
			//(数组(类数组))	一个元素，也是放入到数组中
			var box4 = document.getElementsByTagName("div");
			console.log(box4);
			console.log("---------------");
			//4、父级选择子集
			var father = document.getElementById("box1");
			var son = father.getElementsByTagName("div");
			console.log(son);
			console.log("---------------");
			//操作属性操作	除了style和class属性
			var img = document.getElementsByTagName("img")[0];
			img.alt="图片加载失败";//提前设置
			console.log(img);
			console.log(img.alt);
			console.log(img.src);//获取当前图片的绝对地址
			console.log(img.getAttribute("src"));//获取src中的字符串
			img.setAttribute("src","image/a2.jpg");//设置属性
			img.removeAttribute("alt");//删除属性
			console.log("---------------");
			//.className()属性更改类名 两个保留原来的 一个替换为
			img.className = "a box";
			//更改样式
			var box5 = document.getElementById("box1");
			//.style属性		设置的是行内样式	获取的也是行内样式
			box5.style.width="500px";
			box5.style.backgroundColor="#00ff00";
			//window.getComputedStyle() window对象 js中最大的对象
			//参数1	查找的元素
			//参数2	对应的伪类 （null）
			//参数3	查询的属性
			console.log(window.getComputedStyle(box1,null,"width").width);
			console.log("---------------")
		</script>
	</body>
</html>

十四、事件编程

事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中

Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经

过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个

Web页面加载完成，或者是用户滚动窗口或改变窗口大小。.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 1200px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<!-- 1、内联法 事件 onlick -->
		<button onclick="alert('你好')">确定</button>
		<button>确定</button>
		<input type="text"/>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<div>
			
		</div>
		<script>
			//事件编程:		1.事件源		2.事件		3.事件处理涵数
			//onclick点击事件
			//onmouseenter	鼠标进入事件
			//onmouseleave	鼠标离开事件
			//onmousedown 	鼠标按下事件
			//onmouseup		鼠标抬起事件
			//先找事件源
			var bt1 = document.getElementsByTagName("button")[1];
			/* 事件源.事件 = funcation(){
				事件内容
			} */
			bt1.onclick = function(){
				alert("你好")
			}
			bt1.onmouseenter = function(){
				console.log("鼠标进入了")
			}
			bt1.onmouseleave = function(){
				console.log("鼠标离开了")
			}
			bt1.onmousedown = function(){
				console.log("鼠标按下了")
			}
			bt1.onmouseup = function(){
				console.log("鼠标抬起了")
			}
			
			//onscroll		window发生滚动时，触发的事件
			//onresize		window发生变化时，触发的事件
			window.onresize = function(){
				console.log("窗口发生变化")
			}
			window.onscroll = function(){
				console.log("窗口发生滚动")
			}
			
			//onkeydown		键盘按下
			//onkeyup		键盘抬起
			window.onkeydown = function(){
				console.log("键盘按下")
			}
			window.onkeyup = function(){
				console.log("键盘抬起")
			}
			
			//表单元素的有件
			//onfocus	获取焦点 事件
			//onblur	失去焦点事件		多一点
			//onchange	内容改变事件
			var input = document.getElementsByTagName("input")[0]
			input.onfocus = function(){
				console.log("获取焦点")
			}
			input.onblur = function(){
				console.log("失去焦点")
			}
			input.onchange = function(){
				console.log("发生变化")
			}
			
			//需要给一组元素添加事件，通过循环遍历
			var lis = document.getElementsByTagName("li");
			for (var i = 0; i < lis.length; i ++){
				lis[i].onclick = function(){
					console.log("你好"),
					//在事件处理函数中，this指向触发的事件源
					this.style.backgroundColor = "#ff007f"
				}
			}
			//this的使用
			//1)有对象this就指向调用对象
			//2)没调用对象this就指向全局对象(window)
			//3)用new构造就指向新对象
			//4)通过apply或call或bind 来改变this的所指。

			var bt2 = document.getElementsByTagName("button")[1];
			//DOM2添加事件 addEventListener(事件，事件处理函数，事件流) false	
			//不会覆盖原来的事件
			//绑定
			function fun1(){
				console.log("aaaa")
			}
			bt2.addEventListener("click",fun1,false)
			bt2.addEventListener("click",function(){
				console.log("bbbb")
			},false)
			//解绑removeEvenListener(事件,函数,事件流) false
			/* bt2.removeEventListener("click",fun1,false) */
			
			//ie 低版本的绑定方式		attachEvent(事件，处理函数)
			//ie 低版本的解绑方式		datachEvent(事件，处理函数)
			/* bt2.attachEvent("onclick",fun1)
			bt2.datachEvent("onclick",fun1) */
			
			//多版本绑定事件
			function addHandler(element , type , handler){
				if(element.addEventListener){
					element.addEventListener(type, handler, false);
				}else if(element.attachEvent){
					element.attachEvent("on" + type,hanler);
				}
			}
			addHandler("bt1","click",fun1)
		</script>
	</body>
</html>
up

十五、事件对象

JavaScript事件的一个重要方面是它们拥有一些相对一致的特点，可以给你的开发提供更多的强大

功能。最方便和强大的就是事件对象，他们可以帮你处理鼠标事件和键盘敲击方面的情况，此外还

可以修改一般事件的捕获/冒泡流的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				background-color: #DC143C;
				margin: 100px auto;
				position: fixed;
				top: 0px;
				left: 0px;
			}
			.a{
				height: 2000px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
		<div class="a">
			
		</div>
		<script type="text/javascript">
			var box = document.getElementsByTagName("div")		[0]
			//事件对象 存在于事件处理晒数中 e evl event
			// 老版本ie浏览器中不支持第一次参数为事件对象window. event
			box.onclick = function(evl){
				//为真evl 为假window.event
				var e = evl || window.event
				console.log(e)
				console.log("----------------------------")
				console.log(e.clientX)
				console.log(e.clientY)
				console.log("----------------------------")
				console.log(e.offsetX)
				console.log(e.offsetY)
				console.log("----------------------------")
				console.log(e.pageX)
				console.log(e.pageY)
				console.log("----------------------------")
				console.log(e.screenX)
				console.log(e.screenY)
				console.log("----------------------------")
			}
			//clientX, clientY:获取到的是触发点相对浏览器可视区域左H角距离，不随页面滚动而改变
			// offsetX, offsetY: 鼠标相对于事件源元素(srcElement) 的X， Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
			// pageX, pageY:获取到的是触发点相对文档区域左上角距离，会随者页面滚动而改变
			// screenX、screenY: 获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变
			//可用于进度条
			
			window.onkeydown=function(evl){
				var e = evl || window.event
				console.log(e.keyCode)//键码
				switch(e.keyCode){
					case 38:
						console.log("向上走")
						break
				}
			}
		</script>
	</body>
</html>

十六、事件流

事件流

是描述的页面接受事件的顺序，当几个都具有相同事件的元素层叠在一起的时候，那么你点

击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会

触发事件。

事件流包括两种模式:冒泡和捕获。

事件冒泡，是从里往外逐个触发。

事件捕获，是从外往里逐个触发。

那么现代的浏览器默认情况下都是冒泡模型，而捕获模式则是早期的Netscape默认情况。而现在

的浏览器要使用DOM2模型的事件绑定机制才能手动定义事件流流模式。

事件默认行为

停止事件的默认行为是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作(如

果存在这样的动作)。例如，如果表单中input type 属性是“submit”，点击后在事件传播完浏览器

就自动提交表单。又例如，input 元素的keydown事件发生并处理后，浏览器默认会将用户键入的

字符自动追加到input 元素的值中。

在IE下，通过设置event对象的returnValue为false即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.content{
				width: 300px;
				height: 300px;
				background-color: #DC143C;
			}
			.a{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
			}
			.b{
				width: 50px;
				height: 50px;
				background-color: #00ff7f;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="a">
				<div class="b">
					
				</div>
			</div>
		</div>
		<a href="https://www.baidu.com">百度</a>
		<script type="text/javascript">
			var content = document.getElementsByClassName("content")[0]
			content.onclick=function(){a
				console.log("点击了content盒子")
			}
			var a = document.getElementsByClassName("a")[0]
			a.onclick=function(){
				console.log("点击了a盒子")
			}
			//取消冒泡	.stopPropagation()
			var b = document.getElementsByClassName("b")[0]
			b.onclick=function(evl){
				console.log("点击了b盒子")
				/* e.stopPropagation()//除了ie浏览器
				e.cancelBubble = true//老版ie */
				var e = evl || window.event
				//兼容性处理
				window.event ? e.cancelBubble = true : e.stopPropagation()
			}
			//阻止默认行为	.preventDefault()
			var a = document.getElementsByTagName("a")[0]
			var name = "王一"
			a.onclick= function(e){
				if(name != "王二"){
					console.log("不跳转")
					/* e.preventDefault() */
					window.event ? e.returnValue = false : e.preventDefault()
				}
			}
		</script>
	</body>
</html>