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(项目说明)
随机推荐
- 以面到点的学习MFC
市面上讲解学习MFC的书籍不胜其多,但是阅读的同学呢,看了一些内容以后,就无法阅读下去了,觉得MFC好难,有的呢,就会直接去看别人写的程序,不管是大或小,有时候也能明白一点点,但是总是走不出自己开发设 ...
- 全球AI界最值得关注的十位科学家
全球AI界最值得关注的十位科学家 我们可以看到AI已经从象牙塔里的高冷研究,逐步转换为科技公司.互联网公司的最核心竞争力.AI代表了这时代人类的前沿智慧,也正达到一种科学的极致. 这两天在美国加利 ...
- bzoj3875
悲伤地回忆,当初写了一个作死的算法爆零了为什么不好好写暴力呢……显然设w[i]表示彻底干掉这个怪物的代价注意发现这里的转移具有后效性,但是干掉每个怪物的最优值是一定的我们用spfa来转移,详见那篇sp ...
- 编程实现改变win7主题
一 : 解析问题 1. Windows 7 主题在:%windir%\Resources\Themes : 2: 我们通过shell 命令 (这个是msdn中提到的) rundll32.exe ...
- 在 SharePoint 2010 中访问数据
转:http://blog.banysky.net/?p=81001 数据访问的关键方法有哪些? | 使用查询类 | 使用 SPQuery | 使用 SPSiteDataQuery | 使用 LINQ ...
- 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
- C语言volatile关键字
volatile提醒编译器它后面所定义的变量随时都有可能改变,因此编译后的程序每次需要存储或读取这个变量的时候,都会直接从变量地址中读取数据.如果没有volatile关键字,则编译器可能优化读取和存储 ...
- JAVA虚拟机简介
Java虚拟机定义 Java虚拟机有多层含义 一套规范:Java虚拟机规范.定义概念上Java虚拟机的行为表现 一种实现:例如HotSpot,J9,JRockit.需要实现JVM规范,但具体实现方式不 ...
- nyoj 1100 WAJUEJI which home strong！
WAJUEJI which home strong! 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是 ...
- 从MSN上拔下来的全世界国家下拉框(附带SQL执行脚本)
<select> <option value="AL">阿尔巴尼亚</option> <option value="DZ&quo ...