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(项目说明)
随机推荐
- Linux 命令备注
linux 命令常用备注. 查看某文件大小,du -sk filename; 查看详细信息 ls -l; 查看系统分区 df -h; 查看系统信息 uname -a; 查看系统名称 hostname; ...
- linux 复制文件时，报cp: omitting directory `XXX'
今天在用linux命令进行文件复制时omitting cp -i BBS /opt/workspace/apache-tomcat-6,参数用的是 -i),所以也不太熟悉,原来,还有子目录文件,而是必 ...
- bzoj1202
很久以前写的,忘补解题报告了首先似乎dfs就可以了吧?但还有更高大上的做法其实这东西就是告诉sum[y]-sum[x-1]=z然后给出一堆看成不成立可以用并查集,维护每个点到father点的差即可 . ...
- 【转】Eclipse 中设置JVM 内存 -- 不错
原文网址:http://www.xuebuyuan.com/569653.html java.lang.OutOfMemoryError: Java heap space 从上边的异常信息可以看到,J ...
- 国内外最全的asp.net开源项目
转自:http://www.cnblogs.com/fengtangquan/archive/2010/10/19/1855472.html 最近一些项目开始用到CMS系统,最开始是研究JAVA的,无 ...
- Lambda表达式与匿名方法
在C#2中,由于有了方法组,匿名方法,类型的协变和抗变,使得运用delegate变得很容易,在注册事件时代码变得简单易读,但是在C# 2中,代码仍然有点臃肿,大块的匿名方法会降低代码的可读性,一般我们 ...
- Java多线程内存模型
Java虚拟机规范中试图定义一种Java内存模型(Java Memory Model,JMM)来屏蔽掉各种硬件和操作系统的内存访问差异,以实现让Java程序在各种平台下都能达到一致的并发效果.在此之前 ...
- kvm 性能调优
CPU Tuning Cache share tuning 对于物理 CPU,同一个 core 的 threads 共享 L2 Cache,同一个 socket 的 cores 共享 L3 cache ...
- AVL树的左旋右旋理解 （转）
AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为一,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下都是O(log n).增加和删除可能需要通过一次或多 ...
- java中进程与线程--三种实现方式
一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程. 进程:进程是指 ...