JavaScript介绍架构图 javascript结构

转载

detailtoo 2023-12-22 14:35:41

文章标签 JavaScript介绍架构图 javascript html css 代码块 文章分类 JavaScript 前端开发

轮播图

常位于首页，用作活动推广的大图，其可以自动播放，点击左右切换按钮播放，也可以点击图片上的小圆点播放

Tab切换

用于点击不同的标签或标题，显示不同的内容

表单验证

常位于注册和登录页面，其用来在数据被送往服务器前对HTML表单中的输入数据进行验证。若输入的数据不正确，则会提示错误

什么是JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
其常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果

JavaScript特点

是一种解释性脚本语言
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离
跨平台特性，可以在多种平台下运行
有自身的基本数据类型，表达式和算术运算符及程序的基本程序框架
可以实现web页面的人机交互

三个主要组成部分

ECMAScript（核心）
BOM（浏览器对象模型）
DOM（文档对象模型）

ECMAScript

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。其是JavaScript的核心，描述了语言的基本语法、数据类型、语言、关键字、保留字、操作符、对象等

BOM

BOM（浏览器对象模型）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等

DOM

DOM（文档对象模型）是HTML和XML的应用程序接口（API）。DOM将把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物

<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>hello world!</p>
  </body>
</html>

JavaScript介绍架构图 javascript结构_javascript

基本结构

HTML中JavaScript代码必须位于 <script> 与 </script> 标签之间

<script>
    //代码块
</script >

使用

根据上述语法来编写第一个JavaScript程序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第一个JavaScript程序</title>
</head>
<body>
	<script>
		alert("我的第一个JavaScript");
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_JavaScript介绍架构图_02

使用<script>标签

通过 <script> 与 </script> 标签可以插入JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用script标签</title>
</head>
<body>
	<script>
		alert("使用script标签的方式引入JavaScript代码！")
	</script>
</body>
</html>

当JavaScript代码量较少时，推荐使用<script>标签的方式，这种方法比较高效，且管理方便。但是在一个网站中，或者多个页面之间引用时，此方法代码会比较冗余，不方便维护和管理，因此不建议在多页面中使用

外部JS文件

JavaScript代码也可以存放在独立的文件中，以增强JavaScript脚本的可重复调用率。JavaScript文件是一个文本类型的文件，在任何文本编辑器中都可以被打开或编辑，JavaScript文件的扩展名为“.js”
导入名为“index.js”的文件，使用<script>标签的src属性导入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外部JS文件</title>
</head>
<body>
	<script src="js/index.js"></script>
</body>
</html>

注意

一般网站都采用外部JS文件的方式编写JavaScript代码，可以帮助开发者快速开发和高效管理

在HTML标签中

在HTML标签中直接写入JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在HTML标签中</title>
</head>
<body>
	<input type="submit" value="点我试试" onclick="alert('你点中我啦！')">
</body>
</html>

在HTML标签中直接写入JavaScript代码的方法实际上没有真正把结构和行为分离，因此不建议使用

JS变量

概念

在编程语言中，变量用于存储数据值。JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

使用

可以先声明变量，再为变量赋值；也可以同时声明和赋值变量

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量</title>
</head>
<body>
	<script>
		// 先声明变量，再为变量赋值
		var name;
		name="张三"
		document.write(name);

		// 同时声明和赋值变量
		var age=20;
		document.write(age);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_03

JS注释

概念

JavaScript注释可用于提高代码的可读性，其不会被浏览器解析

使用

单行注释以“//” 开头，多行注释以“ /*” 开始，以“*/” 结尾

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注释</title>
</head>
<body>
	<script>
		//在页面中弹出“你好”
		alert("你好");

		/*使用alert()在页面中弹出
		“欢迎学习JavaScript”*/
		alert("欢迎学习JavaScript")
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_JavaScript介绍架构图_04

使用JavaScript运算符实现基本算法

分类

JavaScript运算符可以用作赋值，比较值，执行算术等，常用的运算符如下：

算术运算符
赋值运算符
比较运算符
逻辑运算符

算术运算符

概念

算术运算符对数值（文字或变量）执行算术运算，常用的算术运算符如下

+：加法
-：减法
*：乘法
/：除法
%：余数
++：自增
--：自减

声明几个变量，并使用算术运算符计算结果

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>算术运算符</title>
</head>
<body>
	<script>
		var x=50;
		document.write("x的值为："+x);
		//加法
		var y=x+10; 
		document.write("<br/>y的值为："+y);
		//减法
		var z=x-8;
		document.write("<br/>z的值为："+z);
		//乘法
		var m=x*5;
		document.write("<br/>m的值为："+m);
		//除法
		var n=x/6;
		document.write("<br/>n的值为："+n);
		//余数
		var k=x%6;
		document.write("<br/>k的值为："+k);
		//自增
		var i=10;
		i++;
		document.write("<br/>i++的值为："+ i);
		//自减
		var j=10;
		j--;
		document.write("<br/>j--的值为："+ j);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_05

赋值运算符用于给 JavaScript 变量赋值，常用的赋值运算符如下

=：向变量赋值
+= 向变量添加值
-= 从变量中减去一个值
*= 相乘变量
/= 对变量相除
%= 把余数赋值给变量

声明几个变量，并使用赋值运算符计算结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>赋值运算符</title>
</head>
<body>
	<script>
		//向变量赋值
		var a = 7;
		document.write("a的值为："+a);
		//向变量添加值
		var b = 7;
		b += 8; 		
		document.write("<br/>b的值为："+b);
		//从变量中减去一个值
		var c = 7;
		c -= 8; 		
		document.write("<br/>c的值为："+c);
		//相乘变量
		var x = 7;
		x *= 8; 
		document.write("<br/>x的值为："+x);
		//对变量相除
		var y = 7;
		y /= 8;
		document.write("<br/>y的值为："+y);
		//把余数赋值给变量
		var z = 7;
		z %= 8; 
		document.write("<br/>z的值为："+z);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_06

比较运算符

概念

比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等，返回值是ture或false。常用的比较运算符如下

==：等于
===：等值等型
!=：不相等
>：大于
<：小于
>=：大于或等于
<=：小于或等于

下面声明变量，并使用比较运算符将值进行比较

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>比较运算符</title>
</head>
<body>
	<script>
		//等于
		var x = 8;
		document.write( (x==8)+ "<br>");//正确，返回true
		document.write( (x==5)+ "<br>");//错误，返回false
		//等值等型
		document.write( (x===8)+ "<br>");//正确，返回true
		document.write( (x==="8")+ "<br>");//错误，返回false
		//不相等
		document.write( (x!=8)+ "<br>");//错误，返回false
		//大于
		document.write( (x>10)+ "<br>");//错误，返回false
		//小于
		document.write( (x<10)+ "<br>");//正确，返回true
		//大于或等于
		document.write( (x>=8)+ "<br>");//正确，返回true
		//小于或等于
		document.write( (x<=8)+ "<br>");//正确，返回true
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_html_07

逻辑运算符

逻辑运算符用于判定变量或值之间的逻辑，常用的逻辑运算符如下：

&&（和）：如果两个表达式都为 true，则返回 true，否则返回 false
||（或）：如果一个或两个表达式为 true，则返回 true，否则返回 false
!（非）：对于 false 语句返回 true，对于 true 语句返回 false

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>逻辑运算符</title>
</head>
<body>
	<script>
		var x=6;
		var y=3;
		//和
		document.write( (x<10&&y>1)+ "<br>");//两个表达式都正确，返回true
		document.write( (x<10&&y<1)+ "<br>");//y<1错误，返回false
		//或
		document.write( (x==5||y==5)+ "<br>");//两个表达式都错误，返回false
		document.write( (x==6||y==5)+ "<br>");//x==6正确，返回true
		//非
		document.write( (!(x==y) )+ "<br>");//x==y错误，前面加了非，所以返回true
		document.write( (!(x>y) )+ "<br>");//x>y正确，前面加了非，所以返回false
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_08

