码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript DOM编程 学习笔记-两个小示例

时间:2014-10-15 21:28:01      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:function


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
	window.onload = function() {
		//点击每个li节点都弹出其文本值
		var liNodes = document.getElementsByTagName("li");
		//得到每一个li节点
		for(var i = 0; i < liNodes.length; i++){
			//为每一个li节点添加onClick响应函数
			liNodes[i].onclick = function(){
				//在响应函数中获取当前节点的文本节点的文本值
				alert(this.firstChild.nodeValue);
				
				//alert(liNodes[i].firstChild.nodeValue);
				//这种方式不行。因为具体执行这段代码的时候for循环已经执行完了,i的值为liNodes.length
			}
		}
		
	}
</script>
</head>
<body>
	<p>你喜欢哪个城市?</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武汉</li>
		<li>深圳</li>
	</ul>

	<ul id="book">
		<li id="xyj" name="xyj">西游记</li>
		<li>三国演义</li>
		<li>水浒传</li>
	</ul>
</body>
</html>


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
	window.onload = function() {
		//点击每个li节点,如果如果li节点的文本值没有^^则加上,如果有则去除
		
		/*
		//使用正则表达式去除判断是否已^^开始
		//调用字符串的replace(reg, str)去除执行的字符串
		var str = "^^abc";
		var reg = /^\^{2}/g;
		alert(reg.test(str));//true
		str = str.replace(reg, "")
		
		var str2 = "abc";
		alert(reg.test(str2));//false
		*/
		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;
			}
		}
	}
</script>
</head>
<body>
	<p>你喜欢哪个城市?</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武汉</li>
		<li>深圳</li>
	</ul>

	<ul id="book">
		<li id="xyj" name="xyj">西游记</li>
		<li>三国演义</li>
		<li>水浒传</li>
	</ul>
</body>
</html>



本文出自 “阿凡达” 博客,请务必保留此出处http://shamrock.blog.51cto.com/2079212/1564494

JavaScript DOM编程 学习笔记-两个小示例

标签:function

原文地址:http://shamrock.blog.51cto.com/2079212/1564494

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!