srcmini本文概述
jQuery选择器用于选择和操作HTML元素。它们是jQuery库的重要组成部分。
使用jQuery选择器, 你可以根据其ID, 类, 属性, 类型以及DOM中的更多内容来查找或选择HTML元素。
简而言之, 你可以说选择器用于使用jQuery选择一个或多个HTML元素, 并且一旦选择了元素, 就可以对它执行各种操作。
所有jQuery选择器都以美元符号和括号开头, 例如$()。它被称为工厂功能。
$()工厂函数
每个jQuery选择器都以$()开头。此标志称为出厂功能。它在选择给定文档中的元素时使用了三个基本构建块。
| S.No. | 选择器 | 描述 |
|---|---|---|
| 1) | 标签名称： | 它表示DOM中可用的标记名称。例如：$（’p’）选择文档中的所有段落’p’。 |
| 2) | Tag ID: | 它代表DOM中具有特定ID的可用标记。例如：$（’＃real-id’）在文档中选择ID为real-id的特定元素。 |
| 3) | Tag Class: | 它表示DOM中特定类可用的标记。例如：$（’real-class’）选择文档中所有具有real-class类的元素。 |
让我们以一个简单的示例来看一下Tag选择器的用法。这将选择所有带有标签名称的元素
并且背景颜色设置为“粉红色”。
档案：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>立即测试
输出：
这是第一段。
这是第二段。
这是第三段。
注意：1.上述所有选择器均可单独使用, 也可与其他选择器组合使用。
注意：2.如果在任何JavaScript库中使用美元符号$都存在冲突, 则可以使用jQuery()函数代替工厂函数$()。工厂函数$()和jQuery函数是相同的。
如何使用选择器
jQuery选择器可以单独使用, 也可以与其他选择器结合使用。使用jQuery时, 每个步骤都需要它们。它们用于从HTML文档中选择所需的确切元素。
| S.No. | 选择器 | 描述 |
|---|---|---|
| 1) | Name: | 它选择与给定元素名称匹配的所有元素。 |
| 2) | #ID: | 它选择一个与给定id匹配的元素。 |
| 3) | 。类： | 它选择与给定类匹配的所有元素。 |
| 4) | Universal(*) | 它选择DOM中所有可用的元素。 |
| 5) | 多个元素A, B, C | 它选择所有指定选择器A, B和C的合并结果。 |
不同的jQuery选择器
| 选择器 | 例 | 描述 |
|---|---|---|
| * | $(“*”) | 用于选择所有元素。 |
| #id | $(“#firstname”) | 它将选择id =“ firstname”的元素 |
| .class | $（“。primary”） | 它将选择所有具有class =“ primary”的元素 |
| 类 | $（“。primary, .secondary”） | 它将选择“ 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元素作为其父元素的第二个p元素 |
| :only-child | $(“p:only-child”) | 它将选择所有p个元素, 它们是其父元素的唯一子元素 |
| :only-of-type | $(“p:only-of-type”) | 它将选择所有p元素, 这些元素是其类型的唯一子项, 其父项 |
| 父母>孩子 | $（“ div> p”） | 它将选择所有div元素的直接子元素 |
| parent descendant | $(“div p”) | 它将选择所有div元素的后代元素 |
| 元素+下一个 | $（“ div + p”） | 它选择每个div元素旁边的p元素 |
| 元素〜兄弟姐妹 | $（“ div〜p”） | 它选择所有div元素的兄弟元素 |
| :eq(index) | $（“ ul li：eq（3）”） | It will select the fourth element in a list (index starts at 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”) | 它将选择所有类型为type =“ text”的输入元素 |
| :password | $(“:password”) | 它将选择所有类型为type =“ password”的输入元素 |
| :radio | $(“:radio”) | 它将选择所有类型为“ radio”的输入元素 |
| :checkbox | $(“:checkbox”) | 它将选择所有类型为“复选框”的输入元素 |
| :submit | $(“:submit”) | 它将选择所有类型为“ submit”的输入元素 |
| :reset | $(“:reset”) | 它将选择所有类型为“ reset”的输入元素 |
| :button | $(“:button”) | 它将选择所有类型为“ button”的输入元素 |
| :image | $(“:image”) | 它将选择所有类型为“ image”的输入元素 |
| :file | $(“:file”) | 它将选择type =“ file”的所有输入元素 |
| :enabled | $(“:enabled”) | 选择所有启用的输入元素 |
| :disabled | $(“:disabled”) | 它将选择所有禁用的输入元素 |
| :selected | $(“:selected”) | 它将选择所有选定的输入元素 |
| :checked | $(“:checked”) | 它将选择所有选中的输入元素 |
评论前必须登录！
注册