Javascript基础学习

hhh_7789

已于 2022-04-29 16:22:25 修改

阅读量2.4k

点赞数 1

文章标签：前端学习 javascript

于 2022-03-27 10:28:46 首次发布

本文链接：https://blog.csdn.net/hhh_7789/article/details/123687110

版权

* JavaScript诞生于1995年，主要用于前端验证，比如用户名的长度密码的长度邮箱的格式等

* ECMAScript是一个标准，这个标准需要各厂商去实现；一般认为和JS一个意思；

包括 ECMAScript DOM（文档对象模型通过Js操作网页） BOM（浏览器对象模型通过JS操作浏览器）

不同浏览器实现方式
浏览器 js实现方式
Firefox
Spidemonkey

Internet Explorer JScript/Chakra
Safari JavascriptCore
Chrome V8
Carakan Carakan

**不同浏览器实现方式**
浏览器	js实现方式
Firefox	Spidemonkey
Internet Explorer	JScript/Chakra
Safari	JavascriptCore
Chrome	V8
Carakan	Carakan

四、流程控制语句（if switch while for）

1. 内建对象数组(array)也是一个对象

2. 数组字面量

3. 数组的四个方法

4. 数组的遍历（将数组中所有元素都取出来）

5. foreach--遍历数组（只支持IE8以上的浏览器）

JS-DOM （Document Object Model）

一、DOM概述

二、DOM文档节点：构成HTML的基本单元

JS-BOM （Browser Object Model）

JS 的 helloworld

-第一条第一条代码(3个输出语句)：记住 alert document.write console.log

* console 用户看不到

#代码①

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<!-- JS代码需要写到script标签中 -->
	<script type="text/javascript">

		alert("Hello World!我是弹出框");
        document.write("把我写在body里啦~~");
        console.log("我在控制台呢，body里看不到哦");

	</script>

</head>
<body>
	
</body>
</html>

JS编写的位置

* 写在body标签中（不方便维护，不推荐）

* 写在内部script标签中

* 写在外部JS文件中，然后在html中引用（推荐！）

注：JS代码是按照从上到下一步步执行的

JS的基本语法

* 注释（多行注释&单行注释）

* 区分大小写

#代码②

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">

		/*
		多行注释 JS注释
		注释内容不会被执行，可以在源代码中查看*/

		// 单行注释

		/* 
			1. JS中严格区分大小写
			2. JS中每条语句以分号结尾；如果不写浏览器会添加上，消耗系统资源
			3. JS中自动忽略多个空格和代码
		*/
		alert("我区分大小写 Wo Qu");

        // 字面量和变量演示：
        var age=27;
        console.log(age);
	</script>
</head>
<body>
	
</body>
</html>

一、字面量和变量

1. 基本含义

-- 字面量就是1234....写什么输出什么；

-- 变量用来保存字面量，比如 a=1234；

-- 声明变量使用var关键字声明一个变量，比如 var a;

为变量赋值a=1234;

-- 声明和赋值同时进行： var a=1234; var age=27;

console.log(age); 27就会在控制台显示了（如上#代码②）

2. 数据类型-字面量的类型（6种）

Ⅰ. String 字符串

* 字符串需要用单引或双引引起来，引号不能同类嵌套

var str= '我说：“今天天气真不错！”’; console.log(str);

* 在字符串中可以使用\作为转义字符，表示特殊符号时可以用\转义

\" 表示 "

\' 表示 ‘

\n 表示换行

\t 制表符相当于按了table

\\ 表示 \

var str= '我说：“今天天气真不错！”’; console.log(str);

str="我说：\“今天\t天气真不错！\”"; (注意上一行已经给str声明了，这一行不用再写var了)

输出字符串： alert("str"); 输出变量str： alert(str);

Ⅱ. Number 数值

在JS中所有的数值都是number类型，包括整数和小数

var a=123.456; (数字) var b="123.456";(字符串)

可以用typeof来检查变量的类型，比如 console.log(typeof a);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">        
        // JS中可以表示数字的最大值 Number.MAX_VALUE
		console.log(Number.MAX_VALUE);
		// JS中可以表示数字的最小正值 Number.MIN_VALUE
		console.log(Number.MIN_VALUE);

		// 如果使用Number表示的数字超过了最大值，会返回一个
		// （-）Infinity,表示(负)正无穷。
		var a=-Number.MAX_VALUE * Number.MAX_VALUE;
		console.log(a);

		// NON  not a number

		// 在JS中整数的运算基本可以保证精确,但浮点数（小数）可能不精确
		var b=1+2;
		console.log(b);
		var c=0.1+0.2;
		console.log(c);
</script>
</head>
<body>
	
</body>
</html>

Ⅲ. Boolean 布尔值

只有2个，true false

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Boolean布尔值</title>
	<script type="text/javascript">
		/* Boolean布尔值只有两个： true(真)  false(假)*/
		var bool=true;
		console.log(bool);
		console.log(typeof bool);

		var a=true;
		console.log(a);
		console.log(typeof a);
	</script>
</head>
<body>
	
</body>
</html>

Ⅳ. Null 空值

只有1个值 null 空对象检查为object

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		/* Null类型的值只有一个，就是null，专门表示空对象*/
		var a=null;
		console.log(a);
		// 使用typeof检查时会返回object
		console.log(typeof a);

		// Undefined类型的值只有一个，就是undefined，当声明一个对象，但不给对象赋值时，它的值就是undefined
		var b;
		console.log(b);
		// 使用typeof检查时也会返回undefined
		console.log(typeof b);
	</script>
</head>
<body>
	
</body>
</html>

Ⅴ. Undefined 未定义 （见上html）

不给对象赋值时，值为undefined

Ⅵ. Object 对象（Object为引用数据类型，其他均为基本数据类型）

附加1：强制类型转换

1. 强制将其他数据类型转换为String

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		/*强制类型转换：
			--将一个数据强制转换为其他类型数据
			--主要指将其他数据类型转换为 String Number Boolean*/

		/*其他数据转为String,
		方式一：调用被转换数据类型的toString()方法;
		该方法不会影响原变量；但有局限性，对null和undefined会报错
		*/
		var a=123;
		a=a.toString();
		console.log(a);
		console.log(typeof a);

		var b=true;
		b=b.toString();
		console.log(b);
		console.log(typeof b);
		// 调用xxx的yyy（）方法，就是xxx.yyy();

		// var c=null;
		// c=c.toString();
		// console.log(c);
		// console.log(typeof c);

		// var d;
		// d=d.toString();
		// console.log(d);
		// console.log(typeof d);

		/*其他数据转为String,
		方式二：调用String()函数
		*/

		var e=null;
		e=String(e);
		console.log(e);
		console.log(typeof e);
	</script>
</head>
<body>
	
</body>
</html>

2. 强制将其他数据类型转换为Number

var a="abc"; 转换 a=Number(a);

①String转Number：转换方式1：

*纯数字的字符串直接转化为数字；

* 字符串中有非数字内容，转换为NAN；

* 字符串是空的，或是全为空格的字符串

转换方式2：（也可以转换Boolean等）

整数 a="123px"; 转化ParseInt(a); 小数 a="123.456px"; ParseFloat(a);

可以将一个字符串的有效数字内容取出来转换为Number，后面的字母不变

② Boolean转Numbe rtrue→1 false→0

③ Null转Number 数字 0

④ Undefined转Number 数字 NAN

3. 强制将其他数据类型转换为Boolean

数字转Boolean，除了0和NAN是false，其余都是true；

字符串转Boolean，除了空串是false，其余都是true；

null和undefined都会转成false；

对象也会转换为true

附加2：其它进制的数字

在JS中，表示16进制数字，需要0x开头； a=0x10 16 a=0xff a=0xCafe

8进制的数字，以0开头； a=070

2进制的数字，以0b开头；a=0b10

注：a="070";转化为Number，用a=parseint(a);转化时，有的浏览器当成8进制解析为56，有的当成10进制解析为70，因此用 a=ParseInt(a,10);

二、标识符

-- 在JS中所有的可以自主命名的都可以称为标识符，例：变量名、函数名、属性名；

