“jQuery”的名称来源于库快速智能查询DOM（文档对象模型的能力。
在本章中，我们将学习如何自己查询 DOM，以及一旦我们有了一组项，如何使用过滤器进一步细化数据集。我们将讨论以下主题：
- 选择器和过滤器是什么
- 如何创建选择器
- 如何创建过滤器
- 如何基于元素属性进行查询
- 链接是如何让我们快速、整洁地继续查询的
在每个浏览器网页下面都是 DOM。DOM 跟踪呈现到页面的所有单个对象。能够找到 DOM 元素是创建动态网页的第一步。浏览器附带了用于查询 DOM 的内置方法。这些方法通常以单词document开头。有document.getElementById、document.getElementsByClass等等。这些方法的问题是它们的接口既不一致也不完整。
jQuery 的名称来源于它查询 DOM 的能力。与浏览器方法不同，它的界面完整且功能丰富。查询 DOM 首先创建一个选择器。选择器是告诉 jQuery 如何查找所需元素的字符串。因为它是一个文本字符串，所以选择器的可能数量是无限的。但不要惊慌；他们都分为几个大类。
本章代码包含在名为chapter02的目录中。请记住，这是用于教学的示例代码，而不是用于生产。代码做了两件特别乏味且值得一提的事情。首先，它使用内联 JavaScript，这意味着 JavaScript 包含在带有主页 HTML 的脚本标记中。这违反了关注点分离规则，并可能导致代码性能不佳。其次，它大量使用警报。浏览器alert方法是一种在屏幕上快速显示内容的肮脏方式，与console.log方法不同，所有浏览器都支持它。但不建议在生产中使用。警报无法设置样式，因此除非您的网站也没有设置样式，否则它们会像拇指酸痛一样突出。其次，警报会导致浏览器停止一切并强制用户确认，这显然会很快让用户感到恼火：
function showJqueryObject(title, $ptr) {
var ndx, sb = title + "\n";
if ($ptr) {
for (ndx = 0; ndx < $ptr.length; ndx += 1) {
sb += $ptr[ndx].outerHTML + "\n";
}
alert(sb);
}
}用于显示 jQuery 对象的方法名为showJqueryObject()。它遍历 jQuery 对象，依次显示每个节点。现在，说实话，我只是为了这本书的目的而使用这个方法。在开发自己的程序时处理问题时，我通常依赖浏览器的console.log方法。但由于并非所有浏览器都支持它，而且对于那些支持不同的浏览器，在屏幕上显示内容的最简单方法是使用我自己的方法。
敏锐的读者可能会注意到一件奇怪的事情，即脚本标记中的 URL 缺少协议。我不是一名网络安全专家，但我足够聪明，能够听从网络安全专家的警告，他们都会说混合使用 HTTP 协议是危险的。协议相关 URL 使您的站点更容易保持安全。如今，许多站点将在开放 HTTP 或安全 HTTP（HTTPS）上运行。实现这一壮举之前需要从您自己的站点加载所有 JavaScript 库，放弃 CDN 的好处，或者包含一些复杂的内联 JavaScript，用于检测站点的协议并使用document.write将一些新 JavaScript 注入页面。
对于与协议相关的 URL，您只需从 URL 中省略协议即可。然后，当您的站点被加载时，如果它是从 HTTP 加载的，那么库也将从 HTTP 加载。如果通过 HTTPS 加载，那么所有库也将通过 HTTPS 加载。
在我们来看看 jQuery 选择器的类之前，让我们先看看选择器返回了什么。调用选择器的结果始终是 jQuery 对象。jQuery 对象有很多类似数组的特性，但它不是数组。如果对其使用 jQueryisArray()函数，它将返回 false。对于许多事情来说，差异并不重要，但偶尔，您可能希望执行类似于concat()的操作，但不幸的是，jQuery 对象上不存在此数组方法，尽管它有一个几乎等价的方法add()。
如果没有找到与选择器匹配的元素，那么 jQuery 对象的长度为零。永远不会返回空值。结果是一个长度为零或更多的 jQuery 对象。这是一件需要理解的重要事情，因为它减少了检查 jQuery 调用结果时所需的工作量。您只需检查长度是否大于零。
在调用 jQuery 时，可以使用它的正式名称jQuery或其缩写名$。另外，请记住，JavaScript 中的字符串可以以单引号或双引号开头，只要它们以相同的引号结尾即可。因此，在示例中，您可能会看到单引号或双引号，通常没有押韵，也没有理由选择其中一个。
浏览器中 JavaScript 的一个有趣之处是，某些方法实际上不是 JavaScript 的一部分；相反，它们是由浏览器提供的。当您在非基于浏览器的环境中使用 JavaScript 时，这一点变得很清楚，例如node.js。例如，document 方法的方法不是 JavaScript 的一部分；它们是浏览器的一部分。在node.js中，没有文档对象，因此没有文档方法。浏览器方法的另外两个来源是窗口和导航器对象。
使 jQuery 选择器如此酷且易于学习的原因之一是它们基于 CSS 使用的选择器；浏览器方法并非如此。因此，如果您已经知道如何创建 CSS 选择器，那么学习 jQuery 选择器就不会有问题。如果你不知道 CSS 选择器，不要担心；jQuery 选择器仍然很容易学习，了解它们将使您在学习 CSS 选择器方面处于领先地位。
我们要看的第一种选择器是 ID 选择器。它以一个哈希符号开始，后跟所需元素的 ID 属性中使用的相同字符串。看看这个例子：
<div id="my-element"></div>
var jqObject = $("#my-element");
or
var jqObject = jQuery('#my-element');在前面的示例中，请注意选择器调用的结果是一个 jQuery 对象。我们可以自由使用任何一种类型的引号。此外，我们可以使用正式名称或缩短名称拨打电话。在本书的其余部分，我将使用简称$。 ID选择器返回一个包含零或一个元素的数组。它永远不会返回多个元素。
根据W3C（万维网联盟规范，每个 DOM 元素最多只能有一个ID selector，每个ID selector必须是网页唯一的。现在，我看到很多网站违反了唯一性规则。这些都是不好的网站；不要模仿他们。而且，它们有不可预测的代码。当存在多个具有相同 ID 的元素时，将只返回一个，但没有说明应该返回哪个元素。因此，代码的行为可能会因运行在哪个浏览器上而有所不同。
我们将研究的下一种选择器类型是类选择器。类选择器以句点开头，后跟所有所需元素都具有的类的名称。与最多返回一个元素的 ID 选择器不同，类选择器可以返回零个、一个或多个元素。
类在元素中的顺序没有区别。它可以是第一个、最后一个，也可以是中间的某个类，jQuery 会找到它：
var jqClassObject = $('.active');有时，您的所需元素没有 ID 或类名称；它们只是具有相同的标记名。此时将使用标记选择器。它搜索具有特定标记名的元素，如div、p、li等。要创建标记选择器，请传递由引号包围的标记名称：
var jqTagObject = $('div');如果我们希望页面上的所有段落标记和包含active类的所有元素都集中在一个集合中，那么应该怎么做？我们可以进行两次调用，然后使用 jQueryadd方法将结果对象添加到一起。更好的方法是组合选择器，让 jQuery 完成将结果组合在一起的繁重工作。要组合选择器，只需将两个或多个选择器放在字符串中，并用逗号分隔：
var jqClassResults = $('.special'),
jqTagResults = $('p'),
jqTotal = jqClassResults.add(jqTagResults);
var jqTotal = $('.special, p'); // give me all of the elements with the special class and all of the paragraphs请务必记住，逗号用于分隔选择器。如果你忘记了逗号，你就不会出错；你会得到一个结果，但不是你期望的结果。相反，它将是后代选择器的最终结果，这是我们将在稍后介绍的内容。
有时，您想要的元素没有易于设计的选择器。也许他们都是某一特定元素的子孙。这就是后代选择器的用武之地。它们允许您将查询的焦点缩小到特定的祖先，然后从那里进行查询。子代选择器有两种类型：子代选择器和子代选择器。所需的子级必须是父级的直接子级。要创建子选择器，请创建父级选择器，添加大于符号，然后添加选择器以从父级结果集的结果中查找子级。
考虑下面的 HTML 标记：
<ul id="languages">
<li>Mandarin</li>
<li>English
<ul class="greetings">
<li class="main-greeting">Hi</li>
<li>Hello</li>
<li>Slang
<ul data-troy>
<li>What's up doc?</li>
</ul>
</li>
</ul>
</li>
<li>Hindustani</li>
<li data-troy="true">Spanish</li>
<li>Russian</li>
<li>Arabic</li>
<li>Bengali</li>
<li>Portuguese</li>
<li>Malay-Indonesian</li>
<li>French</li>
</ul>请同时查看以下代码：
var jqChildren = $('#languages>li');
showJqueryObject("Direct", jqChildren);前面的代码示例将返回作为<ul id="languages">元素的子元素的所有<li>标记。它不会返回作为<ul class="greetings">标记的子标记的<li>标记，因为这些子标记是其子标记：
var jqDescendant = $('#languages li');
showJqueryObject("Direct", jqDescendant);子选择器几乎与子选择器相同，只是它缺少大于号。第二个查询将返回<ul id="languages">中包含的所有<li>标记，无论它们位于子树的下方多远。
除了根据元素的基本特征（如名称、标记和类）选择元素外，我们还可以根据元素的属性选择元素。属性选择器使用起来有点棘手，因为它们的语法更复杂。另外，请记住，与其他 jQuery 选择器一样，如果语法错误，则不会出现错误；您将得到一个长度为零的 jQuery 对象。
只有九个属性选择器，因此它们很容易记住，如下所示：
Has Attribute选择器Attribute Equals选择器Attribute Not Equal选择器Attribute Contains选择器Attribute Starts With选择器Attribute Ends With选择器Attribute Contains Prefix选择器Attribute Contains Word选择器Multiple Attribute选择器
让我们从最简单的一个开始：Has Attribute选择器。这将选择具有指定属性的所有元素。属性的值并不重要；事实上，它甚至不必有一个值：
var jqHasAttr = $("[name]");至于选择器，这个非常简单。它包含由方括号包围的所需属性的名称。接下来的两个选择器只是稍微复杂一点。
Has Attribute选择器不关心属性的值，但有时，您需要属性具有或不具有特定值。这是中的Attribute Equals选择器及其对立面Attribute Not Equals选择器。前者返回同时具有所需属性和所需值的所有元素。请记住，这必须是完全匹配的；接近的东西不算数。后者返回不具有所需属性或具有所需属性但不具有所需值的所有元素。Attribute Not Equals选择器返回Attribute Equals选择器未返回的所有元素。这有时会让人困惑，但不应该如此。请记住这两个选择器是相反的：
var jqEqualAttr = $('[data-employee="Bob"]');
var jqNotEqualAttr = $('[data-employee!="Bob"]');接下来的三个选择器也相互关联。每个属性都会查找一个具有值的属性，只是现在该值是一个子字符串，而不是精确匹配。区别这三个字符串的是他们在哪里寻找子字符串。第一个选项，Attribute Contains选择器在属性值的任何位置查找子字符串。因此，只要字符串包含值，它就会传递：
var jqContainsAttr = $('[data-employee*="Bob"]');
showJqueryObject("Contains Attribute", jqContainsAttr);Attribute Starts With选择器更具体地说明了指定子字符串的位置。使用它时，字符串必须位于值的开头。值字符串不必是完全匹配的；只有字符串的开头必须匹配：
var jqStartsAttr = $('[data-employee^="Bob"]');
showJqueryObject("Starts Attribute", jqStartsAttr);Attribute Ends With选择器将指定字符串与值字符串的结尾匹配。如果值字符串的结尾与指定的字符串匹配，则一切正常。与Attribute Starts With选择器一样，字符串的其余部分不必匹配：
var jqEndsAttr = $('[data-employee$="Bob"]');
showJqueryObject("Ends Attribute", jqEndsAttr);区分这些选择器可能有点麻烦，因为它们只变化一个字符，但如果您了解 JavaScript 正则表达式，您就会认识到 jQuery 是从它们那里借用来的。正则表达式中的“【T0]”表示字符串的开头，由Attribute Begins With选择器使用。正则表达式中的“$”表示字符串的结尾，在Attribute Ends With选择器中使用。Attribute Contains选择器使用星号*，这是正则表达式通配符。
Attribute Contains Prefix选择器在值字符串的开头查找指定的字符串。它与Attribute Begins With选择器的不同之处在于，如果没有连字符，字符串必须与值完全匹配。如果值中有连字符，则字符串需要与连字符匹配。
Attribute Contains Word选择器检查值字符串中任何位置的指定字符串。这听起来可能有点像Attribute Contains选择器，但有一个细微的区别。指定的字符串必须用空格包围，而Attribute Contains选择器不关心字符串的位置或边界：
Attribute Contains Word Selector [name~="value"]最后一个属性选择器是Multiple Attribute选择器，它只是前面任何属性选择器的组合。每个选择器都包含在自己的方括号内，并连接在一起。不需要任何分隔字符：
Multiple Attribute Selector [name="value"][name2="value2"]现在我们已经学习了一些选择元素的方法，让我们学习如何过滤选择的结果集。
过滤器获取选择器调用的结果，并将其进一步缩减。有三种类型的过滤器选择器：基本、子和内容。基本选择器只对 jQuery 对象结果集进行操作。子选择器操作元素之间的父子关系。内容过滤器处理结果集每个元素的内容。
有 14 个基本的过滤器选择器。第一组处理结果在结果集中的位置。我们先来对付他们吧。
其中最容易理解的是过滤器选择器:eq()。它在传递索引号时检索结果。这非常类似于访问 JavaScript 数组中的元素。和数组一样，它是基于零的，所以第一个元素是零，而不是一：
var jqEq = $("a:eq(1)");
showJqueryObject("EQ Attribute", jqEq);通过向常规选择器添加冒号和eq(x)，可以创建一个:eq()过滤器选择器。这里的x是指元素的索引。如果索引超出范围，则不会生成错误。
:eq()过滤器选择器允许您访问结果集中的任何项目，只要您知道可能索引的范围。但有时，这是太多的工作。您可能只想知道第一个或最后一个元素。对于这些情况，jQuery 提供了:first和:last过滤器选择器。每个完全按照其名称执行：它获取第一个或最后一个元素：
var jqFirst = $("a:first");
showJqueryObject("First Attribute", jqFirst);
var jqLast = $("a:last");
showJqueryObject("Last Attribute", jqLast);坚持索引操作的主题，有时我们希望所有元素都达到某个索引，或者所有索引大于一个数字的元素。对于这些时间，有:lt()和:gt()选择器。:lt()选择器返回索引小于传递值的所有元素。:gt()选择器返回大于它的所有元素。这两个选择器也接受负值，负值从结果集的末尾开始计数，而不是从开始计数：
var jqLt = $("a:lt(1)");
showJqueryObject("Less Than Selector", jqLt);
var jqGt = $("a:gt(1)");
showJqueryObject("Greater Than Attribute", jqGt);
jqLt = $("a:lt(-4)");
showJqueryObject("Less Than Selector", jqLt);
jqGt = $("a:gt(-2)");
showJqueryObject("Greater Than Attribute", jqGt);最后两个基本过滤器非常方便。它们是:even和:odd选择器。除了一个小小的奇怪之处，它们都很简单。JavaScript 是基于零的，因此 0 是第一个元素，零是偶数，这意味着偶数选择器将获取第一、第三、第五（等等）个元素。此外，奇数选择器将获得第二、第四、第六（等等）个元素。这看起来很奇怪，但只要您记住 JavaScript 是基于零的，它就非常有意义。
其余的基本属性过滤器不适合任何类别。所以，我们将从:animated选择器开始，一个接一个地遍历它们。:animated选择器返回当前正在执行动画的所有元素。请记住，它不会自动更新，因此查询运行时的状态是存在的，但之后会发生变化。
:focus选择器返回当前选择的元素（如果它在当前结果集中）。小心这个选择器。我将在后面的一章中讨论性能问题，但是如果不与结果集一起使用，这个问题的性能可能非常差。考虑一下你只需做以下的调用：
var jqFocus = $(":focus");
showJqueryObject("The Focused Element", jqFocus);它将在整个 DOM 树中搜索聚焦元素，该元素可能存在，也可能不存在。虽然前面的调用将起作用，但有更快的方法来实现这一点。
:header选择器是一种方便的实用方法，返回所有元素，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>。你自己制作一个与此方法等效的方法是很容易的，但既然这个快捷方式唾手可得，为什么还要麻烦呢
var jqHeader = $(":header");
showJqueryObject("The Header Elements", jqHeader);:lang选择器将查找与指定语言匹配的所有元素。它将自行匹配语言代码en，或与国家代码en-us配对的语言代码。随着对创建全球网站的日益重视，此选择器的重要性与日俱增：
var jqLang = $("a:lang('en')");
showJqueryObject("The Lang Elements", jqLang);:not选择器不是我最喜欢的选择器之一。它对传递的选择器执行逻辑not操作。
它从 jQuery 一开始就存在，但在我看来，它会导致代码混乱。jQuery 最不需要的就是难以阅读的代码。我将在第 6 章中详细介绍如何编写可读的 jQuery 代码，使用 jQuery编写更好的表单，但现在，如果可以的话，您应该避免使用此代码：
var jqNot = $( "a:not(:lang('en'))");
showJqueryObject("The Not Elements", jqNot);:target选择器听起来很复杂，但考虑到单页 JavaScript 应用的丰富性，它可能非常有用。它查看当前页面的 URL。如果它有一个用哈希符号标识的片段，它将匹配 ID 与该片段匹配的元素。这是 jQuery 最近添加的内容之一，是在 1.9 版本中添加的。
最后，让我们谈谈选择器:root。老实说，我承认我还不需要用这个。它返回文档的根元素，在 HTML 中始终是<html>元素：
var jqRoot = $( ":root");
alert("The Root Element: " + jqRoot.get(0).tagName);只有四个内容过滤器选择器。我将对所有这些选择器提出一般性的警告，因为它们可能会受到性能挑战。我将在第 7 章与您的服务器对话中详细介绍性能，但在此之前，只有在您必须使用这些选择器的情况下才能使用。
前两个选择器:empty和:parent是彼此的倒数。第一个是:empty 选择器，返回所有没有子元素的元素。第二个是:parent选择器，它选择至少有一个子元素的所有元素。
:contains选择器返回具有指定字符串的所有元素。字符串的大小写必须匹配。字符串可以在任何子代上。
:has()选择器选择包含指定选择器至少一个匹配项的所有元素。
接下来是子选择器。这些都处理元素之间的父子关系。第一组很容易理解；它涉及儿童在所有儿童中的地位。所有示例代码都将引用以下标记：
<div>
<p>I am the first child of div #1.</p>
<p>I am the second child of div #1.</p>
<p>I am the third child of div #1.</p>
<p>I am the fourth child of div #1.</p>
<p>I am the fifth child of div #1.</p>
</div>
<div>
<p>I am the first child of div #2.</p>
<p>I am the second child of div #2.</p>
<p>I am the third child of div #2.</p>
</div>
<div>
<p>I am the only child of div #3.</p>
</div>首先是:first-child选择器；它选择作为其父元素的第一个子元素的所有元素。与:first 选择器不同，它可以返回多个元素：
var jqChild = $('div p:first-child');
showJqueryObject("First Child", jqChild);示例代码的第一行表示，您应该获取div标记的所有段落后代。有三个已定义的<div>标签；第一个有五段，第二个有三段，第三个只有一段。:first-child选择器查看这九段文字，发现这三段文字是他们各自父母的第一个孩子。这是：
<p>I am the first child of div #1.</p>
<p>I am the first child of div #2.</p>
<p>I am the only child of div #3.</p>:last-child选择器的操作方式与first-child类似，不同之处在于它搜索各自父项的最后一个子项：
var jqLastChild = $('div p:last-child');
showJqueryObject("Last Child", jqLastChild);同样，我们要求获得div标记的所有段落子项，然后使用子选择器过滤返回集。此示例与上一个示例几乎相同，只是它返回的元素从末尾开始计数，而不是从开头开始计数：
<p>I am the fifth child of div #1.</p>
<p>I am the third child of div #2.</p>
<p>I am the only child of div #3.</p>如果您对最后一段<p>I am the only child of div #3.</p>对两个方法调用都是相同的这一事实做了双重理解，请不要惊慌。记住，它是第三个<div>的唯一孩子，所以它既是第一个孩子也是最后一个孩子。
接下来，我们有选择器:nth-child()。它返回其索引传递给方法的子级。first-child选择器可以被认为是该选择器的一个特例，其中传递的索引为 1。如前所述，如果传递的索引值超出范围，则不会出现错误；只需获得长度等于 0 的 jQuery 对象：
var jqNthChild = $('div p:nth-child(2)');
showJqueryObject("Nth Child", jqNthChild);关于这个和:nth-last-child()选择器的一个特殊之处是除了传递索引值外，还可以传递一些特殊值。前两个特殊值为even和odd。这些将返回各自父母的偶数和奇数子女。结果集与:even选择器的结果集不同。因为这些选择器基于 CSS，所以计数从 1 开始，而不是 JavaScript 的 0。因此，请看下面的代码：
var jqNthChild = $('div p:nth-child(odd)');
showJqueryObject("Nth Child", jqNthChild);奇数参数将返回第一、第三、第五（等等）元素：
<p>I am the first child of div #1.</p>
<p>I am the third child of div #1.</p>
<p>I am the fifth child of div #1.</p>
<p>I am the first child of div #2.</p>
<p>I am the third child of div #2.</p>:nth-last-child()选择器基本上与nth-child()选择器相同，只是它从列表的末尾而不是开始向后计数。类似地，:last-child选择器可以被认为是该选择器的一个特例，其传递索引为 1。与:nth-child选择器一样，它可以接受偶数、奇数或公式的特殊参数：
var jqNthLastChild = $('div p:nth-last-child(3)');
showJqueryObject("Nth Last Child", jqNthLastChild);示例代码的结果集由两个元素组成，第三个子元素来自其各自父元素的末尾：
<p>I am the third child of div #1.</p>
<p>I am the first child of div #2.</p>最后一个子选择器是:only-child。它返回只有其各自父母的子女才能执行的元素：
var jqOnlyChild = $('div p:only-child');
showJqueryObject("Only Child", jqOnlyChild);由于只有一个段落是独生子段落，因此将显示以下元素：
<p>I am the only child of div #3.</p>下一个选择器是of-type选择器。所有这些选择器都适用于相同元素类型的同级。其中第一个是:first-of-type选择器，它将为每个父级返回类型的第一个元素：
var jqFirstOfType = $('p:first-of-type');
showJqueryObject("First Of Type", jqFirstOfType);子选择器和of-type选择器之间的区别很微妙，但很重要。of-type选择器不指定父元素。您只需将孩子的情况告诉 jQuery，它就会知道哪些孩子是兄弟姐妹，哪些是父母。
:last-of-type选择器根据我们已经了解到的关于 jQuery 的所有知识，完全实现了我们应该期望的功能。它返回类型的最后一个元素：
var jqLastOfType = $('p:last-of-type');
showJqueryObject("Last Of Type", jqLastOfType);最后一个of-type选择器似乎很熟悉；它是的:only-of-type选择器。与:only-child选择器一样，它返回唯一的子项。但与：only-child选择器不同，它查看元素的类型。所以，我们把第三个词 T4T 改为以下几点：
<div>
<p>I am the only child of div #3.</p>
<span>Here is some text</span>
</div>我们在运行以下代码示例时进行更改：
var jqOnlyOfType = $('p:only-of-type');
showJqueryObject("Only Of Type", jqOnlyOfType);这将返回以下元素：
<p>I am the only child of div #3.</p>但是，使用:only-child选择器编写的相应代码不返回任何元素：
var jqOnlyChild = $('div p:only-child');
showJqueryObject("Only Child", jqOnlyChild);jQuery 的一个优点是它能够链接查询。任何返回 jQuery 对象的方法调用都可以链接，这意味着您只需添加一个句点和下一个方法调用。小心，因为并非所有方法都返回 jQuery 对象。有些方法，例如.width()，返回一个无法链接的值。链的每个方法都对上一个方法调用的结果集执行其操作。如果在链的下游执行过滤操作，则结果集将减少，链接方法将在减少的集而不是原始集上工作。
下一个例子不是最好的，但希望它能开始展示链接的力量：
var jqLiUl = $("li").find("ul");
showJqueryObject("LL UL", jqLiUl);在本例中，我们首先请求页面上的所有<li>元素。然后，将结果集放在手上，我们请求它包含的所有<ul>元素。我们可以通过以下代码更简洁地要求：
var jqLiUl = $("li ul");
showJqueryObject("LL UL concise", jqLiUl);这里的要点是，我们使用 jQuery 的链接功能对结果集执行更多操作。通常，您将使用链接在链中的每个链接中执行不同的操作。您可能希望在一个步骤中添加 CSS 类，在另一个步骤中执行 DOM 操作，等等。为了清晰起见，请尽量保持所有操作的相关性，否则您可能会编写不易阅读的代码。
在本章中，我们开始深入研究 jQuery，希望我们能发现它并不像从外部看起来那么复杂。我们还看到 jQuery 养成了使用预先存在的方式做事的习惯。例如，它使用类似于 JavaScript 正则表达式所使用的 CSS 选择器和符号。它也遵循一种规律性的分解模式。一旦你习惯了这些模式，你几乎可以预测某些方法的存在。
现在我们已经学习了如何从 DOM 中读取元素，在下一章中，我们将学习如何向 DOM 编写标记并开始制作动态网页。