j query基础教程

第 1 章 jQuery 入门

Up on the buzzer

Quick on the start

Let’s go! Let’s go! Let’s go!

—Devo ,

“Let’s Go”

今天的万维网是一个动态的环境，Web 用户对网站的设计和功能都提出了高要求。为了构建

有吸引力的交互式网站，开发者们借助于像 jQuery 这样的 JavaScript 库，实现了常见任务

的自动化和复杂任务的简单化。jQuery 库广受欢迎的一个原因，就是它对种类繁多的开发

任务都能游刃有余地提供帮助。

由于 jQuery 的功能如此丰富多样，找到合适的切入点似乎都成了一项挑战。不过，这个库

的设计秉承了一致性与对称性原则，它的大部分概念都是从 HTML 和 CSS（Cascading Style

Sheet，层叠样式表）的结构中借用而来的。鉴于很多 Web 开发人员对这两种技术比对

JavaScript 更有经验，所以编程经验不多的设计者能够快速学会使用该库。实际上，在本

书开篇第 1章中，只需 3 行代码就能编写一个有用的 jQuery 程序。另一方面，经验丰富的

程序设计人员也会受益于这种概念上的一致性，通过学习后面的更高级内容，你会感受到这

一点。

但是，在举例说明如何使用这个库之前，我们应该首先讨论一下选择它的理由。

1.1 jQuery 能做什么

jQuery 库为 Web 脚本编程提供了通用的抽象层，使得它几乎适用于任何脚本编程的情形。

由于它容易扩展而且不断有新插件面世增强它的功能，所以一本书根本无法涵盖它所有可能

的用途和功能。抛开这些不谈，仅就其核心特性而言，jQuery 能够满足下列需求：

取得页面中的元素。如果不使用 JavaScript 库，遍历 DOM（Document Object Model，文档

对象模型）树，以及查找 HTML 文档结构中某个特殊的部分，必须编写很多行代码。jQuery

为准确地获取需要检查或操纵的文档元素，提供了可靠而富有效率的选择符机制。

修改页面的外观。CSS 虽然为影响文档呈现的方式提供了一种强大的手段，但当所有浏览器

不完全支持相同的标准时，单纯使用 CSS 就会显得力不从心。jQuery 可以弥补这一不足，

它提供了跨浏览器的标准解决方案。而且，即使在页面已经呈现之后，jQuery 仍然能够改

变文档中某个部分的类或者个别的样式属性。

改变页面的内容。jQuery 能够影响的范围并不局限于简单的外观变化，使用少量的代码，

jQuery 就能改变文档的内容。可以改变文本、插入或翻转图像、对列表重新排序，甚至，

对 HTML 文档的整个结构都能重写和扩充——所有这些只需一个简单易用的 API。

响应用户的页面操作。即使是最强大和最精心设计的行为，如果我们无法控制它何时发生，

那它也毫无用处。jQuery 提供了截取形形色色的页面事件（比如用户单击一个链接）的适

当方式，而不需要使用事件处理程序搞乱 HTML 代码。此外，它的事件处理 API 也消除了经

常困扰 Web 开发人员的浏览器不一致性。

为页面添加动态效果。为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈。

jQuery 中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。

无需刷新页面即可从服务器获取信息。这种编程模式就是众所周知的 AJAX（Asynchronous

JavaScript and XML，异步 JavaScript 和 XML），它能辅助 Web 开发人员创建出反应灵敏、

功能丰富的网站。jQuery 通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专

注于服务器端的功能设计。

简化常见的 JavaScript 任务。除了这些完全针对文档的特性之外，jQuery 也提供了对基本

的 JavaScript 结构（例如迭代和数组操作等）的增强。

1.2 jQuery 为什么如此出色

随着近年来人们对动态 HTML 兴趣的复苏，催生了一大批 JavaScript 框架。有的特别专注于

上述任务中的一项或两项，有的则试图以预打包的形式囊括各种可能的行为和动态效果。为

了在维持上述各种特性的同时仍然保持紧凑，jQuery 采用了如下策略：

利用 CSS 的优势。通过将查找页面元素的机制构建于 CSS 选择符之上，jQuery 继承了简明

清晰地表达文档结构的方式。由于进行专业 Web 开发的一个必要条件是掌握 CSS 语法，因而

jQuery 成为希望向页面中添加行为的设计者们的切入点。

支持扩展。为了避免特性蠕变（feature creep），jQuery 将特殊情况下的用途归入插件

当中。创建新插件的方法很简单，而且拥有完备的文档说明，这促进了大量有创意和有实用

价值的模块的开发。甚至在下载的基本 jQuery 库文件当中，多数特性在内部都是通过插件

架构实现的。而且，如有必要，可以移除这些内部插件，从而生成更小的库文件。

抽象浏览器不一致性。Web 开发领域中一个令人遗憾的事实是，每种浏览器对颁布的标准都

有自己的一套不一致的实现方案。任何 Web 应用程序中都会包含一个用于处理这些平台间特

