回到目錄

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

前言

要(yao)講遍歷就要(yao)說數(shu)(shu)組(zu)，你(ni)不可(ke)以對一(yi)個單獨(du)的變(bian)量(liang)進行(xing)遍歷吧，呵呵，數(shu)(shu)組(zu)是一(yi)些(xie)各種類型(xing)變(bian)量(liang)的集(ji)合，在(zai)ＪＳ中(zhong)一(yi)個數(shu)(shu)組(zu)，你(ni)完全可(ke)以把數(shu)(shu)字(zi)與字(zi)符混合在(zai)一(yi)起(qi)，這是合法的。

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++) { //性(xing)能(neng)差的
            console.log(arr[i]);
        }

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

JQ中的集合

對(dui)于在ＪＱ中(zhong)用(yong)(yong)選擇器(qi)選擇對(dui)象(xiang)后，它(ta)將(jiang)返回(hui)一(yi)個ＪＱ對(dui)象(xiang)，這個對(dui)象(xiang)可以是(shi)一(yi)個元素，也可能是(shi)一(yi)個集合，一(yi)般地，我們(men)用(yong)(yong)$("#ID")返回(hui)的(de)是(shi)一(yi)個對(dui)象(xiang)，因為(wei)ＩＤ在頁(ye)面(mian)中(zhong)正常情況(kuang)下(xia)是(shi)唯一(yi)的(de)，而使用(yong)(yong)$(".className"),Find()等返回(hui)一(yi)般是(shi)個集合，或者說是(shi)個ＪＱ對(dui)象(xiang)數組，看代碼：

 <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());//正(zheng)確，因(yin)為(wei)加上$()后，它將被轉化為(wei)ＪＱ對(dui)象(xiang)
        });
 </script>

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

結果為：

JQ對集合的遍歷

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

結果為：

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

總結

ＪＳ與(yu)ＪＱ數組（集合）的(de)相(xiang)關(guan)知識就介紹(shao)到(dao)這(zhe)里了，對(dui)于它(ta)們的(de)使用還需要各位在實現工作中去體現，另外，在寫(xie)代碼時(shi)，多(duo)站在系統(tong)層次上去感覺(jue)一下，去用心去體會(hui)，你可能會(hui)有另外的(de)收獲！

回到目錄