因为搜索结果存储在一个数组中，您肯定希望函数遍历该数组，就像处理其他编程语言的数据对象一样。因此，要查找一个给定搜索结果的长度，则可以在该数组上调用 $().length。清单 11 展示了更多的数组遍历函数，可适用于其他编程语言的数组遍历。

清单 11. 其他数组函数

// 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();

除了这些数组遍历函数之外，jQuery 还提供了一些函数，使您可以查找嵌套在搜索词周围的元素。为什么这很有用呢？例如，我们常常需要在图片的旁边嵌入一个文本标签，或在表单元素旁边嵌入一个错误消息。使用这些命令可以查找特定的表单元素，然后通过将表单元素放置在下一个元素（span 标记）中，把该错误消息直接放置在表单元素旁边。清单 12 显示了这种设计的一个示例：

清单 12. 示例 next() 函数

<input type=text class=validate><span></span> 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 <span> 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. 综合学到的知识

<!-- The first step is creating the Select All checkbox itself. we give it a unique ID on the page --> <input type=checkbox id=selectall> <!-- The next step is giving each of the rows their own checkbox. we put each row's checkbox into the 'selectable' class, since there can be many rows, and we want each of the rows' checkboxes to have the same behavior. --> <input type=checkbox class=selectable> <!-- The final step is bringing it all together with some jQuery code. --> // 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 库将成为设计应用程序架构的必选技术。

这份关于 jQuery 的系列文章的第一篇介绍了 jQuery 语法，如何在您自己的 JavaScript 代码中正确使用 jQuery，以及如何在结合使用其他库时避免冲突。此外，本文还介绍了 jQuery 搜索和选择语法，它们是其他 jQuery 功能的基础。它使您可以简单快捷地找到所需的页面元素。文章也谈到了如何遍历搜索结果，使您可以逐个地处理元素。jQuery 的这两个方面是本系列下一篇文章的基础，同时也是所有 jQuery 代码的基础。