jQuery教程-jQuery包装集

jQuery的包装集是一个非常重要的概念。包装集是指通过$("exp")筛选出页面的一组满足表达式的元素，这一组元素就属于jQuery包装集中的元素。链式编程是jQuery的一大特点，而理解包装集是进行链式编程的基础。

研究jQuery包装集的一个重点是了解每一个包装集命令会返回什么结果，是返回原包装集还是返回新的包装集。关于这方面的描述将贯穿本文。

包装集的大小

jQuery的包装集和数组非常相似，可以使用length属性来获取包装集的大小。另外，jQuery提供了一个size()方法来获取包装集的大小。size()命令的语法为：

例如我们想知道一个表格中的tr元素的个数，可以使用下面的代码：

$("#table tr").size();                              
                            

获取包装集中的元素

jQuery允许把包装集当做数组来使用，所以我们可以通过下标来获取包装集中的某个元素。另外，jQuery专门有一个get()方法来获取包装集中的元素。get()方法的语法为：

例如要获取一个表格下标为2的tr元素，可以使用下面的代码：

$($("#table tr").get(2))
                            

注意，通过get()方法返回的是JavaScript元素或JavaScript数组，不能够使用jQuery的方法。如果想使用jQuery的方法，需要使用$()将它重新包装。

获取某个元素在包装集的位置

如果需要知道某个元素在包装集中的位置，可以使用index()方法。index()方法的语法为：

往包装集中添加元素

当我们得到了一个包装集之后，如果想往这个包装集中再添加元素，可以使用add()方法。add()方法将多个选择器链接在一起，形成一个“或”的关系链。add()方法的语法为：

例如，如果有一个表格，我们在选择了表格的第一个td元素之后，然后使用add()方法在添加表格的最后一个td元素到包装集中，并使它们的颜色变为绿色，代码如下：

$("#table tr td:first").add("#table tr td:last").addClass('success');
                            

下图是一个返回结果的截图效果：

删除包装集中的某个元素

在确定了一个包装集之后，如果想将这个包装集中的某些元素取消掉，可以使用not()方法。not()方法的语法为：

例如，一个包装集为表格中的所有td元素，通过not()方法排除掉所有为2的倍数的td元素，代码如下：

$("#table tr td").not("#table tr td:nth-child(2n)").addClass('success');
                            

得到的效果如下图所示：

过滤包装集中的元素

jQuery的filter()方法可以对包装集中的元素进行过滤。如果传给filter()方法的参数是一个函数，那么会为每一个包装集元素反复调用这个函数，如果哪个元素的函数调用返回了false，就删除那个元素。filter()方法的语法为：

获取包装集的子集

如果希望获取包装集中的某个子集，可以使用jQuery提供的slice()方法。这个方法会创建并返回来自原包装集的任何连续的子包装集。slice()方法的语法为：

例如想要在一个表格的所有tr元素中截取第二和第三个tr元素，代码如下：

$("#table tr").slice(1,3).addClass('success');
                            

得到的效果如下图所示：

通过关系获取包装集

jQuery允许我们根据DOM中包装元素与其它元素的层次关系，从现有包装集中获取新包装集。

根据关系来获取新包装集的方法有以下几个，这些方法都会返回新的包装集。

再次说明，上面的一组方法都会返回新的包装集。理解这些方法最好的办法就是自己动手写代码来进行测试。自己动手写一下代码测试一下这些方法吧！

find() 方法

find()方法可以把现有的包装集搜索一遍，并返回包含所有匹配参数表达式元素的新包装集。find()方法的语法为：

find()方法和filter()方法在功能上有些类似，但是它们是不同的。这主要体现在：

• 1、find()方法返回新包装集，filter()方法返回原包装集。
• 2、find()方法是在当前包装集的元素中去查找或过滤，而不是在包装集中过滤。而filter()方法是在包装集中进行过滤。

如何理解上面的第2点呢？例如有一个表格，我们通过$('#table')来获取了一个包装集，此时的包装集中只有一个元素（表格元素）。如果我们想在这个包装集来查找表格中的第2个tr元素，就需要使用find()方法，而不能使用filter()方法。

$("#table").find("tr:eq(1)").addClass('success'); // 正确                              
$("#table").filter("tr:eq(1)").addClass('success'); // 错误                              
                            

形象一点的比喻，调用find()方法的包装集就好像一间大房子，我们现在只知道有一间大房子，想要在这间房子中查找某件东西。而调用filter()方法的包装集是指我们已经知道了房子中的所有东西的明细，然后从这些东西中查找某样东西。