-- 命名规则：

* 标识符中只可以含有字母、数字、_、$

* 标识符不能以数字开头

* 标识符不能是ES中的关键字或保留字（下图）

* 一般采用驼峰命名法：首字母小写，其他每个单词首字母大写，其余小写 helloWorld

举例：var d3=打比方;

console.log(d3);

-- JS底层标识符实际采用的是Unicode编码，理论上讲utf-8的所有内容都可以作为标识符，

文字也可以，但一般不采用。

三、运算符

运算符也叫操作符，通过运算符对一个或多个值进行运算，并获取运算结果，比如typeof就是运算符，可以来获得一个值的类型，它会将该值类型以字符串的形式返回。

1、算数运算符（主要适用于Number）

对非Number类型的值进行运算时，会将这些值转换为Number，然后再进行运算；任何值和NAN运算都得NAN； + - * / %

1. + 两个值加法运算，并返回结果；如果两个字符进行加法运算，则会拼串，并返回，

任何值和字符串做加法，都会先转化为字符串然后做拼串，举例：

可以利用这一特点，将任意数据类型转换为String，只需为任意类型数据 + 一个 “”即可，这是一种隐士的类型转换，浏览器会自动完成，实际上也是调用 String（）函数，举例：

c=123; c=c+""; console.log("c= " + c); → c=123 console.log(typeof c)是String

2. 任何值做 - * / 运算时都会自动转化为NUmber，利用这一特点也可做隐式转化，通过一个值 -0 *1 /1 将其转化为Number，原理和Number()函数一样，使用起来更简单。

3. % 取模取余数举例：

result = 9 % 3； console.log("result= " + result) → 0

result = 9 % 4； console.log("result= " + result) → 1

2、一元运算符（适用于任意数据类型）

1. 只需操作一个数

+ 正号不会对数字产生任何影响；- 负号可以对数字进行取反；

对于非Number类型的值，它会先将其转化为Number再运算，可以使用+号转换，原理和Number()一样，举例： var a=123; a=-a; a=true; a="18"; a=+a; console.log("a= " + a)

2. 自增和自减

* 自增：通过自增使变量在自身基础上增加1，即自增之后原变量的值会立即增加1；

自增分两种：a++ 和 ++a；无论哪一种都会使原变量的值自增1

不同的是 a++ 和 ++a的值不同：a++的值等于自增前的值， ++a的值等于自增后的值。

* 自减：通过自减使变量在自身基础上减1；

自减分两种：a-- 和 --a；无论哪一种都会使原变量的值自减1

不同的是 a-- 和 --a的值不同：a--的值等于自减前的值， --a的值等于自减后的值。

练习：条件 var n1=10, n2=20;

3、逻辑运算符（非与或）

1. 非运算！对布尔值进行取反操作 true变false false变true

--如果对一个值进行两次取反则该值不会变化 a=!!a;

--如果对非布尔值非运算，会将其先转换为布尔值再取反；可以了利用这一特点将其他数据类型转换为布尔值，为任意数据类型取两次反即可，原理和Boolean()函数一样 var b=10; b=!!b;

2. 与运算 && 找false

--两个值中只要有一个值为false就会返回false，只有两个值都为true时才会返回true；

--JS中的“与”属于短路的与，如果第一个值为false就不会看第二个了

3. 或运算 || 找true

--两个值中只要有一个值为true就会返回true，只有两个值都为false时才会返回false；

--JS中的“或”属于短路的或，如果第一个值为true就不会看第二个了

4. 非布尔值的与或运算（返回原值）

--与运算先将其转化为布尔值再运算并返回原值；

如果第一个值为true，则必然返回第二个值；

如果第一个值为false，必然返回第一个值；

如果两个值都为true，则返回后边的 var result = 5 && 6；→ 6

--或运算

如果第一个值为true，则直接返回第一个值； result = 2 || 1；→ 2

如果第一个值为false，必然返回第二个值； result = NAN || 1； →1

4、赋值运算符

可以将符号右侧的值赋值给符号左侧的变量

+= a += 5 等价于 a = a + 5

-= a -= 5 等价于 a = a - 5

*= a += 5 等价于 a = a * 5

/= a /= 5 等价于 a = a / 5

%= a %= 5 等价于 a = a % 5

5、关系运算符

通过关系符比较两个值的大小关系成立返回true，不成立返回false；

> 大于号 >= 大于等于 < 小于 <=小于等于

var result = 5 > 10; → false var result = 5 > 4; → true

console.log(1 > true); → false console.log(1 >= true); → true

console.log(1 > "0"); → true console.log(10 > null); → true

console.log(10 <= "hello"); → false

任何值和NAN做任何比较都是false

非数值情况：会将其转换为数字然后比较；如果两侧都是字符串，不会转换为数字，而是会比较字符串中Unicode编码，一个一个比

6. 相等运算符（也属于关系运算符）

a. 相等 --使用==做相等运算，相等返回true，否则返回false；

--如果值的类型不同会自动转为相同类型再比较；console.log("1" == 1);→true

--NaN不和任何值相等，包括它本身 console.log(NaN==NaN);→false

--可以通过isNaN() 函数来判断一个值是否为NaN，是返回true，否则返回false

var b = NaN; console.log(isNaN(b));

b. 不相等 --使用 != 做不相等运算不相等返回false，相等返回true 也会做类型的自动转换

c. 全等 --使用 ===表示全等，和相等类似，但它不做自动转化，必须两个值完全一样

console.log("123" === 123);→false console.log("123" ==== 123);→true

d. 不全等 --使用 !== 表示和不等类似如果两个值的类型不同，直接返回true

7. 条件运算符（也叫三元运算符）

-- 语法：条件表达式？语句1：语句2；

-- 执行流程：首先对条件表达式求值，true执行语句1并返回结果，false语句2返回结果

举例：a>b ? alert("a大") : alert("b大")；

--如果条件表达式的求值结果是一个非布尔值，则会将其转化为布尔值再运算

8. 运算符的优先级

-- , 运算符使用 , 可以分割多个语句，一般可以在声明多个变量时使用 var a=1, b=2, c=3;

-- 运算符优先级： a. 先乘除后加减

b. 有一个运算符优先级的表，位置越靠上优先级越高

c. 如果遇到优先级不确定，可以用（）来改变优先级

举例：var result = 1+2*3; var result = 1 || (2 && 3); console.log("result= " +result);

四、流程控制语句（if switch while for）

--流程控制语句从上到下逐行执行，并控制程序流程，根据一定条件选择执行

--代码块：

在JS中可以使用{}来为语句进行分组，一个大括号代表一个代码块，

代码块里的语句要么都执行，要么都不执行；

JS中的代码块只有分组的作用，不会把内部和外部的内容隔离。

1. if 语句（条件判断语句）

-- 可以在执行某个语句之前判断，条件成立执行，不成立不执行；

--语法1： if （条件表达式）

语句

-- if 语句执行时先对条件表达式求值判断，值为true则执行if后的语句，false不会执行

-- if 语句只能控制紧随其后的那个语句，如果希望控制多条，则统一放到代码块中

举例：var a=15; if(a>10 && a<=20){alert("a大于10，并且a小于等于20");}

--语法2： if（条件表达式）{语句}

else{语句}

--执行时先对条件表达式求值判断，值为true则执行if后的语句，false执行else语句

--语法3： if （条件表达式）{语句}

else if（条件表达式） {语句}

else{语句}

--语句执行时，会从上至下依次对条件表达式进行求值判断，true执行当前语句，false继续向向下判断，如果都不满足，则执行else；该语句中只有一个代码会被执行，一旦代码执行，就不会往下执行了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		/*从键盘输入小明的期末成绩
		当成绩为100时，"奖励一辆BMW"
		当成绩为80-90时，"奖励一台iphone15s"
		当成绩为60-80时，"奖励一本参考书"
		其他时，什么奖励也没有*/

		/*prompt()可以弹出一个提示框，该提示框带有一个文本框
		在文本框输入一段内容，该函数需要一个字符串作为参考，该字符串将会作为提示框的提示文字。
		用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容*/

	
		var score = prompt("请输入小明的期末成绩(0-100):");
		// 判断值是否合法
		if(score>100 || score<0 || isNaN(score)){alert("别瞎写~~");
		}else{
			// 根据score来判断给小明什么奖励

		if(score == 100){
			alert("奖励一辆BMW");
		}else if (score>=80) {alert("奖励一台iphone15s")
			
		}else if (score>=60) {alert("奖励一本参考书")
			
		}else{alert("挨打")}
	}
		
	</script>
