JavaWeb（4）之JavaScript

最新推荐文章于 2022-09-28 20:23:17 发布

A.夕阳

最新推荐文章于 2022-09-28 20:23:17 发布

阅读量500

点赞数

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43581078/article/details/105351683

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JavaScript概述

JavaScript是什么？有什么用？

HTML:就是用来写网页的。人的身体。

CSS:就是用来美化页面的。人的衣服。

JavaScript:前端大脑、灵魂。人的大脑、灵魂。

JavaScript是WEB上强大的脚本语言。

脚本语言:无法独立执行。必须嵌入到其他语言中，结合使用。直接被浏览器解析执行。

Java编程语言:独立写程序，独立运行。编译-----执行。

作用:控制页面特效展示。
例如:
JS可以对HTML元素进行动态控制

JS可以对表单项进行校验。

JS可以控制CSS的样式;。

JavaScript入门案例

案例将一段java代码利用JavaScript写出来。

java:

int a=10;
int b=20;
int temo=a+b;
System.out.println(temp)

JavaScript：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			// int a=10;
			var a =10;
			
			// int b=20;
			var b =20;
			
			// int temo=a+b;
			var temp=a+b;
			
			// System.out.println(temp)
			alert(temp)
			
		</script>
	</head>
	<body>
		
	</body>
</html>

运行结果：
运行后将结果输出到了页面，并提示了出来。
在这里插入图片描述

JavaScript的语言特征及编程注意事项

特征:
JavaScript 无需编译，直接被浏览器解释并执行。
JavaScript 无法单独运行，必须嵌入到HTML代码中运行。
JavaScript 的执行过程由，上到下依次执行。

注意：
JavaScript没有访问系统文件的权限。（较安全）
由于JavaScript无需编译，是由上到下依次解释执行,所以在保证可读性的情况下，允许使用链式编程。
JavaScript和Java没有任何直接关系。

JavaScript的组成

在这里插入图片描述
ECMAScript(核心):规定了JS的语法和基本对象。
ECMAscript和Javascript的区别

DOM文档对象模型:处理网页内容的方法和接口。标记型文档。HTML
DOM概述

BOM浏览器对象模型:与浏览器交互的方法和接口。
BOM概述

JavaScript的引入方式

内部脚本

在当前页面内部写script标签，script内部即可书写JavaScript 代码。

格式：
< script type=“text/javascript” >
JavaScript代码
< /script >

示例：

		<script type="text/javascript">
			//JavaScript代码
		</script>

注意: script标签理论上可以书写在HTML文件的任意位置。

外部引入

在HTML文档中，通过<scriptsrc="中>标签引入.js文件。

格式：
< script type=" text/javascript " src=" javascript 文件路径 "> < /script >

示例：

<script type="text/javascript" src="demo.js"></script>

注意:外部引用时script标签内不能有script 代码，即使写了也不会执行。
示例：

<script type="text/javascript" src="demo.js">
	//这部分代码不会被执行，因为被引入的demo.js代码覆盖
</script>

script标签规范化的放置位置（了解）

开发规范规定，script标签的放置位置为:body结束标签前

如图所示：
在这里插入图片描述
优点:保证html展示内容优先加载，最后加载脚本。增强用户体验性

JavaScript语法及规则

注释

单行注释
//小
Hbuilder快捷键ctrl+/
多行注释
/**/
Hbuilder快捷键ctrl+shift+/

示例：

<script>
	// 单行注释
	/* 
	 多行注释
	 */
</script>

变量

变量概述

变量:标示内存中的一块空间，用于存储数据，且数据是可变的。

变量的声明:var变量名; //变量赋予默认值，默认值为undefineds。（未定义的）

变量的声明和赋值:var变量名=值; //变量赋予对应的值。

在声明JavaScript变量时，需要遵循以下命名规范:

必须以字母或下划线开头，中间可以是数字、字符或下划线。

变量名不能包含空格等符号。

不能使用JavaScript 关键字作为变量名，如: functions

JavaScript严格区分大小写。

基本数据类型

类似于java 中的基本数据类型：

string：字符串类型。" " 和 ’ '都是字符串。JavaScript 中没有单个字符
boolean：布尔类型。固定值为 true 和 false
number：数字类型。任意数字
null：空，一个占位符。
undefined：未定义类型，该类型只有一个固定值，即undefined,表示变量声明却未定义具体的值。

