一段效率很高的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 相关文章推荐
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
vue实现图片裁剪后上传
Dec 16 Vue.js
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
一个简单的MySQL数据浏览器
2006/10/09 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
jQuery each()方法的使用方法
2010/03/18 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
Python PIL图片添加字体的例子
2019/08/22 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
使用python计算三角形的斜边例子
2020/04/15 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
小爸爸观后感
2015/06/15 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript