jQuery 选择器

jQuery 选择器用于选取和操作 HTML 元素。它们是 jQuery 库的非常重要的部分。

使用 jQuery 选择器，您可以通过元素的 id、类、属性、类型等在 DOM 中找到或选择 HTML 元素。

简单来说，可以说选择器用于使用 jQuery 选择一个或多个 HTML 元素，一旦选择了元素，您就可以对其执行各种操作。

所有的 jQuery 选择器都以一个美元符号和括号开头，例如 $()。它被称为工厂函数。

`$()`工厂函数

每个 jQuery 选择器都以 $() 这个符号开头。这个符号被称为工厂函数。它在选择给定文档中的元素时使用三个基本构建块。

编号	选择器	描述
1)	标签名:	表示DOM中可用的标签名。例如：$(‘p’)选择文档中所有的段落’p’.
2)	标签ID:	表示在DOM中具有特定ID的标签。例如：$(‘#real-id’)选择文档中具有ID为real-id的特定元素。
3)	标签类:	表示DOM中具有特定类的标签。例如：$(‘real-class’)选择文档中具有real-class类的所有元素。

让我们通过一个简单的例子来看一下标签选择器的使用。这会选择所有标签名称是

且背景颜色设置为 “粉色” 的元素。

文件: firstjquery.html

<!DOCTYPE html>  
<html>  
<head>  
 <title>First 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", "pink");  
 });  
 </script>  
 </head>  
<body>  
<p>This is first paragraph.</p>  
<p>This is second paragraph.</p>  
<p>This is third paragraph.</p>  
</body>  
</html>

输出：

jQuery 选择器

注意：1.上述讨论的所有选择器都可以单独使用或与其他选择器结合使用。

注意：2.如果您对JavaScript库中使用美元符号 $出现冲突，可以使用jQuery()函数代替工厂函数$ ()。工厂函数$()和jQuery函数是相同的。

如何使用选择器

jQuery选择器可以单独使用或与其他选择器结合使用。在使用jQuery时，它们在每个步骤都是必需的。它们用于从HTML文档中选择您想要的确切元素。

序号	选择器	描述
1)	Name:	它选择与给定元素名称匹配的所有元素。
2)	#ID:	它选择与给定ID匹配的单个元素。
3)	.Class:	它选择所有与给定类匹配的元素。
4)	Universal(*)	它选择DOM中的所有元素。
5)	Multiple Elements A,B,C	它选择所有指定选择器A，B和C的组合结果。

不同的jQuery选择器

Selector	Example	Description
`*`	`$("*")`	它用于选择所有元素。
`# id`	`$("#firstname")`	它将选择id为”firstname”的元素
`.class`	`$(".primary")`	它将选择所有class为”primary”的元素
`class,.class`	`$(".primary,.secondary")`	它将选择所有class为”primary”或”class”为”secondary”的元素
`element`	`$("p")`	它将选择所有p元素
`el1,el2,el3`	`$("h1,div,p")`	它将选择所有h1、div和p元素
`:first`	`$("p:first")`	这将选择第一个p元素
`:last`	`$("p:last")`	这将选择最后一个 p 元素
`:even`	`$("tr:even")`	这将选择所有偶数位置的 tr 元素
`:odd`	`$("tr:odd")`	这将选择所有奇数位置的 tr 元素
`:first-child`	`$("p:first-child")`	它将选择所有 p 元素，它们是其父元素的第一个子元素
`:first-of-type`	`$("p:first-of-type")`	它将选择所有 p 元素，它们是其父元素中第一个 p 元素
`:last-child`	`$("p:last-child")`	它将选择所有 p 元素，它们是其父元素的最后一个子元素
`:last-of-type`	`$("p:last-of-type")`	它将选择所有是其父元素最后一个p元素的p元素
`:nth-child(n)`	`$("p:nth-child(2)")`	这将选择所有是其父元素的第二个子元素的p元素
`:nth-last-child(n)`	`$("p:nth-last-child(2)")`	这将选择所有是其父元素的倒数第二个子元素的p元素
`:nth-of-type(n)`	`$("p:nth-of-type(2)")`	它将选择所有是其父元素的第二个p元素的p元素
`:nth-last-of-type(n)`	$(“p:nth-last-of-type(2)”)	这将选择所有的p元素，它们是其父元素的第二个p元素，从最后一个子元素开始计数
`:only-child`	`$("p:only-child")`	它将选择所有的p元素，它们是其父元素的唯一子元素
`:only-of-type`	`$("p:only-of-type")`	它将选择所有的p元素，它们是其父元素的唯一类型的子元素
`parent > child`	`$("div > p")`	它将选择所有的p元素，它们是div元素的直接子元素
`parent descendant`	`$("div p")`	它将选择所有的p元素，它们是div元素的后代元素
`element + next`	`$("div + p")`	选择紧接着每个div元素的p元素
`element ~ siblings`	`$("div ~ p")`	选择所有div元素的兄弟p元素
`:eq(index)`	`$("ul li:eq(3)")`	选择列表中的第四个元素（索引从0开始）
`:gt(no)`	`$("ul li:gt(3)")`	选择索引大于3的列表元素
`:lt(no)`	`$("ul li:lt(3)")`	选择索引小于3的列表元素
`:not(selector)`	`$("input:not(:empty)")`	选择所有非空的输入元素
`:header`	`$(":header")`	选择所有标题元素h1，h2 …
`:animated`	`$(":animated")`	选择所有正在动画的元素
`:focus`	`$(":focus")`	选择当前具有焦点的元素
`:contains(text)`	`$(":contains('Hello')")`	选择包含文本“Hello”的所有元素
`:has(selector)`	`$("div:has(p)")`	选择拥有p元素的所有div元素
`:empty`	`$(":empty")`	选择所有空的元素
`:parent`	`$(":parent")`	选取所有是其他元素的父元素的元素
`:hidden`	`$("p:hidden")`	选取所有隐藏的 p 元素
`:visible`	`$("table:visible")`	选取所有可见的 table 元素
`:root`	`$(":root")`	选取文档的根元素
`:lang(language)`	`$("p:lang(de)")`	选取所有具有以 “de” 开头的 lang 属性值的 p 元素
`[attribute]`	`$("[href]")`	选取所有具有 href 属性的元素
`[attribute^=value]`	`$("[href^='https://']")`	它将选择所有href属性值以“https://”开头的元素。
`[attribute*=value]`	`$("[href*='example']")`	它将选择所有href属性值包含子字符串”example”的元素。
`[attribute~=value]`	`$("[class~='active']")`	它将选择class属性值包含单词”active”的所有元素。
`[attribute]`	`$("[target]")`	它将选择具有target属性的所有元素
`$(":password")`	`$(":password")`	它将选择所有type=”password”的输入元素
`:radio`	`$(":radio")`	它将选择所有type=”radio”的输入元素
`:checkbox`	`$(":checkbox")`	它将选择所有type=”checkbox”的输入元素
`:submit`	`$(":submit")`	它将选择所有type=”submit”的输入元素
`:reset`	`$(":reset")`	它将选择所有type=”reset”的输入元素
`:button`	`$(":button")`	它将选择所有type=”button”的输入元素
`:image`	`$(":image")`	它将选择所有具有 type=”image” 的输入元素
`:file`	`$(":file")`	它将选择所有具有 type=”file” 的输入元素
`:enabled`	`$(":enabled")`	选择所有已启用的输入元素
`:disabled`	`$(":disabled")`	它将选择所有已禁用的输入元素
`:selected`	`$(":selected")`	它将选择所有已选中的输入元素
`:checked`	`$(":checked")`	它将选择所有已选中的输入元素