注:因为undefined是从null中派生出来的，所以undefined==null

JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后，是可以赋予任意类型的值。

通过typeof运算符可以分辨变量值属于哪种基本数据类型
对变量或值调用typeof 运算符将返回下列值之一：

undefined -如果变量是Undefined 类型的

boolean -如果变量是Boolean 类型的

number -如果变量是Number类型的

string -如果变里是String类型的

object -如果变童是一种引用类型或Null 类型的

注意：ECMAScript实现之初的一个 bug，null 属于基本数据类型，但是typeof返回的是object

引用数据类型

引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念，所处理的引用数据类型都是对象。

标准创建方式:
var str= new String(); //和java相同
var str = new String; //js独有的方式

运算符

JavaScript运算符与Java运算符基本一致。
这里我们来寻找不同点进行学习。

比较运算符

在这里插入图片描述
== 逻辑等。仅仅对比值。

=== 全等。对比值并且对比类型。如果值和类型都相同，则为true;值和类型有一个不同，则为false。

逻辑运算符

在这里插入图片描述
注: JavaScript 逻辑运算符没有&和|

正则对象

RegExp对象的创建方式

var reg = new RegExp(“表达式”); (开发中基本不用)
va reg = / ^ 表达式 $ /; 直接量(开发中常用)
直接量中存在边界，即^代表开始，$代表结束。

test方法

正则对象.test(string);
用来校验字符串是否匹配正则。
全部字符匹配返回true;有字符不匹配返回false

正则对象使用注意对象

直接量方式：
/ ^ 表达式 $ /
只要有无法成立正则的字符存在，即为false
全部符合为true
(检查严格，眼睛不揉沙子)
适用于表单校验，
普通方式：
/ 表达式 /
只要有成立正则的字符存在，即为true
全部不符合为false
(检查不严格，懒人思想)
适用于字符串查找、替换

示例：
直接量方式
/ ^ 表达式 $ /

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var reg =/^\s+$/; //1~多个空格
			
			var flag=reg.test(" a ")//a的左右各一个空格
			alert(flag)
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
不符合直接量方式的规则，返回false
在这里插入图片描述
普通方式
/ 表达式 /

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var reg =/\s+/; //1~多个空格
			
			var flag=reg.test(" a ")
			alert(flag)
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
符合普通方式的规则，返回true。
在这里插入图片描述

JavaScript数组对象

JS数组的特性

JS数组可以看做Java中的ArrayList集合

数组中的每一个成员没有类型限制，及可以存放任意类型。
数组的长度可以自动修改。

JS数组的四种创建方式

var arr= [1,2,3]; //常用的JS数组创建方式，数组元素是1,2,3，长度是3。也可以自动添加长度，比如：arr[3]=4;，现在长度就自动增加到了4
var arr = new Array(); 数组长度默认为0
var arr = new Array(4);
数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理, undefined为了方便显示变成了空字符串形式，其值本质仍然是undefined)
var arr = new Array(1,2); 数组元素是1,2，长度是2

JS数组的常用属性和方法

在这里插入图片描述
示例：

length：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr = [1, 2, 3];
			var len = arr.length;
			alert(len);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
数组的长度为3
在这里插入图片描述
jojn():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr = [1, 2, 3];
			var result = arr.join("+");
			alert(result);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
利用+号分割
在这里插入图片描述
pop():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr = ["a", "b", "c"];
			var temp1 = arr.length;
			var temp2 = arr.pop();
			var temp3 = arr.length;
			alert(temp1);
			alert(temp2);
			alert(temp3);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
刚开始数组长度为3
在这里插入图片描述
删除最后一个并返回

删除完后的数组长度

push():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr = ["a", "b", "c"];
			var len = arr.push("d");
			alert(len);
			alert(arr);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
添加后的长度
在这里插入图片描述
添加后的数组

reverse():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var arr = ["a", "b", "c"];
			var temp = arr.reverse();
			alert(temp);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
颠倒后的数组
在这里插入图片描述

全局函数（global）

执行


eval()	计算JavaScript字符串，并把它作为脚本代码来执行。

