Jvascript学习实践案例(开发常用)


Posted in Javascript onJune 25, 2012

一个自定义的循环遍历元素文本内容的函数

该函数可以确保在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>

鼠标移上去,显示子栏目列表

Jvascript学习实践案例(开发常用)

显示隐藏菜单 
<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对象等的属性,当然,也可以用来遍历自定义对象的属性
Javascript 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
javascript轮播图算法
Oct 21 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
来自国外的30个基于jquery的Web下拉菜单
Jun 22 #Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 #Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 #Javascript
javascript作用域容易记错的两个地方分析
Jun 22 #Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 #Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 #Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 #Javascript
You might like
PHP的FTP学习(二)
2006/10/09 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
elementui的默认样式修改方法
2018/02/23 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
python 实现有道翻译功能
2021/02/26 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
天地会口号
2014/06/17 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
工作证明英文模板
2014/10/21 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
go xorm框架的使用
2021/05/22 Golang