jQuery - 选择器

jQuery 库利用级联样式表(CSS)选择器让我们快速而方便地访问文档对象模型(DOM)中的元素或元素组。

jQuery 选择器是一个函数，基于给定的标准，利用表达式从 DOM 中找出匹配的元素。简单来说，选择器是使用 jQuery 来选择一个或多个 HTML 元素。当一个元素被选中，然后我们对所选元素可以执行各种操作。

$() 工厂函数

jQuery 选择器以 dollar 符号和括号开始 —— $()。工厂函数 $() 使用了以下三个部分来从给定的文档中选取元素 ——

序号	选择器 & 描述
1	标签名代表在 DOM 中可用的标签名。例如 $('p') 选择文档中所有的段落 <p>。
2	标签 ID 代表在 DOM 中带有给定 ID 的一个可用的标签。例如 $('#some-id') 选择文档中带有 ID 为 some-id 的单个元素。
3	标签类代表在 DOM 中带有指定类的可用的标签。例如 $('.some-class') 选择文档中带有 some-class 类的所有元素。

上述所有项目可以单个使用或结合其他的选择器使用。所有 jQuery 选择器除了一些调整外，都是基于同样的原则。

注意 —— 工厂函数 $() 是 jQuery() 函数的同义词。所以如果你使用的是任何其他 JavaScript 库，其中 $ 符号和一些其他的事情有冲突的话，你可以用 jQuery 名称来取代 $ 符号，并且你也可以使用 jQuery() 函数来替代 $() 函数。

示例

下面是使用标签选择器的一个简单的例子。它会选取带有标签名称 p 的全部的元素，并把它们的背景色设置为 “黄色”。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>

   <body>
      <div>
         <p class="myclass">This is a paragraph.</p>
         <p id="myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>

</html>

这将产生如下所示结果 ——

如何使用选择器？

选择器非常有用，在使用 jQuery 的每一步都需要使用选择器。它们会从 HTML 文档中获得你想要的正确的元素。

下表列出了一些基本的选择器并用示例进行了解释。

序号	选择器 & 描述
1	名称选择出与给定的元素 Name 匹配的所有元素。
2	#ID 选择出与给定的 ID 相匹配的单个元素。
3	.Class 选择出与给定的 Class 匹配的全部元素。
4	*Universal ()** 选择出在 DOM 中全部可用的元素。
5	多个元素 E, F, G 选择出所有指定的选择器 E, F 或 G 的所有组合结果。

选择器示例

与上述语法和实例类似，下面的例子会使你对使用其他类型的选择器有一个大致的了解 ——

S.N.	Selector & Description
1	*$('')** 该选择器选出文档中所有的元素。
2	*$("p > ")** 该选择器选择出段落元素的所有子元素。
3	$("#specialID") 该选择器函数获取 id="specialID" 的元素。
4	$(".specialClass") 该选择器获取带有 specialClass 类的所有元素。
5	$("li:not(.myclass)") 选择出与 <li> 匹配并且不带有 class="myclass" 类的所有元素。
6	$("a#specialID.specialClass") 该选择器与 id 为 specialID 的链接匹配并且带有 specialClass 类。
7	$("p a.specialClass") 该选择器与带有 specialClass 类的链接匹配并且该类在 <p> 元素内声明。
8	$("ul li:first") 该选择器获取 <ul> 的第一个 <li> 元素。
9	$("#container p") 选择与 <p> 匹配并且是带有 container id 元素的后代的全部元素。
10	$("li > ul") 选择与 <ul> 匹配并且是与 <li> 匹配的元素的孩子的全部元素。
11	$("strong + em") 选择与 <em> 匹配并且紧跟一个与 <strong> 匹配的兄弟元素的全部元素。
12	$("p ~ ul") 选择与 <ul> 匹配并且后面有一个与 <p> 匹配的兄弟元素的全部元素。
13	$("code, em, strong") 选择所有与 <code> 或 <em> 或 <strong> 匹配的元素。
14	$("p strong, .myclass") 选择与 <strong> 匹配并且是与 <p&gt 匹配的元素的后代，同样所有的元素都要有 myclass 类的全部元素。
15	$(":empty") 选择出所有没有孩子的元素。
16	$("p:empty") 选择出所有与 <p> 匹配并且没有孩子的元素。
17	$("div[p]") 选择出与 <div> 匹配并且包含一个与 <p> 匹配的元素的所有元素。
18	$("p[.myclass]") 选择出与 <p> 匹配并且包含一个带有 myclass 类的元素的所有元素。
19	$("a[@rel]") 选择出与 <a> 匹配并且带有 rel 属性的全部元素。
20	$("input[@name=myname]") 选择出所有与 <input> 匹配并且 name 值恰好等于 myname 的元素。
21	$("input[@name^=myname]") 选择出所有与 <input> 匹配并且 name 值以 myname 开始的元素。
22	$("a[@rel$=self]") 选择出所有与 <a> 匹配并且带有以 self 结尾的 rel 属性值的元素。
23	*$("a[@href=domain.com]")** 选择出所有与 <a> 并且带有一个包含 domain.com 的超链接值的元素。
24	$("li:even") 选择出与 <li> 匹配并且带有一个 even 索引值的全部元素。
25	$("tr:odd") 选择出与 <tr> 匹配并且有 odd 索引值的全部元素。
26	$("li:first") 选择出第一个 <li> 元素。
27	$("li:last") 选择出最后一个 <li> 元素。
28	$("li:visible") 选择出与 <li> 匹配并且可见的全部元素。
29	$("li:hidden") 选择出与 <li> 匹配并且不可见的全部元素。
30	$(":radio") 选择出表单中全部的单选按钮。
31	$(":checked") 选择出表单中全部的复选框。
32	$(":input") 只选择表单元素 (输入，选择，文本区，按钮)。
33	$(":text") 只选择文本元素 (input[type=text])。
34	$("li:eq(2)") 选择第三个 <li> 元素。
35	$("li:eq(4)") 选择第五个 <li> 元素。
36	$("li:lt(2)") 选择第三个之前的与 <li> 元素匹配的所有元素；换句话说，也就说前两个 <li> 元素。
37	$("p:lt(3)") 选择第四个之前的与 <p> 元素匹配的全部元素；换句话说，也就是前三个 <p> 元素。
38	$("li:gt(1)") 选择第二个之后的与 <li> 匹配的全部元素。
39	$("p:gt(2)") 选择第三个之后与 <p> 匹配的全部元素。
40	$("div/p") 选择与 <p> 匹配并且是与 <div> 匹配的元素的孩子的全部元素。
41	$("div//code") 选择与 <code> 匹配并且是与 <div> 匹配的元素的后代的全部元素。
42	$("//p//a") 选择与 <a> 匹配并且是与 <p> 匹配的元素后代的全部元素。
43	$("li:first-child") 选择与 <li> 匹配并且是它们父亲的第一个孩子的全部元素。
44	$("li:last-child") 选择与 <li> 匹配并且是它们父亲的最后一个孩子的全部元素。
45	$(":parent") 选择出是另一个元素的父亲的全部元素，包括文本。
46	$("li:contains(second)") 选择与 <li> 匹配并且包含文本 second 的全部元素。

你可以用任何 HTML/XML 元素以通用的方式使用上述所有选择器。例如，如果选择器 $("li:first") 为 < li> 元素工作，那么 $("p:first") 也会为 < p> 元素工作。