作用:用于增强程序的扩展性。
注:只可以传递原始数据类型string,传递String对象无作用。

示例：
原始string类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			eval("var a = 1");
			alert(a);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
在这里插入图片描述
String对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			eval(new String("var a = 1"));
			alert(a);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
报错，a没有定义
在这里插入图片描述

编码和解码

URL/URI编码：中文及特殊符号，%16进制
作用:保证数据传递的完整性。


encodeURI()	把字符串编码为URI
decodeURI()	解码某个编码的URI

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = "http://www.baidu.com?name=张三&password=123";
			var temp = encodeURI(a);
			// 编码后
			alert(temp);
			// 解码后
			alert(decodeURI(temp));
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
编码后
在这里插入图片描述
解码后

URI和URL的区别

URI是统一资源标识符。
URL是统一资源定位器。

资源:可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS 等等…)

URI标识资源的详细名称，包含资源名
URL定位资源的网络位置，包含http://

例如：
http://www.baidu.com/ 是URL
/a.html 是URI
http://baidu.com/a.html 即是URL也是URI

字符串转数字


parselnt()	解析一个字符串并返回一个整数
parseFloat()	解析一个字符串并返回一个浮点数(小数)

parselnt(string); string按照字面值将string转换为整数类型，小数点后面部分不关注。

parseFloat(string); string按照字面值将string转换为小数类型。

注意:

如果字符串的某个字符从字面值上无法转为数字，那么从该字符开始停止转换,仅返回前面正确的转换值。(例如: 11.5a55， parselnt 结果11，parseFloat 结果11.5)。
如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN，NaN (Not A Number，一个数字类型的标识，表示不是一个正确的数字)

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var a = "12.3";
			var b = parseInt(a);
			var c = parseFloat(a);
			alert(typeof(b) + ";" + b);
			alert(typeof(c) + ";" + c);
		</script>
	</head>
	<body>
	</body>
</html>

运行结果：
在这里插入图片描述

自定义函数/方法

函数简述及作用

如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用，可以将其封装进一个函数(方法)中。
作用:增强代码的复用性。

函数格式

function 方法名(参数列表){
	函数体
}

注意：

JavaScript函数定义必须用小写的function;
JavaScript函数无需定义返回值类型，直接在function后面书写方法名;
参数的定义无需使用var关键字，否则报错;
JavaScript 函数体中, return可以不写,也可以return具体值,或者仅仅写return;

示例：

function getSum(a,b){
	return a+b;
}

函数使用的注意事项

JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined;

JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;

因为JavaScript不存在函数重载，所以JavaScript仅根据方法名来调用函数，即使实参与函数的形参不匹配，也不会影响正常调用;

如果形参未赋值，就使用默认值undefinede。

示例：

JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined;

<script>
	function get(a, b) {

	}
	var a = get(1, 2);
	alert(a);
</script>

结果：
未定义return，返回undefined
在这里插入图片描述
JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;

		<script>
			function getSum(a, b) {
				alert(a + "-" + b);
			}

			function getSum(a, b, c) {
				alert(a + "-" + b + "-" + c);
			}
			getSum(10, 20);
		</script>

结果：
并没有调用有两个参数的方法，而是掉用了最后一次定义时的方法，因为最后定义的函数会覆盖掉之前的定义。
在这里插入图片描述

自定义对象

function构造函数

我们知道，JavaScript中的引用数据类型都是对象，而对象在JavaScript中可以用函数来表示。

相当于java 中创建某个class类

无形参格式：
function 对象名(){
函数体
}

示例：

<script>
	function Person() {
		alert("hello");
	}
	var p = new Person();
</script>

结果：
在这里插入图片描述

带参数格式：
function 对象名(参数列表){
函数体
}
示例：

<script>
	function Person(a, b) {
		alert(a + "-" + b);
	}
	var p = new Person(10, 20);
</script>

结果：
在这里插入图片描述

有属性格式：
function 对象名(){
this.属性名 1=属性值 1;
this.属性名 2=属性值2;
}
this代表当前对象

示例1：（this表示的是Person对象）
方法内属性赋值

<script>
	function Person() {
		this.name = "小明";
		this.age = 13;
	}
	var p = new Person();
	alert(p.name + "-" + p.age);
</script>

