一段效率很高的for循环语句使用方法


Posted in Javascript onAugust 13, 2007

给表格的每行加上样式,注意for的第二个参数,当数组下标越界时,row=row[i]返回false,到此循环结束。

var rows = document.getElementsByTagName('tr');
for( var i = 0, row; row = rows[i]; i++ ) {
  row.className = 'newclass';
}
测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
li { margin-left:28px;}
.abc {background-color:#eee;font-size:14px; margin-bottom:10px;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function a(){
 var row = document.getElementsByTagName("li");
 var t1 = new Date();
 for (var i=0,j; j=row[i]; i++)
 {
  j.className="abc";
 }
 var t2 = new Date();
 alert("耗时 "+(t2-t1).toString()+" 毫秒");
}
function b(){
 var row = document.getElementsByTagName("li");
 var t1 = new Date();
 for (var i=0; i<row.length; i++)
 {
  row[i].className="abc";
 }
 var t2 = new Date();
 alert("耗时 "+(t2-t1).toString()+" 毫秒");
}
function c(){
 var j="<ol>";
 for (var i=0; i<2000; i++)
 {
  j=j+"<li>测试文字</li>";
 }
 j=j+"</ol>";
 document.getElementById("box").innerHTML = j;
}
//-->
</SCRIPT>
</head>
<BODY>
<input type="button" value="CreateTable" onclick="c()" />
<input type="button" value="Test old method!" onclick="b()" />
<input type="button" value="Test new method!" onclick="a()" />
<input type="button" value="Clear" onclick="document.getElementById('box').innerHTML='';" />
<div id="box"></div>
</BODY>
</HTML>

Javascript 相关文章推荐
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
javascript实现轮显新闻标题链接
Aug 13 #Javascript
document.open() 与 document.write()的区别
Aug 13 #Javascript
js小技巧--自动隐藏红叉叉
Aug 13 #Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 #Javascript
用js实现随机返回数组的一个元素
Aug 13 #Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 #Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 #Javascript
You might like
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
自己的js工具 Event封装
2009/08/21 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
如何真正的了解python装饰器
2020/08/14 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
太空授课观后感
2015/06/17 职场文书
浅谈Python 中的复数问题
2021/05/19 Python