性差异的重要组成部分。虽然不断发展的浏览器前景使得为某些高级特性提供浏览器中立的

完美的基础代码（code base）不大可能，但 jQuery 添加一个抽象层来标准化常见的任务，

从而有效地减少了代码量，同时，也极大地简化了这些任务。

总是面向集合。当我们指示 jQuery“找到带有‘collapsible’类的全部元素，然后隐藏它

们”时，不需要循环遍历每一个返回的元素。相反，.hide()之类的方法被设计成自动操作

对象集合，而不是单独的对象。这种称作隐式迭代（implicit iteration）的技术，使得大

量的循环结构变得不再必要，从而大幅地减少代码量。

将多重操作集于一行。为了避免过度使用临时变量或不必要的代码重复，jQuery 在其多数

方法中采用了一种被称作连缀（chaining）的编程模式。这种模式意味着基于一个对象进

行的大多数操作的结果，都会返回这个对象自身，以便于为该对象应用下一次操作。

这些策略不仅确保了 jQuery 包的小型化——压缩文件约 20 KB，同时，也为我们使用这个

库的自定义代码保持简洁提供了技术保障。

jQuery 库的适用性一方面归因于其设计理念，另一方面则得益于围绕这个开源项目涌现出

的活跃社区的促进作用。jQuery 用户聚集到一起，不仅会讨论插件的开发，也会讨论如何

增强核心库。附录 A 中提供了很多 jQuery 开发人员可用的社区资源的详细信息。

除了为工程师提供灵活且稳健的系统之外，jQuery 的最终产品对所有人都是免费的。而且，

这个开源项目还具有 GNU Public License（适合包含在很多其他开源项目中）和 MIT License

（便于在专有的软件中使用 jQuery）的双重许可。

1.3 第一个 jQuery 文档

在了解了 jQuery 能够为我们提供的丰富特性之后，我们可以看一看这个库的实际应用了。

1.3.1 下载 jQuery

jQuery 官方网站（http://jquery.com/）始终都包含与该库有关的最新代码和新闻的第一

手资源。为了开始学习，我们需要从官方网站上面下载一个 jQuery 库文件。官方网站在任

何时候都会提供几种不同版本的 jQuery 库，但其中最适合我们的是该库最新的未压缩版。

使用 jQuery 库不需安装，只要把下载的库文件放到网站上的一个公共位置即可。因为

JavaScript 是一种解释型语言，所以使用它不必进行编译或者构建。无论什么时候，当我

们想在某个页面上使用 jQuery 时，只需在相关的 HTML 文档中简单地引用该库文件的位置。

1.3.2 设置 HTML 文档

本书多数 jQuery 应用示例都包含以下 3 个部分：HTML 文档、为该文档添加样式的 CSS 文件

和为该文档添加行为的 JavaScript 文件。在本书的第一个例子中，我们使用一个包含图书

内容提要的页面，同时，该页面中的很多部分都添加了相应的类。

<?xml version="1.0" encoding="UTF8"?>

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0

Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta httpequiv="ContentType"content="text/html;charset=utf8"/>

<title>Through the LookingGlass</title>

<link rel="stylesheet" href="alice.css" type="text/css"media="screen" />

</div>

<p>She puzzled over this for some time, but at last a bright thought struck her.

<span class="spoken">"Why, it's a Looking glass book, of course! And if I hold it

up to a glass, the words will all go the right way again."</span></p>

<p>This was the poem that Alice read.</p>

<div class="poem">

<h3 class="poemtitle">JABBERWOCKY</h3>

<div class="poemstanza">

<div>'Twas brillig, and the slithy toves</div>

<div>Did gyre and gimble in the wabe;</div>

<div>All mimsy were the borogoves,</div>

<div>And the mome raths outgrabe.</div>

</div>

</div>

</div>

</div>

</body>

</html>

说明这个示例文档在服务器上的实际布局并不重要。读者可以根据自己选中的组织结构，

调整一个文件中指向另一个文件的引用。在本书多数例子中，都将使用相对路径引用文件

（../images/foo.png），不使用绝对路径（/images/foo.png）。这样，我们不需要使用

Web 服务器就能在本地运行代码。

文档中，紧随常规的 HTML 开头代码之后的是加载样式表文件的代码。在这个例子中，我们

使用了一个简单的样式表。

body {

font: 62.5% Arial, Verdana, sansserif;

}

h1 {

fontsize:2.5em;

marginbottom:0;

}

h2 {

fontsize:1.3em;

marginbottom:.5em;

}

h3 {

fontsize:1.1em;

marginbottom:0;

}

.poem {

margin: 0 2em;

}

.emphasized {

fontstyle:italic;

border: 1px solid #888;

padding: 0.5em;

}

在引用样式表文件的代码之后，是包含 JavaScript 文件的代码。这里要注意的是，引用

jQuery 库文件的<script>标签，必须放在引用自定义脚本文件的<script>标签之前。否则，

