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 相关文章推荐
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
layui实现动态和静态分页
Apr 28 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
来自国外的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
人族 Terran 基本策略
2020/03/14 星际争霸
咖啡的种类和口感
2021/03/03 新手入门
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
php给数组赋值的实例方法
2019/09/26 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
务虚会发言材料
2014/12/25 职场文书
重阳节慰问信
2015/02/15 职场文书
教学督导岗位职责
2015/04/10 职场文书
统招统分证明
2015/06/23 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
如何用Python搭建gRPC服务
2021/06/30 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python