javascript DOM(三)

mousepc

浏览: 243018 次
性别:
来自: 深圳

最近访客更多访客>>

sy1152

杯勺水

一剪梅

ailongni

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

三个练习:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript">
			
			//点击任何一个 li 节点, 弹出其文本值
			
			//1. 代码需要编写在 window.onload 函数体中
			window.onload = function(){
				//2. 获取所有的 li 节点, 一个数组
				var liNodes = document.getElementsByTagName("li");		
				
				//3. 遍历 2 得到的数组
				for(var i = 0; i < liNodes.length; i++){
					//var liNode = liNodes[i];
					//4. 为每一个遍历的 li 节点的 onclick 属性赋值
					//5. 在赋值的函数体中, 弹出当前 li 节点的文本值
					liNode.onclick = function(){
						alert(this.firstChild.nodeValue);			
						//alert(liNodes[i].firstChild.nodeValue);		
						//因为在遍历的过程中, i 始终是一个变量, 最后取值为 8
						//alert(j);
						//因为 i 最终的取值是 8, 而 liNodes[8] 对应的节点根本就不存在, 所以以下代码无法工作
						//alert(liNodes[i].firstChild.nodeValue);												
					}
				}
				
			};
			
			
			var liNodes = document.getElementsByTagName("li");		
			
			for(var i = 0; i < liNodes.length; i++){
				alert(i);
				liNodes[i].onclick = function(){
					alert(i);												
				}
			}

		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" title="Beijing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game"><li id="ra">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li id="war3">魔兽</li></ul>  
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//需求: 点击任何一个 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 = /^\^{2}/;
						
						if(reg.test(val)){
							val = val.replace(reg, "");
						}else{
							val = "^^" + val;
						}
						
						this.firstChild.nodeValue = val;
					};
				}
				
			};
			
		</script>
		
	</head>
	<body>
		<p>你喜欢哪个城市?</p>
		<ul id="city">
			<li id="bj" title="Beijing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game"><li id="ra">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li id="war3">魔兽</li></ul>  
		
		<br><br>
		gender: 
			<input type="radio" name="gender" value="male"/>Male
			<input type="radio" name="gender" value="female"/>Female
	</body>
</html>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript">		
			window.onload = function(){	
				//****知识: 在 js 中 null, undefined, 0, false 都可以作为 false 使用, 除此以外可以作为 true 使用
			
				//需求: 点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型"; 
				//                        检查文本框中是否有输入(可以去除前后空格), 若没有输入,　则给出提示: "请输入内容"; 
				//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 
				
				//1. 选取 #submit 按钮, 并为其添加 onclick 响应函数
				document.getElementById("submit").onclick = function(){
					//3. 获取所有 name="type" 的节点(radio): types
					var types = document.getElementsByName("type");
					
					//4. 遍历 types 节点, 检测是否又被选中的
					var typeValue = null;
					for(var i = 0; i < types.length; i++){
						if(types[i].checked){
							typeValue = types[i].value;
							break;
						}
					}

					//5. 若没有一个 type 被选中, 则打印 "请选择类型", 响应函数结束
					if(!typeValue){
						alert("请选择类型");
						return false;
					}
										
					//6. 选取 name="name" 节点: name
					var nameNode = document.getElementsByName("name")[0];
					
					//7. 检查 name 对应的文本框中即对应节点的 value 属性值是否有输入(可以去除前后空格)
					var val = nameNode.value;
					
					//7.1 去除前后空格, 需要使用正则表达式
					var reg = /^(\s+)|(\s+)$/g;
					val = val.replace(reg, "");
					nameNode.value = val;
					
					//8. 若没有输入,　则给出提示: "请输入内容", 响应函数结束
					if(val == ""){
						alert("请输入内容");
						return false;
					}
					
					//9. 创建一个对应的 li 节点 <li>name-value</li>: liNode
					var liNode = document.createElement("li");
					var liText = document.createTextNode(val);
					liNode.appendChild(liText);
					
					//10. 把 liNode 添加为 #type-value 的最后一个子节点
					document.getElementById(typeValue).appendChild(liNode);
					
					//2. 取消 #submit 按钮的默认行为
					return 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>
		<form action="dom-5.html" name="myform">
			<input type="radio" name="type" value="city">城市
			<input type="radio" name="type" value="game">游戏
			name: <input type="text" name="name"/>
			<input type="submit" value="Submit" id="submit"/>
		</form>
	</body>
</html>

0
顶

1
踩

分享到：

javascript DOM(四)----节点替换 | javascript DOM(二)

2011-08-27 23:19
浏览 889
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript DOM(三)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript DOM(三)

评论

发表评论

相关推荐

Javascript编程风格

display:none与visible:hidden的区别

javascript字符串操作

用JavaScript隐藏控件的方法

令人厌烦的单引号和双引号

常用javascript函数，总结中

select和option操作

stream.js

css笔记

JavaScript Minifier failed for

javascript 正则表达式探索

给struts 的标签s:url加参数

为eclipse安装aptana 插件

checkbox为null

javascript DOM(五)----插入、删除节点

javascript DOM(四)----节点替换

javascript DOM(二)

javascript DOM(一)

javascript 表单重置的问题 reset

Javascript继承机制的设计思想

最近访客更多访客>>