一段效率很高的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 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
canvas知识总结
Jan 25 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
VUE脚手架具体使用方法
May 20 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
vue监听dom大小改变案例
Jul 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
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python实现各进制转换的总结大全
2017/06/18 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
python 把列表转化为字符串的方法
2018/10/23 Python
简单了解python元组tuple相关原理
2019/12/02 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
python中如何使用虚拟环境
2020/10/14 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
高一英语教学反思
2014/01/22 职场文书
大学毕业寄语大全
2014/04/10 职场文书
审计专业自荐信范文
2014/04/21 职场文书
离婚财产处理协议书
2014/09/30 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014年班干部工作总结
2014/11/25 职场文书
亮剑观后感
2015/06/05 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
导游词之五台山
2019/10/11 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript