要获取一个页面中所有匹配的 HTML 元素的数组，您仅需将 HTML 标记（不带括号）传递到 jQuery 搜索字段。这是查找对象的 “快速但是粗糙” 的方法。如果要将属性附加到通用的 HTML 元素，这种方法是很有用的。
清单 5. HTML 选择
// This will show every
tag in the page. Note that it will show
// every
, 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
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 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");
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
tag on a given page.
$("p:first").hide();
可以将多个过滤器用作搜索元素。虽然在这里我没有列举所有的过滤器（这是 API 页面的任务），但其中一些过滤器在处理页面和搜索元素方面非常方便。
我将 主要关注 Selection 包中一些非常重要的过滤器，它们就是表单 元素过滤器。如今的富 Internet 应用程序比较关注表单及包含在其内的元素（文本字段、按钮、复选框、单选按钮等），它们从服务器收集和传输信息，或收集信息并传输到服务器。由于它们在 RIA 中的重要作用，在当今的 Web 应用程序中，这些过滤器在处理 jQuery 时非常重要。
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++;
});
// the eq() function lets you reference an element in the array directly.
// In this case, it will get the 3rd paragraph (0 referenced of course) and hide it
$("p").eq(2).hide();
// The slice() function lets you input a start and an end index in the array, to
// create a subset of the array. This will hide the 3rd through 5th paragraphs on the
// page
$("p").slice(2,5).hide();
function validateForm()
{
$(".validate:text").each(function(){
if ($(this).val()=="")
// We'll loop through each textfield on the page with a class of "validate"
// and if they are blank, we will put text in the immediately afterwards
// with the error message.
$(this).next().html("This field cannot be blank");
});
}
综合学到的知识
要了解如何结合使用以上知识，可以查看本文包含的示例应用程序（参见 参考资料 小节）。
现在简单介绍一下示例应用程序。我将在本系列所有文章中使用这个示例应用程序，因为它使用了大量不同的 jQuery 示例，并且几乎所有人都熟悉这个应用程序 — 一个处理 Web 邮件的富 Internet 应用程序。这个示例应用程序是一个简单的邮件客户机，它利用 jQuery 给用户这样的感觉：该电子邮件客户机非常类似于桌面应用程序。在最后一篇文章结束时，您将明白这个简单的应用程序是如何为用户制造这种感觉的，并且明白使用 jQuery 实现这个功能是多么简单。
本文的重点是 “Select All”/“Deselect All” 复选框，它们出现在 Web 邮件表（下面突出显示）的左侧列的顶部。当选中该复选框时，它将选择该列的每个复选框；取消选择该复选框时，它将取消选择该列的所有复选框。
图 2. “Select All” 复选框
清单 13. 综合学到的知识
// remember that all jQuery setup code must be in this document.ready() function,
// or contained within its own function in order to function correctly.
$(document).ready(function(){
// We use the jQuery selection syntax to find the selectall checkbox on the page
// (note the '#' which signifies ID), and we tell jQuery to call the selectAll()
// function every time someone clicks on the checkbox (we'll get to Events in a
// future article).
$("#selectall").click(selectAll);
});
// This function will get called every time someone clicks on the selectall checkbox
function selectAll()
{
// this line determines if the selectall checkbox is checked or not. The attr()
// function, discussed in a future article, simply returns an attribute on the
// given object. In this case, it returns a boolean if true, or an undefined if
// it's not checked.
var checked = $("#selectall").attr("checked");
// Now we use the jQuery selection syntax to find all the checkboxes on the page
// with the selectable class added to them (each row's checkbox). We get an array
// of results back from this selection, and we can iterate through them using the
// each() function, letting us work with each result one at a time. Inside the
// each() function, we can use the $(this) variable to reference each individual
// result. Thus, inside each loop, it finds the value of each checkbox and matches
// it to the selectall checkbox.
$(".selectable").each(function(){
var subChecked = $(this).attr("checked");
if (subChecked != checked)
$(this).click();
});
}
结束语
jQuery 是 Web 应用程序开发社区中非常受欢迎的 JavaScript 库，并且随着富 Internet 应用程序越来越普及，它将变得更加重要。由于许多公司都在线迁移内部应用程序，并且在线移动日常的桌面应用程序（包括文字处理器和电子表格），能够简化开发并实现跨平台支持的 JavaScript 库将成为设计应用程序架构的必选技术。