JavaWeb初级学习之 JavaScript

最新推荐文章于 2024-04-20 11:50:28 发布

OnlyLove_longshao

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量1.3k

点赞数 2

分类专栏：【JavaWeb】 JavaWeb从入门到精通文章标签： java web javascript 事件 dom 热门编程语言

本文链接：https://blog.csdn.net/OnlyLove_longshao/article/details/52901213

版权

【JavaWeb】同时被 2 个专栏收录

11 篇文章 4 订阅

订阅专栏

JavaWeb从入门到精通

10 篇文章 14 订阅

订阅专栏

0、思维导图

首先为大家提供本文所要阐述的知识点的思维导图，帮助大家更好的了解本文要阐述的知识。

1、JavaScript介绍

现在每一个网站都使用了JavaScript。如果你想在网站上创建互动环节，或者建立用户界面等，JavaScript就是我们的首选，他有很多优势，今天就来深度的、详细的学习JavaScript这门语言。

Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地硬盘）

3.跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）

JavaScript与Java不同：
1.JS是Netscape公司的产品，前身是LiveScript;为了吸引更多程序员。更名为javascript。而微软看到javaScript如此之火。也自己搞了一个叫JScript的脚本。这时候 w3c ECMA组织看到市面上各种脚本，非常的乱。而且对浏览器兼容有非常严重的问题。自己也高了一个叫 ECMAScript
2.JS是基于对象，Java是面向对象。
3.JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。 JS代码有无，浏览器一般不会提示错误。 4.JS是弱类型，Java是强类型。

2、JavaScript和html代码的结合方式

2.1、第一种方式

只需要在head 标签中，或者在body标签中，使用script 标签可以定义JavaScript代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 它是javascript的一个警告框
	// 它可以接收任意类型的参数，你给它传什么，它就弹 什么
	alert("hello world!");
</script>
</head>
<body>
	<script type="text/javascript">
		alert("body hello");
	</script>
</body>
</html>

2.2、第二种方式

使用Script 标签引入单独的JavaScript代码文件

3、JS中的注释

JavaScript 的注释跟Java一样，有单行，也有多行

单行注释：// 单行注释

多行注释：/* 多行注释 */

4、变量

什么是变量？变量是可以存放某些值的内存的命名。
javaScript的变量类型：

数值类型：number （short int long float double ）

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

javascript里特殊的值：

undedined表示未定义，所有在javascript中没有被赋初值的变量的初始值都是undefined

null表示空值表示赋的是空值。

NAN not a number 表示非数字

JS中的定义变量格式：

var 变量名;

var 变量名 = 值;

5、运算符：

5.1、算术运算

加法： +
减法： -
乘法： *
除法： /
自增：++
自减：--
求余运算： %

var a = 12；
var str = “as”;
var c = a + str;  // c = “12as”;l

5.2、赋值运算

跟java一样：

等于： =
加等于： +=
减等于： -=
乘等于： *=
除等于： /=

求余等于： %=

5.3、关系（比较）运算

大于号：>
小于号： <
等于： ==
全等于： ===
不等于： !=
大于等于： >=
小于等于： <=

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 定义两个变量 number类型和string类型
	var a = 12;
	var b = "12";
	// 在javascript中，我们拿number类型和String类型做等于比较的时候
	// 它只会简单的做字面值的比较，不会去检查两个变量的数据类型
	// 	alert(a == b);// true
	// 在javascript中，做全等于比较，除了会简单的比较变量的字面值之外 
	// 还会检查两个变量的数据类型
	alert( a === b ); // false;
</script>
</head>
<body>
</body>
</html>

5.4、逻辑运算

且运算：&&
或运算： ||
取反运算： !
0 、null、 undefined、””(空串) 都认为是 false；

&& 与运算。
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值

|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值

