JS2 for应用
再谈js获取元素一二：
var oUl=document.getElementById('list'); //静态方法
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li'); //动态方法
//aLi.length
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
//alert(aBtn.length);
//创建多个按钮
document.body.innerHTML='<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />...<input type="button" value="按钮" />';
//逐个输出出来，或测试出来
aBtn[0].onclick=function(){alert(1);};
aBtn[1].onclick=function(){alert(2);};
aBtn[2].onclick=function(){alert(1);};
...
};
我们会发现，重复执行某些代码，且每次执行的时候，有个数字在变化
怎样解决呢？for循环
for(var i=0;i<aBtn.length;i++){
aBtn[i].onclick=function(){alert(i);};
}
执行步骤↓
1)var i=0;
2)i<aBtn.length; 关键
3)括号里面的所有代码
4)i++
for帮我们解决了代码重复的问题，那么怎样才能提高它的性能呢？
1）不要直接和页面发生关系
运行下面两段代码，比较一下性能，例如：
window.onload = function (){
//1 直接和页面发生关系
for( var i=0; i<; i++ ){
document.body.innerHTML += '<input type="button" value="按钮" />';
}
};
window.onload=function(){
//不和页面直接发生关系
var str="";
for(var i=0;i<;i++){
str+='<input type="button" value="按钮" />';
}
document.body.innerHTML=str;
};
for计算元素坐标
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <style>
//注意要绝对定位噢！亲也可以尝试一下去掉绝对定位会发生什么
div { width:50px; height:50px; background:red; position:absolute; top:; left:; font-size:30px; text-align:center; line-height:50px; color:#fff; }
</style>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<;i++){
document.body.innerHTML+='<div>'+i+'</div>';
}
for(var i=0;i<aDiv.length;i++){
aDiv[i].style.left=10+i*50+'px';
aDiv[i].style.top=10+i*50+'px';
}
}
<script> </script>
</head> <body></body>
</html>
JS2 for应用的更多相关文章
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- vue.js2.0+elementui ——> 后台管理系统
前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...
- 04慕课网《vue.js2.5入门》——Vue-cli开发todolist
主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...
- 01慕课网《vue.js2.5入门》——基础知识
前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
- 浅谈Vue.js2.0某些概念
Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统. A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...
- vue.js2.0 (简易)水果商城 vuex vant-ui
vue.js2.0 (简易)水果商城 vuex vant-ui:https://segmentfault.com/a/1190000015690250 vue2.5全家桶 高仿vivo商城 百分之95 ...
- 耗时近一个月，终于录完了VUE.JS2.0前端视频教程！
这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
随机推荐
- 《ruby编程语言》笔记 1
赋值: ruby支持并行赋值,即允许在赋值表达式中出现多余一个值和多于一个的变量: x,y=1,2a,b=b,ax,y,z=[1,2,3] (python同样可以正常上面的语句). Methods i ...
- 【CF】283D Tennis Game
枚举t加二分判断当前t是否可行,同时求出s.注意不能说|a[n]| <= |3-a[n]|就证明无解,开始就是wa在这儿了.可以简单想象成每当a[n]赢的时候,两人都打的难解难分(仅多赢一轮): ...
- 【HDOJ】1072 Nightmare
bfs,使用ttl进行剪枝. #include <iostream> #include <cstdio> #include <cstring> #include & ...
- bzoj1179
这种tarjan+dp的水题我竟然还WA了两次,要小心! type link=^node; node=record po:longint; next:link; ...
- C#获取文件的当前路径
C#获取文件的当前路径 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2.Syst ...
- java基于xml配置的通用excel单表数据导入组件(一、实际应用过程)
主要应用技术:poi + betwixt + reflect 一.实际应用过程 1.创建与目标表结构一样,表名为‘{目标表名}_import’的临时表: 2.创建用于存储导入问题数据的表:t_impo ...
- （转载）最黑的黑客米特尼克：多次耍FBI 终被高手擒
(转载)http://bbs.chinabyte.com/thread-816847-1-1.html 凯文·米特尼克 50岁 第一个被FBI通缉的黑客,被称为“头号电脑骇客”,曾入侵北美防空指挥系统 ...
- Method Overloading in WCF zt
Method overloading is the process of implementing Polymorphism in Object-Oriented Programming. A met ...
- linux 给用户添加进新的组
给用户user1添加一个新的组group1 usermod -G group1 #给当前登录用户所在组设置为 group1 注意:上面的命令有个问题需要知道,这个操作是重置用户所在组,也就是会让当前用 ...
- ffmpeg, libav学习记录
转载自:http://hi.baidu.com/y11022053/item/81f12035182257332e0f8196 一个偶然遇到了ffmpeg,看起来不多,而且通用性很强,算是一个扎实的技 ...