我的书签
添加书签
移除书签4.6.4 理解jQuery选择
当使用jQuery对象选择一个或多个元素的时候，例如，$（'#navBar a'），最终不会像使用getElementById（）或getElementsByTagName（）方法那样，得到一个传统的DOM节点列表。相反，得到了一个特殊的jQuery，只是元素的集合。这些元素不会理解传统的DOM方法，因此，如果你在其他图书中学习过DOM，会发现DOM不能和jQuery对象一起工作。这似乎是一个重要的缺陷，但是，几乎一个一般DOM节点的所有属性和方法都有jQuery的对应物，因此，我们可以做到传统DOM所能做的所有事情，而且通常会更快并且使用更少的代码。
然而，DOM和jQuery选择的工作方式在概念上有两个重要的不同。jQuery的目标在于使得编写JavaScript程序更容易和更快。这个库的目标之一是，使得我们用尽可能少的数行代码做很多事情。为了做到这一点，jQuery使用两个与众不同的原则。
自动循环
通常，当使用DOM并且选择一堆节点的时候，需要创建一个循环（见3.3节）来遍历选择的每个节点，并且对该节点做些事情。例如，想要选择页面中的所有图像然后隐藏它们，如果想要创建一个JavaScript驱动的幻灯片放映效果，可能要这么做：首先必须选择这些图像然后创建一个循环来遍历图像的列表。
由于遍历元素的一个集合如此常用，以至于jQuery函数中直接构建了这一功能。换句话说，当对元素的选择集合应用一个jQurey函数的时候，不需要自己创建循环，因为函数会自动进行循环。
例如，要选择一个＜div＞标签中拥有一个slideshow ID的所有图像，然后将这些图像隐藏，可以用jQuery这么编写：
$（'#slideshow img'）.hide（）；
$（#slideshow img'）所创建的元素的列表可能包含50幅图像。hide（）函数自动遍历列表，隐藏每个单幅图像。这一设置如此方便（设想一下你不必再自己编写循环的数目），这么好的功能却不是DOM的一部分，真是令人惊讶。
串联函数
有时候，我们希望对一个元素选择集合执行几种操作。例如，假设想要使用JavaScript来设置一个＜div＞标签（拥有一个ID为popUp）的宽度和高度。通常，必须至少编写两行代码。但是jQuery使得我们可以用一行代码做到这点：
$（'#popUp'）.width（300）.height（300）；
jQuery使用一个独特的原则叫做串联，它允许一个接一个地添加函数。每个函数用一个点号和下一个函数连接起来，并且和前一个函数一样在同一个jQuery元素结合执行。因此，上面这段代码修改了ID为popUp的元素的宽度，然后修改了该元素的高度。串联jQuery函数使得我们能够简练地执行多个操作。例如，假设不仅要设置＜div＞标签的宽度和高度，而且要向＜div＞中添加文本并使其淡出视线（假设当前在页面上是可见的）。可以像下面这样简洁地编写：
$（'#popUp'）.width（300）.height（300）.text（'Hi！'）.fadeIn（1000）；
这段代码对于ID名为popUp的标签使用了4个jQuery函数（width（）、height（）、text（）和fadeIn（））。
提示：一行长长的串联jQuery函数很难阅读，因此，一些程序员将其分为数行，如下所示：
$（'#popUp'）.width（300）
.height（300）
.text（'Message'）
.fadeIn（1000）；
只要在串联的最后一行之后添加一个分号，JavaScript解释器就把这一行当做单独的一句对待。
串联函数的功能确实很少见，并且这是jQuery特有的功能。换句话说，不能在串联中添加非jQuery函数（不管是自己创建的函数还是内置的JavaScript函数）。