并且 && 与运算和 ||或运算有短路。
短路就是说，当这个&&或||运算有结果了之后。后面的表达式不再执行

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript">
	// 0 、null、 undefined、””(空串) 都认为是 false；
	// 当一个变量的值为零时，它的boolean值为false
	// 	var a = 0;
	// 	if (a) {
	// 		alert("a == true");
	// 	} else {
	// 		alert("a == false");
	// 	}
	//  当一个变量的值为null的时候，它的boolean值为false
	// 	var b = null;
	// 	if (b) {
	// 		alert("b == true");
	// 	} else {
	// 		alert("b == false");
	// 	}
		// 当一个变量的值为undefined的时候，它的boolean值也为false
	// 	var c = undefined;
	// 	if (c) {
	// 		alert("c == true");
	// 	} else {
	// 		alert("c == false");
	// 	}
		// 当一个变量的值为空串的时候，它的boolean值为false
	// 	var d = "";
	// 	if (d) {
	// 		alert("d == true");
	// 	} else {
	// 		alert("d == false");
	// 	}

	/*
		在javascript中；分号是可选的。
		但是为了保持良好的代码习惯 我们都要把分号写上。
		
		&& 与运算。
		有两种情况：
		第一种：当表达式全为真的时候。返回最后一个表达式的值。
		第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
	*/
	// 		var a = "abc";
	// 		var b = true;
	// 		var d = false;
	// 		var c = null;
			// 第一种：当表达式全为真的时候。返回最后一个表达式的值。
			var t = b && a;
	// 		alert(t); // abc	
			t = a && b;
	// 		alert(t); // true
		
			// 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
			t = d && c;
	// 		alert(t); // false;
			t = c && d;
	// 		alert(t); // null
		
	/*
		|| 或运算
		第一种情况：当表达式全为假时，返回最后一个表达式的值
		第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
		
		并且 && 与运算  和 ||或运算 有短路。
		短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
	*/
	
		var a = "abc";
		var b = true;
		var d = false;
		var c = null;
	//第一种情况：当表达式全为假时，返回最后一个表达式的值
		var g = d || c;
	// 		alert(g); // null
			g = c || d;
	// 		alert(g); // false
			// 防止变量或函数重复定义
			g = a || b;
	// 		alert(g); // abc

			//第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
	// 		g = a || b;
	// 		alert(g); // abc
			g = b || a;
			alert(g); // true
	// 		fun();
</script>
</head>
<body>
</body>
</html>

5.6、三元运算

跟java一样
格式：表达式1 ? 表达式2 ：表达式3
当表达式1为真时，返回表达式2的值，否则返回表达式3的值

// 三元运算
var a = 12;
var b = (a == 12) ? "abc" : false;
alert(b);

6、语句

6.1、if判断结构：

跟java语言一样
1.判断语句有哪3种
第一种：

if (表达式) {

代码1

}

第二种：

if (表达式1) {

代码1

} else {

代码2

}

第三种：

if (表达式1) {

代码1

} else if (表达式2) {

代码2

} else {

代码3

}

6.2、switch分支结构

跟java语言一样
1.switch 语句格式：

switch(变量) {

case 值1：

break;

case 值2：

break;

default:

}

6.3、while和do-while 循环

跟java语言一样
while 语句格式：

while（表达式）{

循环体

}

do-while 语句：

do{

循环体

} while(表达式);

while先判断后执行。先买票后上车
do-while是先执行后判断，do-while至少执行一次。先上车后买票。

6.4、for循环语句

跟java语言一样
for 循环语句：

for ( 语句1；语句2；语句3 ){

循环体

}

语句1，主要用来定义变量
语句2，判断循环条件
语句3，修改循环变量

在javaScript中，定义变量一定要记住是var i = 0; 而不要写成 int i = 0;

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

循环体;

}

6.5、语句控制

跟java语言一样

Continue; 跳过当次循环。

Break; 跳出当前循环。

7、函数(*****重点)

7.1、函数的三种定义方式

函数的第一种定义方式，是使用function关键字来定义一个函数（用的多，需要掌握）。格式如下：

function 函数名(参数列表) {

函数体；

}

在javascript中，定义一个带有返回值的函数，只需要在function函数体内直接使用return 语句把你要返回的值直接返回即可。

