5_JavaScript_DOM编程_两个实验

Posted on In Views:

本节主要是两个测试的案例，详见代码……

tx_1.jsp：

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两个练习</title>
		<script type="text/javascript">
			
			window.onload = function(){
				//点击每个li节点，都弹出其文本值
				var liNodes = document.getElementsByTagName("li");
				alert(liNodes.length);
				for (var i=0; i<liNodes.length; i++){
					//alert(i);
					liNodes[i].onclick = function(){
						//this为正在响应的那个事件的节点
						alert(this.firstChild.nodeValue);
						//此时 i 已经是 8 了, 而 liNodes[8] 不指向任何节点.
						//alert(i);
					}
				}
				/* 
				//关于js的方法：有如下的知识点：
				//如果代码如下
				liNodes[i].onclick = alert("text");//那么本行代码在页面出现时便会执行，因为代码在赋值过程中执行了
				//而如果如下的代码
				liNodes[i].onclick = hello;//hello方法的代码见下，该代码能够正确运行
				//而如果代码如下：
				liNodes[i].onclick = hello();//那么代码依然会在文档显示开头执行，因为带了括号的代码会马上执行，而没有括号的却只是一个引用
				 */
				
			}
			
			/* function hello(){
				alert("text");
			} */
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</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>
<!-- 		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female -->
		name: <input type="text" name="username" id="name" value="cyqand" />
	</body>
</html>

tx_2.jsp：

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两个练习</title>
		<script type="text/javascript">
			//点击之后修改文本值
			window.onload = function(){
				var liNodes = document.getElementsByTagName("li");
				for(var i=0; i<liNodes.length; i++){
					liNodes[i].onclick = function(){
						//alert("点击到了");
						if(this.firstChild.nodeValue.slice(0,2)=="^^") {
							this.firstChild.nodeValue = this.firstChild.nodeValue.slice(2,this.firstChild.nodeValue.length);
						} else{
							this.firstChild.nodeValue = "^^" + this.firstChild.nodeValue;
						}
						//this.firstChild.nodeValue = "^^" + this.firstChild.nodeValue;
						
					}
				}
				/* 
				//当然亦可以使用正则表达式来验证
				//点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上
				//有, 则去除
				var liNodes = document.getElementsByTagName("li");
				for(var i = 0; i < liNodes.length; i++){
					liNodes[i].onclick = function(){
						var val = this.firstChild.nodeValue;
						var reg = /^\^{3}/g;
						if(reg.test(val)){
							val = val.replace(reg, "");
						}else{
							val = "^^^" + val;
						}
						this.firstChild.nodeValue = val;
					}
				}
				/*
				//1. 使用正则表达式判断是否已 ^^ 开始
				//2. 调用字符串的 replace(reg, str) 方法除去指定的字符串. 
				var str = "^^abc";
				var reg = /^\^{2}/g;
				alert(reg.test(str)); //true
				str = str.replace(reg, "");
				alert(str);
				var str2 = "abc";
				alert(reg.test(str2)); //false
				*/
				 */
				
			}
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city"><li id="bj" name="BeiJing">北京</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>
<!-- 		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female -->
		name: <input type="text" name="username" id="name" value="cyqand" />
	</body>
</html>