Jquery真的不難~第五回 JQ中的遍歷（遍歷中的性能知識點）

回到目錄

上一回主要說的是JQ中的幾個主要的事件，文章的最后還介紹了匿名函數的使用，恩，今天主要來看一下JQ中的遍歷，就是在ＪＱ中進行循環操作以及在遍歷時要注意的地方。

前言

要講遍歷就要說數組，你不可以對一個單獨的變量進行遍歷吧，呵呵，數組是一些各種類型變量的集合，在ＪＳ中一個數組，你完全可以把數字與字符混合在一起，這是合法的。

JS中的數組

數組的定義

  var arr = [1, 2, 3, 4, "one", "two", "three", "four"]; //一維數組
  var props = [["拳頭", "刀", "槍"], ["boxing", "knife  ", "gun"]]; //二維數組

調用

   console.log(arr[0]);
   console.log(props[0][0]);

JS對數組的遍歷

        for (var i in arr) {//可能性不高
            console.log(arr[i]);
        }

        for (var i = 0; i < arr.length; i++) { //性能差的
            console.log(arr[i]);
        }

        for (var i = 0, max = arr.length; i < max; i++) {//性能好的
            console.log(arr[i]);
        }

JQ中的集合

對於在ＪＱ中用選擇器選擇對象后，它將返回一個ＪＱ對象，這個對象可以是一個元素，也可能是一個集合，一般地，我們用$("#ID")返回的是一個對象，因為ＩＤ在頁面中正常情況下是唯一的，而使用$(".className"),Find()等返回一般是個集合，或者說是個ＪＱ對象數組，看代碼：

 <script>  
  $(function () {
            //返回ＪＱ對象集合
            var jqArr = $("#menu_title").find("dt");
            console.log("menu_title下的dt元素數量為：" + jqArr.size());
            console.log("menu_title下的第一個dt的內容為：" + jqArr[0].html()); //會出錯，因為jqArr[0]已經不是ＪＱ對象了
            console.log("menu_title下的第一個dt的內容為：" + $(jqArr[0]).html());//正確，因為加上$()后，它將被轉化為ＪＱ對象
        });
 </script>

  <dl id="menu_title">
        <dt>人</dt>
        <dd>
            一種高級動物</dd>
        <dt>狗</dt>
        <dd>
            人類的朋友</dd>
        <dt>貓</dt>
        <dd>
            貓科動物的祖先</dd>
    </dl>

結果為：

JQ對集合的遍歷

         jqArr.each(function (i, o) {
                console.log("第" + i + "號元素的內容是:" + $(o).html());
            });

結果為：

從結果中我們可以看到，$.each(function(i,o){})方法中的i表示ＪＱ數組的索引值，而o表示ＪＱ數組的值，而o加上$()變成ＪＱ對象之后，使用html()這個方法可以輸出o這個對象里的內容；從圖中還可以看到ＪＱ產生的數組的索引也是從０開始的。

總結

ＪＳ與ＪＱ數組（集合）的相關知識就介紹到這里了，對於它們的使用還需要各位在實現工作中去體現，另外，在寫代碼時，多站在系統層次上去感覺一下，去用心去體會，你可能會有另外的收獲！

回到目錄