一段效率很高的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 (八) 插播:jQuery实施方案
Feb 23 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
Vue生命周期示例详解
Apr 12 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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操作csv文件代码实例汇总
2014/09/22 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php日期操作技巧小结
2016/06/25 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Opacity.js
2007/01/22 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python实现word 2007文档转换为pdf文件
2018/03/15 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
python3跳出一个循环的实例操作
2020/08/18 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
几个MySql的面试题
2013/04/22 面试题
大学毕业生通用求职信
2013/09/28 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
物理学专业求职信
2014/07/04 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
导游词之山东八大关
2019/12/18 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Python Pandas 删除列操作
2022/03/16 Python