</head>
<body>
	
</body>
</html>

2. switch语句（条件分支语句）

--语法： switch（条件表达式）{ case表达式：语句 break；

case表达式：语句 break；

default：语句 break；}

-- 执行流程：执行时会依次将case后表达式的值和switch后条件表达式的值进行全等比较

结果为true，则从当前case处开始执行代码（默认执行其后的所有代码，可用break终止）

结果为false，则继续向下执行，如果所有结果都为false，就只执行default后的语句

-- switch和if语句功能上是重复的，双方功能可以实现，使用时根据自己习惯

3. while语句（循环语句）

-- 通过循环语句可以反复执行一段代码多次

-- 语法1： while（条件表达式）{ 语句 }

-- 执行时先对条件表达式进行求值判断，如果值为true，则执行循环体，循环体执行完毕，继续对表达式判断，为true在接着执行循环体，以此类推；如果为false，则终止循环。

--创建一个循环：1. 创建一个初始化变量 var i = 1;

2. 在循环中设置一个条件表达式 while(i<11){}

3. 定义一个更新表达式，每次更新初始化变量 document.write(i++ +"br/>")

-- 语法2： do....while语句在执行时，会先执行循环体再判断，如果为true再继续执行，如果为false，则终止循环

注：实际上两个功能相似，只是一先一后，do...while 可以保证至少执行一次，while不能

4. for循环（循环语句）

提供了专门的位置来放三个表达式：初始化表达式条件表达式更新表达式

-- 语法：for(初始化表达式;条件表达式; 更新表达式;){语句}

-- 执行流程： ①初始化表达式，初始化变量；

②执行条件表达式，判断是否执行循环 true执行，false终止

③执行更新表达式，执行完毕后重复②

for循环中的三个部分都可以省略，也可以写在外部，如果不写任何表达式就是死循环

5. 嵌套的for循环

——————记得补上代码和练习

通过for循环输出图形，外部循环可以控制高度，内部循环控制宽度

for(var i=0; i<5; i++){

for(var j=0; j<5; j++){ document.write(" * "); }

document.write(" <br/> ");

}

附加break和continue

break：用来退出switch或循环语句，不能在if语句中使用break和continue

可以为循环创建一个lable，来识别当前的循环，lable:循环语句使用break时，在break后面后跟一个lable,这样break就会结束指定的循环，而不是最近的

continue：跳过当此循环，只对最近的循环起作用

测试程序性能，执行前开启计时器console.time("计时器的名字")；需要一个计时器的名字作为参数 console.time("test"); 执行后用Console.timeEnd("test"); 来停止一个计时器

加上break可以提升性能 Math.sart() 开方

JS 对象—object

内建对象宿主对象自定义对象

对象也是数据类型的一种，上一篇有写到6中数据类型，对象object是一种引用数据类型，其他string、number、Boolean、null、undefined是基本数据类型；

-- 基本数据类型都是单一的值，值和值之间没有联系，不能成为一个整体；

-- 对象属于复合的数据类型，可以保存多个不同数据类型的属性；

一、对象及其语法

1. 对象分类：

内建对象：由ES标准中定义的对象，在任何ES的实现中都可以使用

自定义对象：创建对象，使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数。

2. 自定义对象语法：

① 创建对象 var obj = new object();

② 向对象中添加属性属性名：不强制要求遵守标识符规范，尽量遵守对象.属性名=属性值

obj.name="孙悟空";

obj.gender="男";

obj.age="18"；

③ 读取对象中的属性（如果读取对象中没有的属性，不会报错而会返回undefined）

console.log(obj); console.log(obj.gender); console.log(obj.hello)没有则会返回defined

④ 修改对象的属性名：对象.属性名=新属性值 obj.name="tom"; console.log(obj.name);

⑤ 删除对象的属性： delete 对象.属性名 delete obj.name;

3. 对象属性值和属性名

1. 属性名：如果要使用特殊的属性名，不能用 . 的方式，语法：对象["属性名"]=属性值；

obj["123']=789; obj["你好"]="你好"; console.log(obj["123"]);

2. 属性值：JS对象的属性值可以是任意的数据类型，甚至可以是一个对象

obj.test = true; obj.test = null; obj.test = undefined;

var obj2 = new object(); obj2.name = "猪八戒";

obj.test = obj2; console.log(obj.test.name);

4. in 运算符

通过该运算符可以检查一个对象中是否含有指定的属性有则返回true，无则返回false

语法： "属性名" in 对象

举例： console.log("test2" in obj); console.log("name" in obj);

二、基本数据类型和引用数据类型区别

基本数据类型保存的是值，引用数据类型保存的是地址

1. 基本数据的变量都是保存到栈内存的，基本数据类型的值直接在栈内存中存储，值与值之间独立存在，修改一个变量的值不会影响其他变量；

2. 对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个对象保存的是同一对象引用的地址，当通过一个变量修改属性时，另一个也受影响。

3. 当比较两个基本数据类型的值时，就是比较值；而比较两个引用数据类型时，比较的时内存地址，如果两个对象（属性值）是一模一样的，但地址（属性名）不同，也会返回false

例： console.log(obj3 == obj4); 就会返回false

三、函数function

1. 对象自变量

Var obj={} ； obj.name="孙悟空”；

Var obj2={name:"zbj",age:28,gender:"nan" test:{name:"shs"}};

Console.log(obj2);

2. 函数function

函数也是一个对象，函数中可以封装一些功能（代码），在需要时可以调用或执行这些功能（代码），使用typeof检查一个函数对象时，会返回function

①使用函数声明来创建一个函数

语法：function 函数名（[形参1，形参2....形参N]）{语句...}

②使用函数表达式创建一个函数

语法：var 函数名=function（[形参1，形参2....形参N]）{语句....}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">		
		/*使用函数声明创建一个函数
		function fun2(){
			console.log("这是我的第二个函数~~");
			alert("哈哈哈哈");
			document.write("笑笑不说话");
		}
		console.log(fun2);
		// 调用函数fun2
		fun2();
		*/

		//使用函数表达式创建一个函数
		var fun3 = function(){
			console.log("我是匿名函数中封装的代码");
		}
		// 调用函数fun3
		fun3();		
	</script>
</head>
<body>
	
</body>
</html>

3. 函数的参数

函数的参数可以是任意的数据类型

定义一个用来求和的函数：可以在函数的()中指定一个或多个形参（形式参数），多个形参之间用，隔开，声明形参就相当于在函数的内部声明了对应的变量，但是并不赋值。

调用函数时，可以在（）中指定实参，会赋值给对应的形参，下图

调用函数解析时不会检查实参的类型，注意检查

--多余实参不会被赋值

--实参如果比形参少，则多的形参是undefined

4. 函数返回值

-- return后的值将作为函数的执行结果返回，可以定义一个变量来接受结果

-- 变量result的值就是函数的执行结果，函数返回什么，result的值就是什么

-- 在函数中，return后的语句不会执行

5. 实参可以是任何值

-- 实参可以是任意的数据类型，包括对象

-- 当参数过多时，可以将参数封装到一个对象中，通过对象传递

6. 返回值的类型

返回值可以是任意的数据类型，包括对象和函数，可以在函数里再声明一个函数

7. 立即执行函数

语法：函数对象() 函数定义完立即被调用，则叫立即执行函数，立即执行函数往往只执行一次

例： ( function(){ alert("我是一个立即执行函数"); } )();

(function (a,b){ console.log("a="+a); console.log("b="+b);})(123,456);

8. 对象--方法

对象的属性值可以是任意数据类型包括函数；

如果一个函数作为对象的属性保存，我们称这个函数是这个对象的方法

调用这个函数就是调用对象的方法（method）除了名称没其他区别

赋值：

9. 作用域（变量作用的范围）

①全局作用域：

-- 直接写在script标签中的JS代码都在全局作用域，页面打开时创建关闭时销毁

-- 全局作用域中有个全局对象Window，代表浏览器窗口，由浏览器创建可以直接使用

-- 在全局作用域中创建的变量都会作为window对象的属性保存，函数都会作为window对象的放法保存；全局作用域中的变量都是全局变量，在页面的任意部分可以访问到

声明提前：

a. 变量的声明提前：使用var关键字声明的变量，会在代码执行前被声明，但不会赋值

例： console.log("a="+a); var a=123; (此时a被提前声明但没有赋值a=undefined)

b. 函数的提前声明：使用函数声明形式创建的 function 函数(){} 会在代码执行前被创建，所以我们可以在函数声明前来调用函数；

注意：使用函数表达式创建的函数，不会被提前声明，不能声明前调用否则报错

②函数作用域：

a. 调用函数作用域，函数执行完毕，函数作用域销毁；

b. 每调用一次函数会创建一个新的函数作用域，他们之间相互独立；

c. 函数作用域中可以访问到全局作用域，反之不可以；

d. 在函数作用域中操作一个变量时，会在自身作用域中寻找，有就用，没有则会向上一级寻找，直到全局作用域，如果依然没有找到，直接报错referenceerror。

e. 要在函数中直接访问全局变量可以使用window对象

声明提前：

函数声明也会在函数中所有的代码执行前执行

③debug 在浏览器--检查--source---进行调试

10. this

解析器调用函数每次都会向函数内部传递一个隐含的参数this，指向的是一个对象，这个对象称为函数执行的上下文对象；根据函数的调用方式不同，this指向不同的对象

-- 以函数形式调用 this永远是window

-- 以方法形式调用 this是调用方法的那个对象

11. 使用工厂方法创建对象

？通过该方法可以大批量创建对象

12. 构造函数？

构造函数就是一个普通的函数，创建方式和普通函数无区别，不同的是构造函数习惯上首字母大写；

构造函数和普通函数的区别是调用方式不同，普通函数直接调用，构造函数需要使用new关键字调用；

构造函数的执行流程：

① 立刻创建一个新的对象

② 将新建的对象设置为函数中this，在构造函数中使用this来引用新建的对象

③ 逐行执行函数中的代码

④ 将新建的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类，将通过一个构造函数创建的对象称为该类的实例。

附：使用instanceof可以检查一个对象是否是一个类的实例

13. 构造函数修改+原型对象

方法在构建函数内创建的，那么构造函数每执行一次就会创建一个新的sayName方法，也就是所有实例的sayName都是唯一的，这样导致执行一万次就要一万个新的放大且一模一样，没必要，可以进行修改，使所有对象共享一个方法。

但该方法有局限性和问题，函数定义在全局，污染了全局作用域的命名空间，也很不安全

解决方法：原型对象

①我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象--原型对象；

②普通函数调用prototype没有任何作用，当以构造函数形式调用时，可以通过__proto__来访问该属性；

③原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容统一设置到原型对象中，这样不用分别为每个对象添加，也不影响全局；

④当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，有直接使用，没有就会去原型对象中找，找到直接使用，如果还没有再去原型对象的原型中去找，直到找到object对象的原型，依然没有找到则返回undefined。

注：使用in检查对象中是否含有某个属性

四、tostring

1. tostring ?

2. 垃圾回收(GC) ?

程序运行久了会产生垃圾,积攒过多导致运行速度慢,利用垃圾回收机制处理垃圾;

当一个对象没有任何变量或属性对它引用时无法操作该对象,这种对象就是垃圾,JS有自动的垃圾回收机制会自动清除销毁,我们需要做的只是将不再使用的对象设置为null即可

五、数组

1. 内建对象数组(array)也是一个对象

数组和普通对象功能类似,也是来储存值的,不同的是普通对象使用字符串作为属性名,数组使用数字作为索引操作元素。

索引：从0开始的整数就是索引，数组的存储性能比普通对象摇号，开发中常用来存储数据

2. 数组字面量

数组中的元素可以是任意数据类型，包括对象和函数

3. 数组的四个方法

①push(数组末尾添加一个或多个元素)

-- 该方法将添加的元素作为方法的参数传递，这些元素会自动添加至数组的末尾

-- 会将数组的长度作为返回值返回

②pop（删除数组的最后一个元素）

-- 该方法将被删除的元素作为返回值返回

③unshift(数组开头添加元素)

-- 会将新的数组长度作为返回值返回

④shift（删除数组第一个元素）

-- 该方法将被删除的元素作为返回值返回

4. 数组的遍历（将数组中所有元素都取出来）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		// 练习
		function Person(name, age){
			this.name=name;
			this.age=age;
		}
		// 修改Person原型中的tostring
		Person.prototype.toString=function(){
			return "Person[name="+this.name+",age="+this.age+"]"
		}
		var per=new Person("孙悟空",18);
		var per2=new Person("猪八戒",28);
		var per3=new Person("红孩儿",8);
		var per4=new Person("蜘蛛精",16);
		var per5=new Person("二郎神",38);
		var perArr=[per,per2,per3,per4,per5];
		// 创建一个函数，将perArr中满18岁的Person提取出来，然后封装到一个新的数组中并返回   arr 形参，要提取的数组
		function getAdult(arr){
			var newArr=[];
			for(var i=0; i<arr.length; i++){
			var p=arr[i];
			if(p.age>=18){
				newArr.push(p);
			}		 	
		}
		return newArr;
	}
		var result=getAdult(perArr);
		console.log(result);
	</script>
</head>
<body>
	
</body>
</html>

5. foreach--遍历数组（只支持IE8以上的浏览器）

--这种函数由我们创建的，但不由我们调用，称为回调函数

--数组中有几个元素函数会执行几次，每次执行浏览器会将遍历到的元素以实参的形式传递出来，我们可以来定义形参读取这些内容

6. slice和splice

① slice 从数组中提取指定元素

-- 参数：

截取开始位置的索引，包括开始索引

截取结束为止的索引，不包含结束索引

索引可以传递负值，表示倒数第几个

② splice 删除数组中的指定元素，会影响原数组，指定元素从原数组删除，并将被删除的元素作为返回值返回

-- 第一个表示开始位置的索引，

第二个表示删除的数量，

第三个及以后可以传递新元素，自动插入开始位置索引的前面

③练习：去除数组中重复的数字（使用嵌套for循环）

var arr = [1,2,3,2,1,3,4,2,5]; (JS-7)

7. 数组的剩余方法

① concat() 可以连接两个或多个数组，并将新的数组返回；不会对原数组产生影响；既可以传输组，也可以传元素；

② join() 可以将数组转换为一个字符串，不对原数组产生影响；将转换后的字符串返回；可以指定一个字符串作为参数，这个字符串会成为连接符，如果不指定连接符，则默认使用，作为连接符

③ reverse() 直接修改原数组，反转前后颠倒

④ sort() 对数组中元素排序，也影响原数组，默认按Unicode编码排序对纯数字也一样

⑤ 可以利用回调函数和sort指定排序规则

回调函数中需要定义两个形参，浏览器将分别使用数组中的元素作为实参去调用回调函数，使用的元素不确定，但肯定在数组中，a一定在b前面，浏览器会根据与回调函数的返回值决定元素的排序

返回大于0的值，元素交换位置；

返回小于0 等于0的值，位置不变

六、函数对象的方法

call和apply 函数对象的方法，通过函数对象来调用

七、arguments实参的对象

调用函数时，浏览器每次都会传递两个隐含的参数：

① 函数的上下文对象this，② 封装实参的对象arguments

arguments是一个类数组对象，可以通过索引来操作数据，也可以获取长度；在调用函数时，所传递的实参都会在arguments中保存；arguments.length 获取实参的长度；

即使不定义形参，也可以通过arguments来使用实参，arguments[0] 表示第一个实参 arguments[1]表示第二个实参

八、date对象

date表示时间

创建当前时间：如果直接使用构造函数创建date对象，则会封装为当前代码执行的时间

var d=newDate();

Console.log(d);

创建指定的时间对象，构造函数时传递一个表示时间的字符串作为参数

-- 日期的格式：月份/日/年时:分:秒

-- getDate() 获取当前对象是几日 getDay() 当前是周几 getMonth() 当前月份

-- getTime() 获取当前日期对象的时间戳（指格林威治标准时间1970年1月1日，0时0分0秒到当前时间所花费的毫秒数（1秒=1000毫秒））计算机底层保存时间时用的都是时间戳

九、math对象

Math 不是构造函数，属于工具类，不用创建对象，里面封装了数学运算相关的方法

Math.PI 圆周率

Abs() 计算绝对值

Math.cile() 向上取整小数进一

Math.floor() 向下取整小数舍去

Math.round() 四舍五入取整

Math.random（）生成0-1之间的随机数，不包括0和1

max（） min（）获取最大值和最小值

Math.pow(x,y) 返回x的y次幂

Math sqrt 开方

十、包装类

三个包装类将基本数据类型转换为对象，但实际应用中不会使用基本数据类型的对象，容易出不可预料的问题，主要用于浏览器将基本数据类型转化为对象。

String() 基本数据类型转换为String对象 Number() Boolean() 同

字符串string的方法

--Length 可以用来获取字符串的长度

-- charAt() 返回字符串中指定位置的字符，根据索引获取

-- charCodeAt() 获取字符串中指定位置字符的编码，返回Unicode编码

-- formCharCode() 可以根据字符编码去获取字符

-- concat() 链接两个或多个字符串，和+一样作用

-- indexof() 检索字符串中是否含有指定内容。如果含有该内容，则会返回第一次出现的索引，如果没有找到指定内容，则返回-1；可以在第二个参数指定开始查找的位置

-- slice() 从字符串中截取指定内容，不影响原字符串，将截取内容返回

参数：第一个开始的索引位置包括开始、

第二个结束的位置不包括结束位置

省略第二个参数就会截取后面所有，可以负数-1倒数第一个、、、

-- substring() 也是截取字符串和slice相似,不同的是这个方法不能接收负值，负值默认为0，自动调整参数位置，如果小于第一个参数，俩参数交换位置，比如（1,0）会自动调整为（0,1）

-- substr() 用来截取字符串，第一个参数截取开始位置的索引，第二个截取的长度

-- split() 将一个字符串拆分为一个数组

参数：需要一个字符串作为参数，将会根据该字符串拆分数组

如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

-- toUpperCase() 将一个字符串转化为大写并返回

-- toLowerCase() 将一个字符串转化为小写并返回

注：后面记得跟练习和代码

十一、正则表达式

1. 正则表达式的介绍

用于定义一些字符串的规则，计算机可以根据正则表达式检查一个字符串是否符合规则，将字符串中符合规则的内容提取出来，正则表达式也是对象object，使用typeof检查正则对象，返回object

-- 创建正则表达式语法： var 变量 = newRegExp（"正则表达式","匹配模式");

-- 正则表达式的方法： test() 检查一个字符串是否符合正则表达式的规则，符合true，反之false

-- Var reg = new RegExp("a"); 检查字符串中是否含有a，大A也不行;在构造函数中可以传递一个匹配模式作为第二个参数： i 忽略大小写 g 全局匹配模式

2. 正则的语法

使用字面量创建正则表达式，语法： var 变量=/正则表达式/匹配模式

构造函数方式 Var reg=new RegExp("a", "i"); 灵活

字面量方式 Reg=/ a / i; 简单

3. 字符串和正则相关的方法

-- split() 根据任意字母拆分字符串，即使不指定全局匹配，也会全部拆分

-- Search() 搜索字符串中是否含有指定内容；搜到返回第一次出现的索引，没搜到返回-1，只能查找到第一个，不能全局查找

-- Match() 根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认match找到第一个符合要求的内容就停止；

可以设置正则表达式为全局匹配模式g，这样可以匹配到所有内容；

会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

-- replace() 可将字符串中指定内容替换成新的内容

参数：被替换的内容，新的内容

默认只替换第一个被替换的内容可以接收一个正则表达式作为参数

4. 正则表达式的语法

① 量词： --通过量词可以设置一个内容连续出现的次数

-- 量词支队它前边的一个内容起作用

5. 其他语法：特殊字符

6. 练习--检查手机号

7. 练习-- 邮件正则

JS-DOM （Document Object Model）

一、DOM概述

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

JS中通过DOM对HTML操作

Document文档：整个HTML网页文档

Object 对象：将网页中的每个部分转换为一个对象

Model模型：表示对象之间的关系，方便我们获取对象

二、DOM文档节点：构成HTML的基本单元

浏览器加载页面时自上而下读取，一行行运行，如果将script写在页面上面，执行代码时页面还没有加载，需如图将script写在body内容的下面

我们可以为window绑定一个onload事件，这个onload事件会在整个页面加载完成后才触发，其对应的响应函数会在页面加载完成后执行，可以确保代码执行时所有的DOM对象已经加载完毕了。如下：

1. 文档节点：HTML文档

2. 元素节点：

HTML标签，浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

①获取元素节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">		
		window .onload=function(){	

		//通过id获取元素节点 
		var btn01=document.getElementById("btn01");
		console.log(btn01.innerHTML);
		// 通过标签名获取一组元素节点
		var btn=document.getElementsByTagName("button");
		console.log(btn.length);
		// 通过类名class获取元素节点
		var btn03=document.getElementsByClassName("btn03");
		console.log(btn03);
		// 通过CSS选择器获取 该方法总会返回唯一的元素，即使满足条件的有多个也只会返回一个
		 var btn04 = document.querySelector(".btn04");
   		 console.log(btn04);
   		 // 创建一个无序列表，通过CSS选择器选择该列表的所有li
   		 var list=document.querySelectorAll(".list li");
   		 console.log(list);
	};
	</script>
</head>
<body>
	<button id="btn01">通过id获取元素节点</button>
	<button>通过标签名获取一组元素节点</button>
	<button class="btn03">通过类名class获取元素节点</button>
	<button class="btn04">通过CSS选择器获取元素节点</button>

<ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

</body>
</html>

②获取元素子节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">		
		window .onload=function(){	
			// 通过具体的元素节点调用 语法： 当前元素节点.后代节点标签名
			var btnlist=document.getElementById("btnlist");
			// 获取btnlist下的所有button节点
			var btn=btnlist.getElementsByTagName("button");
			console.log(btn.length);
			for (var i=0; i<btn.length; i++){
				console.log(btn[i].innerHTML);
			}

			// childNodes属性 获取包括文本节点、、空白等在内的所有节点
			var btn=btnlist.childNodes;
			console.log(btn.length);
			// children属性获取当前元素的所有子元素，不包括文本节点
			var btn2=btnlist.children;
			console.log(btn2.length);

			// firstChild 获取当前元素的第一个节点，也叫文本节点
			var fir=btnlist.firstChild;
			console.log(fir);
			// firstElementChild  获取当前元素的第一个子元素
			var fir2=btnlist.firstElementChild;
			console.log(fir2);
	};
	</script>
</head>
<body>
	<div id="btnlist">
		<button id="btn01">我是按钮01</button>
		<button id="btn02">我是按钮02</button>
		<button id="btn03">我是按钮03</button>
		<button id="btn04">我是按钮04</button>
		<button id="btn05">我是按钮05</button>
	</div>
	
</body>
</html>

③获取元素的父节点和兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">		
		window .onload=function(){	
			// parentNode 获取id为bj的元素父节点
			var bj=document.getElementById("bj");
			var pn=bj.parentNode;
			// 和innerHTML相似，但它会获取元素内部的内容
			console.log(pn.innerText);
			// previousSibling 获取bj的前一个兄弟节点，包括文本节点
			var pre=bj.previousSibling;
			console.log(pre);
			// previousElementSibling 获取bj的前一个兄弟元素
			var pre1=bj.previousElementSibling;
			console.log(pre1.innerText);
	};
	</script>
