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(项目说明)
随机推荐
- nyist 61 传纸条 nyist 712 探 寻 宝 藏(双线程dp问题)
http://acm.nyist.net/JudgeOnline/problem.php?pid=61 http://acm.nyist.net/JudgeOnline/problem.php?pid ...
- ASP.NET MVC 解决LINQ表达式中的SqlMethods 未找到命名空间问题
右键项目属性下的引用: 添加引用: 搜索寻找——System.Data.Linq,然后添加成功,即可解决LINQ表达式中的SqlMethods 未找到命名空间问题
- Learning WCF Chapter1 Generating a Service and Client Proxy
In the previous lab,you created a service and client from scratch without leveraging the tools avail ...
- [LeetCode#218] The Skyline Problem
Problem: A city's skyline is the outer contour of the silhouette formed by all the buildings in that ...
- java基于xml配置的通用excel单表数据导入组件(一、实际应用过程)
主要应用技术:poi + betwixt + reflect 一.实际应用过程 1.创建与目标表结构一样,表名为‘{目标表名}_import’的临时表: 2.创建用于存储导入问题数据的表:t_impo ...
- [转]Unity 3D旋转矢量方向及二维平面基于一点选择另一点(Rotate a Vector3 direction & Rotate a point about another point in 2D )
http://specialwolf.blog.163.com/blog/static/124466832201301332432766/ ****************************** ...
- Navigation Drawer(导航抽屉)
目录(?)[-] 创建一个导航抽屉 创建抽屉布局 初始化抽屉列表 处理导航项选点击事件 监听导航抽屉打开和关闭事件 点击应用图标来打开和关闭导航抽屉 创建一个导航抽屉 导航抽屉是一个位于屏幕左侧边缘用 ...
- 基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建
基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建 http://wenku.baidu.com/view/96fbfe0f581b6bd97f19ea1d.html 用MyE ...
- Selenium WebDriver + Grid2 + RSpec之旅（三） ----入门小例子
Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...
- JavaScript高级程序设计46.pdf
鼠标按钮 只有在主鼠标按钮被单击(或键盘回车键被按下)是才会触发click事件,对于mousedown和mouseup事件,其event对象存在一个button属性,表示按下或者释放按钮.DOM的bu ...