在我们编写的代码中将引用不到 jQuery 框架。

说明在本书其他章中，我们将只展示 HTML 和 CSS 文件的相关部分。书中提到文件的完整版

可以在本书配套网站 http://book.learningjquery.com 或者出版社网站

http://www.packtpub.com/support 中找到。

现在，这个例子页面的外观如图 1-1 所示。

图 1-1

接下来，我们就使用 jQuery 为页面中的诗歌文本添加一种新样式。

提示这个例子是为了展示 jQuery 的简单用法而有意设计的。在现实应用中，为页面中的文

本添加样式可以通过纯 CSS 的方式来实现。

1.3.3 编写 jQuery 代码

我们自定义的代码应该放在第 2 个、在 HTML 中使用<script src="alice.js"type=

"text/javascript"></script>引入的空 JavaScript 文件中。对这个例子而言，我们只需编

写 3 行代码：

$(document).ready(function() {

$('.poemstanza').addClass('emphasized');});

1. 查找诗歌文本

jQuery 中基本的操作就是选择文档中的某一部分。这是通过$()结构来完成的。通常，该结

构需要一个字符串参数，参数中可以包含任何 CSS 选择符表达式。在这个例子中，我们想要

找到应用了 poem-stanza 类的所有文档部分，因此选择符非常简单。不过，在本书其他章中，

我们还会介绍很多更复杂的选择符表达式。在第 2 章中，我们要讨论的就是查找文档部分的

不同方式。

这里用到的$()函数实际上是 jQuery 对象的一个制造工厂。jQuery 对象，是我们从现在开

始就要打交道的基本的构建块。jQuery 对象中会封装零个或多个 DOM 元素，并允许我们以

多种不同的方式与这些 DOM 元素进行交互。在这个例子中，我们希望修改页面中这些部分的

外观，而为了完成这个任务，需要改变应用到诗歌文本的类。

2. 加入新类

本例中.addClass()方法的作用是不言而喻的，即它会将一个 CSS 类应用到我们选择的页面

部分。该方法唯一的参数就是要添加的类名。.addClass()方法及其反方法.removeClass()，

为我们探索 jQuery 支持的各种选择符表达式提供了便利。现在，这个例子只是简单地添加

了 emphasized 类，而我们的样式表中为这个类定义的是带边框的斜体文本样式。

我们注意到，无需迭代操作就能为所有诗歌中的节添加这个类。前面我们提到过，jQuery

在.addClass()等方法中使用了隐式迭代机制，因此一次函数调用就可以完成对所有选择的

文档部分的修改。

3. 执行代码

综合起来，$()和.addClass()对我们修改诗歌中文本的外观已经够用了。但是，如果将这行

代码单独插入文档的头部，不会有任何效果。通常，JavaScript 代码在浏览器初次遇到它

们时就会执行，而在浏览器处理头部时，HTML 还不会呈现样式。因此，我们需要将代码延

迟到 DOM 可用时再执行。

控制 JavaScript 代码何时执行的传统机制是在事件处理程序中调用代码。有许多针对用户

发起的事件（例如鼠标单击或敲击键盘）的处理程序。在没有 jQuery 的情况下，我们需要

依靠 onload 处理程序，它会在页面（连同其中包含的所有图像）呈现完成后触发。为了在

onload 事件中执行我们的代码，需要先把代码放到一个函数中：

function emphasizePoemStanzas() {

$('.poemstanza').addClass('emphasized');

}

然后，需要修改 HTML 的<body>标签，将这个函数附加给事件：

<body onload="emphasizePoemStanzas();">

This causes our code to run after the page is completely loaded.

这样，当页面加载完成后，我们的代码就会执行。

可是，这种方法存在很多缺点。为了添加行为，我们修改了 HTML 代码。这种结构与功能紧

密耦合的做法，会导致代码混乱。很多页面都可能需要重复调用相同的函数，或者，在处理

鼠标单击之类事件的情况下，页面中每个元素的实例也可能需要重复调用相同的函数。这样，

添加新的行为将涉及两个不同位置上的改动，不仅增加了出错的可能性，也使设计者与编程

人员之间的并行工作流程趋于复杂化。

为了避开这个缺陷，jQuery允许我们使用$(document).ready()结构预定DOM加载完成后（不

必等待图像加载完成）触发的函数调用。在上面函数定义的基础上，我们可以这样编写代码：

$(document).ready(emphasizePoemStanzas);

这种技术不需要对 HTML 进行任何修改。所有行为完全从 JavaScript 文件内部添加。在第 3

章中，我们将学习在功能与 HTML 结构分离的基础上，响应其他类型的用户操作。

不过，由于定义的函数 emphasizePoemStanzas()马上会用到，并且实际上只使用一次，所

以，这种写法仍然有点浪费。同时，这也意味着我们在函数的全局命名空间中使用了一个标

识符，还必须记住不能再次使用这个标识符，而这仅仅是为一时方便。同其他编程语言一样，

