本文是博主学习《深入PHP与JQuery开发》一书的学习笔记。版权属于原书作者。
jQuery中的一切都围绕着它那强大到令人难以置信的选择器引擎运转。
DOM是构成HTML、XHTML和XML文档的对象及节点的集合。它具有平台无关性和语言无关性。这意味着开发者能够在多种平台（比如Web浏览器）通过很多种语言（比如JavaScript）访问DOM而不会遇到任何兼容性问题。
jQuery最健壮、最迷人的特性之一就是使用它选择DOM元素极其容易。CSS伪类选择器的使用更为它增添了惊人的威力。CSS伪指令使开发者能够定位页面中的特殊元素，因为有着和CSS几乎完全相同的语法，那些有CSS经验的人很快就能上手。
基本上，同样的CSS语法既可以用来设置样式规则，也可以用来（通过下面列出的方式）选择元素。
- 基本选择器
- 层级（Hierarchy）选择器
- 过滤器
- 基本过滤器
- 内容过滤器
- 可见性过滤器
- 属性过滤器
- 子过滤器
- 表单过滤器
1. 基本选择器
基本选择器让开发者能够使用标签类型$("p")、类名$(".classname")、ID$("#id")或它们的任意组合选择元素。
打开http://localhost/testing/页面，点开Firebug会话窗口，然后单击控制台（Console）标签（图1-4）。
本章所有的例子都使用这个控制台。
提示 如果你很熟悉 CSS，则可以快速浏览本节，这些选择器的行为与它们在CSS中的表现完全相同。
通过标签类型选择元素
要通过标签类型选择元素，直接使用标签的名字（如 p、div、或者span）作为选择器：
element
假如要在我们的测试页面里选择所有的段落（<p>）标签，请在控制台的底部输入以下代码：
$("p");
当我们把标签名字（"p"）传递给jQuery函数，它就找出所有的<p>实例，并将它们添加到jQuery对象中。
通过class选择元素
你能用标签类型选择元素，同样也能用元素的class属性来选择元素。通过class选择元素的语法是在class名字之前加一个句点（.）：
.class
在控制台执行下面的代码，可选出拥有class foo 的全部元素：
$(".foo");
通过ID选择元素
要通过一个元素的id属性来选择一个元素，与CSS语法相同，在id之前加一个井号（#）。
#id
下面的代码选出所有id="bar"的元素：
$("#bar");
使用组合②选择器
如果需要访问多个元素，组合选择器（multiple selector）能做到一次选择得到所有匹配元素。举例来说，如果你打算选择任意拥有class foo的段落和id="bar"的元素，可使用下面的代码：
$("p.foo,#bar");
只要元素匹配组合选择器中任意一个选择器，都会被选中并出现在返回结果
2. 层次选择器
有时候仅使用元素标签、class或ID来选择元素不能满足需要。在很多场合你需要访问一个元素内部的元素，一个元素的下一个元素，或者一个元素之后的元素等。比如你要移除所有菜单项中除当前单击菜单外的用来标识当前选中项①的class，或者要获取一个无序列表中所有未选中的项，或者在一个表单项被选中时改变其父元素的属性等。
选择后代元素
要选择一个元素的后代元素，也就是被该元素包裹的其他元素，使用祖先元素后加空格再加后代元素的格式：
祖先元素 后代元素
要选择测试页面中body元素的后代元素span，在Firebug控制台执行下面的代码：
$("body span");
这会找出当前文档body标签（<body>）内的所有span，也包括那些被段落（<p>）标签包裹的span。
>>> $("body span");
[ span, span.foo ]选择子元素
子元素选择器是后代选择器的一种特殊形式，它只匹配直接子元素（最近一层的子元素）。要选择一个子元素，使用父元素加大于号（>）再加子元素来匹配：
父元素>子元素
在你的测试文件中，选择body元素的直接子元素span，在控制台中输入下面的命令：
$("body>span");
由于没有一个span是body元素的直接子元素，控制台会输出一个空集合如下：
>>> $("body>span");
[ ]接下来，过滤所有的span元素，找出段落元素所有直接子元素中的span元素：
$("p>span");
输出结果显示如下：
>>> $("p>span");
[ span, span.foo ]选择下一个兄弟（next）元素
有时你需要在DOM中选择一个元素之后紧跟的下一个兄弟元素，达成目标的选择格式为起始元素标识（可以是任意选择器）加一个加号（+）再加下一个兄弟元素标识：
起始元素标识+下一个兄弟元素标识
在控制台输入以下命令：
$(".foo+p");
只有一个元素有class foo，因此只有一个段落元素匹配被返回：
>>> $('.foo+p');
[ p ]接下来，我们使用一个更一般的查询，选择任意一个段落的下一个兄弟元素：
$('p+p');
我们的HTML中一共有4个段落，它们中只有最后一个段落没有下一个兄弟段落，因此控制台会在结果中显示3个段落：
>>> $('p+p');
[ p.foo, p, p#bar ]
选择兄弟元素
兄弟元素（sibling element）是指被同一个元素包裹的同一级的全部元素。
选择兄弟元素非常类似于选择下一个元素，只是它返回起始元素之后匹配的全部兄弟元素，而不是只返回下一个。
要选择兄弟元素，使用格式为起始元素标识加波浪字符（~）再加匹配兄弟元素：
起始元素标识~匹配兄弟元素
要匹配p.foo之后的所有兄弟段落，在控制台执行下面的代码：
$(".foo~p");
结果集显示如下：
>>> $(".foo~p");
[ p, p#bar ]
3. 基本过滤器
在DOM中访问元素的另一种很强大的方法是过滤器。它不依赖元素类型、元素的class、元素的ID，
而是根据元素的位置、元素的当前状态或其他可变参数来匹配元素。
过滤器的基本语法是一个冒号紧跟着过滤器名字：
:过滤器名字
有些过滤器支持参数传递（用圆括号封装）：
:过滤器名字(参数)
后面几节将介绍最常用同时也最实用的过滤器。
提示 为尽快开始实际开发，本节并没有覆盖全部的过滤器。
要了解完整的过滤器列表，请参阅jQuery文档。
选择第一个或最后一个元素
过滤器最常见的一个用途，是在集合中判断一个元素是否是第一个或者最后一个。
使用过滤器找出第一个或最后一个元素极为简单，只要在任意选择器之后追加:first或:last即可：
$("p:last");
执行以上代码，控制台输出如下：
>>> $("p:last");
[ p#bar ]选择不匹配某个选择器的元素
如果你打算找出所有不匹配某个选择器的元素，使用:not()过滤器是最容易的方法。
将它追加到你的选择器之后，并为它提供一个选择器参数，就会得到匹配原选择器，但不匹配:not()的参数选择器的结果集。
举个例子：
$("p:not(.foo)");
会返回以下结果集：
>>> $("p:not(.foo)");
[ p, p, p#bar ]选择索引为奇数或偶数的元素
类似于:first和:last，:even和:odd过滤器语法也相当简单，它的返回结果与你的预期一致，分别返回结果集中索引为奇数或偶数①的元素。
(此处的索引与下一小节相同，从 0 而不是从 1 开始，也就是平常经常说的第一个元素（索引0）匹配偶数，请特别注意)
$("p:odd");
在控制台中执行前面这行代码，结果如下：
>>> $("p:odd");
[ p.foo, p#bar ]选择特定索引的元素
如果需要根据元素索引得到特定元素，传递一个索引编号给:eq()过滤器，就能得到期望的元素：
$("p:eq(3)");
输出如下：
>>> $("p:eq(3)");
[ p#bar ]提示 一个元素的索引是指它在结果集中的位置。此处的索引遵守编程约定，从0开始，第一个元素的索引是0，第二个是1，以此类推。
4. 内容过滤器
还有些过滤器能根据元素内容匹配元素。
这些过滤器有的负责匹配包含特定文本的元素，有的负责匹配包含特定元素的元素。
匹配包含特定文本的元素
要匹配包含特定文本的元素，使用:contains()过滤器，其中匹配文本①被传递给过滤器作为它的参数：
① 一个常见的错误是给匹配文本加引号。和一般程序设计语言中的参数不同，这里匹配字符串一定不能加引号。
$("p:contains(Another)");
在控制台中执行这行代码，结果如下：
>>> $("p:contains(Another)");
[ p.foo ]提示 :contains()过滤器是区分大小写的，这意味着字母的大小写会影响文本匹配。
开发社区的一位成员写了一个不区分大小写的:contains()版本，并将它放到了jQuery API文档的:contains()条目的注释当中。
要更详细的了解此信息，参阅http://api.jquery.com/ contains-selector。
匹配包含特定元素的元素
:has()过滤器用来匹配包含特定元素的元素。
它的工作方式类似:contains()，只是它接受的参数是元素名而不是内容文本：
$("p:has(span)");
在控制台执行这个代码，输出如下：
>>> $("p:has(span)");
[ p, p#bar ]
返回结果中只包含span标签的<p>元素。
选择空元素
要找出不包含任何文本也不包含任何其他元素的空元素，:empty过滤器正合适。
我们用来测试的HTML例子中，只有一个看不到的空元素。找出它：
$(":empty");
输出如下：
>>> $(":empty");
[ script jsapi, script jquery.min.js, div#_firebugConsole ]
你看到的第二个script标签和div标签都是动态生成的（不存在于我们的HTML标记中）。
其中script标签由Google JSAPI加载jQuery的时候生成，div标签则是Firebug生成的。
选择父元素
与:empty相反，:parent只匹配那些拥有子元素的元素，不管它包含的是其他元素，还是文本内容，或者兼而有之。
选择所有拥有子元素的段落，使用下面的代码：
$("p:parent");
在测试HTML文档中，因为所有的段落都包含文本（某些还包含其他元素），所以结果集包含了所有的段落：
>>> $("p:parent");
[ p, p.foo, p, p#bar ]
5. 可见性过滤器
可见性过滤器，也就是:hidden和:visible，分别用来选择被隐藏的元素和可看到的元素。选择所有可见段落：
$("p:visible");
因为你的HTML中没有任何段落被隐藏，因此返回下面的结果集：
>>> $("p:visible");
[ p, p.foo, p, p#bar ]
6. 属性过滤器
利用元素的属性来选择元素也是一种非常重要的方法。
属性是位于标签内部用来对标签做进一步描述的东西（如class、href、ID、title等）。
在下面的例子里你会访问class属性。
提示 请牢牢记住：在正式发布的脚本中只要可能就尽量使用ID（#id）和类（.class）选择器，而不使用属性过滤器。
优先使用它们不但速度更快，而且也是好习惯。
下面的例子使用属性过滤器仅仅是为了演示过滤器的能力。
根据属性及属性的值选择元素
要匹配拥有特定属性及属性值的元素，用下面的格式将属性和值放到方括号当中（[]）：
[属性名=属性值]
要选择拥有class foo的所有元素，在控制台执行以下代码：
$("[class=foo]");
结果如下：
>>> $("[class=foo]");
[ p.foo, span.foo ]
选择没有某个属性的元素或属性值不匹配的元素
反之，要选择不匹配特定属性及其值的元素，在属性名和属性值之间的等号前插入一个感叹号（!）：
[属性名!=属性值]
运行下面的代码，选出没有foo class的全部段落：
$("p[class!=foo]");
结果如下：
>>> $("p[class!=foo]");
[ p, p, p#bar ]
7. 子元素过滤器
子元素过滤器是:even、:odd和:eq()的一种代用品。
主要的区别在于这一套选择器起始索引为1而不是0（像:eq()从0开始）。
匹配奇数索引值／偶数索引值／特定索引值的元素
:nth-child()是最“多才多艺”的过滤器之一。在匹配元素时它提供了４个参数选项：even、odd、index和equation。
和其他子元素过滤器相同，这个过滤器的索引也是从1而不是0开始，这样第一个元素的索引就是1而不是0，第2个元素是2，以此类推。
使用:odd选择元素，结果集包含p.foo和p#foo；下面的代码用:nth-child(odd)选择奇数索引的元素，我们来看下结果（与:odd相比）有无不同：
$("p:nth-child(odd)");
在控制台中结果显示如下：
>>> $("p:nth-child(odd)");
[ p, p ]
两个过滤器的结果不一样。这好像有点怪，其实不然，之所以得到这样的结果是因为两个过滤器索引起始值不同（:odd从0而:ntd-child从1开始）。
选择第一个或最后一个子元素
这两个过滤器与:first和:last极为相似，不过有一个区别。:first-child和:last-child返回的元素集合可能含有不止一个匹配元素。举例来说，要找出段落元素内的最后一个span元素，可以使用下面的代码：
$("p span:last");
返回结果如下：
>>> $("p span:last");
[ span.foo ]
不过，如果你想匹配每个段落的最后一个span子元素，就应该用:last-child而不是:last：
$("p span:last-child");
它会在每个段落而不是整个DOM中进行匹配，因此返回结果与:last有所不同：
>>> $("p span:last-child");
[ span, span.foo ]
8. 表单过滤器
表单在现代站点中应用极为广泛，受表单元素的分工启发，我们才有了一整套过滤器，特别是面向表单的过滤器。
因为测试页面里并没有放任何表单元素，为了继续下面的例子，需要在测试文件中追加一些新的HTML标记。
在index.html中最后一个<p>标签和第一个<script>标签之间添加以下HTML：
<form action="#" method="post">
<fieldset>
<legend>Sign Up Form</legend>
<label for="name">Name</label><br />
<input name="name" id="name" type="text" /><br />
<label for="password">Password</label><br />
<input name="password" id="password"
type="password" /><br /><br />
<label>
<input type="radio" name="loc" />
I'm on my computer
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
I'm on a shared computer
</label><br /><br />
<input type="submit" value="Log In" /><br />
<label>
<input type="checkbox" name="notify"
disabled="true" />
Keep me signed in on this computer
</label><br />
</fieldset>
</form>保存index.html，然后在浏览器中重新载入http://localhost/testing/即可看到此表单
按表单元素类型匹配
最常见的表单过滤器按照表单元素的类型匹配元素。目前可用的表单过滤器有:button、:checkbox、:file、:image、:input、:password、:radio、:submit和:text。
要选择全部单选按钮（<input type="radio">），使用下面的代码：
$("input:radio");
控制台输出如下：
>>> $("input:radio");
[ input on, input on ]
刚刚提到的这些过滤器特别有用，因为它们针对的都是input元素。在以往没有这些过滤器的年代，匹配特定类型的input要麻烦得多。
匹配可用或禁用的表单元素
此外，还有两个过滤器:enabled和:disabled分别用来匹配可用的和禁用的表单元素。要选择所有被禁用的表单元素，使用下面的代码：
$(":disabled");
在控制台中的输出如下：
>>> $(":disabled");
[ input on ]
复选框Keep me signed in on this computer处于禁用状态，因此:disabled过滤器的返回结果就是它。
匹配选中或未选中的表单元素
单选按钮和复选框有一个checked状态，而下拉列表（<input type="select">）有一个selected状态。过滤器:checked和:selected分别用于获取checked为真和selected为真的表单元素。
要匹配测试页面中当前选中的单选按钮，在控制台中执行下面的代码：
$(":checked");
控制台显示结果如下：
>>> $(":checked");
[ input on ]
小结
在本章你了解到什么是jQuery，以及这个项目的历史由来，还有它的基本工作原理。
你还用XAMPP、Firefox、Firebug插件搭建了一个开发环境。
此时此刻，我想你能体会到使用jQuery强大的选择器引擎从DOM中选取元素真是一种享受。
本章虽然有一点点枯燥，不过在编写更多代码之前，彻底了解jQuery如何工作是很重要的。
在下一章里，你将学习如何用jQuery内建方法遍历、存取和处理DOM。
本文是博主学习《深入PHP与JQuery开发》一书的学习笔记。版权属于原书作者。
扫一扫
789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
