一段效率很高的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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
Iframe thickbox2.0使用的方法
Mar 05 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
第九节 绑定 [9]
2006/10/09 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php生成无限栏目树
2017/03/16 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
js实现查询商品案例
2020/07/22 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
年会主持词结束语
2014/03/27 职场文书
出纳担保书范文
2014/04/02 职场文书
刊首寄语大全
2014/04/11 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
vue中div禁止点击事件的实现
2022/04/02 Vue.js