JavaScript 也有一种解决这种低效率做法的方式，叫做匿名函数（有时候也称为 lambda 函

数）。现在，我们就把代码改回初始状态：


$('.poemstanza').addClass('emphasized');

});

通过使用不带函数名称的 function 关键字，我们在实际需要它的地方（而不是提前）定义

了一个函数。这样在消除混乱的同时，也把我们带回了 3行 JavaScript 代码的状态。在

jQuery 中，这种习惯用法非常方便，因为很多方法都需要一个几乎不会再重用的函数作为

参数。

当在另一个函数的主体内使用这种语法定义了一个匿名函数时，就创建了一个闭包。闭包是

一种高级而强大的概念，但由于它可能会带来意想不到的后果和内存使用上的问题，所以，

在大量使用嵌套的函数定义之前，必须要透彻地理解它的原理。我们将在附录 C 中对这个主

题进行充分的讨论。

4. 最终结果

在编写好 JavaScript 代码之后，现在的页面外观会变成如图 1-2 所示。

由于 JavaScript 插入了 emphasized 类，页面中的两节诗歌文本变成了斜体，并且被包含在

了方框中。

图 1-2

1.4 小结

经过对本章的学习，我们对开发者选择使用 JavaScript 框架，而不是从零开始编写代码（即

使是对最基本的任务）的原因有了一个概念。同时，也理解了 jQuery 作为一个框架，都有

哪些值得称道的地方，以及我们选择它而不是别的框架的理由。而且，我们也大体上知道了

jQuery 能够简化哪些任务。

在本章中，我们学习了怎样设置 jQuery，以便网页中的 JavaScript 使用它；学习了使用$()

工厂函数查找具有给定类的页面部分；学习了调用.addClass()为页面的这些部分应用额外

的样式；还学习了调用$(document).ready()基于页面加载来执行这些代码。

本章中举的这个示范如何使用 jQuery 的简单例子，在现实中并不是很有用。在下一章中，

我们会在此基础上继续探索 jQuery 中高级的选择符使用方式，并介绍这一技术的实际应用。

第 2 章选择符——取得你想要的一切

She’s just the girl

She’s just the girl

The girl you want

—Devo,

“Girl U Want”

jQuery 利用了 CSS 和 Xpath 选择符的能力，让我们在 DOM 中快捷而轻松地获取元素或元素

组。在本章中，我们将探索一些 CSS 和 XPath 选择符，以及 jQuery 独有的自定义选择符。

此外，还将介绍一下 jQuery 的 DOM 遍历方法，这些方法为取得目标元素提供了更大的灵活

性。

2.1 DOM

jQuery 强大的方面之一就是它能够简化 DOM 遍历任务。文档对象模型与家谱有几分类似。

同其他标记语言一样，HTML 也使用这个模型来描述页面中元素之间的关系。当我们提到这

些关系时，将使用与描述家庭关系时相同的术语，即父、子等。通过一个简单的例子，可以

帮助我们理解将文档比喻为家谱：

<html>

<head>

<title>the title</title>

</head>

<body>

<div>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<p>This is yet another paragraph.</p>

</div>

</body>

</html>

这里，<html>是其他所有元素的祖先元素，换句话说，其他所有元素都是<html>的后代元素。

<head>和<body>元素是<html>的子元素。因此除了作为<head>和<body>的祖先元素之外，

<html>也是它们的父元素。而<p>元素则是<div>的子元素（也是后代元素），是<body>和

<html>的后代元素，是其他<p>元素的同辈元素。要了解如何使用第三方软件形象化地展示

DOM 中的家族树结构，请参考附录 B。

在开始本章的内容之前，还要提醒大家注意的另一个重要的问题，就是我们通过各种选择符

和方法取得的结果集合实际上都是一个 jQuery 对象。当我们想要实际地操纵在页面中找到

的元素时，通过 jQuery 对象会非常简单。既可以轻松地为 jQuery 对象绑定事件，或者添加

漂亮的效果，也可以将多重修改或效果通过 jQuery 对象连到一起。然而，jQuery 对象与

常规的DOM元素不同，而且也没有必要为实现某些任务给纯DOM元素添加相同的方法和属性。

在本章的后一部分中，我们会介绍如何访问包装在 jQuery 对象中的 DOM 元素。

2.2 工厂函数$()

在 jQuery 中，无论我们使用哪种类型的选择符（不管是 CSS、XPath，还是自定义的选择符），

都要从一个美元符号和一对圆括号开始：$()。

在第 1 章中我们曾经提到过，$()函数会消除使用 for 循环访问一组元素的需求，因为放到

圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个 jQuery 对象中。可以在

$()函数的圆括号中使用的参数几乎没有什么限制。比较常用的一些例子如下。

标签名：$('p')会取得文档中所有的段落。

ID：$('#some-id')会取得文档中具有对应的 some-id ID 的一个元素。

类：$('.some-class')会取得文档中带有 some-class 类的所有元素。

