weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

JavaWeb学习笔记——javascript_javascriptjava成熟欢迎您

作者：weixin_40725706 | 2024-02-27 18:34:38

踩

javascriptjava成熟欢迎您

基本语法

script标签

alert()：警告框函数，传入的参数是警告框内要显示的信息

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>1.script标签</title>
	<script type="text/javascript">
		//alert()是JavaScript提供的一个警告函数，可以接收任意类型的参数，这个参数就是警告框内显示的信息
		alert("hello JavaScript");
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

引入js代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>2.引入JavaScript代码</title>
	<!-- 
	使用script标签引入js代码
		src属性专门用来引入 js文件路径（可以是相对路径，也可以是绝对路径）
		
	script标签可以用来定义 js代码，也可以用来引入 js文件
	但是，两个功能二选一使用，不能同时使用两个功能，定义两个script标签即可
	 -->
	<script type="text/javascript" src="2.js代码.js"></script>
	<script type="text/javascript">alert("123");</script> 
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.js代码.js

/**
 * 2.引入JavaScript代码.html对应的js代码
 */
alert("hello JavaScript");
1
2
3
4

变量

typeof(x)：判断x的数据类型

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>3.变量</title>
	<script type="text/javascript">
		/*
		JavaScript 的变量类型：
		数值类型： number
		字符串类型： string
		对象类型： object
		布尔类型： boolean
		函数类型： function
		
		选择符合要求的数据类型：
			if(typeof(x)=="number"){
				
			}
		
		JavaScript 里特殊的值：
		undefined 未定义，所有 js变量未赋初始值的时候，默认值都是 undefined.
		null 空值
		NaN 全称是：Not a Number。非数字，非数值。
		
		JS 中的定义变量格式：
		var 变量名;
		var 变量名 = 值;
		*/
		var i;
		alert(i);//undefined
		i = 12;
		//typeof()可以返回变量的数据类型
		alert(typeof(i));//number
		
		i = "abc";
		alert(typeof(i));//string
		
		var a = 1;
		var b = "abc";
		alert(a*b);//NaN
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

比较运算

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>4.比较运算</title>
	<script type="text/javascript">
		/*
		等于： == 等于是简单的做字面值的比较
		全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
		*/
		var a = "12";
		var b = 12;
		alert( a == b ); //true
		alert( a === b ); //false
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

逻辑运算

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>5.逻辑运算</title>
	<script type="text/javascript">
		/*
		且运算： &&
		或运算： ||
		取反运算： !
		
		在 JavaScript中，所有的变量，都可以做为一个 boolean类型的变量去使用
		0 、null、 undefined、""(空串) 都认为是 false

		&& 且运算：
		有两种情况：
			第一种：当表达式全为真的时候。返回最后一个表达式的值。
			第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
		
		|| 或运算：
			第一种情况：当表达式全为假时，返回最后一个表达式的值
			第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
		
		&&运算和||运算有短路：
			短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
		*/
		var a = "abc";
		var b = true;
		var c = null;
		var d = false;
		
		//alert( a && b );//true
		//alert( b && a );//abc
		//alert( a && d );//false
		//alert( a && c );//null

		//alert( d || c );//null
		//alert( c || d );//false
		//alert( a || c );//abc
		//alert( b || c );//true
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

数组

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>6.数组</title>
	<script type="text/javascript">
		/*
		js中数组的定义：
		格式：
			var 数组名 = []; // 空数组
			var 数组名 = [1, 'abc', true];//定义数组同时赋值元素
			
		javaScript中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组做扩容操作
		*/
		var arr = [];
		alert(arr.length);//0
		
		arr[0] = 12;
		alert(arr[0]);//12
		alert(arr.length);//1
		
		arr[2] = "abc";
		alert(arr[2]);//abc
		alert(arr[1]);//undefined
		alert(arr.length);//3
		
		//数组的遍历
		for(var i=0; i<arr.length; i++){
			alert(arr[i]);//12 undefined abc
		}
	</script>
</head>
<body>
	
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

函数