结果：
在这里插入图片描述
示例2：
创建对象时赋值

<script>
	function Person(a, b) {
		this.name = a;
		this.age = b;
	}
	var p = new Person("小明", 13);
	alert(p.name + "-" + p.age);
</script>

结果：
在这里插入图片描述
示例3：（无需定义，自由为对象赋值属性及值）
应用场景：适用于对象构建及代码复用

		<script>
			function Person() {

			}
			var p = new Person();
			p.name = "小明";
			p.age = 13;
			alert(p.name + "-" + p.age);
		</script>

结果：
在这里插入图片描述

对象直接量

开发中可以用一种简单的方式直接创建自定义的JavaScript对象，这种方式称为“对象直接量。

格式：
var对象名={属性名1:“属性值1”,属性名2:”属性值2”,属性名3:“属性值3”…};

注:该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可。

示例1：

<script>
	var p = {
		name: "小明",
		age: "13"
	};
	alert(p.name + "-" + p.age);
</script>

结果：
在这里插入图片描述
示例2：
应用场景：适用于快捷创建实例对象及数据封装

		<script>
			var p = {
				name: "小明",
			};
			p.age = 13;
			alert(p.name + "-" + p.age);
		</script>

结果：
在这里插入图片描述

BOM对象

BOM对象简述

BOM对象是什么？有什么用？

BOM ( Browser Object Model)浏览器对象模型。
浏览器: IE、火狐、谷歌等
作用:用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)。

一般情况下，window代表了BOM对象。
window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不写。

消息框

alert()

警告框，用来弹出警告消息。

示例：

<script>
	alert("你好");
</script>

结果：
在这里插入图片描述
注:不同浏览器显示的组件样式不同，这里我们无需关注组件样式。

confirm()

确认框，用于警告用户信息并收集用户的选择。

注：该访法有返回值，用户通过选择“确定”或者“取消”,方法结束会返回boolean类型的值。

“确定”返回ture;
”取消”返回false;

示例：

<script>
	confirm("确定 或者 取消")
</script>

结果：
点击确定或取消是由不同的返回值的
在这里插入图片描述

定时器

循环定时器的设置和取消

启动循环定时器-setInterval()

循环定时器，调用一次就会创建并循环执行一个定时器。

格式：
setInterval(调用方法,毫秒值);
毫秒值：循环周期

示例：
效果：每隔一秒就会弹出一次对话框

<script>
	function run1() {
		alert("run1");
	}
	//每隔一秒调用一次run1方法
	setInterval("run1()", 1000);
</script>

取消循环定时器-clearInterval()

每一个循环定时器都有一个返回值，这个返回值就是循环定时器的ID值。

格式：
clearInterval(循环定时器的ID)

示例：
效果：执行一次方法后就取消对话框

<script>
	var id;

	function run1() {
		alert("run1");
		//取消循环定期器
		clearInterval(id);
	}
	//每隔一秒调用一次run1方法
	id = setInterval("run1()", 1000);
</script>

一次性定时器的设置和取消

启动一次性定时器-setTimeout()

一次性定时器，调用一次就会创建并执行一个定时器一次。

格式:
setTimeout(调用方法,亳秒值);

示例：

2秒调用方法，只执行一次

		<script>
			var id;

			function run1() {
				alert("run1");
			}
			//2秒调用一次run1方法
			setTimeout("run1()", 2000);
		</script>

停止一次性定时器-clearTimeout()

setTimeout方法在创建一个定时器的同时，还会返回一个的定时器的ID,该ID就代表这个定时器。

此定时器ID在当前页面是不重复的。

我们可以通过clearTimeout方法，指定某个一次性定时器停止。

格式：
clearTimeout(定时器 ID);

示例：
效果：并不会有任何输出，因为设置好一次性定时器后，在下面已经取消掉了。

		<script>
			var id;

			function run1() {
				alert("run1");
			}
			//2秒调用一次run1方法
			var id = setTimeout("run1()", 2000);
			//取消一次性定时器
			clearTimeout(id);
		</script>

location对象

location对象包含浏览器地址栏的信息。

常用属性：
在这里插入图片描述
设置href属性，浏览器就会跳转到对应的路径。

示例1：
设置URL
可以设置内网路径和外网路径