提示让 jQuery 与其他 JavaScript 库有效地协同

在 jQuery 中，美元符号$只不过是对标识符 jQuery 的一种简写方式。由于$()在 JavaScript

库中很常见，所以，如果在一个页面中使用了几个这样的库，那么就会导致冲突。在这种情

况下，可以在我们自定义的 jQuery 代码中，通过将每个$的实例替换成 jQuery 来避免这种

冲突。第 10 章还会介绍对这个问题的其他解决方案。

在介绍了基本的情况之后，下面我们就开始探索选择符的一些更强大的用途。

2.3 CSS 选择符

jQuery 支持 CSS 规范 1 到规范 3 中的大多数选择符，具体内容可以参考 W3C（World Wide Web

Consortium，万维网联盟）网站 http://www.w3.org/Style/CSS/#specs。这种对 CSS 选择

符的支持，使得开发者在增强自己的网站时，不必为哪种浏览器（特别是 IE 6 及更低版本）

可能会不理解高级的选择符而担心，只要该浏览器启用了 JavaScript 就没有问题。

说明负责任的 jQuery 开发者应该在编写自己的程序时，始终坚持渐进增强（progressive

enhancement）和平稳退化（graceful degradation）的理念，做到在 JavaScript 禁用时，

页面仍然能够与启用 JavaScript 时一样准确地呈现，即使没有那么美观。贯穿本书，我们

还将继续探讨这些理念。

为了学习在 jQuery 中如何使用 CSS 选择符，我们选择了一个很多网站中都会有的通常用于

导航的结构——嵌套的无序列表。

<ul id="selectedplays">

<li>Comedies

<ul>

<li><a href="http://www.mysite.com/asyoulikeit/">

As You Like It</a></li>

<li>All's Well That Ends Well</li>

<li>A Midsummer Night's Dream</li>

<li>Twelfth Night</li>

</ul>

</li>

<li>Tragedies

<ul>

<li><a href="hamlet.pdf">Hamlet</a></li>

<li>Macbeth</li>

<li>Romeo and Juliet</li>

</ul>

</li>

<li>Histories

<ul>

<li>Henry IV (<a href="mailto:[email protected]">email</a>)

<ul>

<li>Part I</li>

<li>Part II</li>

</ul>

<li><a href="http://www.shakespeare.co.uk/henryv.htm">

Henry V</a></li>

<li>Richard II</li>

</ul>

</li>

</ul>

我们注意到，其中第一个<ul>具有一个值为 selected-plays 的 ID，但<li>标签则全都没有

与之关联的类。在没有应用任何样式的情况下，这个列表的外观如图 2-1 所示。

图 2-1 中的嵌套列表按照我们期望的方式显示——一组带符号的列表项垂直排列，并且每个

列表都按照各自的级别进行了缩进。

图 2-1

基于列表项的级别添加样式

假设我们想让顶级的项，而且只有顶级的项水平排列。那么我们可以先在样式表中定义一个

horizontal 类：

.horizontal {

float: left;

liststyle:none;

margin: 10px;

}

这个 horizontal 类会将元素浮动到它后面元素的左侧，如果这个元素是一个列表项，那么

会移除其项目符号，后，再为该元素的每一边各添加 10 像素的外边距。

这里，我们没有直接在 HTML 中添加 horizontal 类，而只是将它动态地添加给位于顶级的列

表项 Comedies、Tragedies 和 Histories，以便示范 jQuery 中选择符的用法：


$('#selectedplays>li').addClass('horizontal');

});

我们在第 1章讨论过，当在 jQuery 代码中使用$(document).ready()结构时，位于其中的所

有代码都会在 DOM 加载后立即执行。

第 2 行代码使用子元素组合符（>）将 horizontal 类只添加到位于顶级的项中。实际上，位

于$()函数中的选择符的含义是，查找 ID 为 selected-plays 的元素（#selected-plays）的

子元素（>）中所有的列表项（li）。

随着这个类的应用，现在的嵌套列表如图 2-2 所示。

图 2-2

要为其他项（非顶级的项）添加样式，有很多种方式。因为已经为顶级项添加了 horizontal

类，所以取得全部非顶级项的一种方式，就是使用否定式伪类选择符来识别没有 horizontal

类的所有列表项。注意下面添加的第 3 行代码：


$('#selectedplays> li').addClass('horizontal');

$('#selectedplaysli:not(.horizontal)').addClass('sublevel');

});

这一次取得的每个列表项（li）：

(1) 是 ID 为 selected-plays 的元素（#selected-plays）的后代元素。

(2) 没有 horizontal 类（:not(.horizontal)）。

在为这些列表项添加了 sub-level 类之后，它们取得了在样式表规则.sub-level

