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") |
它将选择所有选中的输入元素 |
