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这个对象里的内容；从图中还可以看到ＪＱ产生的数组的索引也是从０开始的。

总结

ＪＳ与ＪＱ数组（集合）的相关知识就介绍到这里了，对于它们的使用还需要各位在实现工作中去体现，另外，在写代码时，多站在系统层次上去感觉一下，去用心去体会，你可能会有另外的收获！

回到目录