<script>
	location.href = "http://www.baidu.com";
</script>

结果：
在这里插入图片描述
示例2：
返回完整的URL

<script>
	var url = location.href;
	alert(url);
</script>

结果：
由于路径有中文，所以会被转码。
在这里插入图片描述

DOM对象

DOM对象的简述

DOM对象是什么？有什么作用？

DOM ( Document Object Model) 文档对象模型
文档:标记型文档(HTML等)。

DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

DOM树介绍

在这里插入图片描述
上述HTML文档会被浏览器由上到下依次加载并解析，加载到浏览器的内存。

加载并解析到内存中，会生产一张DOM树：
在这里插入图片描述
其中:

每个标签会被加载成DOM树上的一个元素节点对象。
每个标签的属性会被加载成DOM树上的一个属性节点对象。
每个标签的内容体会被加载成DOM树上的一个文本节点对象。
整个DOM树，是一个文档节点对象，即DOM对象。
一个HTML文档加载到内存中就会形成一个DOM对象。

DOM树的特点：

必定会有一个根节点（HTML）。
每个节点都是节点对象。
常见的节点关系:父子节点关系（一个标签包含另一个标签，包含的是父节点，被包含的是子节点）。
文本节点对象没有子节点—叶子节点。
每个节点都有一个父节点，零到多个子节点。
只有根节点没有父节点。

获取元素对象的四种方式

在JavaScript中，我们可以通过DOM对象（document）的4种方式获取对应的元素对象:

getElementByld(); —通过元素ID获取对应元素对象，如果找不到返回null。
getElementsByName(); —通过元素的name属性获取符合要求的所有元素，得到一个元素数组，如果找不到返回空数组0。
getElementsByTagName(); —通过元素的元素名属性获取符合要求的所有元素，得到一个元素数组，如果找不到返回空数组0。
getElementsByClassName(); —通过元素的class属性获取符合要求的所有元素，得到一个元素数组，如果找不到返回空数组0。

注意：获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中，也就是说要把< script >放在最下方。

元素对象常见属性

获取元素对象需要使用 getElementByld() 方法。

value

操作元素对象的value属性值。

元素对象.value,获取元素对象的value属性值。

元素对象.value=属性值设置元素对象的value属性值。

示例：

	<body>
		<input type="text" id="t1" value="你好" />
		<script>
			//把t1元素，value属性值拿出来
			var t1 = document.getElementById("t1");
			alert(t1.value);

			//修改value属性值，你好吗
			t1.value = "你好吗";
		</script>
	</body>

运行结果：
输出了t1的value值，然后点击确定。
在这里插入图片描述
输出了修改后的value值。

calssName

操作元素对象的class属性值。

元素对象.className，获取元素对象的class属性值。

元素对象.className= 属性值设置元素对象的class属性值。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.ys1 {
				color: red;
			}

			.ys2 {
				color: blue;
			}
		</style>
	</head>
	<body>
		<span id="s1" class="ys1">hello,word</span>
		<script>
			var s1 = document.getElementById("s1");
			alert(s1.className);

			s1.className = "ys2";
		</script>
	</body>
</html>

运行结果：
输出了class的属性值，然后点击确定。
在这里插入图片描述
更改了class的属性值使用了ys2的css样式。

checked

操作复选框（checked）的选中与否。

元素对象.checked，获取元素对象的checked属性值。

元素对象.checked=属性值。设置元素对象的checked属性值，设置属性值为true时为选中状态。

注: HTML中checked=“checked”，JavaScript中返回true

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="checkbox" id="hobby" />
		<script>
			//false
			var c = document.getElementById("hobby");
			alert(c.checked);

			//true,让复选框默认选中
			c.checked = true;
		</script>
	</body>
</html>

运行结果：
复选框为false，没有选中状态。
在这里插入图片描述
点击确定后为选中选中状态，因为设置了checked 属性为true。

innerHTML&追加内容体符号

操作元素的内容体。

元素对象.innerHTML，获取元素对象的内容体。
元素对象.innerHTML=值设置元素对象的内容体。

追加内容体符号：+=

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id="s1">hello,world</span>
		<script>
			//获取span标签的内容体
			var s1 = document.getElementById("s1");
			alert(s1.innerHTML);

			//修改span标签的内容体
			s1.innerHTML = "hello,java";

			//想span标签追加内容体信息，你好
			s1.innerHTML += "-你好";
		</script>
	</body>
