004 作业二（单击弹跳li节点的每个文本节点的值；点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除）
1.需求
点击每个 li 节点, 都弹出其文本值
2.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var liNodes=document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++){
liNodes[i].onclick=function(){
alert(this.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" name="hongjing">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
</body>
</html>
3.效果
4.需求
点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除
5.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var liNodes=document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++){
liNodes[i].onclick=function(){
var liValue=this.firstChild.nodeValue;
var reg=/^\^{2}/g;
if(reg.test(liValue)){
liValue=liValue.replace(reg,"");
}else{
liValue="^^"+liValue;
}
this.firstChild.nodeValue=liValue;
}
}
}
</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" name="hongjing">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
</body>
</html>
6.运行结果
随机推荐
- 【Luogu P4074】[WC2013]糖果公园（树上带修改莫队）
题目描述 Candyland 有一座糖果公园,公园里不仅有美丽的风景.好玩的游乐项目,还有许多免费糖果的发放点,这引来了许多贪吃的小朋友来糖果公园游玩. 糖果公园的结构十分奇特,它由 \(n\) 个游 ...
- 使用IntelliJ IDEA工具创建SSM（Spring+MyBatis）项目
1. 安装和使用IntelliJ IDEA 参考:IntelliJ IDEA 的安装和使用教程 2. 创建Web项目 参考:IntelliJ IDEA 创建Java Web项目 3. Spring整合 ...
- 【洛谷P3916】图的遍历
题目大意:给定一个 N 个点,M 条边的有向图,求每个点能够到达的节点的最大编号是多少. 题解:因为题中所给图不一定是一个 DAG,因此无法进行按照拓扑序来动态规划,需要另辟蹊径.由于求的是每个节点能 ...
- 8: springMVC ModelAndView 作用与功能解析
Spring mvc视图机制 所有的web应用的mvc框架都有它定位视图的方式.Spring提供了视图解析器供你在浏览器中显示模型数据,而不必被拘束在特定的视图技术上. Spring的控制器Contr ...
- requestMapping之地址映射
转:http://www.cnblogs.com/qq78292959/p/3760560.html 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时, ...
- sqlserver收缩日志的几种方式
sqlserver收缩日志的几种方式 [sql] --参考 压缩日志及数据库文件大小 /*--特别注意 请按步骤进行,未进行前面的步骤,请不要做后面的步骤 否则可 ...
- vue 使用v-cloak让在页面加载时不显示{{}}花括号
官方说法: 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准 ...
- spark RDD 常见操作
fold 操作 区别 与 co 1.mapValus 2.flatMapValues 3.comineByKey 4.foldByKey 5.reduceByKey 6.groupByKey 7.so ...
- SpringMvc数据校验@Valid等注解的使用与工具类抽取
最近在重构老项目的代码,发现校验入参占用了很多代码,之前我对这一块的认识局限于使用StringUtils等工具来多个if块进行判断,代码是没什么问题,但是总写这些令人生烦,毕竟写代码也要讲究优雅的嘛, ...
- dwz中给表单项获取,设置值
$.pdialog._current.find('form input#inputId').val(54);