JavaScript基础学习--04for循环

Demos：   https://github.com/jiangheyan/JavaScriptBase 

 

一、自动生成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内容的增删改     <影响性能的关键！！！>

var str = '';
var len = arr.length;
for(var i = 0; i < len; i++){
     str += '<div>......</div>';
}
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；判断     推荐！！！

var onOff = true;
oBtn.onclick = function(){
     if(onOff){
          ......
          onOff = false;
     }
}

 

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

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

 

     2、指向window

function fn(){
     this
}
fn();

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

function fn(){
     this
}
oDiv.onclick = function(){
     fn();
}

 

     3、指向其他对象(oDiv)

function fn(){
     this
}
oDiv.onclick = fn;
 
oDiv.onclick = function(){
     this
}

 

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

<input type="button" value="按钮" onclick="this; fn();" />     //不建议行内的写法

 

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

 

function fn(obj) {
     obj --> window
}
fn(this);
 
==============================================================================
 
oDiv.onclick = function(){
     var $this = this;
     fn($this);
}
function fn(obj){
     obj --> oDiv
}

 

 

七、带括号的是执行后的结果进行赋值，不带括号的是赋值函数（是函数）

  

   oDiv.onclick = fn;     //这是赋值函数
     oDiv.onclick = fn();     //不允许这种写法！！会报错
     oDiv.onclick = function(){
          fn();     //这是执行完fn函数
          var str = fn();     //这是执行完后得出fn的结果并赋值给str 
     }