</head>
<body>	
<ul class="city">
	<li id="js">江苏</li>
    <li id="bj">北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>
</body>
</html>

3. 属性节点：

元素的属性，属性节点并非是元素节点的子节点，而是元素节点的一部分。可以通过元素节点来获取指定的属性节点。

例如：元素节点.getAttributeNode("属性名")，根据元素节点的属性名获取一个属性节点对象

4. 文本节点：

HTML标签中的文本内容

文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点，在通过元素节点获取文本节点。

例如：元素节点.firstChild;，获取元素节点的第一个子节点，一般为文本节点。

5. DOM文档方法介绍（常用）

**获取HTML元素节点值**
方法	描述
元素节点.innerText	获取 HTML 元素的 inner Text 内部内容
元素节点.innerHTML	获取 HTML 元素的 inner HTML
元素节点.属性	获取HTML的属性值
元素节点.getAttribute(attribute)	获取 HTML 元素的属性值
元素节点.style.样式	获取 HTML 元素的行内样式值

**添加和删除元素**
方法	描述
document.createElement(element)	创建元素节点，需要一个标签名作为参数，根据该标签名创建元素节点对象
.removeChild(element)	删除子节点语法：父节点.removeChild(子节点)；
.appendChild(element)	添加子节点，语法：父节点.appendChild(子节点)；
.replaceChild(element)	替换子节点语法：父节点.replaceChild(新节点，旧节点)；
document.write(text)	写入 HTML 输出流
document.createAttribute(attribute)	创建属性节点
document.createTextNode(text)	创建文本节点
元素节点.insertBefore(element)	在指定的子节点前面插入新的子节点

三、使用DOM操作CSS

1. 通过JS修改元素的样式

语法：元素.style.样式名=样式值

注意：如果CSS样式名中含有-，在JS中是不合法的，要修改为驼峰命名法，去掉-，-后的首字母大写，比如background-color 应写作 backgroundColor

通过style属性设置的样式都是内链样式，优先级高，可以立即显示，如果CSS样式中设置 !important，此时样式是最高优先级，JS也不能覆盖,导致JS样式失效，所以尽量不要添加。

2. 获取元素的样式

用getComputedStyle（）来获取元素样式，是window的方法，可以直接使用，需要两个参数

第一个：要获取样式的元素

第二个：可以传一个元素，一般都传null ？

该方法会返回一个对象，对象中封装了当前元素对应的样式,如果获取的样式没有设置，则会获取真实的值而不是默认值，比如：没有设置width，他不会获取到auto，而是一个长度。

Var obj=getComputedStyle(box1,null);

Alert(obj.width);

或者Alert(getComputedStyle(box1,null).width);

定义一个函数来获取指定元素当前的样式

参数：Obj 要获取的元素 Name 要获取的样式名

Function getStyle（obj，name）{Return getComputedStyle（obj,null）[name];}

其他样式属性：

属性	描述
clientWidth clientHeight	获取元素的可见宽度和高度，包括内容区和内边距，属性不带px
offsetWidth offsetHeight	获取元素整个的宽度和高度，包括内容区、内边距和边框
offsetParent	获取离当前元素最近的开启了定位的父元素，如果所有祖先元素都没有开启已定位，则返回body
offsetLeft offsetTop	当前元素对于其定位父元素的水平和垂直偏移量
scrollWidth scrollHeight scrollLeft scrollTop	获取整个滚动区域的宽度和高度获取水平和垂直滚动条滚动的距离

四、DOM文档事件

1. 事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的按下

2. 鼠标事件（拖拽事件）

鼠标在div移动时显示鼠标的坐标 onmousemove 该事件会在鼠标在元素中移动时被触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#areaDiv{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		#showMsg{
			width: 100px;
			height: 20px;
			border: 1px solid;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var areaDiv=document.getElementById("areaDiv");
			var showMsg=document.getElementById("showMsg");
			areaDiv.onmousemove=function(event){
				// 在IE8中，响应函数被触发时，浏览器不会传递事件对象，而是将事件对象作为window对象的属性保存
				if(!event){
					event=window.event;
				}
				var x=event.clientX;
				var y=event.clientY;
				showMsg.innerHTML= "x=" +x+ ",y="+y;
			}

		}
		
	</script>
</head>
<body>
	<div id="areaDiv"></div>
	<br/>
	<div id="showMsg"></div>
</body>
</html>

2.2 鼠标拖拽事件

拖拽流程：

当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
当鼠标松开时被拖拽元素固定在当前位置 onmouseup

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			// 为box1绑定一个鼠标按下事件
			box1.onmousedown=function(event){
				event=event||window.event;
				// 解决鼠标总是跳回box1左上角的问题
				var ol=event.clientX-box1.offsetLeft;
				var ot=event.clientY-box1.offsetTop;
				// 当鼠标按下并且为document绑定鼠标移动的事件
				document.onmousemove=function(event){
					// 当鼠标你按下且在页面中移动时 box1坐标随鼠标的坐标而定，但此时松开鼠标移动鼠标依然会动
					var left=event.clientX-ol;
					var top=event.clientY-ot;
					box1.style.left=left+"px";
					box1.style.top=top+"px";					
				}

				// 在鼠标按下事件执行后，为document绑定鼠标松开事件，鼠标在页面中松开时，鼠标移动事件取消，box1停止移动
				document.onmouseup=function(){
				document.onmousemove=null;
				// 要进行下次鼠标按下移动事件，则还要再取消鼠标松开事件
				document.onmouseup=null;	
				}
			}			
		}
	</script>
</head>
<body>
	我是一段文字
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>

设置两个div 都可以被拖拽：重点 drag setCapture releaseCapture

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
		}
		#box2{
			width: 100px;
			height: 100px;
			background-color: yellow;
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			var box2=document.getElementById("box2");
			// 给box1和box2开启拖拽
			drag(box1);
			drag(box2);

			// 提取一个专门用来设置拖拽的函数，参数：开启拖拽的元素
			function drag(obj){
			//当鼠标被在拖拽元素上按下时，开始拖拽
			obj.onmousedown=function(event){
				// 解决事件兼容性问题
				event=event||window.event;

				// 设置obj捕获所有鼠标按下的事件
				// setCapture() 只有IE支持，在火狐中调用不会报错，但谷歌会报错
				obj.setCapture && obj.setCapture();

				// obj的偏移量 鼠标.clentX - 元素.offsetLeft
            	// obj的偏移量 鼠标.clentY - 元素.offsetTop
				var ol=event.clientX-obj.offsetLeft;
				var ot=event.clientY-obj.offsetTop;

				// 当鼠标按下并且为document绑定鼠标移动的事件
				document.onmousemove=function(event){
					// 解决事件兼容性问题
					event=event||window.event;

					// 被拖拽元素跟随鼠标的移动而移动
					var left=event.clientX-ol;
					var top=event.clientY-ot;

					// 修改obj的位置
					obj.style.left=left+"px";
					obj.style.top=top+"px";					
				}

				// 在鼠标按下事件执行后，为document绑定鼠标松开事件，鼠标在页面中松开时，鼠标移动事件取消，停止移动
				document.onmouseup=function(){
				document.onmousemove=null;
				// 要进行下次鼠标按下移动事件，则还要再取消鼠标松开事件
				document.onmouseup=null;	
				// 鼠标松开时取消对事件的捕获
				obj.releaseCapture && obj.releaseCapture();
				}

			/*
             当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
             此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
             如果不希望发生这个行为，则可以通过return false来取消默认行为，
             但是这招对IE8不起作用
             */
				return false;
			}			
		}
	}
	</script>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>

3. 冒泡事件

事件的冒泡（Bubble）：指事件的向上传导，当后代元素上的事件被触发时，其父元素和祖先元素的相同事件也相继被触发；开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消

3.1 演示和取消事件冒泡

