要获取一个页面中所有匹配的 HTML 元素的数组，您仅需将 HTML 标记（不带括号）传递到 jQuery 搜索字段。这是查找对象的 “快速但是粗糙” 的方法。如果要将属性附加到通用的 HTML 元素，这种方法是很有用的。

清单 5. HTML 选择

// This will show every <div> tag in the page. Note that it will show // every <div>, not the first matching, or the last matching. // Traversing Arrays is discussed later in the article. $("div").show(); // This will give a red background to every <p> tag in the page. $("p").css("background", "#ff0000");

ID

正确的页面设置要求页面上的每个 ID 都是惟一的，虽然有时并不是这样（有意或无意）。使用 ID 选择时，jQuery 仅返回第一个匹配的元素，因为它要求您遵循正确的页面设计。如果您需要将一个标记附加到同一页面上的几个元素，应当选择使用 CLASS 标记。

清单 6. ID 选择

// This will set the innerHTML of a span element with the id of "sampleText" to "Hi". // Note the initial "#" in the command. This is the syntax used by jQuery to search // for IDs, and must be included. If it is excluded, jQuery will search for the HTML // tag instead, and with no <sampleText> tags on a page, will ultimately do // nothing, leading to frustrating and hard-to-find bugs (not that that has ever // happened to me of course). $("#sampleText").html("Hi");

CLASS

CLASS 与 ID 非常相似，不同之处是它可以用于一个页面上的一个或多个元素。因此，尽管受到同一页面的每个元素只有一个 ID 的限制，同一页面上的多个元素仍然可以拥有相同的 CLASS。这使您可以在一个页面上跨多个元素执行函数，并且只需传入一个 CLASS 名称。

清单 7. CLASS 选择

// This will create a red background on every element on the page with a CLASS of // "redBack". Notice that it doesn't matter which HTML element this "redBack" // CLASS tag is attached to. Also notice the period in the front of the query // term -- this is the jQuery syntax for finding the CLASS names. $(".redBack").css("background", "#ff0000"); <p>This is a paragraph</p> <div>This is a big div</div> <table><tr><td>Sample table</td></tr></table>

合并搜索条件

可以在一个搜索中，将以上的 3 个搜索条件和下面的所有过滤器合并起来。通过使用 “,” 分隔每个搜索条件，搜索将返回与搜索词匹配的一组结果。

清单 8. 合并搜索

// This will hide every <p>, <span>, or <div>. $("p, span, div").hide();

更多的过滤器

虽然在 jQuery 中，这 3 个搜索参数无疑是最常用的，但还有许多其他搜索参数，可以帮助您在一个页面上快速查找所需的元素。这些过滤器以 “:” 开头，表明它们是 jQuery 搜索词中的过滤器。尽管它们也可以作为独立的搜索条件，但是设计它们的目的是将它们和以上 3 个搜索条件一起使用，从而可以调整搜索条件以找到您需要的特定元素。

清单 9. 更多的过滤器

// This will hide every <p> tag on a page $("p").hide(); // This will hide the first element on a page, no matter its HTML tag $(":first").hide(); // Notice how these can be used in combination to provide more fine tuning of // search criteria. This will hide only the first <p> tag on a given page. $("p:first").hide();

可以将多个过滤器用作搜索元素。虽然在这里我没有列举所有的过滤器（这是 API 页面的任务），但其中一些过滤器在处理页面和搜索元素方面非常方便。

我将 主要关注 Selection 包中一些非常重要的过滤器，它们就是表单 元素过滤器。如今的富 Internet 应用程序比较关注表单及包含在其内的元素（文本字段、按钮、复选框、单选按钮等），它们从服务器收集和传输信息，或收集信息并传输到服务器。由于它们在 RIA 中的重要作用，在当今的 Web 应用程序中，这些过滤器在处理 jQuery 时非常重要。

这些过滤器和前面介绍的过滤器的工作原理是一样的，并且也是以 “:” 开头，表明它们是过滤器。同样，它们也可以和其他搜索过滤器一起使用，以细化搜索条件。因此，一个 “:text” 搜索过滤器将返回页面上的每个文本字段，而一个 “.largeFont:text” 搜索过滤器仅返回页面上作为 “largeFont” 类的一部分的文本字段。这允许进一步细化和操作表单元素。

表单过滤器也包括元素的每个属性，了解这方面的知识对开发人员有好处。因此像 “:checked”、“:disabled” 和 “:selected” 等搜索过滤器将为特定的搜索进一步细化搜索条件。

遍历

现在，您已经学会如何搜索和过滤页面上的所有元素，接下来需要一种高效的方法来遍历结果，进一步处理元素。自然，jQuery 提供了几种遍历搜索结果的方法。

第一个也是最常用的遍历方法是 each() 函数。这和 “for loop” 的功能是一样的，遍历每个元素并通过迭代递增元素。此外，循环中的每个元素的引用可以通过 “this”（用于一般的 JavaScript 语法）或 $(this)（用于 jQuery 命令）来实现。

让我们看看下面的示例。

清单 10. each 循环

// Will loop through each <p> tag on the page. Notice the use of the // inline function here -- this is analogous with the anonymous classes in Java. // You can either call a separate function, or write an inline function like this. var increment = 1; $("p").each(function(){ // now add a paragraph count in front of each of them. Notice how we use the // $(this) variable to reference each of the paragraph elements individually. $(this).text(increment + ". " + $(this).text()); increment++; });