轮播图
- 常位于首页，用作活动推广的大图，其可以自动播放，点击左右切换按钮播放，也可以点击图片上的小圆点播放
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> 
基本结构
- 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>
使用<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>
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运算符可以用作赋值，比较值，执行算术等，常用的运算符如下：
- 算术运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
算术运算符
概念
- 算术运算符对数值（文字或变量）执行算术运算，常用的算术运算符如下
- +：加法
- -：减法
- *：乘法
- /：除法
- %：余数
- ++：自增
- --：自减
- 声明几个变量，并使用算术运算符计算结果
<!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 变量赋值，常用的赋值运算符如下
- =：向变量赋值
- += 向变量添加值
- -= 从变量中减去一个值
- *= 相乘变量
- /= 对变量相除
- %= 把余数赋值给变量
- 声明几个变量，并使用赋值运算符计算结果
<!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>
比较运算符
概念
- 比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等，返回值是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>
逻辑运算符
- 逻辑运算符用于判定变量或值之间的逻辑，常用的逻辑运算符如下：
- &&（和）：如果两个表达式都为 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> 
使用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>
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> 
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>
使用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>
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 支持不同类型的循环，具体如下
- 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> 
- 语句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>
- 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>
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>
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> 
- 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>
JS
定义函数的两种方式
- 在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>
概念
- 在调用函数时，可以向函数传递值，这些值被称为参数。参数的数量可以是多个，它们之间由逗号分隔
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>
- 编码时，经常会希望函数将值返回调用它的地方，此时，就需要通过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中，变量根据作用域的不同可以分为
- 全局变量
- 局部变量
全局变量和局部变量
- 全局变量是定义在所有函数之外的变量，作用范围是该变量定义后的所有代码
- 局部变量是使用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>
改变局部变量位置
- 由于局部变量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>
变量的优先级
- 如果在函数体中定义了一个与全局变量同名的局部变量，那么该全局变量在函数体中将不起作用
使用
<!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>
警告框
- 经常用于确保用户可以得到某些信息，当警告框出现后，用户需要点击确定按钮才能继续进行操作
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> 
改变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>
DOM节点关系及属性
DOM节点
- 在JavaScript中，DOM可以将把整个页面规划成由节点层级构成的文档
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>
结论
- 通过上页图片可以总结出，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>
- 父节点（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> 
- 步骤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>
-
替换节点
- 修改上面示例，将第一个<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>
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>
对象字面量
语法
- 对象字面量是定义对象的一种简写形式，为函数传递大量可选参数时使用
使用
- 修改上一示例，将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>
提问
- 提升需求，此时想要创建多个对象，应该如何实现呢？
解决办法
- 简单粗暴地方式，直接复制粘贴多个
<!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中，用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> 
理解原型
构造函数
- 如果通过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中，实现继承的方法有如下六种：
- 原型链继承
- 借用构造函数
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承
原型链继承
- 核心点在于子类的原型是父类的实例
<!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下载
- 以“微软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> 
- 以新闻列表为例主要演示一下如何在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>
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
