寫js的一些思路及問題采集(持續中)

1利用循環給元素添加事件(例子:點選li，彈出目前li 的索引)

錯誤案例：

1 <ul id="testUL">
 2     <li> index = 0</li>
 3     <li> index = 1</li>
 4     <li> index = 2</li>
 5     <li> index = 3</li>
 6 </ul>
 7 <div id="box">123333</div>
 8 <script>
 9     var nodes = document.getElementsByTagName("li");
10     for(i = 0;i<nodes.length;i++){
11         console.log(nodes[i]);   // 可以循環列印。。。
12         nodes[i].onclick = function(){
13             // onsole.log(nodes[i]);   //undefined
14             console.log(i);//值全是4
15         };
16     }
17     var box = document.getElementById("box");
18     for(var j=0; j<5;j++){    //循環完成之後,才觸發的事件。
19         box.onclick = function () {
20             console.log(j); //
21         }
22     }
23 </script>

用閉包解決上述問題（正确案例）

1 <ul id="testUL">
 2     <li> index = 0</li>
 3     <li> index = 1</li>
 4     <li> index = 2</li>
 5     <li> index = 3</li>
 6 </ul>
 7 <script>
 8     //循環綁定事件的時候閉包也很有用，關于閉包有個很經典的例子
 9     var add_the_handlers = function(nodes){
10         var helper = function(i){
11             return function(e){
12                 alert(i);
13             };
14         };
15         for(var i = 0;i<nodes.length;i++){
16             nodes[i].onclick = helper(i); //估計是點選的目前再傳的值
17         }
18     };
19     add_the_handlers(document.getElementsByTagName("li"));
20 </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';

寫js的一些思路及問題 采集(持續中)

寫js的一些思路及問題采集(持續中)