(5)JavaScript DOM练习题

题目1：点击每个 li节点都弹出其文本值
代码注意：1 . 为什么要写成 liNodes[i].onclick = funciton（）{xxxx}

liNodes[i].onclick =XXXX;
function hello()
{
alert(“hello”);
}

如果我们是 liNodes[i].onclick = hello;
实际上是用的引用相当于liNodes[i].onclick = function (){alert(“hello”);};
2.如果我们是 liNodes[i].onclick = hello(); 代表的是这个函数被执行了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  // 练习1 点击每个li节点   都弹出其文本值
	  window.onload = function()
	  {
		 //1.获取所有的 li 节点
		 var liNodes = document.getElementsByTagName("li");
		 //2.使用for循环进行遍历
		 for(var i = 0; i < liNodes.length;i++)
			 {
		     //3.  为每一个li节点添加onclick	响应函数
			 liNodes[i].onclick = function()
			 {
				 //4. 在响应函数中获取当前节点的文本节点的文本值
				 //5.alert打印
				 //this 为正在响应事件的那个节点 指代的是
				 alert(this.firstChild.nodeValue);
				 
				 //调用下面这个语句但是没有反应
				 //alert(liNodes[i].firstChild.nodeValue)
			 }
			 }
	  }
	</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="11111"/>
</body>
</html>

题目2 ：点击每个li节点若li节点的文本值没有^^开头加上如果有 ^^，则去除

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  
	  // 点击每个li节点 若li节点的文本值没有^^开头 加上
	  // 有 ， 则去除
	  window.onload = function()
	  {

		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}/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));
//		str = str.replace(reg,"");
//		alert(str);
//		
//		var str2 = "abc";
//		alert(reg.test(str2));
		

	  }
	</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="11111"/>
</body>
</html>

(5)JavaScript DOM练习题

猜你喜欢