前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript基础学习--04for循环

JavaScript基础学习--04for循环

作者头像
用户1148399
发布2018-01-09 15:16:49
1K0
发布2018-01-09 15:16:49
举报
文章被收录于专栏:web前端

一、自动生成100个Li思路:

     1、html布局,在button中做点击事件

     2、获取将要放置li的container容器,定义li,并拼接成字符串str,同时用数组形式保存四种颜色。

     3、将拼接成的字符串渲染到HTML页面中

     4、获取页面中所有的li标签,用for循环遍历li标签以操作每个li标签

     5、对每个li标签设置top和left

          5.1     其中定义变量left=0,并随着for循环中变量j的变化而left++。当超过十个li标签left改变时(left >= 10 ),让left从零开始(left=0)

          5.2     同理top值,当left从零开始时(left=0),top++

     6、完成基本布局设置之后,定义颜色变化,同5.1,当颜色超过总颜色数量时,从头开始设置颜色

二、for循环的性能问题

     1、arr.length 影响性能,每执行一次即计算一次arr.length

    for(var i = 0; i < arr.length; i++){......}

          解决办法:

    var len = arr.length;

    for(var i = 0; i < len; i++){......}

     2、for循环内部最好不好对页面进行操作(增删改)--》字符串累加之后,在for循环外部进行对HTML内容的增删改     <影响性能的关键!!!>

代码语言:javascript
复制
1 var str = '';
2 var len = arr.length;
3 for(var i = 0; i < len; i++){
4      str += '<div>......</div>';
5 }
6 document.getElementBuId('id').innerHTML = str;

三、样式属性操作

     1、object.style.xxx = 'xxx';     eg. oDiv.style.top = num + 'px';     //注意单位!!!!!,注意引号,注意这个样式修改相当于行内(只能获取行内样式,不能获取行间|嵌入样式)!并非外联或者其他地方的修改!

          因为这是操作HTML中的属性,类似于type等等,属性名是style

     2、object.style.cssText = 'width: 100px; height: 100px;';     //没有兼容性问题,但是这个也是修改(其实是替换行内样式(只能获取行内样式,不能获取行间|嵌入样式 ,和外联样式无关(不会改变外联样式,只是当行内和外联有同名样式时,行内优先)

四、HTML的innerHTML的‘添加’内容(模仿添加):

      oDIV.innerHTML += '<li></li>';  

五、按钮只能点击一次

     1、按钮身上操作(用户体验不好,不建议!!!)

          1.1     让按钮禁用:点击事件内部第一行添加     oBtn.disabled = true;               //this.disabled = true;

          1.2     让按钮消失:点击事件内部第一行添加     oBtn.style.display = 'none';     //this.style.display = 'none';

          1.3     让按钮的点击事件清空:oBtn.onclick = null;                                       // this.onclick = null

     2、在内容上操作(性能差,不建议!但是很多时候需要这种思路)

          2.1     先清空,再生成:点击事件内部第一行添加     oUI.innerHTML = '';

     3、用判断,根据判断执行操作

          3.1     给点击事件的按钮添加class flag(操作末尾),然后在第一行判断是否存在这个class,不存在则执行相关操作,否则不操作

          3.2    用onOff = true;判断     推荐!!!

代码语言:javascript
复制
1 var onOff = true;
2 oBtn.onclick = function(){
3      if(onOff){
4           ......
5           onOff = false;
6      }
7 }

六、this的指向和应用     注:记忆,出现 fn();  --> 此时fn内部的this指向window

     1、this指的是 当前 方法(函数)的那个对象

     2、指向window

代码语言:javascript
复制
function fn(){
     this
}
fn();

特殊:此时fn中的 this 不是指向oDiv 而是 window

代码语言:javascript
复制
function fn(){
     this
}
oDiv.onclick = function(){
     fn();
}

     3、指向其他对象(oDiv)

代码语言:javascript
复制
function fn(){
     this
}
oDiv.onclick = fn;
 
oDiv.onclick = function(){
     this
}

     4、同理,onclick中直接this是指向input本身(因为是input调用的),但是如果是input调用fn,this是fn内部的this,此时fn中的this指向window

代码语言:javascript
复制
<input type="button" value="按钮" onclick="this; fn();" />     //不建议行内的写法

     5、this作为参数,此时的指向看this是从何处传出,谁的this,即指向谁,例如:

代码语言:javascript
复制
function fn(obj) {
     obj --> window
}
fn(this);
 
==============================================================================
 
oDiv.onclick = function(){
     var $this = this;
     fn($this);
}
function fn(obj){
     obj --> oDiv
}

七、带括号的是执行后的结果进行赋值,不带括号的是赋值函数(是函数)

代码语言:javascript
复制
   oDiv.onclick = fn;     //这是赋值函数
     oDiv.onclick = fn();     //不允许这种写法!!会报错
     oDiv.onclick = function(){
          fn();     //这是执行完fn函数
          var str = fn();     //这是执行完后得出fn的结果并赋值给str 
     }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-08-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档