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(项目说明)
随机推荐
- WCF中的由于目标计算机积极拒绝，无法连接
1.第一种情况 百度上找到了这篇文章 http://blog.sina.com.cn/s/blog_6b44b2ba01016j0z.html 讲的是使用了using用完之后就释放了,得到启发,仔细 ...
- POJ_2184_Cow_Exhibition_(动态规划,背包)
描述 http://poj.org/problem?id=2184 n只奶牛,每只都有智商s_i和情商f_i,取出若干只,保证智商之和与情商之和都不为负的情况下,让两者之和最大. Cow Exhibi ...
- SIFT算法：DoG尺度空间生产
SIFT算法:DoG尺度空间生产 SIFT算法:KeyPoint找寻.定位与优化 SIFT算法:确定特征点方向 SIFT算法:特征描述子 目录: 1.高斯尺度空间(GSS - Gauss Scal ...
- sql server 2008中id如何设为自增
通过 IDENTITY 来设置 参数有2个,一个是“初始值” 一个是“增量”.默认情况下 INSERT 语句中,不能对 IDENTITY 的字段进行赋值. create table web_produ ...
- 【转】提供android 5.0 AOSP源码下载
http://blog.csdn.net/innost/article/details/41148335 android-5.0.tar.gz 115网盘礼包码:5lbcl16a1k7q http:/ ...
- Ruby入门教程和技巧
转自:http://blog.csdn.net/cqfz123/article/details/1349050 Ruby真的比Java更好? Ruby On Rails 创始人:对Java 说再见 ...
- HW4.27
public class Solution { public static void main(String[] args) { int count = 0; for(int i = 2001; i ...
- 零基础学习视频解码之FFMpeg中比较重要的函数以及数据结构
http://www.cnblogs.com/tanlon/p/3879081.html 在正式开始解码练习前先了解下关于FFmpeg中比较重要的函数以及数据结构. 1. 数据结构: (1) AVF ...
- 怎样在Yii中显示静态页
在web应用中,我们经产更需要显示静态页,如“关于我们”等,这些文件通常是静态页,通常有如下几种处理方法: 1.把独立的html文件存在Web服务器能直接访问的目录下.这种方案的缺点是很难维护网页布局 ...
- sqlserver优化查询
sql语句的优化分析 开门见山,问题所在 sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语 ...