</html>

运行结果:
输出了span标签的内容体
在这里插入图片描述
点击确定后，输出了修改后的内容体和追加后的内容体。

JS事件

JS事件是什么？有什么作用？

通常鼠标或热键的动作我们称之为事件(Event)。

通过JS事件，我们可以完成页面的指定特效。

JS事件驱动机制简述

页面上的特效，我们可以理解在JS事件驱动机制下进行。

JS事件驱动机制：

事件源
事件
监听器
注册/绑定监听器

事件源:专门产生事件的组件。

事件:由事件源所产生的动作或者事情。

监听器:专门处理事件源所产生的事件。

例子：
采用警察抓小偷的理例子来说明事件驱动机制，
在这里插入图片描述

常见的JS事件

点击事件（onclick）

点击事件:由鼠标或热键点击元素组件时触发

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("你好啊");
			}
		</script>
	</head>
	<body>
		<input type="submit" onclick="run1()" />
	</body>
</html>

运行结果：
在这里插入图片描述
点击后运行run1()方法，弹出对话框

焦点事件（onblur、onfoucs）

获取焦点事件（onfoucs）

焦点:即整个页面的注意力。
默认一个正常页面最多仅有一个焦点。

例如:文本框中闪烁的小竖线。
在这里插入图片描述
通常焦点也能反映出用户目前的关注点，或者正在操作的组件。

获取焦点事件:当元素组件获取焦点时触发

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("你好啊");
			}
		</script>
	</head>
	<body>
		<!-- 
				文本框获取焦点时，弹出一个对话框
		 -->
		<input type="text" onfocus="run1()" />
	</body>
</html>

运行结果：
点击文本框聚焦
在这里插入图片描述
聚焦后弹出了对话框

失去焦点事件（onblur）

失去焦点事件：元素组件失去焦点时触发

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("你好啊");
			}
		</script>
	</head>
	<body>
		<!-- 
				文本框获取焦点时，弹出一个对话框
		 -->
		<input type="text" onblur="run1()" />
	</body>
</html>

运行结果：
选点击文本框获取焦点
在这里插入图片描述
然后点击空包处失去焦点

域内容改变事件（onchange）

域内容改变事件：元素组件的值发生改变时触发

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("值改变了");
			}
		</script>
	</head>
	<body>
		<!--
		 当选择框值发生改变时，弹出一个对话框
		 -->
		<select onchange="run1()">
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option value="gz">广州</option>
		</select>
	</body>
</html>

运行结果：
默认值是北京
在这里插入图片描述
选择上海后，会弹出弹框

加载完毕事件（onload）

加载完毕事件：元素组件加载完毕时触发

获取元素对象，保证元素对象先加载，建议是把获取元素对象代码放在最后。但是有了onload后，就不用这样了，在元素对象标签中加一个onload后，就可以吧后去元素对象的代码放在任意位置。

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("加载完毕了");
			}
		</script>
	</head>
	<body onload="run1()">
		hello,word
	</body>
</html>

运行结果：
运行后加载完了< body > 标签后就弹出了对话框。
在这里插入图片描述

提交表单事件（onsubmit）

表单提交事件:表单的提交按钮被点击时触发

注意:该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作。

事件得到true，提交表单数据。
事件得到 false，阻止表单数据提交。

示例1：
事件得到true

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("表单的提交按钮被点击了");
				return true ;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return run1()">
			<input type="text" name="uname" />
			<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

运行结果：
输入内容
在这里插入图片描述
点击确定后弹出弹框，然后提交数据

提交了输入的数据

示例2：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("表单的提交按钮被点击了");
				return false ;
			}
		</script>
	</head>
	<body>
		<form onsubmit="return run1()">
			<input type="text" name="uname" />
			<br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

运行结果：
输入内容
在这里插入图片描述
点击提交后弹出弹框，然后数据并没有提交

数据并没有提交

键位弹起事件（onkeyup）

键位弹起事件:在组件中输入某些内容时，键盘键位弹起时触发该事件。

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("键位弹起了");
			}
		</script>
	</head>
	<body>
		<input type="text" onkeyup="run1()" />
	</body>