{background-color: #ffc;}中定义的浅黄的背景颜色。此时的嵌套列表如图 2-3 所示。

图 2-3

2.4 XPath 选择符

XPath（XML Path Language，XML 路径语言）是在 XML 文档中识别不同元素或者元素值的一

种语言，与 CSS 在 HTML 文档中识别元素的方式类似。jQuery 库支持一组基本的 XPath 选择

符，如果愿意也可以将它们与 CSS 选择符一同使用。而且，在 jQuery 中，无论对什么类型

的文档都可以使用 XPath 和 CSS 选择符。

在涉及属性选择符（attribute selector）时，jQuery 使用了 XPath 中的惯例来标识属性，

即将属性前置一个@符号并放在一对方括号中。也就是说，jQuery 没有采用 CSS 中不够灵活

的属性选择符语法。例如，要选择所有带 title 属性的链接，可以使用下面的代码：

$('a[@title]')

此外，方括号在 XPath 语法中还有另外一种用途，即在不带前置@符号的情况下，可以用来

指定包含在另一个元素中的元素。例如，我们可以通过下面的选择符表达式，取得包含一个

ol 元素的所有 div 元素：

$('div[ol]')

为链接添加样式

属性选择符允许以类似正则表达式的语法来标识字符串的开始（^）和结尾（$）。而且，也

可以使用星号（*）表示字符串中的任意位置。

假设我们想以不同的文本颜色来显示不同类型的链接。那么，首先要在样式表中定义如下样

式：

a {

color: #00f; /* make plain links blue */

a.mailto {

color: #f00; /* make email links red */

}

a.pdflink {

color: #090; /* make PDF links green */

}

a.mysite {

textdecoration:none; /* remove internal link underline */

borderbottom:1px dotted #00f;

}

然后，可以使用 jQuery 为符合条件的链接添加 3 个类：mailto、pdflink 和 mysite。

要取得所有电子邮件链接，需要构造一个选择符，用来寻找所有带 href 属性（[@href]）且

以 mailto 开头（^="mailto:"）的锚元素（a）。结果如下所示：


$('a[@href^="mailto:"]').addClass('mailto');

});

要取得所有指向 PDF 文件的链接，需要使用美元符号（$）而不是脱字符号（^），来取得所

有带 href 属性并以.pdf 结尾的链接，相应的代码如下所示：



$('a[@href$=".pdf"]').addClass('pdflink');

});

后，要取得所有内部链接，即到 mysite.com 中其他页面的链接，则需要使用星号：



$('a[@href$=".pdf"]').addClass('pdflink');

$('a[@href*="mysite.com"]').addClass('mysite');

});

这里，mysite.com 可以出现在 href 属性值中的任何位置上。如果我们也想选择指向

mysite.com 内部所有子域名的链接，使用这个选择符特别关键。

随着这 3 个类被应用到 3 种类型的链接中，我们应该看到下列应用的样式。

带点划线的蓝色文本：

<a href="http://www.mysite.com/asyoulikeit/">As You Like It</a>

绿色文本：<a href="hamlet.pdf">Hamlet</a>

红色文本：<a href="mailto:[email protected]">email</a>

图 2-4 是添加这些样式之后的一幅屏幕截图。

图 2-4

2.5 自定义选择符

除了 CSS 和 XPath 选择符之外，jQuery 还添加了独有的完全不同的自定义选择符。可以说，

jQuery 中的多数自定义选择符都可以让我们基于某个标准选出特定的元素。自定义选择符

的语法与 CSS 中的伪类选择符语法相同，即选择符以一个冒号（:）开头。例如，我们想要

从匹配的带有 horizontal 类的 div 集合中，选择第 2 个项，那么应该使用下面的代码：

$('div.horizontal:eq(1)')

注意，因为 JavaScript 数组采用从 0开始的编号方式，所以 eq(1)取得的是集合中的第 2

个元素。而 CSS 则是从 1开始的，因此 CSS 选择符$('div:nth-child(1)')取得的是作为其

父元素第 1个子元素的所有 div。

交替地为表格行添加样式

jQuery 库中的两个十分有用的自定义选择符是:odd 和:even。下面，我们就来看一看如何通

过这两个选择符为表格添加基本的条纹样式，针对下面的表格：

<table>

<tr>

<td>As You Like It</td>

<td>Comedy</td>

</tr>

<tr>

<td>All's Well that Ends Well</td>

<td>Comedy</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

</tr>

<tr>

<td>Macbeth</td>

<td>Tragedy</td>

</tr>

<tr>

<td>Romeo and Juliet</td>

<td>Tragedy</td>

</tr>

<tr>

<td>Henry IV, Part I</td>

<td>History</td>

</tr>

<tr>

<td>Henry V</td>

<td>History</td>

</tr>

</table>

我们可以向样式表中添加两个类，一个用于为奇数行添加样式，另一个用于为偶数行添加样

式：

.odd {

backgroundcolor:#ffc; /* pale yellow for odd rows */

}

.even {

backgroundcolor:#cef; /* pale blue for even rows */

}

后，编写 jQuery 代码，将这两个类添加到表格行（<tr>标签）中：


$('tr:odd').addClass('odd');