第一种方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>7.函数_1</title>
	<script type="text/javascript">
		/*
		定义函数的第一种方式：
			格式：
			function 函数名(形参列表) {
				函数体
			}
		
		在 Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义
		*/
		//无参函数
		function fun1(){
			alert("fun1");
		}
		fun1();
		
		//有参函数
		function fun2(a, b){
			alert("a="+a+", "+"b="+b);
		}
		fun2(1, "abc");
		
		//有返回值的函数
		function fun3(a, b){
			return a + b;
		}
		alert(fun3(1, 2));
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

第二种方式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>7.函数_2</title>
	<script type="text/javascript">
		/*
		定义函数的第二种方式：
		格式：
			var 函数名 = function(形参列表) { 
				函数体 
			}
		
		在 Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义
		*/
		//无参函数
		var fun1 = function(){
			alert("123");
		}
		fun1();
		
		//有参函数
		var fun2 = function(a, b){
			alert(a+b);
		}
		fun2(1, 2);
		
		//有返回值的函数
		var fun3 = function(a, b){
			var res = a + b;
			return res;
		}
		alert(fun3(2, 4));
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

隐式参数arguments

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>8.隐式参数arguments</title>
	<script type="text/javascript">
		/*
		js中的函数，可以通过arguments属性，获取传入该函数的所有参数，类似于Java中的可变参数
		*/
		function fun(){
			alert(arguments.length);//可变参数个数
			alert(arguments[0]);
			alert(arguments[1]);
			alert(arguments[2]);
			
			for (var i=0; i<arguments.length; i++){
				alert(arguments[i]);
			}
		}
		fun(1,"ad",true);
		
		//需求：编写 一个函数，计算所有参数相加的和并返回
		function sum(){
			var res = 0;
			for(var i=0; i<arguments.length; i++){
				res += arguments[i];
			}
			return res;
		}
		alert(sum("abc",1,2,3));//0abc123
		alert(sum(1,2,3,4));//10
		
		//优化sum
		function sumPro(){
			var res = 0;
			for(var i=0; i<arguments.length; i++){
				if(typeof(arguments[i])=="number"){
					res += arguments[i];	
				}
			}
			return res;
		}
		alert(sumPro("abc",1,2,3));//6
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

自定义对象

{ }形式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>9.{}形式的自定义对象</title>
	<script type="text/javascript">
		/*
		对象的定义：
			var 变量名 = { 	// 空对象
				属性名：值, 	//定义一个属性
				属性名：值, 	//定义一个属性
				函数名：function(){} //定义一个函数
			};
			
		对象的访问：
			变量名.属性 / 函数名();
		*/
		var obj = {
			name: "迪达拉",	
			age: 20,
			func: function(){
				alert("姓名：" + this.name + "，年龄：" + this.age);
			}
		};
		
		alert(obj.name);
		alert(obj.age);
		obj.func();
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Object形式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>9.Object形式的自定义对象</title>
	<script type="text/javascript">
		/*
		对象的定义：
			var 变量名 = new Object(); //对象实例（空对象）
			变量名.属性名 = 值; // 定义一个属性
			变量名.函数名 = function(){} //定义一个函数
		
		对象的访问：
			变量名.属性 / 函数名();
		*/
		var obj = new Object();
		obj.name = "天道";
		obj.age = 22;
		obj.func = function(){
			alert("姓名：" + this.name + "，年龄：" + this.age);
		}
		alert(obj.name);
		alert(obj.age);
		obj.func();
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

事件

在这里插入图片描述
注意：onsubmit事件要绑定在表单（form标签）上

onload

静态注册

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>静态注册onload事件</title>
	<script type="text/javascript">
		function func(){
			alert("静态注册onload");
		}
	</script>
</head>
<!-- 
	静态注册onload事件
	onload 事件是浏览器解析完页面之后就会自动触发的事件
	 -->
<body onload="func()">

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

动态注册

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>动态注册onload事件</title>
	<script type="text/javascript">
		/*
		动态注册事件：是指先通过 js 代码得到标签的 dom对象，然后再通过 dom对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
		
		动态注册基本步骤：
			1、获取标签对象
			2、标签对象.事件名 = fucntion(){}
		
		onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
		*/
		//动态注册onload事件
		window.onload = function(){
			alert("动态注册onload");
		}
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