使用if语句实现条件判断

条件语句

分类

平时编写代码时，经常需要基于不同判断执行不同的动作，此时就需要使用条件语句。在JavaScript中，可以使用如下条件语句进行判断：

if语句
else语句
else if语句
switch 语句

if语句用来规定假如条件为true时被执行的JavaScript代码块

if (条件) {
    如果条件为true时执行的代码
}

编码时，if 使用小写字母，因为大写字母（IF 或 If）会产生JavaScript错误
根据语法编写一段程序，即如果时间小于早上8点，则弹出“Good morning”的问候

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>if语句</title>
</head>
<body>
	<script>
		var hour=7;
		if(hour<8){
			alert("Good morning");
		}
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_09

else语句

else语句用来规定假如条件为false时的代码块

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

根据语法在上个示例的基础上修改程序，即如果时间小于早上8点，则弹出“Good morning”的问候，否则弹出“时间不早啦，该起床啦！”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>else语句</title>
</head>
<body>
	<script>
		var hour=9;
		if(hour<8){
			alert("Good morning");
		}else{
			alert("时间不早啦，该起床啦！");
		}
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_JavaScript介绍架构图_10

else if 语句

else if 语句用来规定当首个条件为false时的新条件

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

根据语法在上个示例的基础上继续修改程序，即如果时间小于早上8点，则弹出“Good morning”的问候；如果不是，但时间小于10点，则弹出“开始新一天的工作啦！”；否则弹出“祝你今天有个好心情！”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>else if语句</title>
</head>
<body>
	<script>
		var hour=9;
		if(hour<8){
			alert("Good morning");
		}else if(hour<10){
			alert("开始新一天的工作啦！");
		}else{
			alert("祝你今天有个好心情！");
		}
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_html_11

使用switch语句实现条件判断

switch语句用于选择多个需被执行的代码块之一

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

第一步：计算switch表达式
第二步：把表达式的值与每个case的值进行对比
第三步：如果存在匹配，则执行关联代码

关键词

break关键词：如果JavaScript遇到break 关键词，它会跳出switch代码块
default关键词：用于规定不存在case匹配时所运行的代码
根据switch语句的语法编写程序，即根据天气提示穿衣攻略

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>switch语句的使用</title>
</head>
<body>
	<script>
		var weather1="rain";
		var weather2="sun";
		var weather3="snow";
		var weather4="wind";
		switch(weather3){
        case "rain":
            alert("下雨天，记得穿外套哦！");
            break;
        case "sun":
            alert("阳光充足，可以穿上美美哒裙子啦！");
            break;
        case "snow":
            alert("今日有大雪，建议穿雪地靴！");
            break;
        case "wind":
            alert("大风天气，穿上抗风外套！");
            break;
    }
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_12

default关键词

用于规定不存在case匹配时所运行的代码。若给上一示例再声明一个变量为weather5，但不赋值天气情况

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>default关键词的使用</title>
</head>
<body>
	<script>
		var weather1="rain";
		var weather2="sun";
		var weather3="snow";
		var weather4="wind";
		var weather5;
		switch(weather5){
        case "rain":
            alert("下雨天，记得穿外套哦！");
            break;
        case "sun":
            alert("阳光充足，可以穿上美美哒裙子啦！");
            break;
        case "snow":
            alert("今日有大雪，建议穿雪地靴！");
            break;
        case "wind":
            alert("大风天气，穿上抗风外套！");
            break;
        default:
            alert("天气情况未知，请提前查看天气预报！");
            break;
    }
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_13

掌握循环语句的使用

JavaScript 支持不同类型的循环，具体如下

for：循环代码块一定的次数
for in：循环遍历对象的属性
while ：当指定的条件为true时循环指定的代码块
do while：当指定的条件为true时循环指定的代码块

for循环是创建循环时最常用的循环之一，用于循环代码块一定的次数

for (语句 1; 语句 2; 语句 3)
{
   	被执行的代码块
}

语句 1 ：（代码块）开始前执行
语句 2：定义运行循环（代码块）的条件
语句 3 ：在循环（代码块）已被执行之后执行
根据for循环语法在页面中打印5次“欢迎学习循环”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for循环</title>
</head>
<body>
	<script>
		for(var i=0;i<5;i++){
			document.write("欢迎学习循环"+"<br>");
		}
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_14

语句1：在循环开始之前设置变量（“var i=0”，表示从0开始）
语句2：定义循环运行的条件（因为打印5次“欢迎学习循环”，所以i 必须小于 5）
语句3：在每次代码块已被执行后增加一个值（i++）
JavaScript中的 for in语句用于循环遍历对象的属性

for (变量 in 对象) 
{
    循环执行的语句
}

先声明一个小猫对象，再根据 for in循环的语法在页面中打印出小猫的名字、颜色及年龄

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>for in循环</title>
</head>
<body>
<script>
    var cat={name:"喵喵",color:"orange",age:2} 
    for(var x in cat){
        document.write(cat[x]+"<br/>");
    }
</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_JavaScript介绍架构图_15

while循环会在指定条件为真时循环执行代码块

while (条件)
{
	 需要执行的代码
}

注意

编码时，如果忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃，因此要慎用while循环
先声明一个变量，再根据while循环语法实现在页面中打印0-4的整数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>while循环</title>
</head>
<body>
<script>
	var i=0;
	while (i<5){
		document.write(i+"<br>");
		i++;
	}
</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_16

do while循环

do while循环是while循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环

do
{
   需要执行的代码
}
while (条件);

根据do while循环语法修改上一示例，同样在页面中打印出0-4的整数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>do while循环</title>
</head>
<body>
	<script>
		var i=0;
		do{
			document.write(i+"<br>");
			i++;
		}
		while (i<5);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_17

while和do while循环区别使用

通过前面示例可以发现，使用while循环和do while循环都可以在页面中打印出0-4的整数，如果将do while循环中的条件修改为false，代码会如何执行呢？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>while和do while循环区别</title>
</head>
<body>
	<script>
		var i=0;
		do{
			document.write(i+"<br>");
			i++;
		}
		while (i>5);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_18

while循环是先判断条件，后执行；do while循环是先执行一次，再判断条件

函数概述及事件驱动

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。使用时，函数是包裹在花括号中的代码块，前面使用了关键词 function

function functionname(){
    // 执行代码
}

注意

JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数
根据函数语法实现用户点击按钮时，调用函数，并弹出“你好，欢迎学习函数”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数</title>
</head>
<body>
	<input type="submit" value="点我试试" onclick="myFunction()">
	<script>
		function myFunction(){
			alert("你好，欢迎学习函数");
		}
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_19

定义函数的两种方式

在JavaScript中，使用关键字 function 定义函数。实际上，函数可以通过声明定义，也可以是一个表达式。因此，定义函数有两种方式，分别是：

函数声明（前面已学过），即

function functionname(){
 	// 执行代码
}

函数表达式

JavaScript函数可以通过一个表达式定义，其基本语法如下

var functionName=function(){
      //执行代码
}

这种形式看起来像是常规的变量赋值语句，即创建一个函数并将它赋值给变量functionName。这种情况下创建的函数也叫做匿名函数
在使用时，需要注意的是必须先赋值，再调用函数

函数表达式

使用函数表达式的方式定义函数，并在页面中打印“欢迎学习JavaScript函数”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数表达式</title>
</head>
<body>
	<script>
		var myFunction=function(){
			document.write("欢迎学习JavaScript函数");
		}
		myFunction();
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_20