$('tr:even').addClass('even');

});

如此简单的一点代码，就能产生如图 2-5 所示的表格。

乍一看，表格行的背景颜色似乎与我们的意图相反。但是，与:eq()选择符一样，:odd()

和:even()选择符使用的都是 JavaScript 本身的从 0 开始的编号方式。因此，表格的第 1

行编号为 0（偶数），而表格的第 2行编号是 1（奇数），然后依此类推。

图 2-5

不过，要注意的是，如果一个页面上存在多个表格，我们则真有可能会看到意料之外的结果。

例如，因为这个表格中的后一行拥有浅蓝色背景，所以下一个表格的第一行就会带有浅黄

色的背景。我们将在第 7 章介绍解决这个问题的方法。

下面，我们介绍后一个自定义选择符。假设出于某种原因，我们希望突出显示提到任何一

种 Henry 游戏的所有表格单元。为此，我们所要做的就是在样式表中添加一个声明了粗体和

红色文本的类（.highlight {font-weight:bold; color: #f00;}），然后向 jQuery 代码中

添加一行代码，其中使用的是:contains()选择符。


$('tr:odd').addClass('odd');

$('tr:even').addClass('even');

$('td:contains("Henry")').addClass('highlight');

});

这样，在我们可爱的条纹表格中，就能够看到突出显示的 Henry 游戏了，如图 2-6 所示。

图 2-6

诚然，不使用 jQuery（或任何客户端编程语言）也可以通过其他方式实现这种突出显示效

果。然而，jQuery 加上 CSS，在内容由程序动态生成，而我们又无权改动 HTML 和服务器端

代码的情况下，对这种样式化操作提供了优秀的替换方案。

2.6 DOM 遍历方法

利用前面介绍的 jQuery 选择符取得一组元素，就像是我们在 DOM 树中纵横遍历再经过筛选

得到结果一样。如果只有这一种取得元素的方式，那我们选择的余地也是很有限的（尽管坦

诚地讲，选择符表达式本身还是很强的，特别是与常规的 DOM 脚本编程相比）。很多情况下，

取得某个元素的父元素或者祖先元素都是基本的操作。而这正是 jQuery 的 DOM 遍历方法的

用武之地。有了这些方法，我们可以轻而易举地在 DOM 树中上、下、左、右地自由漫步。

其中一些方法与选择符表达式有异曲同工之妙。例如，这行用于添加 odd 类的代码

$('tr:odd').addClass('odd');，可以通过.filter()方法重写成下面这样：

$('tr').filter(':odd').addClass('odd');

而且，这两种取得元素的方式在很大程度上可以互为补充。下面，我们仍以条纹式表格为例，

看看通过这些方法如何实现同样的效果。

首先，表格中要使用标题行，因此需要在表格中添加带有两个<th>元素（不是<td>元素）的

另一个<tr>元素：

[…]

<tr>

<th>Title</th>

<th>Category</th>

</tr>

[…]

提示也可以通过更语义化的方式来标记表格，即将标题行放在<thead>和</thead>之间，而

将其他的行放在<tbody>和</tbody>之间。不过，出于简化例子的考虑，我们在此没有使用

更多的标记。

我们会为标题行添加不同于其他行的样式，使它带有粗体和黄色的背景（而不是浅蓝色）。

如果不修改，那么这一行就是那样了。

其次，我们客户看了看这个页面，很喜欢这些条纹。不过，客户想让红色的粗体文本出现在

Henry 行的类别（category）单元格中，而不是出现在标题（title）单元格中。

1. 为标题行添加样式

为标题行添加不同样式的任务，可以通过找到<th>标签并取得它们的父元素来完成。而其他

行则可以通过组合使用 CSS、XPath 以及自定义选择符过滤<tr>元素来选择并添加样式。所

需的代码如下所示：


$('th').parent().addClass('tableheading');

$('tr:not([th]):even').addClass('even');

$('tr:not([th]):odd').addClass('odd');

$('td:contains("Henry")').addClass('highlight');

});

对于标题行，我们通过 parent()方法取得了一个普通的父元素，没有在圆括号中包含任何

参数。因为我们知道这个父元素就是<tr>，而且结果集合中只有这一个元素。虽然我们会认

为由于存在两个<th>元素，所以<tr>中终会包含两个 table-heading 类，但 jQuery 很聪

明，它不会向元素中重复添加同一个类名。

对于表体中的行，我们首先排除了后代元素中包含<th>的<tr>元素，进而，又应用了:odd

或:even 过滤器。选择符的次序在这里很重要，如果我们在这里使用的是$('tr:odd:not

([th])')，而不是$('tr:not([th]):odd')，那么终的表格会完全不同。

2. 为 Category 单元格添加样式

为了给包含 Henry 的单元格之后的单元格添加样式，我们可以在已经写出的选择符基础上，

向其中添加.next()方法：


$('the').parent().addClass('tableheading');

$('tr:not([th]):even').addClass('even');

$('tr:not([th]):odd').addClass('odd');

$('td:contains("Henry")').next().addClass('highlight');

});