onclick

document是JavaScript语言提供的一个对象（文档）
document.getElementById()：通过 id 属性获取标签对象

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>onclick事件</title>
	<script type="text/javascript">
		/*
		onclick 单击事件： 常用于按钮的点击响应操作。
		*/
		//静态注册onclick
		function func(){
			alert("静态注册onclick");
		}
		
		//动态注册onclick
		window.onload = function(){
			//1.获取标签对象
			/*
			document是JavaScript语言提供的一个对象（文档）
			getElementById 通过 id 属性获取标签对象
			*/
			var button02 = document.getElementById("button02");
			
			//2.通过标签对象.事件名 = function(){}
			button02.onclick = function(){
				alert("动态注册onclick");
			}
		}
	</script>
</head>
<body>
	<button onclick="func()">按钮1</button>
	<button id="button02">按钮2</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

onblur

console是控制台对象，是由 JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用。
console.log()：打印到控制台

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>onblur事件</title>
	<script type="text/javascript">
		/*
		onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
		*/
		function func(){
			//console是控制台对象，是由 JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
			//log()是打印的方法
			console.log("静态注册onblur");
		}
		
		//动态注册onblur
		window.onload = function(){
			//1.获取标签对象
			var pwd = document.getElementById("pwd");
			
			//2.通过标签对象.事件名 = function(){}
			pwd.onblur = function(){
				console.log("动态注册onblur");
			}
		}
	</script>
</head>
<body>
	<form>
		<table align="center">
			<tr>
				<td>用户名：</td>
				<td><input type="text" onblur="func()"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" id="pwd"></td>
			</tr>
		</table>
	</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

onchange

静态绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>静态注册onchange事件</title>
	</head>
	<script type="text/javascript">
		/*
		onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
		*/
		function func(){
			alert("静态注册onchange");
		}
	</script>
<body>
	<form>
		<table align="center">
			<tr>
				<td>国籍：</td>
				<td>
					<select onchange="func()">
						<option selected="selected">国籍</option>
						<option>中国</option>
						<option>美国</option>
						<option>日本</option>
					</select>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

动态绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>动态注册onchange事件</title>
	</head>
	<script type="text/javascript">
		/*
		onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
		*/
		//动态注册
		window.onload = function(){
			//1.获取标签对象
			var select = document.getElementById("select");
			
			//2.通过标签对象.事件名 = function(){}
			select.onchange = function(){
				alert("动态注册onchange");
			}
		}
	</script>
<body>
	<form>
		<table align="center">
			<tr>
				<td>国籍：</td>
				<td>
					<select id="select">
						<option selected="selected">国籍</option>
						<option>中国</option>
						<option>美国</option>
						<option>日本</option>
					</select>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

onsubmit

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>onsubmit事件</title>
	<script type="text/javascript">
		/*
		onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
		*/
		//要验证所有表单项是否合法，如果有一个不合法就要阻止表单提交
		function func(){
			alert("静态注册onsubmit，发现不合法表单项！");
			return false;
		}
		
		//动态注册
		window.onload = function(){
			//1.获取标签对象
			var form02 = document.getElementById("form02");

			//2.通过标签对象.事件名 = function(){}
			form02.onsubmit = function(){
				alert("动态注册onsubmit，发现不合法表单项！");
				return false;
			}
		}
	</script>
</head>
<body>
	<!--return false 可以阻止 表单提交 -->
	<form action="https://www.baidu.com" method="get" onsubmit="return func()">
		<input type="submit" value="静态注册">
	</form>
	<form action="https://www.baidu.com" method="get" id="form02">
		<input type="submit" value="动态注册">
	</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

DOM对象

DOM，Document Object Model，文档对象模型

Document对象：

管理了所有HTML文档内容。
是一种树型结构的文档，有层级关系。
把所有的标签都对象化
可以通过document访问所有的标签对象。

注意：上述方法必须要在页面加载完成之后（onload内）使用

getElementById()

