一段效率很高的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 相关文章推荐
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jquery cookie的用法总结
Nov 18 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
vue移动端使用canvas签名的实现
Jan 15 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
分享vim python缩进等一些配置
2018/07/02 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
服装设计专业毕业生推荐信
2013/11/09 职场文书
受资助学生感谢信
2015/01/21 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
学生检讨书范文
2019/06/24 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis