题目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>