取消冒泡：将事件对象的cancelBubble设置为true即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		#box1{
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
		}
		#s1{
			background-color: yellow;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var s1=document.getElementById("s1");
			s1.onclick=function(event){
				event=event||window.event;
				alert("我是span的单击响应函数");

				// 取消冒泡：将事件对象的cancelBubble设置为true即可
				event.cancelBubble=true;
			};
			var box1=document.getElementById("box1");
			box1.onclick=function(){
				alert("我是box1的单击响应函数");
			}
			document.body.onclick=function(){
				alert("我是body的单击响应函数");
			}
		}
	</script>
</head>
<body>
	<div id="box1">
		我是box1
		<span id="s1">我是span</span>
	</div>
</body>
</html>

3.2 事件的委派

指将一件事统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件；

事件委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

target event中的target表示触发事件的对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			// var allA=document.getElementsByTagName("a");
			// for(var i=0; i<allA.length; i++){
			// 	allA[i].onclick=function(){
			// 		alert("我是a的单击响应函数");
			// 	}
			// }

			// 需求：只绑定一次事件即可应用到多个元素上，即使元素是后添加的，尝试将其绑定给元素的共同祖先元素，即 事件委派
			var ul=document.getElementById("ul");
			ul.onclick=function(event){
				event=event||window.event;

				// target  event中的target表示触发事件的对象
				// alert(event.target);
				// 如果触发事件的对象是我们期望的元素则执行，否则不执行
				if(event.target.className=="link"){
					alert("我是ul的单击响应函数");
				}
			}
			
		}
	</script>
</head>
<body>
	<button id="btn01">添加超链接</button>
	<ul id="ul" style="background-color: #bfa;">
		<li>
			<p>我是p元素</p>
		</li>
		<li><a href="javascript:;" class="link" >超链接1</a></li>
		<li><a href="javascript:;" class="link" >超链接2</a></li>
		<li><a href="javascript:;" class="link" >超链接3</a></li>
	</ul>
</body>
</html>

4. 事件的绑定

① 对象.事件=函数

此形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，后面的会覆盖前面的，如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			// 点击按钮以后弹出一个内容
			var btn01=document.getElementById("btn01");

			// 为btn01绑定第一个响应函数
			btn01.onclick=function(){
				alert(1);
			}
			// 为btn01绑定第二个响应函数
			btn01.onclick=function(){
				alert(2);
			}

		}
	</script>
</head>
<body>
	<button id="btn01">我是个按钮</button>
</body>
</html>

② addEventListener() 中的this是指绑定事件的对象，可以同时为一个元素的相同事件绑定多个响应函数，这样事件被触发时，响应函数将会按照函数绑定顺序执行。

语法：addEventListener(参数1，参数2，参数3)；

参数1：事件的字符串，不要on,比如click，而不是onclick;

参数2：回调函数，当事件被触发时，该函数会被调用；

参数3：一个布尔值，一般传false，是否在捕获阶段触发事件

但此方法不支持IE8，在IE8要用attachEvent() 中的this是指window，但火狐和chrome不支持

语法： attachEvent(参数1，参数2)；

参数1：事件的字符串，要on，比如onclick

参数2：回调函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			// 点击按钮以后弹出一个内容
			var btn01=document.getElementById("btn01");

			// addEventListener 同时为一个元素的相同事件绑定多个响应函数，这样事件被触发时，响应函数将会按照函数绑定顺序执行
			btn01.addEventListener("click",function(){
				alert(1);
			},false);
			btn01.addEventListener("click",function(){
				alert(2);
			},false);

	        // IE8版本绑定
			btn01.attachEvent("onclick",function(){
				alert(3);
			})
			btn01.attachEvent("onclick",function(){
				alert(4);
			})
		}
	</script>
</head>
<body>
	<button id="btn01">我是个按钮</button>
</body>
</html>

③ bind绑定函数完成两个方法this的统一

语法：bind(boj，eventStr，callback)

参数1：obj 要绑定的事件的对象

参数2：eventStr 事件的字符串（不要on）

参数3：callback 回调函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			// 点击按钮以后弹出一个内容
			var btn01=document.getElementById("btn01");
            bind(btn01,"click",function(){
				alert(1)
			});

			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					obj.addEventListener(eventStr,callback,false);
				}else{
					obj.attachEvent("on"+ eventStr,callback);
				}
			}
		}
	</script>
</head>
<body>
	<button id="btn01">我是个按钮</button>
</body>
</html>

5. 事件的传播（了解）

事件的传播：关于事件的传播网景公司和微软公司有不同的理解

-- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

-- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。

W3C综合了两个公司的方案，将事件传播分成了三个阶段：

-- 捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
-- 目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
-- 冒泡阶段：事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件

注：如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不希望在捕获阶段触发事件，所以这个参数一般都是false

IE8以下的浏览器中没有捕获阶段

6. 滚轮的事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
			#box1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			// 鼠标向上滚动时，box1变长，向下时，box1变短
			var box1=document.getElementById("box1");
			// box1.onmousewheel=function(){
			// 	alert("滚~~");
			// };
			// 火狐不支持onmousewheel属性，需要使用DOMMouseScroll来绑定滚动事件，该事件需要通过addEventListener()函数来绑定

			
			box1.onmousewheel=function(event){
				event=event||window.event;
				// alert(event.detail);
				// wheelDelta 判断鼠标滚动的方向 ，这个值不看大小，只看正负，上正下负
				// 火狐中用 detail获取滚动的方向，上负下正
				if(event.wheelDelta>0 || event.detail<0){
					box1.style.height=box1.clientHeight-10+"px";
				}else{
					box1.style.height=box1.clientHeight+10+"px";
				}

				// 滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，可以取消，如下
				event.preventDefault && event.preventDefault();
				return false;
			}

			// 使用addEventListener()来绑定响应函数，取消默认行为时不能使用return false；  需要用event来取消默认行为event.Default(); 但是IE8不支持，直接调用会报错
			bind(box1,"DOMMouseScroll",box1.onmousewheel);
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					obj.addEventListener(eventStr,callback,false);
				}else{
					obj.attachEvent("on"+ eventStr,callback);
				}
			}			
		}
	</script>
</head>
<body>
	<div id="box1"></div>
</body>
</html>

7. 键盘事件

-- 键盘事件onkeydown 按键被按下，对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发；如果连续触发，第一次和第二次之间会间隔稍长一些，其他的会非常快，这种设计是为了防止误操的发生。

-- onkeyup按键被松开

键盘事件一般都会绑定给一些可以获取到焦点的对象或是document

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			// document.onkeydown=function(){
			// 	console.log("按键按下");
			// };

			document.onkeydown=function(event){
				event=event||window.event;
				// console.log(event.keyCode);
				if(event.keyCode===89 && event.ctrlKey){
					console.log("y和Ctrl键都被按下了");
				}
			}

			// document.onkeyup=function(){
			// 	console.log("按键松开啦");
			// }

			var input =document.getElementsByTagName("input")[0];
			input.onkeydown=function(event){
				event=event||window.event;
				console.log("xingbuxinga");
				//使文本框中不可以输入数字 数字 48-57 
				if(event.keyCode >=48 && event.keyCode<=57){
					return false;
				}
			}
		}
	</script>
</head>
<body>
	<input type="text">
</body>
</html>

除了keyCode，还有其他按键判断， altKey ctrlKey shiftKey 判断alt ctrl shift 键是否被按下，按下返回true，否则返回false

8. 键盘移动div方向练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			document.onkeydown=function(event){
				event=event||window.event;
				var speed=10;
				// 按了Ctrl以后速度变为50
				if (event.ctrlKey) {
					speed=50;
				}

				// 条件分支语句，把表达式的值与每个 case 的值进行对比，如果存在匹配，则执行关联代码
				// 37-40  左上右下
				switch(event.keyCode){
					case 37:
					box1.style.left=box1.offsetLeft-speed+"px";
					break;
					case 39:
					box1.style.left=box1.offsetLeft+speed+"px";
					break;
					case 38:
					box1.style.top=box1.offsetTop-speed+"px";
					break;
					case 40:
					box1.style.top=box1.offsetTop+speed+"px";
					break;
				};		
			}
		}
	</script>
</head>
<body>
	<div id="box1" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
</body>
</html>

JS-BOM （Browser Object Model）