在添加了 table-heading 类和将 highlight 类应用到 Category 列的单元格之后，表格的外

观如图 2-7 所示。

图 2-7

其中，.next()方法只取得接近的下一个同辈元素。那么，要是表格中包含更多的列怎么

办呢？比如，如果还有一个 Year Published 列，那么只要所在行的 Title 列中包含 Henry，

我们希望该列中的文本也突出显示。换句话说，对于一个单元格中包含 Henry 的行，我们想

要取得该行中的其他所有单元格。通过组合不同的选择符表达式和 jQuery 方法，有如下几

种方式可以达到我们的目的。

(1) 取得包含 Henry 的单元格，然后取得该单元格的所有同辈元素（不仅仅是下一个同辈元

素）。后添加类：

$('td:contains("Henry")').siblings().addClass('highlight');

(2) 取得包含 Henry 的单元格，再取得它的父元素，然后找到该元素中包含的所有编号大于

0（0 是第 1单元格）的单元格。后添加类：

$('td:contains("Henry")').parent().find('td:gt(0)') .addClass('highlight');

(3) 取得包含 Henry 的单元格，再取得它的父元素，找到该元素中包含的所有单元格，然后

过滤这些单元格排除包含 Henry 的那一个。后添加类：

$('td:contains("Henry")').parent().find('td').not(':

contains("Henry")') ).addClass('highlight');

(4) 取得包含 Henry 的单元格，再取得它的父元素，找到该元素包含的子元素中的第 2 个单

元格，添加类；取消后一次.find()，再查找该元素包含的子元素中的第 3 个单元格，添

加类：

$('td:contains("Henry")').parent().find('td:eq(1)').addClass( 'highlight').end(

).find('td:eq(2)').addClass('highlight');

所有这些方法都会得到相同的结果，如图 2-8 所示。

图 2-8

为了代码清晰起见，以上组合选择符表达式和方法的这几种方式并不全都是我们所推荐的。

实际上，第 4 种转弯抹角的方式几乎达到了荒谬的程度。不过，通过这些方式应该能够体现

出 jQuery 的 DOM 遍历方式的确极具灵活性。

3. 连

以上几种方式同时也示范了 jQuery 的连能力。在 jQuery 中，可以通过一行代码取得多个

元素集合并对这些元素集合执行多次操作。而且，为了获得更佳的可读性，也可以把一行代

码分成多行。例如，上一节中的第 4种方式可以写成 7 行代码，而且每行代码都可以包含自

己的注释，但本质上它们仍然是一行代码：

$('td:contains("Henry")') //get every cell containing "Henry"

.parent() //get its parent

.find('td:eq(1)') //find inside the parent the 2nd cell

.addClass(highlight') //add the "highlight" class to that cell

.end() //revert back to the parent of the cell containing "Henry"

.find('td:eq(2)') //find inside the parent the 3rd cell

.addClass('highlight'); //add the "highlight" class to that cell

连就像是一口气说出一大段话——虽然效率很高，但对别人来说可能会难于理解。而将它

分开放到多行并添加明确的注释，从长远来看则可以节省更多的时间。

2.7 访问 DOM 元素

所有选择符表达式和多数jQuery方法都返回一个jQuery对象，而这通常都是我们所希望的，

因为 jQuery 对象能够提供隐式迭代和连能力。

尽管如此，我们仍然有需要在代码中直接访问 DOM 元素的时候。例如，可能需要为另一个

JavaScript 库提供一组元素的结果集合。或者，可能不得不访问某个元素的标签名。对于

这些少见但合理的情形，jQuery 提供了.get()方法。要访问 jQuery 对象引用的第 1 个 DOM

元素，可以使用.get(0)。如果需要在循环中使用 DOM 元素，那么应该使用.get(index)。因

而，如果想知道带有 id="my-element"属性的元素的标签名，应该使用如下代码：

var myTag = $('#myelement').get(0).tagName;

为了进一步简化这些代码，jQuery 还为.get()方法提供了一种简写方式。比如，可以将

$('#my-element').get(0)简写为$('#my-element')[0]，也就是说，可以在选择符后面直接

使用方括号。显然，这种语法与访问 DOM 元素数组很相似，而使用方括号就好像剥掉 jQuery

的包装并直接取得这些元素。

2.8 小结

通过本章介绍的技术，应该掌握了如何使用 CSS 选择符为嵌套列表中的顶级和非顶级项分别

添加样式，如何使用 XPath 属性选择符为不同类型的链接应用不同的样式，如何使用自定义

的 jQuery 选择符:odd 和:even 为表格添加条纹效果，以及如何使用连的 jQuery 方法突出

显示某个表格单元中的文本。

到现在为止，我们使用了$(document).ready()事件为一组匹配的元素添加类。在下一章中，

我们将探索基于用户发起的事件来添加类的技术。

j query基础教程

Documents