选择器(Selectors)
jQuery库利用层叠样式表(CSS)选择器的强大功能,让我们可以快速轻松地访问文档对象模型(DOM)中的元素或元素组。
jQuery Selector是一个函数,它使用表达式根据给定的条件从DOM中找出匹配的元素。 简单地说,选择器用于使用jQuery选择一个或多个HTML元素。 一旦选择了元素,我们就可以对所选元素执行各种操作。
The $() factory function
jQuery选择器以美元符号和括号 - $()开头。 工厂函数$()在选择给定文档中的元素时使用以下三个构建块 -
Sr.No. | 选择器和描述 |
---|---|
1 | Tag Name 表示DOM中可用的标记名称。 例如, $('p')选择文档中的所有段落“p”。 |
2 | Tag ID 表示DOM中给定ID可用的标记。 例如$('#some-id')选择文档中具有some-id ID的单个元素。 |
3 | Tag Class 表示DOM中给定类可用的标记。 例如$('.some-class')选择文档中具有某类类的所有元素。 |
以上所有项目可以单独使用,也可以与其他选择器结合使用。 除了一些调整之外,所有jQuery选择器都基于相同的原理。
NOTE - 工厂函数$()是jQuery()函数的同义词。 因此,如果你使用任何其他JavaScript库,其中$ sign与其他东西冲突,那么你可以用jQuery名称替换$ sign,你可以使用函数jQuery()而不是$() 。
例子 (Example)
以下是一个使用标签选择器的简单示例。 这将选择标签名为p所有元素。
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://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文档中获取您想要的确切元素。
下表列出了几个基本选择器,并用示例解释它们。
Sr.No. | 选择器和描述 |
---|---|
1 | Name 选择与给定元素Name匹配的所有元素。 |
2 | #ID 选择与给定ID匹配的单个元素。 |
3 | .Class 选择与给定Class匹配的所有元素。 |
4 | 通用(*) 选择DOM中可用的所有元素。 |
5 | 多个元素E,F,G 选择所有指定选择器E, F或G的组合结果。 |
选择器示例
与上面的语法和示例类似,以下示例将为您提供使用不同类型的其他有用选择器的理解 -
Sr.No. | 选择器和描述 |
---|---|
1 | $('*') 此选择器选择文档中的所有元素。 |
2 | $("p 》 *") 此选择器选择作为段落元素的子元素的所有元素。 |
3 | $("#specialID") 此选择器函数获取id =“specialID”的元素。 |
4 | $(".specialClass") 此选择器获取具有specialClass类的所有元素。 |
5 | $("li:not(.myclass)") 选择 li 匹配的所有没有class =“myclass”的元素。 |
6 | $("a#specialID.specialClass") 此选择器匹配id为specialID和specialClass类的specialClass 。 |
7 | $("p a.specialClass") 此选择器将链接与“p”元素中声明的specialClass类匹配。 |
8 | $("ul li:first") 此选择器仅获取ul的第一个li元素。 |
9 | $("#container p") 选择与p匹配的所有元素,这些元素是id为container的元素的后代。 |
10 | $("li 》 ul") 选择ul匹配的所有元素,它们是li匹配的元素的子元素 |
11 | $("strong + em") 选择匹配的所有元素,这些元素紧跟在与匹配的同级元素之后。 |
12 | $("p ~ ul") 选择跟随p匹配的同级元素的ul匹配的所有元素。 |
13 | $("code, em, strong") 选择与code或em或strong匹配的所有元素。 |
14 | $("p strong, .myclass") 选择匹配的所有元素,它们是 匹配的元素的后代,以及具有myclass类的所有元素。 |
15 | $(":empty") 选择所有没有子元素的元素。 |
16 | $("p:empty") 选择p匹配的所有没有子项的元素。 |
17 | $("div[p]") 选择div匹配的所有元素,其中包含与p匹配的元素。 |
18 | $("p[.myclass]") 选择与p匹配的所有元素,其中包含具有myclass类的元素。 |
19 | $("a[@rel]") 选择具有rel属性的匹配的所有元素。 |
20 | $("input[@name = myname]") 选择《input》匹配的所有元素,其名称值完全等于myname. |
21 | $("input[@name^=myname]") 选择《input》匹配的所有元素,其名称值以myname开头。 |
22 | $("a[@rel$=self]") |
23 | $("a[@href*=domain.com]") |
24 | $("li:even") 选择li匹配的所有具有偶数索引值的元素。 |
25 | $("tr:odd") 选择tr匹配的所有索引值为奇数的元素。 |
26 | $("li:first") 选择第一个li元素。 |
27 | $("li:last") 选择最后一个li元素。 |
28 | $("li:visible") 选择li匹配的所有可见元素。 |
29 | $("li:hidden") 选择隐藏的li匹配的所有元素。 |
30 | $(":radio") 选择表单中的所有单选按钮。 |
31 | $(":checked") 选择表单中的所有复选框。 |
32 | $(":input") 仅选择表单元素(输入,选择,文本区域,按钮)。 |
33 | $(":text") 仅选择文本元素(输入[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") 选择p匹配的所有元素,这些元素是其父级的最后一个子级。 |
45 | $(":parent") 选择作为另一个元素的父元素的所有元素,包括文本。 |
46 | $("li:contains(second)") 选择li匹配的所有包含文本秒的元素。 |
您可以以通用方式将所有上述选择器与任何HTML/XML元素一起使用。 例如,如果selector $("li:first")适用于“li”元素,那么$("p:first")也适用于“p”元素。