一段效率很高的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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
微信小程序实现手指触摸画板
Jul 09 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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
php经典算法集锦
2015/11/14 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python实现翻转数组功能示例
2018/01/12 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
销售经理岗位职责
2014/03/16 职场文书
诚信承诺书范文
2014/03/27 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
党员群众路线承诺书
2014/05/20 职场文书
保护动物的标语
2014/06/11 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
群众路线专项整治方案
2014/10/27 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS