JQuery 选择器
JQuery 选择器
JQuery选择器用于选择和操作HTML元素。它们是JQuery库的重要组成部分。
使用JQuery选择器，您可以根据其ID，类，属性，类型以及来自DOM的更多内容来查找或选择HTML元素。
简单来说，您可以说选择器用于使用JQuery选择一个或多个HTML元素，一旦选择了元素，就可以对其执行各种操作。
所有JQuery选择器都以美元符号和括号开头，例如$()。它被称为工厂功能。
$()用法
每个JQuery选择器都以该符号$()开头。此标志称为工厂功能。它在选择给定文档中的元素时使用了三个基本构建块。
| 选择器 | 说明 |
| 标签名称: | 它表示DOM中可用的标记名。 例如: $('p')选择文档中的所有段落'p'。 |
| 标签ID: | 它表示DOM中具有特定ID的标记。例如，$('#real-id')选择文档中具有real-id的特定元素。 |
| 标记类: | 它表示DOM中特定类可用的标记。 例如: $('real-class')选择文档中所有具有real-class类的元素。 |
让我们以一个简单的示例来看一下Tag选择器的用法。这将选择标签名称为
的所有元素，并且背景色设置为"粉红色"。
文件: firstJQuery.html
<!DOCTYPE html>
<html>
<head>
<title>First JQuery Example</title>
<script type="text/javascript" src="/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>这是第一段。</p>
<p>这是第二段。</p>
<p>这是第三段。</p>
</body>
</html>
输出:
这是第一段。
这是第二段。
这是第三段。
注意: 1、上面讨论的所有选择器都可以单独使用，也可以与其他选择器组合使用。
注意: 2、如果在任何JavaScript库中使用美元符号$都存在冲突，则可以使用JQuery()函数代替工厂函数$()。工厂函数$()和JQuery函数是相同的。
如何使用选择器
JQuery选择器可以单独使用，也可以与其他选择器组合使用。使用JQuery时，每个步骤都需要它们。它们用于从HTML文档中选择所需的确切元素。
| 选择器 | 说明 |
| 名称: | 它将选择与给定元素名称匹配的所有元素。 |
| #ID: | 它选择一个与给定id匹配的元素。 |
| .Class: | 它将选择与给定类匹配的所有元素。 |
| Universal(*) | 它选择DOM中所有可用的元素。 |
| 多个元素A，B，C | 它选择所有指定选择器A，B和C的组合结果。 |
不同的JQuery选择器
| 选择器 | 示例 | 说明 |
| * | $("*") | 它用于选择所有元素。 |
| #id | $("#firstname") | 它将选择id ="firstname"的元素 |
| .class | $(".primary") | 它将选择所有具有class ="primary"的元素 |
| class，.class | $(".primary，.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个元素，它们是其父级的第2个p元素，从最后一个孩子开始计数 |
| :only-child | $("p:only-child") | 它将选择所有p个元素，它们是其父元素的唯一子元素 |
| :only-of-type | $("p:only-of-type") | 它将选择所有p个元素，这些元素是其父类型的唯一子元素 |
| parent > child | $("div>p") | 它将选择所有div元素的直接子元素p |
| 父子元素 | $("div p") | 它将选择所有div元素后代的p个元素 |
| element + next | $("div + p") | 它选择每个div元素旁边的p元素 |
| element〜siblings | $("div〜p") | 它选择所有div元素的兄弟元素 |
| :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") | 选择所有可见表 |
| :root | $(":root") | 它将选择文档的根元素 |
| :lang(language) | $("p:lang(de)") | 选择所有以" de"开头的lang属性值的p个元素 |
| [attribute] | $("[href]") | 选择所有具有href属性的元素 |
| [attribute = value] | $("[href ='default.htm']") | 选择所有href属性值等于" default.htm"的元素 |
| [attribute!= value] | $("[href!='default.htm']") | 它将选择所有href属性值不等于" default.htm"的元素 |
| [attribute $= value] | $("[href $ ='。jpg']") | 它将选择所有href属性值以" .jpg"结尾的元素 |
| [attribute |= value] | $("[title |='Tomorrow']") | 选择所有标题属性值等于" Tomorrow"或以" Tomorrow"开头且后跟连字符的元素 |
| [attribute ^= value] | $("[title ^='Tom']") | 选择所有标题属性值为"Tom"的元素 |
| [attribute〜= value] | $("[title〜='hello']") | 选择所有标题属性值包含特定单词" hello"的元素 |
| [attribute* =value] | $("[title * ='hello']") | 选择所有标题属性值包含单词" hello"的元素 |
| :input | $(":input") | 它将选择所有输入元素 |
| :text | $(":text") | 它将选择所有类型为"文本"的输入元素 |
| :password | $(":password") | 它将选择所有类型为="password"的输入元素 |
| :radio | $(":radio") | 它将选择所有类型为" radio"的输入元素 |
| :checkbox | $(":checkbox") | 它将选择所有类型为"复选框"的输入元素 |
| :submit | $(":submit") | 它将选择所有类型为" submit"的输入元素 |
| :reset | $(":reset") | 它将选择所有类型为" reset"的输入元素 |
| :button | $(":button") | 它将选择所有类型为" button"的输入元素 |
| :image | $(":image") | 它将选择所有类型为" image"的输入元素 |
| :file | $(":file") | 它将选择所有类型为"文件"的输入元素 |
| :enabled | $(":enabled") | 选择所有启用的输入元素 |
| :disabled | $(":disabled") | 它将选择所有禁用的输入元素 |
| :selected | $(":selected") | 它将选择所有选定的输入元素 |
| :checked | $(":checked") | 它将选择所有选中的输入元素 |