代码1：点击校验按钮，弹出窗口提示用户名是否合法

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>getElementById_1</title>
	<script type="text/javascript">
		/*
		需求：
			用户输入用户名，点击校验按钮之后，获取输入内容，判断是否合法
			用户名只能由字母、数字、下划线组成，长度为5-12位
			
			document.getElementById(elementId)
			通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
			document.getElementsByName(elementName)
			通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
			document.getElementsByTagName(tagname)
			通过标签名查找标签 dom 对象。tagname 是标签名
			document.createElement(tagName)
		*/
		//为校验按钮绑定onclick事件
		window.onload = function(){
			var but01 = document.getElementById("but01");
			but01.onclick = function(){
				//获取input标签内容，首先要获取input标签对象
				var in01 = document.getElementById("input01");
				//获取输入框内的内容（动态获取）
				var userName = in01.value;
				var regex = /^\w{5,12}$/;
				/*
				*test()方法用于测试某个字符串，是否与匹配规则 ，
				* 匹配则返回 true，不匹配则返回 false.
				*/
				if(regex.test(userName)){
					alert("用户名合法");
				} else {
					alert("用户名不合法");
				}
			}
		}
	</script>
</head>
<body>
	用户名：<input type="text" id="input01" value="请输入用户名">
	<button id="but01">校验</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

代码2：点击校验按钮，在用户名输入框右侧显示 √ 或 ×
dom对象.innerHTML：获取起始标签和结束标签之间的内容
dom对象.value：动态获取标签的value值（新输入的值覆盖默认的值）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>getElementById_2</title>
	<script type="text/javascript">
		/*
		第二种校验方式
		
		document.getElementById(elementId)
		通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
		document.getElementsByName(elementName)
		通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
		document.getElementsByTagName(tagname)
		通过标签名查找标签 dom 对象。tagname 是标签名
		document.createElement(tagName)
		*/
		window.onload = function(){
			//获取input、span、button标签对象
			var input01 = document.getElementById("input01");
			var span01 = document.getElementById("span01");
			var button01 = document.getElementById("but01");
			//为button标签注册onclick事件
			button01.onclick = function(){
				var regx = /^\w{5,12}$/;
				var flag = regx.test(input01.value);
				/*
				if(flag){
					//innerHTML获取起始标签和结束标签之间的内容
					checkName.innerHTML = "用户名合法";
				} else {
					checkName.innerHTML = "用户名不合法";
				}
				*/
				if(flag){
					//innerHTML获取起始标签和结束标签之间的内容
					span01.innerHTML = "<img src=\"right.png\" width=\"20\" height=\"20\">";
				} else {
					span01.innerHTML = "<img src=\"wrong.png\" width=\"20\" height=\"20\">";
				}
			}
		}
	</script>
</head>
<body>
	用户名：<input type="text" id="input01" value="请输入用户名">
	<span style="color: red;" id="span01"></span>
	<button id="but01">校验</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

代码3：去除校验按钮，当输入框失去焦点后就显示 √ 或 ×

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>getElementById_2</title>
	<script type="text/javascript">
		/*
		第二种校验方式
		
		document.getElementById(elementId)
		通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
		document.getElementsByName(elementName)
		通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
		document.getElementsByTagName(tagname)
		通过标签名查找标签 dom 对象。tagname 是标签名
		document.createElement(tagName)
		*/
		window.onload = function(){
			//获取input、span、button标签对象
			var input01 = document.getElementById("input01");
			var span01 = document.getElementById("span01");
			//为input标签注册onblur事件
			input01.onblur = function(){
				var regx = /^\w{5,12}$/;
				var flag = regx.test(input01.value);
				if(flag){
					//innerHTML获取起始标签和结束标签之间的内容
					span01.innerHTML = "<img src=\"right.png\" width=\"20\" height=\"20\">";
				} else {
					span01.innerHTML = "<img src=\"wrong.png\" width=\"20\" height=\"20\">";
				}
			}
		}
	</script>
</head>
<body>
	用户名：<input type="text" id="input01" value="请输入用户名">
	<span style="color: red;" id="span01"></span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

getElementByName