一、BOM概述

1. BOM 浏览器对象模型

通过JS操作浏览器，BOM为我们提供了一组对象，来完成对浏览器的操作。

2. BOM对象：

● Window 代表整个浏览器的窗口，同时window也是网页中的全局对象

● Navigator 当前浏览器的信息，通过该对象识别不同的浏览器

● Location 当前浏览器的地址栏信息，操作浏览器跳转页面

● History 浏览器的历史记录，操作浏览器的历史记录，隐私原因，该对象不能获取具体的历史记录，只能操作浏览器向前或向后翻页，该操作只在当次访问有效

● Screen 用户的屏幕信息，获取用户显示器相关的信息

这些BOM对象都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用，比如： console.log(location); console.log(history);

二、BOM对象属性及方法

1. Navigator 对象

Navigator 代表当前浏览器的信息，通过该对象可以识别不同的浏览器；由于历史原因，Navigator对象中的大部分属性已经不能帮我们识别浏览器了，一般我们会用userAgent懒判断浏览器的信息，userAgent是一个字符串，包含用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

如果通过UserAgent不能判断，还可以通过一些浏览器特有的对象来判断浏览器的信息，比如： ActiveXObject

2、History 对象

History 对象可以操作浏览器向前或向后翻页

length 属性：获取当前访问的链接数量 alert(history.length);

back() 可以退回上一个页面，作用和浏览器的回退按钮一样

forward() 可以跳到下一个页面，作用和浏览器的前进按钮一样

go() 跳到指定的页面，需要一个整数作为参数；1 表示向前跳一个页面，相当于forward(); 2表示向前跳两个； -1表示向后跳一个； -2表示向后跳两个

3. Location 对象

直接打印location，可以获取地址栏的信息（当前页面的完整路径） alert（location）；

如果将location属性修改为一个完整的路径或相对路径，则我们的页面会自动跳转到该路径，并且会生成相应的历史记录。location="http://www.baidu.com"; location="48-BOM History.html";

assign() 用来跳转到其他的页面，作用和直接修改location一样 location.assign（"http://www.baidu.com");

reload() 重新加载当前页面，和刷新按钮一样，如果在方法中传递一个true作为参数，会强制清空缓存，刷新页面 location.reload(true);

replace() 可以使用一个新的页面来替换当前页面，调用完毕也会跳转页面，不会生成历史记录，不能使用退回按钮退回 location.replace("48-BOM History.html");

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			var btn=document.getElementById("btn");
			btn.onclick=function(){
				alert(location);
				location="http://www.baidu.com";
				location.assign("http://www.baidu.com");
				location.reload(true);
				// 下面这个是我自己建的一个HTML文件，测试能否跳转
				location.replace("48-BOM History.html");
			}			
		}
		
	</script>
</head>
<body>
	<button id="btn">Location</button>
</body>
</html>

4. 定时器

4.1 定时调用setInterval() 使程序可以每间隔一段时间执行一次

setInterval() 参数：1. 回调函数，该函数每隔一段时间被回调一次； 2. 每次调用间隔的时间，单位是毫秒

返回值: 返回一个Number类型的数据, 这个数字用来作为定时器的唯一标识

clearInterval() 关闭定时器, 方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
			var count=document.getElementById("count");
			var num=1;
			var timer=setInterval(function(){
				count.innerHTML=num++;
				if(num==8){
					clearInterval(timer);
				}
			}, 1000);

            var timer=setTimeout(function(){
				console.log(num++);
		     },3000);
			        clearTimeout(timer);
		}
	</script>
</head>
<body>
	<h1 id="count"></h1>
</body>
</html>

4.2 延时调用 setTimeout() 函数不马上执行，隔一段时间执行，只执行一次;

与定时调用的区别：定时调用会执行多次，延时调用只会执行一次，两者可以互相代替的，开发中根据需要选择，用定时的比较多。 clearTimeout() 关闭延时调用

4.3 练习定时器

getStyle(obj,name) obj要获取样式的元素 name样式名

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box1{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 0;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			var btn01=document.getElementById("btn01");
			var timer;
			btn01.onclick=function(){
				clearInterval(timer);				
				timer=setInterval(function(){
					var oldValue=parseInt(getStyle(box1,"left"));
					var newValue=oldValue+20;
					if(newValue>800){
						newValue=800;
					}
					box1.style.left=newValue+"px";
					if(newValue==800){
						clearInterval(timer);
					}
				},100);
			}

			// 定义一个函数，来获取指定元素的当前样式
			// getStyle(obj,name) obj要获取样式的元素 name样式名
			function getStyle(obj,name){
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[name];
				}else{
					return obj.currentStyle[name];
				}
			}	
			
		}

	</script>

</head>
<body>
	<button id="btn01">点击按钮以后box1向右移动</button>
	<br/>	<br/>
	<div id="box1"></div>
</body>
</html>

5. 类的操作

通过style 每修改一个样式浏览器就需要重新渲染一次页面，执行性能比较差，而且当我们要修改多个样式时也不太方便

5.1   addClass(obj,cn) 向元素中添加指定的class属性值
        obj:要添加class属性的元素，cn:要添加的class属性值

5.2   removeClass() 删除一个元素中指定的class属性

5.3   toggleClass() 切换一个class属性如果元素中有这个类删除，没有则添加

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		.b1{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.b2{
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			var btn01=document.getElementById("btn01");
			var b1=document.getElementsByClassName("b1");	
			btn01.onclick=function(){
                // 方法1：style 每修改一个样式浏览器就需要重新渲染一次页面，执行性能比较差，而且当我们要修改多个样式时也不太方便
				// box1.style.width="150px";
				// 通过一行代码，同时修改多个样式 修改box的class属性
				// box1.className +=" b2";
				
				// addClass(box1, " b2");
				// removeClass(box1,"b2");
				toggleClass(box1,"b2");
			}

				// addClass(obj,cn)  向元素中添加指定的class属性值
				// obj:要添加class属性的元素，cn:要添加的class属性值
				function addClass(obj, cn){	
					if(!hasClass(obj,cn)){
					obj.className += "" +cn;
				}	
			}

				// 判断obj中有没有cn class 有true,无false
				function hasClass(obj,cn){
					// 创建一个正则表达式
					var reg=new RegExp("\\b"+cn+"\\b");
					return reg.test(obj.className);
				}

				// removeClass() 删除一个元素中指定的class属性
				function removeClass(obj,cn){
					var reg=new RegExp("\\b"+cn+"\\b");
					obj.className = obj.className.replace(reg, "");
				}				
			

				// toggleClass() 切换一个class属性 如果元素中有这个类删除，没有则添加				
				function toggleClass(obj,cn){
					if(hasClass(obj,cn)){
						removeClass(obj,cn);
					}else{
						addClass(obj,cn);
					}
				}
	}

	</script>
</head>
<body>
	<button id="btn01">点击按钮以后修改box1的样式</button>
	<div id="box1" class="b1 b2"></div>
</body>
</html>

6. JSON

JSON：JavaScript Object Notation（JS对象标记法），是一种存储和交换数据的语法。

数据在浏览器和服务器进行交换是，这些数据只能是文本，JSON就是文本，且可以把任何JS对象转换为JSON，将JSON发送到服务器，同样我们可以性服务器接收任何JSON转换为JS。

JSON和JS对象格式一样，不过JSON字符串中的属性名必须加双引号

JSON.parse() JSON转换为JS

JSON.stringify() JS转换为JSON字符串

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">
		// 创建一个对象（加引号的）
		var obj='{"name":"孙悟空", "age":18, "gender":"男"}';
		// 创建一个数组（加引号的）
		var arr='[1,2,3,"hello",true]';
		console.log(obj);
		var obj2={name:"猪八戒", age:28, gender:"男"};

		// JSON.parse()  JSON转换为JS  
		var o=JSON.parse(obj);
		var o2=JSON.parse(arr);
		console.log(o.gender);

		// JSON.stringify() JS转换为JSON字符串
		var str=JSON.stringify(obj2);
		console.log(str);
	</script>
</head>
<body>
	
</body>
</html>