JavaScript基础学习--04for循环

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

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

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

function fn(){
fn();

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

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

3、指向其他对象(oDiv)

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

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