实现全选、全不选和反选操作：
复选框dom对象的checked属性，表示复选框的选中状态，选中是true，不选中是false

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>getElementByName</title>
	<script type="text/javascript">
		/*
		getElementsByName()可以用来获取属于同一组的标签对象，
		当想同时对一组标签进行操作时，可以为这些标签设置同样的name属性，之后利用该方法获取所有标签对象
		*/
		window.onload = function(){
			//获取三个按钮对象，并绑定onclick事件
			var checkAll = document.getElementById("button01");
			var checkNone = document.getElementById("button02");
			var checkReverse = document.getElementById("button03");
			
			checkAll.onclick = function(){
				/*
				document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
				这个集合的操作跟数组一样，集合中每个元素都是dom对象，这个集合中的元素顺序是他们在html页面中从上到下的顺序
				*/
				var hobbies = document.getElementsByName("hobby");
				for(var i=0; i<hobbies.length; i++){
					/*
					checked 表示复选框的选中状态，选中是true，不选中是false
					*/
					hobbies[i].checked = true;
				}
			}
			
			checkNone.onclick = function(){
				var hobbies = document.getElementsByName("hobby");
				for(var i=0; i<hobbies.length; i++){
					hobbies[i].checked = false;
				}
			}
			
			checkReverse.onclick = function(){
				var hobbies = document.getElementsByName("hobby");
				for(var i=0; i<hobbies.length; i++){
					//hobbies[i].checked = !hobbies[i].checkes;
					var flag = hobbies[i].checked;
					if(flag){
						hobbies[i].checked = false;
					} else {
						hobbies[i].checked = true;
					}
				}
			}
		}
	</script>
</head>
<body>
	兴趣爱好：
	<input type="checkbox" name="hobby" value="java">java
	<input type="checkbox" name="hobby" value="python">python
	<input type="checkbox" name="hobby" value="C++">C++
	<input type="checkbox" name="hobby" value="C">C
	<br>
	<button id="button01">全选</button>
	<button id="button02">全不选</button>
	<button id="button03">反选</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

getElementByTagName

演示全选操作：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>getElementsByTagName</title>
	<script type="text/javascript">
		/*
		getElementsByTagName()可以用来获取属于同一组的标签对象，
		当想同时对一组标签进行操作时，但没有对标签进行id和name属性的赋值，若这些标签是相同类型的标签，可以利用该方法获取所有标签对象
		*/
		window.onload = function(){
			//获取按钮对象，并绑定onclick事件
			var checkAll = document.getElementById("button01");
			
			checkAll.onclick = function(){
				/*
				document.getElementsByTagName();返回多个相同类型标签对象的集合
				这个集合的操作跟数组一样，集合中每个元素都是dom对象，这个集合中的元素顺序是他们在html页面中从上到下的顺序
				*/
				var inputs = document.getElementsByTagName("input");
				for(var i=0; i<inputs.length; i++){
					/*
					checked 表示复选框的选中状态，选中是true，不选中是false
					*/
					inputs[i].checked = true;
				}
			}	
		}
	</script>
</head>
<body>
	兴趣爱好：
	<input type="checkbox" value="java">java
	<input type="checkbox" value="python">python
	<input type="checkbox" value="C++">C++
	<input type="checkbox" value="C">C
	<br>
	<button id="button01">全选</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

dom对象的属性

dom对象.appendChild( oChildNode )：为当前标签添加一个子标签，oChildNode 是要添加的孩子标签
在这里插入图片描述