function 函数名(参数列表) {

return 值；

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 	格式如下：
	// 	function 函数名(参数列表) {
	// 		函数体；
	// 	}
	// 定义一个无参的函数
	function fun() {
		alert("这是一个无参的函数，萌的不要不要的！");
	}
	// 函数的调用 
	// 	fun();
	
		// java 定义函数
		// public void fun2(int a, double d){}
	
	// 定义有参的函数
	// 在定义有参函数的时候，我们不用写上var关键字，只需要写上参数的变量名即可
	function fun2( a , b ){
	// 		alert("这是两个参数的函数！~");
		alert(a);
		alert(b);
	}
	// 由于 javascript中变量是任意类型(弱类型),所以我们在调用 javascript函数的时候
	// 可以传递任意类型的参数值！
	// 	fun2(12,"abc");
	
	//定义一个带有返回值的函数
	// 需要传递两个参数，并且把两个参数相加的和给返回
	function sum( num1 , num2 ) {
		var num3 = num1 + num2;
		return num3;
	}
	// 函数的调用 
	var result = sum(1,249);
	alert(result);
</script>
</head>
<body>
</body>
</html>

函数的第二种定义方式（了解，用的不多）：
格式如下：

var 函数名 = new Function(“参数列表”,”函数体”);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 函数的第二种定义方式（了解，用的不多）：
	// 格式如下：
	// var 函数名 = new Function(“参数列表”,”函数体”);
	// 	定义一个带有两个参数相加并返回值的函数
	var sum = new Function("num1,num2" , "return num1+num2;");
	alert( sum(120,130) );
</script>
</head>
<body>
</body>
</html>

函数的第三种定义方式（需要掌握）：
格式如下：

var 函数名 = function(参数列表){

函数体

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 	函数的第三种定义方式（需要掌握）：
	// 	格式如下：
	// 	var 函数名 = function(参数列表){
	// 		函数体
	// 	}
	// 函数的第三种定义
	var sum = function(num1 , num2){
		return num1 + num2;
	}
	alert( sum(444,555) );
</script>
</head>
<body>
</body>
</html>

注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//注：在Java中函数允许重载。但是在Js中函数的重载会直接覆盖掉上一次的定义

	// 定义一个无参函数
	function fun () {
		alert("无参函数");
	}
	/*
	上面的函数。相当 于
	var fun = function(){
		alert("无参函数");
	}
	*/
	// 定义有两个参数的函数
	function fun ( a , b ) {
		alert("有两个参数的函数");
	}
	/*
	第二个函数定义又相当于：
	fun = function( a ,b ){
		alert("有两个参数的函数");
	}
	*/
	// 在javascript中函数是不允许 重载的，最后一次的定义会直接复盖掉原来的定义。
	fun();
</script>
</head>
<body>
</body>
</html>

7.2、函数的 arguments 隐形参数（只在function函数内）

arguments它是一个数组，是一个变量的参数
回忆：java中的变长参数！！！

public void fun( Object ... params  ) {
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 定义有两个参数的函数
		function fun(a, b) {
	// 		alert(a); // undefined
	// 		alert(b); // undefined
			// arguments它可以接收全部的参数
			// arguments的使用可以像数组一样。通过下标访问
	// 		alert(arguments.length);
	// 		alert(arguments[0]);
	// 		alert(arguments[1]);
	// 		alert(arguments[2]);
	// 		alert(arguments[3]);
	// 		alert(arguments[4]);
	// 		for (var i = 0; i < arguments.length; i++) {
	// 			alert("第" + (i+1) + "个参数的值：" + arguments[i]);
	// 		}
		}
	
		// 在javascript中，当我们调用函数的时候，如果没有给函数传递参数值，那么 函数的参数的默认值就是undefined。
	
	// 	fun();
		// 当我们调用 javascript函数的时候，函数传递参数值，那么参数值会依次从左到右对参数进行赋值
		// 没有被赋到值的变量，默认值还是undefined
	// 	fun( "111" );
	
	// 	fun( "我很帅","我很萌", 12,true,"每天晚上都帅的睡不着觉");


	// 定义一个没有参数的函数。用于计划传递进来 的多个number类型的参数相加的和并返回。
	function sum(){
		var result = 0;
		// 我们可以通过遍历arguments获取每一个参数的值
		for (var i = 0; i < arguments.length; i++) {
			if (typeof(arguments[i]) == "number") {
				result += arguments[i];
			}
		}
		return result;
		}
	alert( sum( 1 , 2 , 200) );
</script>
</head>
<body>
</body>
</html>

8、数组（*****重点）

8.1、数组定义方式

Java 中定义数组：

类型[] 数组名 = new 类型[]; // 定义一个空的数组

类型[] 数组名 = { a,b,c,d}； // 定义一个数组的时候直接初始化

Js 中数组的定义：格式：

var 数组名 = []; // 定义一个空的javascript数组

var 数组名 = [12,”abc”,true]; // 定义一个数组的时候，直接初始化数组的元素

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 	Js 中 数组的定义：
	// 	格式：
	// 		var 数组名 = [];   // 定义一个空的javascript数组
	// 		var 数组名 = [12,”abc”,true]; // 定义一个数组的时候，直接初始化数组的元素
	// 定义一个空的数组
	var arr = [];
	//alert(arr.length); // 0
	// 给数组的第一个元素赋值
	// 当我们通过数组的下标给数组元素赋值的时候，javascript会自动的根据数组的最大下标值
	// 自动的做扩容的操作。并且赋值
	arr[0] = 12;
	// 	alert(arr[0]);
	// 	alert(arr.length);
		// 当我们通过数组下标 2 给数组赋值的时候，数组的最大长度扩容为3 ，并赋值
		// 扩容后，没有被赋过赋值的下标元素默认值为undefined
		arr[2] = "str";
	// 	alert(arr.length); // 3
	// 	alert(arr[1]); // undefined
	// 	for (var i = 0; i < arr.length; i++) {
	// 		alert(arr[i]);
	// 	}
	
	// var 数组名 = [12,”abc”,true]; // 定义一个数组的时候，直接初始化数组的
	var arr2 = ["abc" , "不要不要的！", 20];
	// alert(arr2.length); // 3
	
	arr2[5] = 12;
	alert(arr2.length);
</script>
</head>
<body>
</body>
</html>

9、JS中的自定义对象（扩展内容）

第一种Object形式的自定义对象,格式：

var 变量名 = new Object(); // 定义一个空的对象

变量名.属性名 = 值; // 给对象添加一个属性

变量名.函数名 = function() {} // 给对象添加一个方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 	第一种Object形式的自定义对象
	// 	格式：
	// 		var 变量名 = new Object(); // 定义一个空的对象
	// 		变量名.属性名 = 值; // 给对象添加一个属性
	// 		变量名.函数名 = function() {} // 给对象添加一个方法
	
	// 定义一个人person类
	var person = new Object();
	person.age = 18;  // 给对象添加属性
	person.name = "华仔";	
	person.fun  = function(){ // 给对象添加方法
		alert("姓名：" + this.name + ",年龄：" + this.age);
	}
	// 对象的访问
	alert ( person.age ); // 访问对象的属性
	person.fun();  // 访问对象的方法
</script>
</head>
<body>
</body>
</html>

第二种自定义对象形式：

var obj = {} // 定义一个空的对象

var obj = { // 定义一个对象的添加属性和方法

属性名 : 值 , // 定义一个属性

方法名 : function(){ // 定义一个方法

},

属性名 : 值

};

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 	第二种自定义对象形式：
	// 		var obj = {} // 定义一个空的对象
		
	// 		var obj = { // 定义一个对象的添加属性和方法
	// 			属性名 : 值 , // 定义一个属性
	// 			方法名 : function(){ // 定义一个方法
	// 			},
	// 			属性名 : 值
	// 		};
	// 定义一个person对象
	var person = {
		age : 18 , // 添加一个属性
		name : "李四！",
		fun : function() {
			alert("name : " + this.name);
		}
	};
	//访问对象属性
	alert(person.age);
	// 访问对象方法
	person.fun();
</script>
</head>
<body>
</body>
</html>

第三种定义对象的方式，格式：

// 定义一个Person类

function Person() {

this.age = 18;

this.name = “张三”;

this.fun = function() {

alert();

}

}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//定义一个Person类
	function Person() { // 
		this.age = 18; // 定义一个属性
		this.name = "张三"; // 定义一个属性
		this.fun = function() { // 定义一个方法
			alert("年龄：" + this.age);
		}
	}
	// 创建一个Person类的实例对象
	var p1 = new Person();
	alert(p1.age); // 访问属性
	p1.fun();
</script>
</head>
<body>
</body>
</html>

10、js中的事件

什么是事件？事件是电脑输入设备与页面交互的响应。我们称之为事件。
常用的事件：

onload加载完成事件在页面被加载完成之后自动执行。

onclick单击事件在我们用鼠标去点击页面上的元素之后触发的事件。

onblur失去焦点事件失去焦点之后，自动触发的事件！

onchange内容发生改变事件在select下拉列表的选中项发生改变的时候会触发。

onsubmit表单提交事件是表单提交事件，在表单提交到服务器的时候，会处动触发的事件。经常用于验证表单的表单项是否合法。

事件的注册又为静态注册和动态注册两种：

静态注册事件：静态注册事件是指，在标签的事件属性上，添加事件要触发的javascript代码，这种方式我们称之为静态注册。

动态注册事件：动态注册事件其实就是通过对象的事件属性赋值为一个function函数的方式。我们称之为动态注册。

动态注册事件分两个步骤实现。

第一步：先获取到标签对象

第二步：通过对象.事件名 = function(){};

onload事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="onload.js"></script>
<script type="text/javascript">
	// 这个语句是在页面被加载完成之前就执行了
	// 	alert(1);
		// onload动态注册事件
	// 	window.onload = function(){
	// 		alert("页面已经被加载完成！");		
	// 	}
	</script>
	</head>
	<!-- 
		onload事件是在页面被加载完成之后。自动触发 的事件
	 	静态注册事件
	<body οnlοad="alert('页面被加载完成！');">
	-->
<body>
</body>
</html>

onclick事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 定义一个函数
	// 	function onclickFunc() {
	// 		alert("讨厌 ！");
	// 	}
	
	
	window.onload = function() {
	// 	动态注册事件分两个步骤实现。
	// 		getElementById
			// get 获取 
	// 		Element 元素
		// by 通过，由。。经
		// id 标签的id属性值
		// 通过标签的id属性值获取到标签对象
	// 		第一步：先获取到标签对象
			var btn01Obj = document.getElementById("btn01");
	// 		alert(btn01Obj);
	// 		第二步：通过对象.事件名 = function(){};
		btn01Obj.onclick = function() {
			alert("这是动态注册的onclick事件");
		}
	}
</script>
</head>
<body>
	<!-- 
		静态注册onclick事件，
		onclick事件是单击元素之后会触发的事件。
	-->
	<button οnclick="onclickFunc();">有种你就点我！</button>
	<button id="btn01">动态注册单击事件</button>
</body>
</html>

onblur事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//动态注册失去焦点事件
	//动态注册事件分两个步骤实现。
	window.onload = function() {
	// 	第一步：先获取到标签对象
		// 通过password的id属性值查找对应的标签对象，
		var passwordObj = document.getElementById("password");
	// 	alert(passwordObj);
	// 	第二步：通过对象.事件名 = function(){};
		passwordObj.onblur = function() {
			alert("动态添加失去焦点事件");
		}
	}
</script>
</head>
<body>	
	<!-- 
		onblur是失去焦点事件！
		静态注册失去焦点事件！
	 -->
	用户名：<input type="text" οnblur="alert('失去焦点事件!');"/><br/>
	密码：<input id="password" type="password" />
</body>
</html>

onchange事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function onchangeFun(){
		alert("onchange静态注册！");
	}
	window.onload = function() {
		// 1.先获取标签对象
		var select01Obj = document.getElementById("select01");
	// 		alert(select01Obj);
		// 2.通过对象.事件名 = function(){}
		select01Obj.onchange = function() {
			alert("动态绑定onchange事件！");
		}
	}
</script>
</head>
<body>
	请选择你心中的女神：
	<!-- 
		onchange事件是下拉列表选中的内容发生改变的时候，触发
	 -->
	<select οnchange="onchangeFun();">
		<option>--请选择你心中的女神--</option>
		<option>刘奕菲妈妈</option>
		<option>柳颜</option>
		<option>班花</option>
	</select><br/>
	请选择你心中的男神：
	<select id="select01">
		<option>--请选择你心中的男神--</option>
		<option>东北F4</option>
		<option>王宝强</option>
		<option>王振国</option>
		<option>算了</option>
	</select>
</body>
</html>

onsubmit事件示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function onsubmitFun() {
		alert("开始验证所有的表单项……");
	// 	alert("只要有一个表单项，不合法，直接 返回false，阻止 表单提交");
	// 	return false;
		alert("所有的表单项都合法。return true，让表单继续提交");
		return true;
	}
	// 动态绑定onsubmit事件
	window.onload = function(){
		document.getElementById("form01").onsubmit = function() {
			alert(1);
	// 		return false;
			return true;
		}
	}
</script>
</head>
<body>
	<!-- 
		onsubmit事件是当表单准备提交到服务器的之前触发的事件
		我们经常用来在提交提交之前验证所有的表单项是否合法。
		当我们 onsubmit静态事件中返回false的时候，会阻止表单提交到服务器
		当我们返回true的时候提交表单
		因为return false;可以阻止表单的默认操作。
	 -->
	<form action="http://127.0.0.1:8080" οnsubmit="return onsubmitFun();">
		用户名:<input id="username" name="username" type="text" /><br/>
		密	码：<input id="password" name="password" type="password" /> <br/>
		<input type="submit" value="提 交"/>
	</form>
	<br/>
	<form action="http://127.0.0.1:8080" id="form01">
		用户名:<input id="username" name="username" type="text" /><br/>
		密	码：<input id="password" name="password" type="password" /> <br/>
		<input type="submit" value="提 交"/>
	</form>
</body>
</html>

11、DOM 模型

DOM 全称是Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。
那么它们是如何实现把标签，属性，文本转换成为对象来管理呢。这就是我们马上要学习的重点。

11.1、Document对象（*****重点）

在dom中html里的内容都被创建成为node对象

一类是标签节点

一类是文本节点

一类是属性节点

Document 对象的理解：

第一点：Document它管理了所有的Html文档内容。

第二点：document它是一种树结构的文档。有层级关系。

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过document访问所有的标签对象。

什么是对象化？？

举例：有一个人有年龄：18岁，性别：女，名字：苍某某,我们要把这个人的信息对象化怎么办！

Class Person{
	int age; 保存年龄信息
	String sex；保存性别的信息
	String name；保存姓名的信息
}

那么 html 标签要 Dom 对象化

<body>
	<div id="div01">div01</div>
</body>

模拟对象化，相当于：

class Dom{
	private String id;		// id属性
	private String tagName; //表示标签名
	private Dom parentNode; //父亲
	private List<Dom> children; // 孩子结点
	private String innerHTML; // 起始标签和结束标签中间的内容
}

10.2、Node节点

Document对象中管理的对象。主要有三类节点对象。
节点：Node——构成HTML文档最基本的单元。我们关心的主要是：

元素（标签）节点：HTML文档中的HTML标签

属性节点：标签的属性

文本节点：HTML标签中的文本内容

10.3、节点的常用属性

nodeName表示节点名
nodeType表示节点类型
nodeValue表示节点值
nodeName nodeType nodeValue
元素节点标签名 1 null
属性节点属性名 2 属性值
文本节点 #text 3 文本内容

举例：

<div id="div01">abc我爱你</div>

在上面的这个标签中

<div> 元素节点

id=”div01” 是属性节点

abc我爱你是文本节点

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function() {
		//通过id属性值查找标签对象
		var div01Obj = document.getElementById("div01");
		// 它是一个div标签对象
	// 		alert(div01Obj);
			// 获取元素的节点名
	// 		alert(div01Obj.nodeName); // div
			// 获取元素节点的类型
	// 		alert(div01Obj.nodeType); //1 表示元素节点
			// 元素节点的节点值是null
	// 		alert(div01Obj.nodeValue); // null
		
		// 通过对象获取id属性节点
		var idAttrObj = div01Obj.getAttributeNode("id");
			// 获取节点名
	// 		alert(idAttrObj.nodeName); //  属性节点的节点名，是属性名
			// 获取节点类型
	// 		alert(idAttrObj.nodeType); // 2 属性节点的类型是2
			// 获取节点的值
	// 		alert(idAttrObj.nodeValue); //属性值
		
		//获取文本节点对象
		var textNodeObj = div01Obj.firstChild;
		// 文本节点的节点名称是#text
		alert(textNodeObj.nodeName);// #text
		// 获取文本节点的类型
		alert(textNodeObj.nodeType); // 文本节点类型为3
		//获取文本节点的值
		alert( textNodeObj.nodeValue ); // 文莱节点的值，就是它的文本内容
	}
</script>
</head>
<body>
	<div id="div01">abc我爱你</div>
</body>
</html>

10.4、Document对象中的方法介绍（*****重点）

document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值

document.getElementsByTagName(tagname)
通过标签名查找标签dom对象。tagname是标签名

document.createElement(tagName)
通过标签名，创建一个标签dom对象在内存中，tagName是标签名。

document.getElementById方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// document.getElementByid是通过id属性查找标签对象
	// 但是这个方法一定要在文档被加载完成之后。去执行。否则会找不到对象
	// 	var usernameObj = document.getElementById("username");
	// 	alert(usernameObj);
	
	// 页面加载完成之后
	window.onload = function(){
	// 	 var usernameObj = document.getElementById("username");
	// 	 alert(usernameObj);
	}
	// 这里只是定义了函数
	function onclickFun(){
		// 函数是被调用之后才会被执行。
		// 单击，事件是被按钮 被显示出来之后。
		// 也就是页面已经加载完成
		 var usernameObj = document.getElementById("username");
		 alert(usernameObj);
	}
</script>
</head>
<body>
	用户名：<input id="username" name="username" type="text" value="abc" /> 
	<button οnclick="onclickFun();">验证用户名是否合法</button>
</body>
</html>

document.getElementsByName()示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 页面被加载完成
	window.onload = function() {
		//getElementsByName是通过给定的name属性值查找标签对象的集合。
		// getElementsByName方法查找到的标签对象的的顺序是它们在html文档中从上到下出现的顺序
		var hobbyObjs = document.getElementsByName("hobby");
	// 	alert(hobbyObjs);
		// 这个集合的操作，跟数据一样
	// 	alert(hobbyObjs.length);
	// 	alert(hobbyObjs[0]);
		// 来获取第一个
		var hobbyObj = hobbyObjs[3];
	// 	alert(hobbyObj.name);
	// 	alert(hobbyObj.checked);
		hobbyObj.checked = true;
	}


	// 全选功能
	function checkAll() {
		// 1.先获取所有的input type = checkbox的标签对象集合
		var hobbyObjs = document.getElementsByName("hobby");
		// 2.遍历修改每一个标签对象的checked属性为true
		for (var i = 0; i < hobbyObjs.length; i++) {
			//这是获取每一个标签对象
			var hobbyObj = hobbyObjs[i];
			// 修改标签对象的选中状态
			hobbyObj.checked = true;
		}
	}
	// 全不选功能
	function checkNo() {
		// 1.先获取所有的input type = checkbox的标签对象集合
		var hobbyObjs = document.getElementsByName("hobby");
		// 2.遍历修改每一个标签对象的checked属性为false
		for (var i = 0; i < hobbyObjs.length; i++) {
			//这是获取每一个标签对象
			var hobbyObj = hobbyObjs[i];
			// 修改标签对象的选中状态
			hobbyObj.checked = false;
		}
	}
	// 反选功能
	function checkReverse() {
		// 1.获取所有的标签对象集合
		var hobbyObjs = document.getElementsByName("hobby");
		// 2.遍历获取每一个标签对象。判断它的checked属性
		for (var i = 0; i < hobbyObjs.length; i++) {
			var hobbyObj = hobbyObjs[i];
			// 3.如果checked属性值为true修改为false，如果是checked为false，修改为true
	// 		if (hobbyObj.checked == true) {
	// 			hobbyObj.checked = false;
	// 		} else {
	// 			hobbyObj.checked = true;
	// 		}
			hobbyObj.checked = !hobbyObj.checked;
		}
	}
	
</script>
</head>
<body>
	兴趣爱好：
	<input name="hobby" type="checkbox" />睡觉
	<input name="hobby" type="checkbox" />抽烟 
	<input name="hobby" type="checkbox" />喝酒
	<input name="hobby" type="checkbox" />烫头 
	<br/>
	<button οnclick="checkAll()">全选</button>
	<button οnclick="checkNo()">全不选</button>
	<button οnclick="checkReverse()">反选</button>
</body>
</html>

document.getElementsByTagName() 方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// 页面被加载完成之后
	window.onload = function() {
		   // getElementsByTagName是通过标签名获取标签对象的集合，
		   // 这个集合的操作跟数组是一样的，可以通过下标获取集合中的元素
		   var inputObjs =	document.getElementsByTagName("input");
	// 	   alert(inputObjs);
	// 	   alert(inputObjs.length);
	}
	
	// 
	function checkAll(){
		//1.获取所有的标签对象集合
		var inputObjs =	document.getElementsByTagName("input");
		//2.遍历修改每一个标签对象的checked属性值为true
		for (var i = 0; i < inputObjs.length; i++) {
			// 修改集合中每一个input type=checkbox标签对象的checked属性为true
			inputObjs[i].checked = true;
		}
	}
</script>
</head>
<body>
	兴趣爱好：
	<input type="checkbox" />睡觉
	<input type="checkbox" />抽烟 
	<input type="checkbox" />喝酒
	<input type="checkbox" />烫头 
	<br/>
	<button οnclick="checkAll()">全选</button>
</body>
</html>

document.createElement()方法示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/*
		现在我希望，我们通过javascript代码手动创建	
		<div><span>div中的span标签</span></div>
		并且添加到body标签中
	*/
	window.onload = function() {
	// 	alert(document.body);	
		// 创建div标签对象
		var divObj = document.createElement("div");// 在内存中创建了<div></div>标签对象
	// 	alert(divObj);
	// 	divObj.innerHTML = "<span>div中的span标签</span>";
		// 创建span标签对象
		var spanObj = document.createElement("span"); // 在内存中创建了<span></span>标签对象
	// 	spanObj.innerHTML = "div中的span标签";
		// 创建文本节点对象
		var textNodeObj = document.createTextNode("div中的span标签");
		// 把文本节点对象添加到span标签中
		spanObj.appendChild(textNodeObj);
		// 把span标签对象添加到div标签中
		divObj.appendChild(spanObj);
		// 把div标签对象添加到body标签中
		document.body.appendChild(divObj);
	};
</script>
</head>
<body>
</body>
</html>

10.5、节点的常用属性和方法

方法：通过具体的元素节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点

appendChild(oNode)

方法给标签对象添加子节点。oNode是要添加的子节点。

removeChild(oNode) 通过父节点来删除孩子节点

removeChild方法删除子节点。oNode是要删除的孩子节点

cloneNode( [bCloneChildren])

cloneNode方法克隆一个对象。bCloneChildren表示是否需要克隆孩子节点

getAttribute(sAttributeName)

getAttribute方法获取属性值。sAttributeName是要获取的属性名

属性：

childNodes属性，获取当前节点的所有子节点

firstChild属性，获取当前节点的第一个子节点

lastChild属性，获取当前节点的最后一个子节点

parentNode属性，获取当前节点的父节点

nextSibling属性，获取当前节点的下一个节点

previousSibling属性，获取当前节点的上一个节点

className用于获取或设置标签的class属性值

innerHTML 属性，表示获取/设置起始标签和结束标签中的内容

innerText属性，表示获取/设置起始标签结束标签中的文本

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function() {
		var divObj = document.getElementsByTagName("div")[0];
		// innerHTML它是w3c的规范所有的浏览器基本都支持
		// innerHTML它表示起始标签和结束标签里的内容
		alert(divObj.innerHTML);
		// innerText 它是起始标签和结束标签里的文本（不包含标签）
		// innerText有些浏览器会不支持。
		alert(divObj.innerText);
	}
</script>
</head>
<body>
	<div>
		<span>div中的span标签</span>
	</div>
</body>
</html>

练习：DOM查询练习

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		document.getElementById("btn01").onclick = function() {
			var liObj = document.getElementById("bj");
			alert(liObj.innerHTML);
		};
		
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			//查找所有li节点
			var liObjs = document.getElementsByTagName("li");
			alert(liObjs.length);
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			alert( document.getElementsByName("gender").length );
		};
		//4.查找#city下所有li节点		
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1.先获取city结点
			var cityObj = document.getElementById("city");
			//2.通过getElementsByTagName方法获取所有的li子结点
			alert (cityObj.getElementsByTagName("li").length );
		};
		//5.返回#city的所有子节点		childNodes
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1.先获取city结点
			var cityObj = document.getElementById("city");
			//2.通过childNodes获取所有的孩子节点
	// 		alert(cityObj.childNodes.length);
	// 		alert( cityObj.firstChild.nodeType );
			alert( cityObj.childNodes[1].innerHTML );
		};
		//6.返回#phone的第一个子节点		firstChild
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父节点		parentNode
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1.先获取bj结点
			// 2.通过对象.parentNode获取父结点
			alert( document.getElementById("bj").parentNode.id ) ;
		};
		//8.返回#android的前一个兄弟节点		previousSibling
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			alert( document.getElementById("android").previousSibling.innerHTML );
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert( document.getElementById("username").value );
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "王振国老师很帅！";
		};
		//11.返回#bj的文本值	innerText 
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert( document.getElementById("bj").innerText );
		};
	};
