- 浏览: 243034 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
di1984HIT:
写的不错。
使用JDBC进行批处理 -
huyuran:
...
使用JDBC进行批处理 -
chenbo0928:
[url][/url][img][/img][*]引用 ...
Removing a detached instance -
mousepc:
gklovejava 写道Utility method to ...
eclipse中的get/set功能的一个bug -
gklovejava:
Utility method to take a string ...
eclipse中的get/set功能的一个bug
三个练习:
1.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //点击任何一个 li 节点, 弹出其文本值 //1. 代码需要编写在 window.onload 函数体中 window.onload = function(){ //2. 获取所有的 li 节点, 一个数组 var liNodes = document.getElementsByTagName("li"); //3. 遍历 2 得到的数组 for(var i = 0; i < liNodes.length; i++){ //var liNode = liNodes[i]; //4. 为每一个遍历的 li 节点的 onclick 属性赋值 //5. 在赋值的函数体中, 弹出当前 li 节点的文本值 liNode.onclick = function(){ alert(this.firstChild.nodeValue); //alert(liNodes[i].firstChild.nodeValue); //因为在遍历的过程中, i 始终是一个变量, 最后取值为 8 //alert(j); //因为 i 最终的取值是 8, 而 liNodes[8] 对应的节点根本就不存在, 所以以下代码无法工作 //alert(liNodes[i].firstChild.nodeValue); } } }; var liNodes = document.getElementsByTagName("li"); for(var i = 0; i < liNodes.length; i++){ alert(i); liNodes[i].onclick = function(){ alert(i); } } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" title="Beijing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"><li id="ra">红警</li> <li>实况</li> <li>极品飞车</li> <li id="war3">魔兽</li></ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
2.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ //需求: 点击任何一个 li 节点, 改变其文本节点的文本值: 若文本节点中没有 "^^", 则在前边加上 "^^", 若有则去掉 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}/; 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" title="Beijing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"><li id="ra">红警</li> <li>实况</li> <li>极品飞车</li> <li id="war3">魔兽</li></ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
3.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ //****知识: 在 js 中 null, undefined, 0, false 都可以作为 false 使用, 除此以外可以作为 true 使用 //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格), 若没有输入, 则给出提示: "请输入内容"; //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //1. 选取 #submit 按钮, 并为其添加 onclick 响应函数 document.getElementById("submit").onclick = function(){ //3. 获取所有 name="type" 的节点(radio): types var types = document.getElementsByName("type"); //4. 遍历 types 节点, 检测是否又被选中的 var typeValue = null; for(var i = 0; i < types.length; i++){ if(types[i].checked){ typeValue = types[i].value; break; } } //5. 若没有一个 type 被选中, 则打印 "请选择类型", 响应函数结束 if(!typeValue){ alert("请选择类型"); return false; } //6. 选取 name="name" 节点: name var nameNode = document.getElementsByName("name")[0]; //7. 检查 name 对应的文本框中即对应节点的 value 属性值是否有输入(可以去除前后空格) var val = nameNode.value; //7.1 去除前后空格, 需要使用正则表达式 var reg = /^(\s+)|(\s+)$/g; val = val.replace(reg, ""); nameNode.value = val; //8. 若没有输入, 则给出提示: "请输入内容", 响应函数结束 if(val == ""){ alert("请输入内容"); return false; } //9. 创建一个对应的 li 节点 <li>name-value</li>: liNode var liNode = document.createElement("li"); var liText = document.createTextNode(val); liNode.appendChild(liText); //10. 把 liNode 添加为 #type-value 的最后一个子节点 document.getElementById(typeValue).appendChild(liNode); //2. 取消 #submit 按钮的默认行为 return false; }; } </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> <form action="dom-5.html" name="myform"> <input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="game">游戏 name: <input type="text" name="name"/> <input type="submit" value="Submit" id="submit"/> </form> </body> </html>
发表评论
-
Javascript编程风格
2012-07-28 22:43 764http://www.ruanyifeng.com/blog/ ... -
display:none与visible:hidden的区别
2012-02-27 12:08 1271http://www.cnblogs.com/nicholas ... -
javascript字符串操作
2012-02-09 18:37 921转自:沉积如水 使用 substring()或者sli ... -
用JavaScript隐藏控件的方法
2012-01-05 11:55 596转 http://blog.csdn.net/proglove ... -
令人厌烦的单引号和双引号
2011-11-14 12:14 646有时候我们需要在javascript中添加很多单引号 ... -
常用javascript函数,总结中
2011-11-09 11:01 620//去回车符 function rep ... -
select和option操作
2011-10-28 17:57 894http://www.jb51.net/article/162 ... -
stream.js
2011-10-25 23:57 623http://www.aqee.net/docs/st ... -
css笔记
2011-10-01 15:00 943样式表定义及引用 1 ... -
JavaScript Minifier failed for
2011-09-23 19:32 1554JavaScript Minifier failed f ... -
javascript 正则表达式探索
2012-02-11 15:39 1039以下部分内容来自http://www.w3school.com ... -
给struts 的标签s:url加参数
2011-09-05 09:34 879有时候我们需要通过javascript来执行一些action。 ... -
为eclipse安装aptana 插件
2011-09-04 00:01 5051在网上找的links方式安装不成功,试了几次。没办法。只有在线 ... -
checkbox为null
2011-08-31 22:23 1205今天遇到一个小问题,新增操作时,checkbox提交到stru ... -
javascript DOM(五)----插入、删除节点
2011-08-28 17:01 4270插入节点: 1). insertBefore(): ... -
javascript DOM(四)----节点替换
2011-08-28 00:00 1093节点的替换: 1). replaceChild(): ... -
javascript DOM(二)
2011-08-27 22:52 7028. 创建一个元素节点: 1). createEle ... -
javascript DOM(一)
2011-08-27 21:10 1113DOM:Document Object Model(文本对象模 ... -
javascript 表单重置的问题 reset
2011-08-22 11:30 3178今天做了一个reset按钮。但是还是有一个问题没有解 ... -
Javascript继承机制的设计思想
2011-06-07 08:33 692原文地址: http://www.ruanyifeng. ...
相关推荐
《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM(文档对象模型)编程的经典图书,它不仅阐述了JavaScript和DOM的基本知识,还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...
但是,根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术,高清资源,无比经典,值得拥有”,我们可以推断这本书主要讲述了JavaScript中DOM(文档对象模型)的相关编程技术。...
### 三、JavaScript与DOM的结合 #### 3.1 事件处理 JavaScript通过绑定事件监听器来响应用户的交互行为,例如点击、滑动等。通过DOM可以获取到页面上的元素,然后为其绑定事件处理函数,实现各种动态效果。 #### ...
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍,主要涵盖了JavaScript语言在Web前端开发中的应用,特别是关于DOM(Document Object Model)的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript DOM编程艺术是一本深入解析DOM操作的经典书籍,它的源码提供了丰富的实例,帮助开发者深入理解如何使用原生JavaScript高效地操纵网页元素。DOM(Document Object Model)是HTML和XML文档的标准表示,它将...
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改...
JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...
三、HTML DOM HTML DOM专门针对HTML文档,提供了更方便的操作接口。比如,你可以用`document.getElementById()`查找指定ID的元素,`document.getElementsByTagName()`获取指定标签的所有元素,`element.style`对象则...
JavascriptDOM基本操作 dom 精品操作
javascript入门必备,本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍,专注于DOM(Document Object Model)这一核心概念。DOM是Web页面的结构模型,通过JavaScript与DOM的交互,开发者可以实现对网页内容的动态...
教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...
《JavaScript DOM编程艺术》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是HTML和XML文档的结构化表示,JavaScript通过DOM API能够对网页内容进行动态操作,实现丰富的交互效果。...
《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...
JavaScript DOM编程艺术第二版是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍,主要面向希望提升JavaScript技能并掌握网页动态效果开发的Web开发者。DOM是HTML和XML文档的编程接口,它允许...