概念

在调用函数时，可以向函数传递值，这些值被称为参数。参数的数量可以是多个，它们之间由逗号分隔

myFunction(argument1,argument2)

当声明函数时，把参数作为变量来声明

function myFunction(var1,var2)
{
	//执行代码
}

根据带参函数的语法，使用函数声明的方式定义函数并向其传递参数，最终在页面中打印出所传递的变量

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>带参函数</title>
</head>
<body>
	<script>
		function myFunction(name,color,age){
			document.write("小猫的名字叫"+name+"，颜色是"+color+"，今年"+age+"岁了");
		}
		myFunction("喵喵","橘色",2)
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_21

编码时，经常会希望函数将值返回调用它的地方，此时，就需要通过return语句实现

function myFunction(){
 	var x=5;
   	return x;
}

使用return时，整个JavaScript并不会停止执行，仅仅是函数会停止执行。JavaScript将继续从调用函数的地方执行代码当声明函数时，把参数作为变量来声明

使用

根据返回值函数的语法，计算两个数字的乘积，并返回结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>返回值函数</title>
</head>
<body>
	<input type="submit" value="计算两数的乘积" onclick="alert(myFunction(3,6))">
	<script>
		function myFunction(x,y){
			return x*y;
		}
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_22

变量及作用域

概念

变量的作用域是指变量在程序中的有效范围，即在有效范围内可以使用该变量
JavaScript中，变量根据作用域的不同可以分为

全局变量
局部变量

全局变量和局部变量

全局变量是定义在所有函数之外的变量，作用范围是该变量定义后的所有代码
局部变量是使用var关键字声明并定义在函数体内的变量，只有在该函数中，且在该变量定义后的代码中，才可以使用这个变量

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>全局变量和局部变量</title>
</head>
<body>
	<script>
		var a="这是全局变量";
		function myFunction(){
			var b="这是局部变量";
			document.write(a+"<br>");
			document.write(b);
		}
		myFunction();
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_html_23

改变局部变量位置

由于局部变量b只作用于函数体，所以如果在函数之外打印局部变量b的值将会出现错误

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>局部变量错误使用</title>
</head>
<body>
	<script>
		var a="这是全局变量";
		function myFunction(){
			var b="这是局部变量";
			document.write(a+"<br>");
		}
		myFunction();
		document.write(b);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_24

变量的优先级

如果在函数体中定义了一个与全局变量同名的局部变量，那么该全局变量在函数体中将不起作用

使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变量的优先级</title>
</head>
<body>
	<script>
		var a="这是全局变量";
		function myFunction(){
			var a="这是局部变量";
			document.write(a);
		}
		myFunction();
	</script>
</body>
</html>

作用域链

概念

全局变量和局部变量的访问权限，其实是由作用域链决定的
每次进入一个新的执行环境，都会创建一个用于搜索变量和函数的作用域链。作用域链是函数被创建的作用域中对象的集合。其可以保证对执行环境有权访问的所有变量和函数的有序访问

工作原理

最前端始终是当前执行的代码所在环境的变量对象，下一个变量对象来自包含环境，下一个变量对象来自包含环境的包含环境，依次往上，直到全局执行环境的变量对象。如果在作用域链的顶端（全局）中仍然没有找到，则会报错

工作原理解释

作用域链概念及工作原理比较抽象，且不易理解，下面以案例来说明作用域链的工作原理

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作用域链</title>
</head>
<body>
	<script>
		var a=1;
		function f1(){
			var b=2;
			function f2(){
				var c=3;
				function f3(){
					var d=4;
					console.log(a);
					console.log(b);
					console.log(c);
					console.log(d);
					console.log(e);
				}
				f3();
			}
			f2();
		}
		f1();
	</script>
</body>
</html>

首先JavaScript引擎在最内层活动对象中（即f3()函数）查询变量 a、b、c 、d、e，但是从中只找到了变量d，并获取其值为4；然后沿着作用域链，在上一层活动对象中（即f2()函数）继续查找变量，找到了变量c，并获取其值为3；接着继续沿着作用域链继续向上查找，在f1()函数中找到了变量b，并获取其值为2；接着继续向上找，找到了全局变量a，并获取其值为1；但是在整个作用域链中并没有找到变量e，所以会报错“e is not defined”。

理解闭包的使用

在函数中，函数内部可以直接读取全局变量，但是在函数外部无法读取函数内的局部变量

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用闭包的原因</title>
</head>
<body>
	<script>
		//在函数内部读取全局变量
		var num1=1;
	　　function f1(){
	　　　　console.log(num1);
	　　}
	　　f1();   

		//在函数外部读取函数内的局部变量
		function f2(){
			var num2=2;
	　　}
		f2();
	　　console.log(num2);
	</script>
</body>
</html>

上述代码中，分别有两段代码，第一段是在f1()函数内部读取全局变量num1，第二段是在f2()函数外部读取函数内的局部变量num2。

结论
通过效果图可以发现，第一段代码在控制台输出了“1”，但是第二段代码报错了，原因就是在函数外部无法读取函数内的局部变量。

（3）抛出疑问
那么，在JavaScript中，如何在函数外部读取函数内的局部变量呢？

从外部读取局部变量

在函数的内部，再定义一个函数

<DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>从外部读取局部变量</title>
</head>
<body>
	<script>
		//在函数外部读取函数内的局部变量
		function f1(){
			var num1=1;
			function f2(){
				console.log(num1);
			}
			f2();
	　　}
		f1();
	</script>
</body>
</html>

在上述代码中，f2()函数被包括在f1()函数内部，这时f1()函数内部的所有局部变量，对f2()函数都是可见的。所以会在控制台中输出num1的值.

2）结论
这时，虽然可以在函数外部读取局部变量了，但是反过来不行，f2()函数内部的局部变量，对f1()函数就是不可见的。这就是JavaScript语言特有的“链式作用域”结构，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

闭包概念

从外部读取局部变量

既然f2()函数可以读取f1()函数中的局部变量，那么只要把f2()函数作为返回值，是不是可以在f1()函数外部读取它的内部变量了？

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>从外部读取局部变量</title>
</head>
<body>
	<script>
		//在函数外部读取函数内的局部变量
		function f1(){
			var num1=1;
			function f2(){
				console.log(num1);
			}
			return f2;
	　　}
		var result=f1();
		result();
	</script>
</body>
</html>

闭包用途

概念

闭包就是能够读取其他函数内部变量的函数
在JavaScript中，只有函数内部的子函数才能读取局部变量，所以闭包可以简单理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁

好处

可以读取函数内部的变量
让这些变量的值始终保持在内存中

闭包用途

变量的值终保持在内存中

通过修改上一示例代码来说明如何将变量的值始终保持在内存中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>闭包的用途</title>
</head>
<body>
	<script>
		//在函数外部读取函数内的局部变量
		var nAdd;
		function f1(){
			var num1=1;
			nAdd=function(){
	            num1+=1;
	        }
			function f2(){
				console.log(num1);
			}
			return f2;
	　　}
		var result=f1();
		result();
		nAdd();
		result();
	</script>
</body>
</html>

在使用闭包时，需要注意如下两点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
闭包会在父函数外部，改变父函数内部变量的值，所以要慎用闭包，不要随便改变父函数内部变量的值

JavaScript弹窗

BOM分类

浏览器对象模型分类

BOM可以对浏览器窗口进行访问和操作，具体如下：

对象名称	说明
window	窗口对象，可以用来控制当前窗口或打开新的窗口
screen	屏幕对象，获取屏幕相关信息
navigator	浏览器对象，可以判定用户所使用的浏览器
history	历史对象，可以用来前进或后退一个页面
location	地址对象，可以用来获取当前URL的信息
JavaScript 计时事件	在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
localStorage和SessionStorage	存储对象, 可以用来存储数据

