写js的一些思路及问题 采集(持续中)

1利用循环给元素添加事件(例子:点击li，弹出当前li 的索引)

错误案例：

<ul id="testUL">
    <li> index = 0</li>
    <li> index = 1</li>
    <li> index = 2</li>
    <li> index = 3</li>
</ul>
<div id="box">123333</div>
<script>
    var nodes = document.getElementsByTagName("li");
    for(i = 0;i<nodes.length;i++){
        console.log(nodes[i]);   // 可以循环打印。。。
        nodes[i].onclick = function(){
            // onsole.log(nodes[i]);   //undefined
            console.log(i);//值全是4
        };
    }
    var box = document.getElementById("box");
    for(var j=0; j<5;j++){    //循环完成之后,才触发的事件。
        box.onclick = function () {
            console.log(j); //
        }
    }
</script>

 用闭包解决上述问题（正确案例）

<ul id="testUL">
    <li> index = 0</li>
    <li> index = 1</li>
    <li> index = 2</li>
    <li> index = 3</li>
</ul>
<script>
    //循环绑定事件的时候闭包也很有用，关于闭包有个很经典的例子
    var add_the_handlers = function(nodes){
        var helper = function(i){
            return function(e){
                alert(i);
            };
        };
        for(var i = 0;i<nodes.length;i++){
            nodes[i].onclick = helper(i); //估计是点击的当前再传的值
        }
    };
    add_the_handlers(document.getElementsByTagName("li"));
</script>

 2注意空容器的放置位置，比如用来接收字符串的 str=“”  用于接收数组的 arr="",一般放在循环外面。

3tab效果，在给新的兄弟节点添加背景色的时候，记得先清除原来的，再添加当前点击的。

4百度前端学院 js做的遍历二叉树效果，初始化是必要的，初始化的作用有：|防止要遍历的数组无限制增长，|防止定时器重复开启（检测定时器的状态）。|防止背景色在某一个div停止无法去除。

5js中的顺序，顺序不同往往产生不同逻辑，要注意。

6监测是否在 执行某个动作，加入一个boolean变量flag（全局的），可以监测是否执行某个状态，是否有某个样式等等。

可以理解为是开关，也可以理解为是标记。

7函数只执行一次

function run_only_once(key, fn) {
    var w = window.top;
    if (key in w) {
        return;
    }
    w[key] = 1;
    fn();
}
run_only_once("only", function(){
//---
});

8 事件兼容写法

function addEvent(ele,event,listener) {
        try{
            ele.addEventListener(event,listener,false)
        }catch (e){

            try{
                ele.attachEvent(event,listener);
            }catch (e){
                ele["on"+event] = listener;
            }
        }
    }
    addEvent(ele,"click",function (e) {
        document.getElementById('btn').remove();
    })

9 判断浏览器类型

var u = navigator.userAgent;
alert(u.toLowerCase().indexOf('qqbrowser') == -1);
alert(u.toLowerCase().indexOf('ucbrowser') == -1);

10 移动端判定

if('ontouchend' in document) {
    // 判断移动端
}

　　

var bgWidth = window.innerWidth || document.documentElement.clientWidth ||     document.body.clientWidth,
            bgHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        var bodyheight = document.body.clientHeight ;

11 动态创建元素

var wx=document.createElement("div");
      wx.id="btn";
      wx.style.width=bgWidth+'px';