</html>

运行结果：
在这里插入图片描述
在文本框中按下任意一个键位都会弹出弹框

常用鼠标事件

鼠标移入事件（onmouseover）

鼠标移入事件：鼠标移入某个元素组件时触发

示例：

当光标移入文本对话框时，页面就会弹出弹框

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("鼠标移入了");
			}
		</script>
	</head>
	<body>
		<input type="text" onmouseover="run1()" />
	</body>
</html>

鼠标移入事件（onmouseout）

鼠标移出事件：鼠标移出某个元素组件时触发

示例：
当光标移出文本框时，就会弹出弹框

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("鼠标移出了了");
			}
		</script>
	</head>
	<body>
		<input type="text" onmouseout="run1()" />
	</body>
</html>

JS事件的两种绑定方式

元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数，上面使用的就是这种方式。

事件句柄绑定方式。

优点:
①开发快捷
②传参方便
③可以绑定多个函数。
缺点: JS 和HTML代码高度糅合在一起，不利于多部门的项目开发维护。

示例1：
绑定一个无参函数

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("run1");
			}
		</script>
	</head>
	<body>
		<!-- 绑定一个无参函数 -->
		<input type="text" value="111" onclick="run1()" />
	</body>
</html>

运行结果：
在这里插入图片描述
当点击文本框时弹出弹框

示例2：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(str){
				alert(str);
			}
		</script>
	</head>
	<body>
		<!-- 绑定一个有参函数，参数就是一个字符串 -->
		<!-- 注意：在" " 中赋值，要使用' ' -->
		<input type="text" value="111" onclick="run1('你好啊')" />
	</body>
</html>

运行结果：
在这里插入图片描述
点击文本框时，弹出弹框，显示赋值的参数

示例3：
绑定一个有参函数，参数就是一个元素对象

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(obj){
				alert(obj.value);
			}
		</script>
	</head>
	<body>
		<!-- 绑定一个有参函数，参数就是一个元素对象 -->
		<!-- 注意：this表示本标签 -->
		<input type="text" value="111" onclick=run1(this) />
	</body>
</html>

运行结果：
在这里插入图片描述
点击文本框时，弹出弹框，显示元素对象的value值

示例4：
绑定多个方法

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1(){
				alert("run1");
			}
			function run2(){
				alert("run2");
			}
			function run3(){
				alert("run3");
			}
		</script>
	</head>
	<body>
		<!-- 绑定多个函数 -->
		<input type="text" value="111" onclick="run1(),run2(),run3()" />
	</body>
</html>

运行结果：
在这里插入图片描述
点击文本框，弹出3个弹框，依次为run1(),run2(),run3()的方法

DOM绑定方式

使用DOM的属性方式绑定事件。

DOM绑定方式:

优点:使得HTML代码和JS代码完全分离。
缺点:①不能传递参数。解决：匿名函数是可以的。
②一个事件只能绑定一个函数。解决：匿名函数内部可以绑定多个函数。

示例1:
DOM绑定方式：对象.事件属性

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("加载完毕");
			}
			//DOM绑定方式：对象.事件属性
			window.onload = run1;
		</script>
	</head>
	<body>
		<span>hello,world</span>
	</body>
</html>

运行结果：
加载完< span >标签后，就执行了run1()方法。
在这里插入图片描述
示例2：
匿名对象，也可以绑定读个方法，也可以传递参数。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function run1() {
				alert("加载完毕");
			}
			//DOM绑定方式：匿名函数
			window.onload = function() {
				run1();
			}
		</script>
	</head>
	<body>
		<span>hello,world</span>
	</body>
</html>

运行结果：
运行方式和示例1一样
在这里插入图片描述

A.夕阳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb（4）之JavaScript

JavaScript概述JavaScript是什么？有什么用？HTML:就是用来写网页的。人的身体。CSS:就是用来美化页面的。人的衣服。JavaScript:前端大脑、灵魂。人的大脑、灵魂。JavaScript是WEB上强大的脚本语言。脚本语言:无法独立执行。必须嵌入到其他语言中，结合使用。直接被浏览器解析执行。Java编程语言:独立写程序，独立运行。编译-----执行。作用:...
复制链接

扫一扫

专栏目录