JS弹窗

window对象方法

在JavaScript中，window对象可以用来控制当前窗口或打开新的窗口，其方法如下：

window.innerHeight：获取浏览器窗口的内部高度(包括滚动条)
window.innerWidth：获取浏览器窗口的内部宽度(包括滚动条)
window.open()：打开新窗口
window.close()：关闭当前窗口
window.moveTo()：移动当前窗口
window.resizeTo()：调整当前窗口的尺寸

在JavaScript中，window对象可以用来控制当前窗口或打开新的窗口，其方法如下：

window.innerHeight：获取浏览器窗口的内部高度(包括滚动条)
window.innerWidth：获取浏览器窗口的内部宽度(包括滚动条)
window.open()：打开新窗口
window.close()：关闭当前窗口
window.moveTo()：移动当前窗口
window.resizeTo()：调整当前窗口的尺寸

除此之外，window对象最常用的是JavaScript弹窗，即：

window.alert()：警告框
window.confirm()：确认框
window.prompt()：提示框

警告框

经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作

window.alert("sometext");

使用alert()方法实现当用户点击按钮弹出“你好，我是一个警告框！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>警告框</title>
</head>
<body>
	<input type="submit" value="提交" onclick="myFunction()">
	<script>
		function myFunction(){
			alert("你好，我是一个警告框！");
		}
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_25

警告框

经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作

window.alert("sometext");

使用alert()方法实现当用户点击按钮弹出“你好，我是一个警告框！”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>警告框</title>
</head>
<body>
	<input type="submit" value="提交" onclick="myFunction()">
	<script>
		function myFunction(){
			alert("你好，我是一个警告框！");
		}
	</script>
</body>
</html>

确认框

通常用于验证是否接受用户操作。当确认框弹出时，用户可以点击“确定”或者“取消”来确定用户操作，若用户点击“确定”，确认框返回true，若用户点击“取消”，确认框返回 false

window.confirm("sometext");

使用confirm() 方法实现当用户点击“确定”按钮时，页面中打印出“你点击了【确定】按钮！”，当用户点击“取消”按钮时，页面中打印出“你点击了【取消】按

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>确认框</title>
</head>
<body>
	<script>
		function myFunction(){
			var r=confirm("点击按钮！");
			if (r==true){
				document.write("你点击了【确定】按钮！");
			}
			else{
				document.write("你点击了【取消】按钮！");
			}
		}
		myFunction();
	</script>
</body>
</html>

提示框

经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击“确认”或“取消”按钮才能继续操作，若用户点击“确认”按钮，那么返回值为输入的值；若用户点击“取消”按钮，那么返回值为 null

window.prompt("sometext","defaultvalue");

使用prompt() 方法在页面中打印出自己的名字及问候语

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>提示框</title>
</head>
<body>
	<script>
		function myFunction(){
			var person=prompt("请输入你的名字","Marry");
			if (person!=null && person!=""){
			    document.write("你好" + person + "! 昨晚睡得好吗？");
			}
		}
		myFunction();
	</script>
</body>
</html>

计时事件

概念

使用JavaScript，可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件

分类

在JavaScript中，计时事件有如下四个方法：

setInterval()：间隔指定的毫秒数不停地执行指定的代码
clearInterval()：用于停止 setInterval() 方法执行的函数代码
setTimeout()：在指定的毫秒数后执行指定代码
clearTimeout()：用于停止执行setTimeout()方法的函数代码

setInterval()

用于间隔指定的毫秒数不停地执行指定的代码

window.setInterval("javascript function",milliseconds);

使用setInterval()方法实现点击“开始”按钮后每隔3秒弹出“你好”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setInterval()方法</title>
</head>
<body>
	<input type="submit" value="开始" onclick="start()">
	<script>
		function start(){
			setInterval(function(){
				alert("你好");
			},3000)
		}
	</script>
</body>
</html>

clearInterval()

用于停止 setInterval() 方法执行的函数代码

window.clearInterval(intervalVariable);

使用clearInterval()方法取消上一示例的setInterval()方法，使页面不再每隔3秒弹出“你好”的警告框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clearInterval()方法</title>
</head>
<body>
	<input type="submit" value="开始" onclick="start()">
	<input type="submit" value="停止" onclick="stop()">
	<script>
		var timer;
		function start(){
			timer=setInterval(function(){
				alert("你好");
			},3000)
		}
		function stop(){
			clearInterval(timer);
		}
	</script>
</body>
</html>

setTimeout()

用于暂停指定的毫秒数后执行指定的代码

window.setTimeout("javascript function", milliseconds);

修改第一个示例的代码，使其等待3秒，再弹出“你好”的警告框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>setTimeout()方法</title>
</head>
<body>
	<input type="submit" value="开始" onclick="start()">
	<script>
		function start(){
			setTimeout(function(){
				alert("你好");
			},3000)
		}
	</script>
</body>
</html>

clearTimeout()

用于停止执行setTimeout()方法的函数代码

window.clearTimeout(timeoutVariable);

修改上一示例，使页面在未弹出“你好”的警告框之前停止执行setTimeout()方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clearTimeout()方法</title>
</head>
<body>
	<input type="submit" value="开始" onclick="start()">
	<input type="submit" value="停止" onclick="stop()">
	<script>
		var timer;
		function start(){
			timer=setTimeout(function(){
				alert("你好");
			},3000)
		}
		function stop(){
			clearTimeout(timer);
		}
	</script>
</body>
</html>

DOM的常用方法

方法

在JavaScript中，有三种方法可以查找HTML元素，具体如下：

document.getElementById：通过id查找HTML元素
document.getElementsByTagName：通过标签名查找HTML元素
document.getElementsByClassName：通过类名查找HTML元素

查找元素

使用

在网页中创建标题、段落和超链接三个标签，并为标题添加id属性，超链接添加class属性。再通过JavaScript操作HTML元素，使用户点击不同标签弹出不同的话术

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查找HTML元素</title>
</head>
<body>
	<h3 id="title">我是一个有id属性的标题</h3>
	<p>我是段落标签</p>
	<a href="#" class="intro">我是一个带有class属性的超链接</a>
	<script>
		// 通过id查找HTML元素
		var myTitle=document.getElementById("title");
		myTitle.onclick=function(){
			alert("恭喜你，通过id查找到了标题标签");
		}

		//通过标签名查找HTML元素
		var myp=document.getElementsByTagName("p")[0];
		myp.onclick=function(){
			alert("恭喜你，通过标签名查找到了段落标签");
		}

		//通过类名查找HTML元素
		var myIntro=document.getElementsByClassName("intro")[0];
		myIntro.onclick=function(){
			alert("恭喜你，通过类名查找到了超链接标签");
		}
	</script>
</body>
</html>

方法

在JavaScript中，有三种方法可以改变HTML，具体如下：

document.write()：用于改变HTML输出流
innerHTML：用于改变HTML内容
对象.attribute=新属性值：用于改变HTML属性

改变HTML内容

innerHTML用于改变HTML内容，其语法如下

document.getElementById(id).innerHTML=新的HTML;

根据语法改变段落标签中的文本

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>innerHTML</title>
</head>
<body>
	<p id="p1">Hello World!</p>
	<script>
		document.getElementById("p1").innerHTML="新文本!";
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_26

改变HTML属性

在JavaScript中，如下语法用于改变HTML元素的属性

document.getElementById(id).attribute=新属性值;

根据语法将图像标签的路径改变一下，使其换张图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改变HTML属性</title>
</head>
<body>
	<img src="images/1.jpg" alt="" width="200" height="150">
	<img id="pic" src="images/1.jpg" alt="" width="200" height="150">
	<script>
		document.getElementById("pic").src="images/2.jpg";
	</script>
