jQuery中的选择器

jQuery中的选择器是一个选择节点的函数，即从文档对象模型中选择元素。简单地说，选择器是一个函数，用于选择/操纵一个或多个HTML元素，使用jQuery。它在jQuery中起着重要的作用。在选择器的帮助下，我们可以选择一个特定的HTML元素，并可以对其进行各种操作。这意味着，我们可以控制任何元素，并根据我们的要求来操作它。为了选择这些元素，选择器使用了一些概念，以确定哪个元素被选中。我们将进一步学习它们。

选择器总是以美元$符号开头。它们也被称为工厂函数。现在，HTML元素是根据它们的id、类、属性等来选择的。

语法：以下是如何在jQuery中使用选择器的语法。

$(selector).action()

这里的$符号是用来访问jQuery的。
.action()方法是用来对选定的元素执行某些动作。
选择器是用来寻找或访问HTML元素的查询。

工厂函数利用以下三个概念来选择一个元素。

1.标签名称：jQuery将选择具有给定名称的标签。例如，$('p')将选择所有的段落。
2.标签ID：jQuery将选择具有给定ID的标签。必须注意的是，每个元素的ID应该是唯一的。例如，$(#gfg)将选择id为gfg的元素。
3.标签类别：jQuery将选择具有给定类别的标签。例如，$(.abc)将选择所有名字为abc的类。

例子：如果我们想选择DOM中的所有元素，那么我们使用（*）符号。让我们通过一个程序来看一个jQuery选择器的例子。

<!DOCTYPE html>
<html>
  
<head>
    <!--jquery library included-->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
    <script>
        // jquery code
        // When Document Object Model is ready, 
        // the following code will execute
         $(document).ready(function () { // When button is clicked paragraph should hide$ ("button").click(function () { 
                $("p").hide();
            });
        });
    </script>
</head>
  
<body>
  
    <h2>This is a heading level 2</h2>
  
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  
    <button>Hide paragraphs</button>
  
</body>
  
</html>

输出:

jQuery中的选择器

所有jQuery选择器的列表：现在让我们通过学习一些不同类型的选择器来深入了解这个话题。下面的表格描述了各种类型的选择器。

SR编号	选择	示例	说明
1.	`*`	`$("*")`	所有元素被选中
2.	`#id`	`$("#roll_no")`	id=”roll_no “的元素被选中。
3.	`.class`	`$(".name")`	所有具有 “name “类的元素被选中
4.	`.class, .class`	`$(".name, .surname")`	它将选择所有具有 “name “或 “surname “类的元素
5.	`element`	`$("p")`	它将选择所有p元素。
6.	`:first`	`$("p:first")`	第一个p元素被选中。
7.	`:last`	`$("p:last")`	最后一个p元素被选中。
8.	`:first-child`	`$("p:first-child")`	所有作为其父级的第一个孩子的p元素都被选中。
9.	`:last-child`	`$("p:last-child")`	所有作为其父辈最后一个孩子的p元素被选中。
10.	`only-child`	`$("p:only-child")`	所有作为其父辈唯一子女的p元素都被选中
11.	`:header`	`$(":header")`	所有标题元素都被选中。
12.	`:hidden`	`$("table:hidden")`	所有隐藏的p元素被选中。
13.	`:animated`	`$(":animated")`	所有动画元素都被选中。
14.	`:root`	`$(":root")`	文档的根元素将被选中
15.	`:focus`	`$(":focus")`	当前拥有焦点的元素被选中。
16.	`:contains(text)`	`$(":contains('Avengers')" )`	所有包含 “Avengers “文本的元素都将被选中。
17.	`:has(selector)`	`$("div:has(p)" )`	所有拥有p元素的div元素都被选中。
18.	`:empty`	`$(":empty")`	空的元素被选中。
19.	`[attribute]`	`$("[href]")`	所有带有href属性的元素都被选中。
20.	`[attribute=value]`	`$("[href='default.css']" )`	所有href属性值等于 “default.css “的元素被选中。
21.	`[attributee!=value]`	`$("[href!='default.css']" )`	所有href属性值不等于 “default.css “的元素被选中。
22.	`[attribute^=value]`	`$("[title^='Hardy']" )`	所有标题属性值以 “Hardy “开头的元素都被选中。
23.	`[attribute~=value]`	`$("[title~='Good']" )`	所有标题属性值包含特定值 “Good “的元素都被选中。
24.	`[attribute*=value]`	`$("[title*='Good']" )`	所有标题属性值包含 “Good “的元素都被选中。
25.	`:input`	$(“:input”) `	所有输入元素都被选中。
26.	`:radio`	`$(":radio")`	所有type=”radio “的输入元素被选中。
27.	`:password`	`$(":password")`	所有type=”password “的输入元素被选中。
28.	`:text`	`$(":text")`	所有type=”text “的输入元素被选中。
29.	`:checkbox`	$(“:checkbox”) `	所有type=”checkbox “的输入元素被选中。
30.	`:submit`	`$(":submit")`	所有type=”submit “的输入元素被选中。
31.	`:reset`	`$(":reset")`	所有type=”reset “的输入元素被选中。
32.	`:file`	`$(":file")`	所有type=”file “的输入元素被选中。
33.	`:button`	`$(":button")`	所有type=”button “的输入元素被选中。
34.	`:image`	`$(":image")`	所有type=”image “的输入元素被选中。
35.	`:disabled`	`$(":disabled")`	所有禁用的输入元素都被选中。
36.	`:enabled`	`$(":enabled")`	所有启用的输入元素都被选中。
37.	`:checked`	`$(":checked")`	所有选中的输入元素都被选中。
38.	`:selected`	`$(":selected")`	所有选中的输入元素都被选中。
39.	`parent descendant`	`$(“div p”)`	它将选择所有作为div元素后裔的p元素。
40.	`element + next`	`$("div + p")`	每个div元素旁边的p元素被选中。
41.	`element ~ siblings`	`$("div ~ p")`	所有作为div元素的兄弟姐妹的p元素都被选中。
42.	`:eq(index)`	`$("ul li:eq(1)" )`	它将选择一个列表中的第二个元素（索引从0开始）
43.	`:gt(no)`	`$("ul li:gt(3)" )`	索引大于3的列表元素被选中。
44.	`:lt(no)`	`$("ul li:lt(2)" )`	索引小于2的列表元素被选中。
45.	`:not(selector)`	`$("input:not(:empty)" )`	所有非空的输入元素都被选中。