JQuery 选择器
2019-09-09
5
0
jQuery库利用 Cascading Style Sheets (级联样式表CSS)选择器的功能,使我们可以快速轻松地访问文档对象模型(DOM)中的元素或元素组。
jQuery Selector选择器是一个函数,它使用表达式根据给定的条件从DOM中找出匹配的元素。简单地说,选择器用于使用jQuery选择一个或多个HTML元素。一旦选择了元素,我们就可以对该选定的元素执行各种操作。
$() factory function
jQuery selector以美元符号和括号开头$()
,在选择给定文档中的元素时利用了以下三个构造块:
No. | Selector | 描述 |
---|---|---|
1 | Tag Name | 表示DOM中可用的标签名称。 如$('p') 选择文档中的所有段落<p> 。 |
2 | Tag ID | 表示DOM中具有给定ID的可用标签。如, $('#some-id') 选择ID为some-id的文档中的单个元素。 |
3 | Tag Class | 表示DOM中给定类可用的标签。如, $('.some-class') 选择文档中所有some-class类别的元素。 |
注意
$()是 jQuery()函数的同义词。因此,如果您正在使用 $符号与其他符号冲突的其他JavaScript库,则可以将 $符号替换为 jQuery
名称,您可以使用函数 jQuery()代替 $()。
以下是一个使用标签选择器的简单示例。这将选择标签名称为 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>
这将产生以下输出:
This is a paragraph.
This is second paragraph.
This is third paragraph.
使用选择器
selector非常有用,在使用jQuery的每个步骤中都将需要使用选择器。它们从HTML文档中获得所需的确切元素。
下表列出了一些基本的选择器,并通过示例进行了说明。
Sr.No. | Selector | 描述 |
---|---|---|
1 | Name |
选择与给定元素 Name 匹配的所有元素。 |
2 | #ID |
选择与给定的 ID 匹配的单个元素。 |
3 | .Class |
选择与给定的 Class 匹配的所有元素。 |
4 | Universal(*) |
选择DOM中所有可用的元素。 |
5 | Multiple Elements E, F, G |
选择所有指定selector E,F 或 G 的组合输出。 |
选择器示例
与上述语法和示例类似,以下示例将使您了解使用其他类型的其他有用选择器的方式-
No. | Selector | 描述 |
---|---|---|
1 | $('*') |
匹配所有元素。 |
2 | $("p > *") |
匹配P元素里所有的子元素。 |
3 | $("#specialID") |
匹配id等于specialID的元素。 |
4 | $(".specialClass") |
匹配 class等于specialClass的元素 |
5 | $("li:not(.myclass)") |
匹配<li> 中不包含 class 等于 myclass的元素。 |
6 | $("a#specialID.specialClass") |
匹配后面这个链接<a id="specialID" class='specialClass'></a> 。 |
7 | $("p a.specialClass") |
匹配<p> 元素里面所有包含class='specialClass' 的a元素。如:<p><a class='specialClass'></a></p> |
8 | $("ul li:first") |
匹配<ul> 的第一个<li> 元素。 |
9 | $("#container p") |
匹配Id=’container’里面所有<p> 元素。 |
10 | $("li>ul") |
匹配<li> 元素里面的ul 元素 |
11 | $("strong + em") |
匹配<strong> 后面紧跟着<em> 的元素。 |
12 | $("p〜ul") |
匹配<p> 同级元素中包含<ul> 的元素。 |
13 | $("code,em,strong") |
匹配<code> 或<em> 或<strong> 元素。 |
14 | $("p strong.myclass") |
eg:<p><strong class='myclass'></strong></p> |
15 | $(":empty") |
匹配所有没有子元素的元素。 |
16 | $("p:empty") |
匹配<p> 没有子元素的元素。eg:<p></p> |
17 | $("div[p]") |
匹配<div> 里面包含<p> 的元素。eg:<div><span>A</span><p>B</p></div> |
18 | $("p [.myclass]") |
匹配<p> 里面包含 class=’myclass’的元素。 |
19 | $("a [@rel]") |
匹配<a> 里面包含 ref 属性的元素。 |
20 | $("input [@name=myname]") |
匹配<input> 里面包含name=’myname’的元素。 |
21 | $("input [@name ^=myname]") |
匹配<input> 里面包含name=’myname’开头的元素。 |
22 | $("a[@rel $=self]") |
匹配<a> 里面属性值以self结尾的元素。 |
23 | $("a [@href *=domain.com]") |
匹配<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") |
匹配input元素 |
33 | $(":text") |
匹配文本元素(input [type=text])。 |
34 | $("li:eq(2)") |
匹配第三个<li> 元素。 |
35 | $("li:eq(4)") |
匹配第五个<li> 元素。 |
36 | $("li:lt(2)") |
匹配第三个元素之前与<li> 元素匹配的所有元素; |
37 | $("p:lt(3)") |
匹配所有在第四个元素之前与<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") |
匹配最后一个li的子元素 |
45 | $(":parent") |
匹配作为另一个元素父元素的所有元素,包括文本。 |
46 | $("li:contains(second)") |
匹配与<li> 匹配的所有包含second的元素。 |