</body>
</html>

改变HTML样式

在JavaScript中，如需改变 HTML 元素的样式，可以使用如下语法

document.getElementById(id).style.property=新样式;

根据语法将段落标签的文本颜色变为红色，字体大小变为32像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>改变HTML样式</title>
</head>
<body>
	<p id="p1">我是段落一</p>
	<p id="p2">我是段落二</p>
	<script>
		document.getElementById("p2").style.color="red";
		document.getElementById("p2").style.fontSize="32px";
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_27

DOM节点关系及属性

DOM节点

在JavaScript中，DOM可以将把整个页面规划成由节点层级构成的文档

<html>
	<head>
    	<title>Sample Page</title>
	</head>
	<body>
		<p>hello world!</p>
	</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_28

结论

通过上页图片可以总结出，HTML 文档中的所有内容都是节点，即：

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

层级关系

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

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

分类

在JavaScript中，访问节点属性如下表所示

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

使用

通过无序列表搭建春夏秋天标题及相关成语，并通过节点属性访问各个内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>节点属性的使用</title>
</head>
<body>
	<div id="list"><h1>四季</h1>
		<ul>
			<li><h3>春天</h3><p>相关成语：春暖花开、万物复苏</p></li>
			<li><h3>夏天</h3><p>相关成语：夏日炎炎、挥汗如雨</p></li>
			<li><h3>秋天</h3><p>相关成语：落叶知秋、秋风习习</p></li>
			<li><h3>冬天</h3><p>相关成语：鹅毛大雪、天寒地冻</p></li>
		</ul><a href="#">查看更多成语>></a></div>
	<script>
		var list=document.getElementById("list");
		//获取list的父节点
		console.log(list.parentNode);

		//获取list下的子节点 
		console.log(list.childNodes);

		//获得list下的第一个子节点
		console.log(list.firstChild);

		//获得list下的最后一个子节点
		console.log(list.lastChild);

		//获取list下的第一个子节点相邻的下一个同胞的下一个同胞
		console.log(list.firstChild.nextSibling.nextSibling);

		//获取list下的最后一个子节点相邻的上一个同胞
		console.log(list.lastChild.previousSibling);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_29

父节点（list.parentNode）

通过HTML代码可以看出，id为list的div元素父节点是body，所以控制台将打印出body的所有内容

子节点（list.childNodes）

通过HTML代码可以看出，id为list的div元素子节点有h1标题、空格（注意，空格，注释，回车都属于节点）、ul列表、超链接，所以控制台将打印出四个子节点

第一个子节点（list.firstChild）

通过HTML代码可以看出，id为list的div元素第一个子节点是h1标题，所以控制台将打印出h1标题的内容

最后一个子节点（list.lastChild）

通过HTML代码可以看出，id为list的div元素最后一个子节点是超链接，所以控制台将打印出a标签的内容

第一个子节点相邻的下一个同胞的下一个同胞（list.firstChild.nextSibling.nextSibling）

通过HTML代码可以看出，id为list的div元素第一个子节点是h1标题，h1标题的下一同胞是空格，空格的下一同胞是ul列表，所以控制台将打印出ul列表的内容

最后一个子节点相邻的上一个同胞（list.lastChild.previousSibling）

通过HTML代码可以看出，id为list的div元素最后一个子节点是超链接，超链接的上一个同胞是ul列表，所以控制台将打印出ul列表的内容

DOM节点操作

方法

在JavaScript中，可以动态地去操作节点，具体方法如下表所示

名称	描述
document.createElement(“元素名”)	创建元素节点
document.createTextNode(“文本”)	创建文本节点
A.appendChild( B)	把B节点添加至A节点的末尾
父节点.removeChild(子节点)	删除指定的节点
父节点.replaceChild( newNode, oldNode)	用其他的节点替换指定的节点

创建并添加节点

如果想要创建新的HTML元素（节点），就需要先创建一个元素，然后再将创建好的元素添加至指定的位置
下面使用DOM节点操作方法创建一个新的段落，并将新段落添加至已存在元素中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>创建并添加节点</title>
</head>
<body>
	<div id="box">
		<p>我是段落1</p>
		<p>我是段落2</p>
	</div>
	<script>
		var newP=document.createElement("p");
		var text=document.createTextNode("我是新创建的段落3");
		newP.appendChild(text);
		var box=document.getElementById('box');
		box.appendChild(newP);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_30

步骤1：使用“document.createElement()”方法创建了一个<p>元素
步骤2：使用“document.createTextNode()”方法为<p>元素创建了新的文本节点
步骤3：使用“appendChild()”方法将新的文本节点添加到<p>元素中
步骤4：想将<p>元素放置在id为“box”的<div>元素中，所以要先获取<div>元素
步骤5：再次使用“appendChild()”方法将<p>元素添加到<div>元素中

删除节点

将上一示例中的第一个<p>元素删除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>删除节点</title>
</head>
<body>
	<div id="box">
		<p>我是段落1</p>
		<p>我是段落2</p>
	</div>
	<script>
		var box=document.getElementById('box');
		var p1=document.getElementsByTagName('p')[0];
		box.removeChild(p1);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_JavaScript介绍架构图_31

替换节点

修改上面示例，将第一个<p>元素替换为<h3>元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>替换节点</title>
</head>
<body>
	<div id="box">
		<p>我是段落1</p>
		<p>我是段落2</p>
	</div>
	<script>
		var newH3=document.createElement("h3");
		var text=document.createTextNode("我是替换的h3元素");
		newH3.appendChild(text);
		var box=document.getElementById('box');
		var p1=document.getElementsByTagName('p')[0];
		box.replaceChild(newH3,p1);
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_32

JS面向对象

通过JavaScript有两种不同的方式创建自己的新对象，即：

使用Object定义并创建对象的实例
使用对象字面量方式创建对象

Object方式

语法

通过Object引用类型的实例创建的对象，它们都会从Object.prototype继承属性和方法

new Object()

使用

创建一个用户对象，并向其添加两个属性和一个方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Object方式</title>
</head>
<body>
<script>
    //使用Object方式创建用户对象
    var user = new Object();
    user.name = "张三";
    user.pwd = "123456";
    user.show=function(){
        document.write("用户名："+this.name+"<br>"+"密码："+this.pwd);
    }
    user.show();
</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_33

对象字面量

语法

对象字面量是定义对象的一种简写形式，为函数传递大量可选参数时使用

使用

修改上一示例，将Object创建对象的方式改为对象字面量的方式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>对象自面量</title>
</head>
<body>
<script>
    //使用对象自面量方式创建用户对象
    var user = {
        name : "张三",
        pwd : "123456",
        show:function(){
            document.write("用户名："+this.name+"<br>"+"密码："+this.pwd);
        }
    }
    user.show();
</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_JavaScript介绍架构图_34

提问

提升需求，此时想要创建多个对象，应该如何实现呢？

解决办法

简单粗暴地方式，直接复制粘贴多个

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>创建多个对象</title>
</head>
<body>
<script>
    //对象1
    var user = {
        name : "张三",
        pwd : "123456",
        show:function(){
            document.write("用户名："+this.name+"<br>"+"密码："+this.pwd);
        }
    }
    user.show();

    //对象2
    var user2={};
    user2.name="李四";
    user2.pwd="654321";
    user2.show=function(){
        document.write("<br>"+"用户名："+this.name+"<br>"+"密码："+this.pwd+"<br>")
    }
    user2.show();

    //对象3
    var user3={};
    user3.name="王五";
    user3.pwd="987654";
    user3.show=function(){
        document.write("用户名："+this.name+"<br>"+"密码："+this.pwd)
    }
    user3.show();
