<!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>