4.6.2　高级选择器

jQuery还允许使用更为复杂的CSS选择器来精确地找到想要选择的标签。现在先不要太急于立即掌握这些，一旦再阅读一些章节并且对jQuery如何工作以及如何使用它操作Web页面有了更好的理解，你还可以回顾本节的内容。

·子孙选择器提供了一种方式来找到一个标签中的另一个标签。例如，假设已经创建了一个无序的链接列表，并且给这个列表的＜ul＞标签添加navBar的一个ID名：＜ul id="navBar"＞。jQuery表达式$（'a'）选择了该页面上的所有＜a＞标签。然而，如果想要只选择无序列表内的链接，可以使用一个子孙选择器，如下所示：

$（'#navBar a'）

快速熟悉理解CSS

层叠样式表在任何对于JavaScript的介绍中都是一个重要话题。要很好地学习本书，我们至少需要有一些Web设计背景知识，并且知道一些CSS知识以及如何使用它。CSS是Web设计师创建美丽的Web站点所需要的最重要的工具，因此，如果你还不太了解它，现在就该学习它。CSS不仅帮助你使用jQuery，而且你会发现可以把JavaScript和CSS结合起来使用，从而很容易地给Web页面添加交互视觉效果。

如果需要一些帮助来快速掌握CSS，有充足的资料供我们学习。

要概览C S S的基础知识，请尝试位于w w w.htmldog.com/guides/的HTML Dog CSS教程。你将会在该站点找到基础的、中级的和高级的教程。

也可以阅读《CSS：The Missing Manual》一书，该书全面地介绍了CSS（包括很多和本书类似的动手实验教程）。

特别是，在使用jQuery的时候，理解CSS选择器很重要，这个教程告诉Web浏览器CSS规则适用于哪个标签。要操作一个选择器，这里介绍的资源是很好的。如果只是想要回顾可用的不同选择器，还有一些地方可以访问：

·http：//css.maxdesign.com.au/selectutorial/

·http：//www.456 bereastreet.com/archive/200601/css_3_selectors_explained/

另外，这个语法只是基本的CSS：一个选择器，后面依次是一个空格和另一个选择器。最后列出的选择器是目标（在这个例子中是a），而其左边的每个选择器表示包含该目标的一个标签。

·孩子选择器找到是另一个标签的孩子的一个标签。孩子标签是另一个标签的直接子孙。例如，在图4-3所示的HTML中，＜h1＞和＜p＞标签是＜body＞标签的孩子，而＜strong＞标签则不是（因为它由＜p＞标签包围着）。这样创建孩子元素：首先列出父亲元素，然后是一个＞，然后是孩子元素。例如，要选择＜body＞标签的孩子＜p＞标签，这样编写：

$（'body＞p'）

·相邻的兄弟选择器使得我们能够选择直接出现在另一个标签之后的标签。例如，假设有一个不可见的面板，当单击一个标签页的时候，面板会显示出来。在HTML中，标签页可能用一个标题标签（例如＜h2＞）表示，而隐藏的面板则是跟在标题后面的一个＜div＞标签。要使得＜div＞标签（面板）可见，需要一种方式来选择它。使用jQuery和一个相邻兄弟选择器可以很容易地做到这一点：

$（'h2+div'）

要创建一个相邻兄弟选择器，只要在两个选择器之间添加一个加号（这两个选择器可以是任何类型，包括ID、类或元素）。右边的选择器是要选择的一个，而只有它直接出现在左边的选择器的后面的时候才是这样。

·属性选择器允许根据一个元素是否拥有一个特定属性来选择它，甚至能够检查以确定该属性是否匹配一个特定值。通过属性选择器，可以找到设置了alt属性的＜img＞标签，甚至可以匹配一个拥有特定的alt文本值的＜img＞标签。或者，可以找到指向站点之外的每个链接标签，并且仅为那些链接添加代码，以使它们都在一个新的窗口中打开。

在要检查属性的元素之后添加属性选择器。例如，要找到设置了alt属性的＜img＞标签，可以这样编写：

$（'img[alt]'）

还有一些其他的不同属性选择器：

·[attribute]选择HTML中那些已经指定了特定属性的元素。例如，$（a[href]）找到设置了一个href属性的所有＜a＞元素。通过属性来选择，这允许排除带有名字的锚点，例如＜a name="placeOnPage"＞＜/a＞，这经常用作页面内的链接。

·[attribute=value]选择特定属性拥有一个具体值的一个元素。例如，找出表单中的所有文本框，可以使用：

$（'input[type="text"]'）

既然大多数表单元素都共享同样的标签＜input＞，因此分辨表单元素的类型的唯一方式就是查看其type属性（选择表单元素是如此常见，以至于jQuery为此包含了专门的选择器，参见9.1.1节）。

·[attribute^=value]匹配一个属性以一个特定值开始的元素。例如，如果要找到指向站点之外的所有链接，可以使用下面的代码：

$（'a[href^="http：//"]'）

注意，不一定要整个属性值匹配，只要开始部分匹配就行了。因此，href^=http：//匹配那些指向http：//www.yahoo.com或http：//www.google.com等的链接。或者，可以使用这个选择器来识别一个mailto：链接，如下所示：

$（'a[href^="mailto："]'）

·[attribute$=value]匹配属性以一个特定值结束的元素，这对于匹配文件扩展名来说很好用。例如，使用这个选择器，可以找到指向PDF文件的链接（可能使用JavaScript来添加一个专门的PDF图标；或者动态地生成到Adobe.com的一个链接，以便访问者可以下载Acrobat Reader程序）。选择指向PDF文件的链接的代码如下所示：

$（'a[href$=".pdf"]'）

·[attribute*=value]匹配属性中的任意位置包含了一个特定值的元素。例如，可以找到指向一个特定域名的任何类型的链接。例如，下面代码展示了如何找到指向missingmanuals.com的链接：

$（'a[href*="missingmanuals.com"]'）

这个选择器提供了很好的灵活性，不仅可以找到指向http：//www.missingmanuals.com的链接，而且也能找到指向http：//missingmanuals.com和http：//www.missingmanuals.com/library.html的链接。

注意：在操作表单的时候，jQuery有一组有用的选择器。它们允许选择文本字段、密码字段和单选按钮这样的元素。我们将在9.1.1节学习它们。