</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_css_35

虽然可以创建多个对象，但是代码量冗杂且重复

构造函数

在JavaScript中，用new关键字来调用的函数，称为构造函数。构造函数首字母一般大写

使用

把这些属性当做构造函数的参数传递进去，然后再通过 new 关键字来创建对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>构造函数创建对象</title>
</head>
<body>
	<script>
		//构造函数方式创建用户
	    function User(name,pwd){
	        this.name = name;
	        this.pwd = pwd;

	        this.show=function(){
	            document.write("用户名："+this.name+"<br>"+"密码："+this.pwd+"<br>");
	        }
	    }
	    var user1 = new User("张三","123456");
	    var user2 = new User("李四","654321");
	    var user3 = new User("王五","987654");
	    user1.show();
	    user2.show();
	    user3.show();
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_javascript_36

理解原型

构造函数

如果通过new操作符来调用的，就是构造函数，如果没有通过new操作符来调用的，就是普通函数，下面以构造函数为例，即：

var person1 = new Person('Mike',10);

原型

函数Person（对象）有个属性prototype（指针）指向原型对象。 Person.prototype（原型对象，实质也是对象），它有个属性constructor（指针），又指向Person函数对象，代码解释如下：

console.log(Person === Person.prototype.constructor); //true

实例对象

实例对象person1有个属性_proto_指向原型对象，实例对象可以通过这个属性访问原型对象上的属性和方法，即：

Perons.prototype._proto_ == person1._proto_

在JavaScript中，每个函数都有一个prototype（原型）属性，其指向一个对象，这个对象可以让所有对象实例共享它所包含的属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原型</title>
</head>
<body>
	<script>
		//构造函数
		function Person(name, age) {
		    this.name = name;
		    this.age = age;
		}
		//在原型对象中添加属性或者方法
		Person.prototype.sex = '男'; 
		var person1 = new Person('Mike',10); 
		var person2 = new Person('Alice',20);
		//只给person2设置性别
		person2.sex = '女';
		console.log(person1.sex)  // '男'
		console.log(person2.sex)  //'女' 
	</script>
</body>
</html>

混合方式创建对象

在JavaScript中，可以通过构造函数结合原型的方式创建对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>混合方式创建对象</title>
</head>
<body>
<script>
    //构造函数模式创建用户
    function User(name,pwd){
        this.name = name;
        this.pwd = pwd;
    }

    //原型：将对象实例的信息添加到原型对象中
    User.prototype.show=function(){
        document.write("用户名："+this.name+"<br>"+"密码："+this.pwd+"<br>");
    };

    //调用构造函数的时候，构造函数默认创建一个新对象，并将属性和方法赋值给新对象，最后将新对象返回
    var user1 = new User("张三","123456");
    var user2 = new User("李四","654321");

    user1.show();
    user2.show();
</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_JavaScript介绍架构图_37

继承

分类

在JavaScript中，实现继承的方法有如下六种：

原型链继承
借用构造函数
组合继承
原型式继承
寄生式继承
寄生组合式继承

原型链继承

核心点在于子类的原型是父类的实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原型链继承</title>
</head>
<body>
	<script>
		//定义一个父类Person
		function Person(name){
		    this.name=name;
		}
		Person.prototype.age=25;
		Person.prototype.show=function(){　　
			console.log(this.name);
		}
		
		//子类的原型是父类的实例
		function subType(){}
		subType.prototype=new Person();

		// 测试
		var p1=new subType();
		console.log(p1.name); //undefined，可以访问，但是name未初始化所以为undefined
		console.log(p1.age); //25
	</script>
</body>
</html>

虽然实现了继承，但是存在一定的问题，即：

原型中的属性和方法，在实例中是共享的。构造函数中的属性和方法在实例中不共享。这说明，父类中的所有属性，在子类的实例中都将共享，假如父类有一个数组，那么子类的实例将共享这个属性，当有一个子类实例改变这个数组的项时，所有的实例中的这个属性都会随之改变
创建子类实例时，不能向超类型构造函数中传递参数

借用构造函数

在子类构造函数中调用父类构造函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>借用构造函数</title>
</head>
<body>
	<script>
		//定义一个父类Person
		function Person(name){
		    this.name=name;
		}
		Person.prototype.age=25;
		Person.prototype.show=function(){　　
			console.log(this.name);
		}

		//在子类构造函数中调用父类构造函数
		function subType(name){
		    Person.call(this,name);
		}

		// 测试
		var p2=new subPerson("zhangsan");
		console.log(p2.name);    //"zhangsan"
		console.log(p2.age);    //undefined
	</script>
</body>
</html>

解决了原型链继承的问题，所有的子类实例都将不共享属性和方法，互不影响，并且可以传值。但是此方法也存在问题，即：

构造函数中的方法不能共享复用，每个实例都将拥有相同的方法
父类的原型中的方法和属性在子类中不可见

组合继承

即组合原型链方法和借用构造函数方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组合继承</title>
</head>
<body>
	<script>
		//定义一个父类Person
		function Person(name){
		    this.name=name;
		}
		Person.prototype.age=25;
		Person.prototype.show=function(){　　
			console.log(this.name);
		}

		//组合原型链方法和借用构造函数方法
		function subType(name){
		    Person.call(this,name);
		}
		subType.prototype=new Person();

		//测试
		var p3=new subType("lisi");
		console.log(p3.name);    //"lisi"
		p3.show();               //"lisi"
		console.log(p3.age);    //25
	</script>
</body>
</html>

既可以继承父类原型中的属性和方法，又能将父类的构造函数放入子类构造函数中

jQuery

什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，它是由John Resig于2006年创建的。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

jQuery特点

快速获取文档元素
提供漂亮的页面动态效果
创建AJAX无刷新网页
提供对JavaScript语言的增强
增强的事件处理
更改网页内容

jQuery下载

从官方网站（http://jquery.com）下载

浏览器地址栏中输入“http://jquery.com”，并按下“Enter”键，将进入jQuery的首页
点击图中的“Download jQuery”按钮即可选择需下载的版本。目前，jQuery的最新版本是jQuery 3.5.1

注意

jQuery 2.0版本以上不再支持IE 6/7/8，所以版本最新并不代表最好，建议大家根据项目需求选择合适的版本

jQuery下载

从微软、百度、新浪等引用 jQuery

微软jQuery压缩版引用地址

https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js

百度jQuery压缩版引用地址

https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

新浪jQuery压缩版引用地址

https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js

jQuery下载

以“微软jQuery压缩版引用地址”为例，介绍使用方式

在浏览器地址栏中输入“https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js”，即打开微软jQuery压缩版引用地址

jQuery语法

在jQuery中，可以使用如下语法实现文档就绪后执行jQuery方法

$(document).ready(function(){ // 开始写 jQuery 代码... });

简洁写法

$(function(){
 	// 开始写 jQuery 代码... 
});

在页面中引用jQuery库，并弹出“开始学习jQuery啦！”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery基本语法</title>
</head>
<body>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function() {
	        alert("开始学习jQuery啦！");
	    });
	</script>
</body>
</html>

选择器分类

jQuery选择器允许对HTML元素组或单个元素进行操作，其基于元素的 id、类、类型、属性、属性值等选择HTML 元素（可参照CSS选择器）。需要注意的是，在jQuery中所有选择器都以美元符号开头，即“$()”

基本选择器

基本选择器在实际应用中比较广泛，建议重点掌握jQuery的基本选择器，它是其他类型选择器的基础，是jQuery选择器中最为重要的部分

名称	选择器	描述	示例
ID选择器	#id	通过HTML元素的id属性选取指定的元素	$("#test")表示选择id为"test" 属性的元素
类选择器	.class	通过HTML元素的class属性选取指定的元素	$(".test")表示选择class为"test" 属性的元素
标签选择器	element	通过元素名选取元素	$("p")表示选择所有的p元素
复合选择器	selector1,selector2	将多个选择器组合在一起	$("div,p")表示选择所有div元素和p元素
通配符选择器	*	选择所有元素	$("*")表示选择所有元素

层级选择器

通过DOM 元素之间的层次关系来获取元素

名称	选择器	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )表示选择#menu下的span元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )表示选择#menu的子元素span
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )表示选择紧邻h2元素之后的同辈元素dl
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )表示选择h2元素之后所有的同辈元素dl

