jQuery中的选择器

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

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

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

$(selector).action()

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

工厂函数使用以下三个概念来选择元素：

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

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

HTML

  

    
    
      
    
        // 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();
            });
        });
    

  

  
    This is a heading level 2
  
    This is a paragraph.
    This is another paragraph.
  
    Hide paragraphs
  

  

输出：

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

SR No.	Selector	Example	Description
1.	*	$(“*”)	All elements are selected
2.	#id	$(“#roll_no”)	The element with id=”roll_no” is selected.
3.	.class	$(“.name”)	All elements with class “name” are selected
4.	.class, .class	$(“.name, .surname”)	It will select all elements with the class “name” or “surname”
5.	element	$(“p”)	It will select all p elements.
6.	:first	$(“p:first”)	The first p element is selected.
7.	:last	$(“p:last”)	The last p element is selected.
8.	:first-child	$(“p:first-child”)	All p elements that are the first child of their parent are selected.
9.	:last-child	$(“p:last-child”)	All p elements that are the last child of their parent are selected.
10.	only-child	$(“p:only-child”)	All p elements that are the only child of their parent are selected
11.	:header	$(“:header”)	All header elements get selected.
12.	:hidden	$(“table:hidden”)	All hidden p elements are selected.
13.	:animated	$(“:animated”)	All animated elements are selected.
14.	:root	$(“:root”)	The document’s root element will be selected
15.	:focus	$(“:focus”)	The element that currently has focus is selected.
16.	:contains(text)	$(“:contains(‘Avengers’)”)	All elements which containing the text “Avengers” will be selected.
17.	:has(selector)	$(“div:has(p)”)	All div elements are selected that have a p element.
18.	:empty	$(“:empty”)	The empty elements are selected.
19.	[attribute]	$(“[href]”)	All elements with a href attribute are selected.
20.	[attribute=value]	$(“[href=’default.css’]”)	All elements with a href attribute value equal to “default.css” are selected.
21.	[attribute!=value]	$(“[href!=’default.css’]”)	All elements with a href attribute value not equal to “default.css” are selected.
22.	[attribute^=value]	$(“[title^=’Hardy’]”)	All elements with a title attribute value starting with “Hardy” are selected.
23.	[attribute~=value]	$(“[title~=’Good’]”)	All elements with a title attribute value containing the specific value “Good” are selected.
24.	[attribute*=value]	$(“[title*=’Good’]”)	All elements with a title attribute value containing the word “Good” are selected.
25.	:input	$(“:input”)	All input elements are selected.
26.	:radio	$(“:radio”)	All input elements with type=”radio” are selected.
27.	:password	$(“:password”)	All input elements with type=”password” are selected.
28.	:text	$(“:text”)	All input elements with type=”text” are selected.
29	:checkbox	$(“:checkbox”)	All input elements with type=”checkbox” are selected.
30.	:submit	$(“:submit”)	All input elements with type=”submit” are selected.
31.	:reset	$(“:reset”)	All input elements with type=”reset” are selected.
32.	:file	$(“:file”)	All input elements with type=”file” are selected.
33.	:button	$(“:button”)	All input elements with type=”button” are selected.
34.	:image	$(“:image”)	All input elements with type=”image” are selected.
35.	:disabled	$(“:disabled”)	All disabled input elements are selected.
36.	:enabled	$(“:enabled”)	All enabled input elements are selected.
37.	:checked	$(“:checked”)	All checked input elements are selected.
38.	:selected	$(“:selected”)	All selected input elements are selected.
39.	parent descendant	$(“div p”)	It will select all p elements that are descendants of a div element.
40.	element + next	$(“div + p”)	The p elements that are next to each div elements are selected.
41.	element ~ siblings	$(“div ~ p”)	All p elements that are siblings of a div element are selected.
42.	:eq(index)	$(“ul li:eq(1)”)	It will select the second element in a list (index starts at 0)
43.	:gt(no)	$(“ul li:gt(3)”)	The list elements with an index greater than 3 are selected.
44.	:lt(no)	$(“ul li:lt(2)”)	The list elements with an index less than 2 are selected.
45.	:not(selector)	$(“input:not(:empty)”)	All input elements that are not empty are selected.

选择器及其操作的一些示例：

1. $(“button”).hide()：所有按钮都将被隐藏。
2. $(“#name”).show()：将显示名称 id。
3. $(“p”).append(“Hello”)：文本附加到所有 p 元素。