<!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 bj = document.getElementById("bj");
			alert(bj.innerHTML);
		}
		//2.查找所有li节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis = document.getElementsByTagName("li");
			alert(lis.length);
		};
		//3.查找name=gender的所有节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders = document.getElementsByName("gender");
			alert(genders.length);
		};
		//4.查找#city下所有li节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1.获取id为city的节点
			var city = document.getElementById("city");
			//2.获取city下name=li的所有节点
			var lis = city.getElementsByTagName("li");
			alert(lis.length);
		};
		//5.返回#city的所有子节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1.获取id为city的节点
			var city = document.getElementById("city");
			//2.获取city的所有节点
			alert(city.childNodes.length);//9空白字符也算子节点
		};
		//6.返回#phone的第一个子节点
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			alert(document.getElementById("phone").firstChild.innerHTML);
		};
		//7.返回#bj的父节点
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			alert(document.getElementById("bj").parentNode.innerHTML);
		};
		//8.返回#android的前一个兄弟节点
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			var android = document.getElementById("android");
			var preNode = android.previousSibling;
			alert(preNode.innerHTML);
		};
		//9.读取#username的value属性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			var value = document.getElementById("username").value;
			alert(value);
		};
		//10.设置#username的value属性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "12345";
		};
		//11.返回#city的文本值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);//innerHTML获取所有内容
			alert(document.getElementById("city").innerText);//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">返回#city的文本值</button></div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

正则表达式

注意：如果要精确匹配，必须要使用^和$包围

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>正则表达式</title>
	<script type="text/javascript">
		/*
		var patt = new RegExp(pattern, modifiers);
		var patt = /pattern/modifiers;
		
		modifiers = i/g/m
		i 忽略大小写。 
		g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 
		m 执行多行匹配。 
		
		注意与Java的区别，Java要求某位必须是某个字符，JS是只要整个字符串包含该字符即可
		Java中：System.out.println("123abc456".matches("[a-z]"));//false, 因为第一位不是字母
		JS中：alert(/[a-z]/.test("123abc456"));//true
		
		[abc] 查找方括号之间的任何字符。 
		[^abc] 查找任何不在方括号之间的字符。 
		[0-9] 判断是否包含数字 
		[a-z] 判断是否包含小写字母 
		[A-Z] 判断是否包含大写字母
		[A-z] 查找任何从大写 A到小写 z的字符。 
		[adgk] 查找给定集合内的任何字符。 
		[^adgk] 查找给定集合外的任何字符。 
		
		. 查找单个字符，除了换行和行结束符。 
		\w 查找单词字符。 
		\W 查找非单词字符。 
		\d 查找数字。 
		\D 查找非数字字符。 
		\s 查找空白字符。 
		\S 查找非空白字符。 
		\b 匹配单词边界。 
		\B 匹配非单词边界。 
		\0 查找 NULL 字符。 
		
		注意：描述方式是包含时，只检查最低规则，
		alert(/a?/.test("123aabc456"));//true, 因为包含0个a
		alert(/a{1,2}/.test("123aaabc456"));//true, 因为包含最少1个a
		若要严格执行规则，要加^和$
		alert(/^a?$/.test("123aabc456"));//false
		alert(/^a{1,2}$/.test("123aaabc456"));//false
		
		n+ 匹配任何包含至少一个n的字符串。 
		n* 匹配任何包含零个或多个n的字符串。 
		n? 匹配任何包含零个或一个n的字符串。 
		n{X} 匹配包含X个n的序列的字符串。 
		n{X,Y} 匹配包含X或Y个n的序列的字符串。
		n{X,} 匹配包含至少X个n的序列的字符串。 
		n$ 匹配任何结尾为n的字符串。 
		^n 匹配任何开头为n的字符串。 
		?=n 匹配任何其后紧接指定字符串n的字符串。 
		?!n 匹配任何其后没有紧接指定字符串n的字符串。 
		
		RegExp对象方法：
			compile 编译正则表达式。 
			exec 检索字符串中指定的值。返回找到的值，并确定其位置。
			test 检索字符串中指定的值。返回 true或false。 

		支持正则表达式的 String对象的方法：
			search 检索与正则表达式相匹配的值。
			match 找到一个或多个正则表达式的匹配。
			replace 替换与正则表达式匹配的子串。
			split 把字符串分割为字符串数组。 
		
		*/
		alert(/[a-z]/.test("123abc123"));//注意：Java中代表第一个字符必须是a-z，但JS中，只要字符串中包含a-z就返回true
		alert(/^a?$/.test("123aabc456"));//false
		alert(/^a{1,2}$/.test("123aaabc456"));//false
	</script>
</head>
<body>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/155267

JavaWeb学习笔记——javascript_javascriptjava成熟 欢迎您

javascript