过滤选择器——简单过滤器

简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器

过滤器	描述	示例
:first	匹配找到的第一个元素	$("tr:first " )表示选择表格的第一行
:last	匹配找到的最后一个元素	$("tr:last" )表示选择表格的最后一行
:even	匹配所有索引值为偶数的元素	$("tr:even" )表示选择索引值为偶数的行
:odd	匹配所有索引值为奇数的元素	$("tr:odd" )表示选择索引值为奇数的行
:eq(index)	匹配一个给定索引值的元素	$("div:eq(1) " )表示选择第2个div元素
:gt(index)	匹配所有大于给定索引值的元素	$("div:gt(0) " )表示选择索引大于0的div元素
:lt(index)	匹配所有小于给定索引值的元素	$("div:lt(2) " )表示选择索引小于2的div元素
:header	匹配如h1、h2、h3......之类的标题元素	$(":header" )表示选择全部的标题元素
:not(selector)	去除所有与给定选择器匹配的元素	$("input:not(:checked) " )表示选择没有被选中的input元素
:animated	匹配所有正在执行动画效果的元素	$(":animated " )表示选择所有正在执行动画效果的元素

过滤选择器——内容过滤器

内容过滤器是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选

过滤器	描述	示例
:contains(text)	匹配包含给定文本的元素	$(":contains("百度")")表示选择含有“百度”文本的元素
:empty	匹配所有不包含子元素或者文本的空元素	$("td:empty" )表示选择不包含子元素或者文本的单元格
:has(selector)	匹配含有选择器所匹配元素的元素	$("td:has(p)" )表示选择含有p元素的单元格
:parent	匹配含有子元素或者文本的元素	$("td:parent" )表示选择含有子元素或者文本的单元格

过滤选择器——可见性过滤器

过滤器

描述

示例

:visible

选取所有可见的元素

$(":visible" )表示选择所有可见的元素

:hidden

选取所有隐藏的元素

$(":hidden" )表示选择所有隐藏的元素

通过表单元素的状态属性（例如选择、不可用等状态）匹配元素

过滤器	描述	示例
:checked	匹配所有被选中元素	$("input:checked" )表示选择checked属性为checked的input元素
:disabled	匹配所有不可用元素	$("input:disabled" )表示选择disabled属性为disabled的input元素
:enabled	匹配所有可用元素	$("input:enabled" )表示选择enabled属性为enabled的input元素
:selected	匹配所有选中的option元素	$("input:selected" )表示选择selected元素中被选中的option元素

筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定

过滤器	描述	示例
:first-child	匹配所有给定元素的第一个子元素	$("ul li:first-child" )表示选择ul元素中的第一个子元素li
:last-child	匹配所有给定元素的最后一个子元素	$("ul li:last-child" )表示选择ul元素中的最后一个子元素li
:only-child	匹配元素中唯一的子元素	$("ul li:only-child" )表示选择只含有一个li元素的ul元素中的li
:nth-child()	匹配其父元素下的第N个子元素	$("ul li:nth-child(3)" )表示选择ul元素中第3个子元素li

通过HTML元素的属性来选择元素

选择器	描述	示例
[attribute]	匹配包含给定属性的元素	$("div[name]" )表示选择含有name属性的div元素
[attribute=value]	匹配给定的属性是某个特定值的元素	$("div[name='test']" )表示选择name属性是test的div元素
[attribute^=value]	匹配给定属性是以某些特定值开始的元素	$(" [href^='en']" )表示选择href属性值以en开头的元素
[attribute$=value]	匹配给定属性是以某些特定值结尾的元素	$(" [href$='.jpg']" )表示选择href属性值以.jpg结尾的元素
[attribute*=value]	匹配给定属性是以包含某些值的元素	$(" [href* ='txt']" )表示选择href属性值中含有txt的元素

匹配经常在表单中出现的元素，但是匹配的元素不一定在表单中

选择器	描述	示例
:input	匹配所有input元素	$(":input") //表示选择所有input元素
:checkbox	匹配所有的复选框	$(":checkbox") //表示选择所有的复选框
:file	匹配所有的文件域	$(":file") //表示选择所有的文件域
:hidden	匹配所有的不可见元素，或者type为hidden的元素	$(":hidden") //表示选择所有的隐藏域
:password	匹配所有密码域	$(":password") //表示选择所有密码域
:radio	匹配所有单选按钮	$(":radio") //表示选择所有单选按钮
:submit	匹配所有的提交按钮，即type="submit"的input元素	$(":submit") //表示选择所有的提交按钮
:text	匹配所有的单行文本框	$(":text") //表示选择所有的单行文本框

jQuery选择器的使用

以新闻列表为例主要演示一下如何在jQuery中使用选择器

<DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表</title>
	<style>
		*{padding:0;margin:0;}
		html,body{font-family:"微软雅黑";}
		.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}
		ul{list-style:none;}
		li{padding-left:15px;line-height:40px;color:#000;border-bottom:1px #aaaaaa dashed;}
		h2{font-size:16px;padding-left:20px;line-height:40px;}
	</style>
</head>
<body>
	<div class="contain">
		<h2>新闻列表</h2>
		<ul>
			<li class="li1"> 现实版樊胜美家属</li>
			<li> 给自己宠物修毛的后果</li>
			<li class="li3"> 干饭人必备速瘦肚腩操 </li>
			<li> 文件传输助手成职场人私密树洞</li>
			<li> 鸡肉快乐吃法</li>
			<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
		</ul>
	</div>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		    //用过滤选择器给h2设置背景颜色和字体颜色
		    $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
		    //用层级选择器设置所有li字体大小
		    $(".contain ul li").css("fontSize","12px");
		    //用过滤选择器设置偶数行背景颜色
		    $(".contain li:even").css("background","#f0f0f0");
		    //用过滤选择器设置奇数行背景颜色
		    $(".contain li:odd").css("background","#cccccc");
		    //用属性选择器设置第一个li字体颜色
		    $("li[class='li1']").css("color","red");
		    //用基本选择器设置第三个li背景颜色
		    $(".li3").css("background","#02acaa");
		     //用过滤选择器设置最后一个li没有边框
		    $(".contain li:last").css("border","none");
		});
	</script>
</body>
</html>

JavaScript介绍架构图 javascript结构_代码块_38