contains() 方法

contains(text)方法用于查找包含text字符串的元素。这个方法也是返回新的包装集。contains(text)方法的语法为：

除了上面介绍的方法之外，还有一个is()方法，这个方法用于查看是否至少包含一个匹配给定选择器的元素。如果至少有一个元素匹配，就返回true，否则返回false。

链式编程

我们在上面的包装集介绍过程中，不断的提及每一个方法会返回什么包装集，是原有包装集还是新的包装集。这实际上是在为介绍jQuery的链式编程做准备。

jQuery的链式编程能力不但允许以简洁的方式写出强大的操作，而且提高了效率，因为它能够把多个命令应用到包装集中，而不必重新计算包装集。

在使用jQuery编写链式命令时，有两个重要的方法：end()和andSelf()。

来看下面的一个例子，这个例子中对一个表格进行clone()复制操作。通过这个例子来研究jQuery的链式编程。

这个例子使用的HTML代码如下：

<div id="table1" class="table-responsive">
  <table id="table-2" class="table table-bordered table-striped">
      <thead>
        <tr>
          <td>#</td>
          <td>名字</td>
          <td>性别</td>
          <td>年龄</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>张晓亮</td>
          <td>男</td>
          <td>26</td>
        </tr>
        .......
      </tbody>
    </table>
</div>
<div id="table2" class="table-responsive">
  <table id="table-2" class="table table-bordered table-striped">
    <thead>
        <tr>
          <td>#</td>
          <td>名字</td>
          <td>性别</td>
          <td>年龄</td>
        </tr>
      </thead>
  </table>
</div>                             
                            

现在得到的效果如下图所示：

接下来我们使用复制命令，将表格1的内容复制给表格2。

$("#table-1 tbody").clone().appendTo("#table-2");                              
                            

现在我们得到了2个表格。由于clone()和appendTo()命令得到的都是新的包装集，所以如果我们接着在上面的命令链上执行操作只会影响到新的表格（#table2）。例如：

$("#table-1 tbody").clone().appendTo("#table-2")
                   .find("tr:nth-child(even)")
                   .addClass("success");                              
                            

结果如下图所示，注意上面使用的是find()方法，而不是filter()方法。结果只有第二个表格的偶数行会变为绿色。

如果想在执行appendTo()方法之后再操作原来的#table1表格，我们就需要使用2次end()方法才能返回到原始的包装集，例如：

$("#table-1 tbody").clone().appendTo("#table-2")
                   .end().end().find("tr:nth-child(even)")
                   .addClass("success");                              
                            

上面的小例子展示了end()的使用方法。

对于andSelf()方法，它用于合并命令链中最近产生的两个包装集。还是以上面的表格作为例子，在执行复制之后，我们希望将两个表格的偶数行都变为绿色，可以执行下面的代码：

$("#table-1 tbody").clone().appendTo("#table-2")
                   .end().andSelf().find("tr:nth-child(even)")
                   .addClass("success");                              
                            

第一个end()方法返回被克隆表格的包装集，然后通过andSelf()方法将克隆表格包装集和原始包装集进行合并，再从中查找偶数行的tr原始，将它们的颜色变成绿色。

小结

这篇文章中介绍了jQuery包装集的内容。理解jQuery的包装集是使用jQuery的基础。研究包装集一定要弄明白各个包装集方法会返回什么结果，我们总结如下：

返回原包装集的方法有：

• size()
• get
• add()
• not()
• filter()

返回新包装集的方法有：

• slice()
• find()
• clone()
• children()
• contents()
• next()
• nextAll()
• parent()
• parents()
• prev()
• prevAll()
• siblings()
• appendTo()
• prependTo()
• insertBefore()
• insertAfter()
• replaceAll()

add()会添加新的元素到包装集，filter()和not()方法是在当前包装集的基础上进行过滤和取消（特别注意不是在包装集中进行过滤）。

slice(),is()方法都和not()方法类似。

find(),parent(),children()等方法是在当前包装集的元素中去查找或过滤，而不是在包装集中过滤。

要清楚的明白每一个方法会返回什么包装集，这样在我们进行链式编程的时候才会得心应手，不会出现莫名其妙的错误。

相关阅读

• jQuery教程-jQuery基本选择器
• jQuery教程-jQuery过滤选择器
• jQuery教程-jQuery表单选择器

查看演示 下载地址