</script>
</head>
<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>

			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>

			<br>
			<br>

			<p>
				你喜欢哪款单机游戏?
			</p>

			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>

			<br />
			<br />

			<p>
				你手机的操作系统是?
			</p>

			<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
		</div>

		<div class="inner">
			gender:
			<input type="radio" name="gender" value="male"/>
			Male
			<input type="radio" name="gender" value="female"/>
			Female
			<br>
			<br>
			name:
			<input type="text" name="name" id="username" value="abcde"/>
		</div>
	</div>
	<div id="btnList">
		<div><button id="btn01">查找#bj节点</button></div>
		<div><button id="btn02">查找所有li节点</button></div>
		<div><button id="btn03">查找name=gender的所有节点</button></div>
		<div><button id="btn04">查找#city下所有li节点</button></div>
		<div><button id="btn05">返回#city的所有子节点</button></div>
		<div><button id="btn06">返回#phone的第一个子节点</button></div>
		<div><button id="btn07">返回#bj的父节点</button></div>
		<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
		<div><button id="btn09">返回#username的value属性值</button></div>
		<div><button id="btn10">设置#username的value属性值</button></div>
		<div><button id="btn11">返回#bj的文本值</button></div>
	</div>
</body>
</html>

OnlyLove_longshao

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JavaWeb初级学习之 JavaScript

0、思维导图首先为大家提供本文所要阐述的知识点的思维导图，帮助大家更好的了解本文要阐述的知识。1、JavaScript介绍 Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。特点：1.交互性（它可以做的就是信息的动态交互）2.安全性（不允许直接访问本地硬盘）
复制链接

扫一扫