以新闻列表为例主要演示一下如何在jQuery中使用选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表</title>
	<style>
		*{padding:0;margin:0;}
		html,body{font-family:"微软雅黑";}
		.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}
		ul{list-style:none;}
		li{padding-left:15px;line-height:40px;color:#000;border-bottom:1px #aaaaaa dashed;}
		h2{font-size:16px;padding-left:20px;line-height:40px;}
	</style>
</head>
<body>
	<div class="contain">
		<h2>新闻列表</h2>
		<ul>
			<li class="li1"> 现实版樊胜美家属</li>
			<li> 给自己宠物修毛的后果</li>
			<li class="li3"> 干饭人必备速瘦肚腩操 </li>
			<li> 文件传输助手成职场人私密树洞</li>
			<li> 鸡肉快乐吃法</li>
			<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
		</ul>
	</div>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		    //用过滤选择器给h2设置背景颜色和字体颜色
		    $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
		    //用层级选择器设置所有li字体大小
		    $(".contain ul li").css("fontSize","12px");
		    //用过滤选择器设置偶数行背景颜色
		    $(".contain li:even").css("background","#f0f0f0");
		    //用过滤选择器设置奇数行背景颜色
		    $(".contain li:odd").css("background","#cccccc");
		    //用属性选择器设置第一个li字体颜色
		    $("li[class='li1']").css("color","red");
		    //用基本选择器设置第三个li背景颜色
		    $(".li3").css("background","#02acaa");
		     //用过滤选择器设置最后一个li没有边框
		    $(".contain li:last").css("border","none");
		});
	</script>
</body>
</html>

jQuery事件

jQuery中常用的基础事件有鼠标事件、键盘事件、表单事件、文档/窗口事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseover	keyup	focus	scroll
mouseout		blur	unload
hover

jQuery事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件
如给p元素绑定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件，可以通过一个事件函数实现：

$("p").click(function(){ 
	// 动作触发后执行的代码!! 
});

使用

根据jQuery事件语法，再结合表单事件，实现当input元素获得焦点时，表单背景颜色为灰色；当input元素失去焦点时，表单背景颜色为白色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery事件语法和使用</title>
</head>
<body>
	<p>姓名：<input type="text"></p>
	<p>密码：<input type="text"></p>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		  $("input").focus(function(){
		    $(this).css("background-color","#cccccc");
		  });
		  $("input").blur(function(){
		    $(this).css("background-color","#ffffff");
		  });
		});
	</script>
</body>
</html>

复合事件

在jQuery中，hover()方法是鼠标事件，也是复合事件，其用于模拟鼠标光标悬停。当鼠标移动到元素上时，会触发指定的第一个函数；当鼠标移出这个元素时，会触发指定的第二个函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hover( )方法</title>
	<style>
		#box{
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		    $("#box").hover(
			    function(){
			        alert("你进入了div！");
			    },
			    function(){
			        alert("拜拜！现在你离开了div！");
			    }
			);
		});
	</script>
</body>
</html>

实现隐藏和显示效果

通过jQuery可以使用hide()和show()方法来隐藏和显示HTML元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>隐藏和显示元素</title>
	<style>
		div{
			width:100px;
			height: 100px;
			background: red;
			color: #fff;
		}
	</style>
</head>
<body>
	<div>我会隐藏，也会显示哦！</div>
	<input type="submit" value="隐藏" id="hide">
	<input type="submit" value="显示" id="show">
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		  $("#hide").click(function(){
		    $("div").hide();
		  });
		  $("#show").click(function(){
		    $("div").show();
		  });
		});
	</script>
</body>
</html>

带有参数-语法

在jQuery中，还可以规定元素隐藏和显示的速度及回调函数，其语法如下

//隐藏
$(selector).hide(speed,callback);

//显示
$(selector).show(speed,callback);

带有参数-使用

根据语法在上一示例的基础上给div元素设置带有参数的隐藏和显示效果，并使用回调函数，使隐藏或显示完成后，弹出“hide()方法已完成！”或“show()方法已完成！”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>隐藏和显示元素-带有参数</title>
	<style>
		div{
			width:100px;
			height: 100px;
			background: red;
			color: #fff;
		}
	</style>
</head>
<body>
	<div>我会隐藏，也会显示哦！</div>
	<input type="submit" value="隐藏" id="hide">
	<input type="submit" value="显示" id="show">
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		  $("#hide").click(function(){
		    $("div").hide(1000,function(){
		    	alert("hide()方法已完成！");
		    });
		  });
		  $("#show").click(function(){
		    $("div").show(2000,function(){
		    	alert("show()方法已完成！");
		    });
		  });
		});
	</script>
</body>
</html>

通过jQuery可以使用toggle()方法来切换hide()和show()方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>toggle()方法的使用</title>
	<style>
		div{
			width:100px;
			height: 100px;
			background: red;
			color: #fff;
		}
	</style>
</head>
<body>
	<div>我会隐藏，也会显示哦！</div>
	<input type="submit" value="隐藏或显示" id="btn">
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		  $("#btn").click(function(){
		    $("div").toggle();
		  });
		});
	</script>
</body>
</html>

animate()方法

语法

在jQuery中，animate()方法用于创建自定义动画

$(selector).animate({params},speed,callback);

参数

必需的params参数用于定义形成动画的CSS属性
可选的speed参数规定效果的时长。它可以取值为“slow”、“fast”或毫秒
可选的callback参数是动画完成后所执行的函数名称

使用

实现div元素距离左边有200像素，即元素需要向右移动200像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animate()方法的使用</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background: red;
			position: absolute;
		}
	</style>
</head>
<body>
	<input type="submit" value="开始动画" id="btn">
	<div></div>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		  $("#btn").click(function(){
		    $("div").animate({left:'200px'});
		  });
		});
	</script>
</body>
</html>

操作多个属性

修改上一示例代码，使div元素不仅距离左边有200像素，还改变宽高为200像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>操作多个属性</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background: red;
			position: absolute;
		}
	</style>
</head>
<body>
	<input type="submit" value="开始动画" id="btn">
	<div></div>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		  $("#btn").click(function(){
		    $("div").animate({
			    left:'200px',
			    width:'200px',
			    height:'200px'
			  });
		  });
		});
	</script>
</body>
</html>

stop()方法

jQuery的stop()方法用于在动画完成之前，停止动画或效果

$(selector).stop(stopAll,goToEnd);

参数

可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行
可选的goToEnd参数规定是否立即完成当前动画。默认是 false
实现在上一示例完成动画之前点击“停止动画”按钮，使动画停止下来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>stop()方法的使用</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background: red;
			position: absolute;
		}
	</style>
</head>
<body>
	<input type="submit" value="开始动画" id="btn">
	<input type="submit" value="停止动画" id="btnStop">
	<div></div>
	<script src="js/jquery-1.9.0.min.js"></script>
	<script>
		$(document).ready(function(){
		  $("#btn").click(function(){
		    $("div").animate({
			    left:'200px',
			    width:'200px',
			    height:'200px'
			  },5000);
		  });
		  $("#btnStop").click(function(){
		    $("div").stop();
		  });
		});
	</script>
</body>
</html>

jQuery中的插件

jQuery UI

以jQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序

全屏滚动插件fullPage.js

fullPage.js是一个基于jQuery的插件，能够很方便、很轻松的制作出全屏网站。它主要功能有：支持鼠标滚动、支持前进后退和键盘控制、支持手机、平板触摸事件、支持CSS3动画等等

验证插件validate.js

Validate是基于jQuery的一款轻量级表单验证插件，其内置丰富的验证规则，还有灵活的自定义规则接口，满足应用程序各种需求

jQuery Growl插件

jQuery Growl插件（消息提醒）允许很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击“确定”按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息

轮播图插件Swiper .js

Swiper.js是一个开源、免费、强大的触摸滑动插件，其面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果

下载

登录Swiper官网“https://www.swiper.com.cn/”，选择“获取Swiper”中的“下载Swiper”
接着选择最新版本下载即可
步骤1：首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="css/swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="js/swiper-bundle.min.js"></script>
    ...
</body>
</html>

步骤2：编写html代码如下：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

步骤3：初始化Swiper代码：

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>

根据上面的三个步骤，实现一个带有分页器及前进后退按钮的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>轮播图插件的使用</title>
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <style>
    html,body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img{
      width: 800px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/nature-1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/nature-2.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/nature-3.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/nature-4.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/nature-5.jpg" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <script src="js/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。