Jvascript学习实践案例(开发常用)
一个自定义的循环遍历元素文本内容的函数
该函数可以确保在HTML和XML DOM文档中很好的工作，使用该函数，就能够获取任何元素文本内容了
循环遍历元素文本内容
代码如下:
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gb2312">
<title>一个循环遍历元素文本内容的函数</title>
</head>
<body>
<div id="test">
<ul>
<li><a href="#">a标签1</a></li>
<li><a href="#">a标签2</a></li>
<li><a href="#">a标签3</a></li>
<li><a href="#">a标签4</a></li>
</ul>
</div>
<script type="text/javascript">
<!--
function text(e){
//如果传入的是元素，则继续遍历其子元素，否则假定他是一个数组
e=e.childNodes || e;
var t="";
//遍历所有的子节点
for(var i=0;i<e.length;i++){
if(e[i].nodeType!=1){//如果不是元素节点，则追加其文本值
t+=e[i].nodeValue+"<br>";
}else{
t+=text(e[i].childNodes);//否则，继续递归调用
}
}
return t;
}
var obj=document.getElementById('test');
var text=text(obj);
document.write(text);
//-->
</script>
</body>
</html>
通常，我们使用previousSibling,nextSibling,firstChild,lastChild等等来遍历DOM文档，但是，往往会将文本节点也遍历出来，一般情况下，我们不大需要遍历文本节点。所以，这里，我们可以使用自定义的几个函数将previousSibling,nextSibling,firstChild,lastChild封装起来，跳过遍历到的文本节点，而直接取得元素节点
查找节点的几个替代函数
代码如下:
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gb2312">
<title>previousSibling,nextSibling,firstChild,lastChild和parentNode的替代函数</title>
<script type="text/javascript">
<!--
//查找当前元素的前一个兄弟元素节点（注意是元素节点而不是文本节点）
function prev(o){
do{
o=o.previousSibling;
}while(o.nodeType!=1 && o);//如果前一个兄弟节点是元素节点则跳出循环
return o;
}
//查找当前元素的下一个兄弟元素节点（注意是元素节点而不是文本节点）
function next(o){
do{
o=o.nextSibling;
}while(o.nodeType!=1 && o);//如果下一个兄弟节点是元素节点则跳出循环
return o;
}
//查找元素的第一个子元素的函数
function first(o){
o=o.firstChild;
return o.nodeType!=1 && o ? next(o) : o;//如果第一个子节点是元素节点，则返回，否则调用next函数，查找下一个兄弟元素
}
//查找元素的最后一个子元素的函数
function last(o){
o=o.lastChild;
return o.nodeType!=1 && o ? prev(o) : o;//如果最后一个子节点是元素节点，则返回，否则调用prev函数，查找前一个兄弟元素
}
//-->
</script>
</head>
<body>
<div id="test">
<p>大部分的WEB开发者在大多数情况下仅仅需要遍历DOM元素而非相邻的文本节点</p>
<p>所以，我们可以自己定义几个函数用于替代<b>previousSibling,nextSibling,firstChild,lastChild和parentNode</b></p>
<ul>
<li><a href="#">a标签1</a></li>
<li><a href="#">a标签2</a></li>
<li><a href="#">a标签3</a></li>
<li><a href="#">a标签4</a></li>
</ul>
</div>
<script type="text/javascript">
<!--
var obj=document.getElementById('test');
document.write("使用nextSibling返回的div元素的下一个兄弟节点，①节点类型:"+obj.nextSibling.nodeType+"②节点名称:"+obj.nextSibling.nodeName+"<br>");
document.write("使用自定义的next函数返回的div元素的下一个兄弟元素，①节点类型:"+next(obj).nodeType+"②节点名称:"+next(obj).nodeName+"<br>");
document.write("使用firstChild返回的div元素的第一个子节点，①节点类型:"+obj.firstChild.nodeType+"②节点名称:"+obj.firstChild.nodeName+"<br>");
document.write("使用自定义的first函数返回的div元素的第一个子元素，①节点类型:"+first(obj).nodeType+"②节点名称:"+first(obj).nodeName+"<br>");
document.write("使用lastChild返回的div元素的最后一个子节点，①节点类型:"+obj.lastChild.nodeType+"②节点名称:"+obj.lastChild.nodeName+"<br>");
document.write("使用自定义的last函数返回的div元素的最后一个子元素，①节点类型:"+last(obj).nodeType+"②节点名称:"+last(obj).nodeName+"<br>");
//-->
</script>
</body>
</html>
获取表单对象的 7 种方式
多种获取表单对象的方式
代码如下:
<html>
<head>
<title>获取表单对象的 7 种方式</title>
</head>
<body>
<form name="myform">
<input type="text" value="获取表单对象的 7 种方式" name="test">
</form>
<script type="text/javascript">
<!--
document.write("方式1:"+document.myform.test.value+"<br>");//经常用
document.write("方式2:"+document.forms[0].test.value+"<br>");//通过下标索引访问，较常用
document.write("方式3:"+document.forms['myform'].test.value+"<br>"); //方式3和方式4可以切换的，这是源于js访问对象的方式可以采用数组形式来访问的缘故
document.write("方式4:"+document.forms.myform.test.value+"<br>");
document.write("方式5:"+document['myform'].test.value+"<br>");
document.write("方式6:"+document.forms.item(0).test.value+"<br>");//注意 是item()，不是item[]
document.write("方式7:"+document.forms.item('myform').test.value+"<br>");
//-->
</script>
</body>
</html>
使用javascript实现全选，反选，全不选的功能
代码如下:
<html>
<head>
<title>全选，反选，全不选</title>
</head>
<body>
<script type="text/javascript">
<!--
for (var i=0;i<20;i++){
document.write('测试'+(i+1)+'<input type="checkbox" name="sel[]"><br>');
}
var o=document.getElementsByName("sel[]");//全局变量
//全选
function selall(){
for(var i=0;i<o.length;i++){
o[i].checked="true";
}
}
//全不选
function noselall(){
for(var i=0;i<o.length;i++){
o[i].checked="";
}
}
//反选
function invert(){
for(var i=0;i<o.length;i++){
if(o[i].checked==true){
o[i].checked="";
}else{
o[i].checked=true;
}
}
}
//-->
</script>
<a href="javascript:selall(this)">全选</a>
<a href="javascript:noselall(this)">全不选</a>
<a href="javascript:invert(this)">反选</a>
</body>
</html>
鼠标移上去，显示子栏目列表
显示隐藏菜单
<html>
<head>
<title>操作菜单</title>
<style>
li{
list-style:none;
}
#menu ul li{
float:left;
width:75px;
height:30px;
text-align:center;
}
#submenu{
clear:both;
}
#submenu ul li{
background:#888;
width:236px;
}
#submenu ul li a{
color:#fff;
text-decoration:none;
}
.highlight{
background:#888;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li onmouseover="change(0)" class="highlight">Menu1</li>
<li onmouseover="change(1)">Menu2</li>
<li onmouseover="change(2)">Menu3</li>
</ul>
</div>
<div id="submenu">
<ul>
<li>
<a href="#">子菜单1</a><br>
<a href="#">子菜单1</a><br>
<a href="#">子菜单1</a><br>
<a href="#">子菜单1</a><br>
</li>
<li style="display:none">
<a href="#">子菜单2</a><br>
<a href="#">子菜单2</a><br>
<a href="#">子菜单2</a><br>
<a href="#">子菜单2</a><br>
</li>
<li style="display:none">
<a href="#">子菜单3</a><br>
<a href="#">子菜单3</a><br>
<a href="#">子菜单3</a><br>
<a href="#">子菜单3</a><br>
</li>
</ul>
</div>
<script type="text/javascript">
<!--
var menu=document.getElementById("menu").getElementsByTagName("li");
var submenu=document.getElementById('submenu').getElementsByTagName('li');
function change(num){
for (var i=0;i<menu.length;i++){
if(i==num){
menu[num].className="highlight";
submenu[num].style.display="block";
}else{
menu[i].className="";
submenu[i].style.display="none";
}
}
}
//-->
</script>
</body>
</html>
通过for...in循环语句，可以遍历出某个对象中的属性
比如，我们想要看下document对象中的所有属性名和属性值，可以使用如下所示的代码：
代码如下:
View Code
<html>
<head>
<title>遍历document文档对象的所有属性</title>
</head>
<body>
<script type="text/javascript">
<!--
for (var pro in document){
document.write("document."+pro+"="+document[pro]+"<br>");
}
//-->
</script>
</body>
</html>
同理，我们也可以用以上方法遍历window对象，location对象，history对象等的属性，当然，也可以用来遍历自定义对象的属性
相关推荐
-
Jvascript学习实践案例(开发常用)
一个自定义的循环遍历元素文本内容的函数 该函数可以确保在HTML和XML DOM文档中很好的工作,使用该函数,就能够获取任何元素文本内容了 循环遍历元素文本内容 复制代码 代码如下: <html> <head> <meta http-equiv="Content-type" content="text/html;charset=gb2312"> <title>一个循环遍历元素文本内容的函数</title>
-
vue.js+boostrap项目实践(案例详解)
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3
-
Python学习之12个常用基础语法详解
目录 前言 1.多个字符串组合为一个字符串 2.字符串拆分为子字符串列表 3.统计列表中元素的次数 4.使用try-except-else-block模块 5.使用枚举函数得到key/value对 6.检查对象的内存使用情况 7.合并字典 8.计算执行一段代码所花费的时间 9.列表展开 10.列表采样 11.数字化 12.检查列表元素的唯一性 前言 前几天写了一篇关于python高级语法的文章:python进阶从青铜到王者一定会用上的Python技巧. 有读者私信说:怎么看自己是不是入门pyth
-
36个Android开发常用经典代码大全
本文汇集36个Android开发常用经典代码片段,包括拨打电话.发送短信.唤醒屏幕并解锁.是否有网络连接.动态显示或者是隐藏软键盘等,希望对您有所帮助. //36个Android开发常用代码片段 //拨打电话 public static void call(Context context, String phoneNumber) { context.startActivity( new Intent(Intent.ACTION_CALL, Uri.parse( "tel:" + pho
-
Java开发常用类库之Hutool详解
简介与安装 简介 Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以"甜甜的". Hutool中的工具方法来自每个用户的精雕细琢,它涵盖了Java开发底层代码中的方方面面,它既是大型项目开发中解决小问题的利器,也是小型项目中的效率担当: Hutool是项目中"util"包友好的替代,它节省了开发人员对项目中公用类和公用工具方法的封装时间,使开发专注于业务,同时可
-
JavaSE学习之内部类及常用API
目录 1.内部类 1.1 内部类概述 1.2 成员内部类 1.3 局部内部类 1.4 匿名内部类 1.5 匿名内部类在开发中的使用 2.常用API 2.1Math 2.2 System 2.3 Object 2.4 Array的排序 1.内部类 1.1 内部类概述 内部类:就是在一个类中定义一个类.例如:在一个类A内部定义一个类B,类B就被称为内部类 格式:public class 类名{修饰符 class 类名{}} 范例 public class Outer{ public class In
-
C语言实践设计开发飞机游戏
目录 一.前言 二.从设计初始菜单界面开始 三.游戏操作指南——guide函数 四.游戏的主体gamebody() ①简化通用的游戏框架 ②头文件一览 ③清屏函数的实现 ④光标隐藏函数 ⑤Initgame函数 ⑥show函数的实现 ⑦与用户输入有关的更新- updateWithinput ⑧与用户输入无关的更新-updateWithoutinput ⑨组合而成的gamebody函数 ⑩不足与展望 一.前言 [设计难度 : ★☆☆☆☆ [参考书籍:<C语言课程设计与游戏开发实践教程> [主要涉及
-
iOS开发常用线程安全锁
目录 正文 原子属性 OSSpinLock - 自旋锁 os_unfair_lock - 互斥锁 NSLock - 互斥锁 NSCondition - 互斥锁 NSConditionLock - 互斥锁 NSRecursiveLock @synchronized Semaphore信号量 pthread_mutex 读写锁 正文 多线程开发,就会有资源抢占的情况,导致出现我们意想不到的数据问题,我们就需要对数据进行加锁,已保证线程安全. 锁主要分为两大类自旋锁和互斥锁. 自旋锁:自旋锁已经被别的
-
kettle在windows上安装配置与实践案例
目录 第1章 kettle概述 1.1 什么是kettle 1.2 Kettle核心知识点 1.2.1 Kettle工程存储方式 1.2.2 Kettle的两种设计 1.2.3 Kettle的组成 1.3 kettle特点 第2章 kettle安装部署和使用 2.1 kettle安装地址 2.2 Windows下安装使用 2.2.1 概述 2.2.2 安装 2.2.3 案例 2.3 创建资源库 2.3.1 数据库资源库 2.3.2 文件资源库 第1章 kettle概述 1.1 什么是kettle
-
IOS开发常用的正则表达式
正则表达式是一种用来进行文本匹配的工具,其语法优美简洁.在开发中,查找.对比以及匹配字符串是家常便饭的业务,通过正则表达式我们将这些业务描述成某些需求规则,来让我们的代码更美观.实用.例如我们要验证用户输入的密码长度是否满足6~18位的长度,新手最常见的验证方式是判断输入的密码长度 return (textField.text.length >= 6 && textField.text.leng <= 18); 尽管这种判断方式没有任何问题,而上面的验证换做正则表达式的匹配字符