Selectors in jQuery

Last Updated : 24 Feb, 2022

The selector in jQuery is a function that selects nodes i.e. elements from the Document Object Model. In simple words, the selector is a function that is used to select/manipulate one or more HTML elements using jQuery. It plays a significant role in jQuery. With the help of a selector, we can select a particular HTML element and can perform various operations on it. This means that we can control any element and manipulate it according to our requirements. For selecting these elements, the selector uses a few concepts in order to identify which element is selected. We will be learning them further.

Selectors always begin with a Dollar $ sign. They are also known as factory functions. Now, the HTML elements are selected based on their id, class, attribute, etc.

Syntax: Following is the syntax of how to use a selector in jQuery:

$(selector).action()

Here the $ sign is used to access jQuery.
.action() method is used to perform certain action on the selected element.
selector is the query used to find or access the HTML element.

The factory function makes the use of the following three concepts to select an element :

Tag Name: jQuery will select the tag with the given name. For example, $(‘p’) will select all the paragraphs.
Tag ID: jQuery will select the tag with the given ID. It is essential to note that an id should be unique for every element. For example, $(#gfg) will select the element with id gfg.
Tag Class: jQuery will select the tag with the given class. For example, $(.abc) will select all the classes with the name abc.

Example: If we want to select all the elements in the DOM then we use the (*) sign. Let us see an example of a jQuery selector via a program.

HTML

<!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>

Output:

List of all jQuery selectors: Let us now dive deep into this topic by learning some of the different types of selectors. The following table depicts the various types of selectors:

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.

Some examples of selector with its action:

$(“button”).hide(): All buttons will be hidden.
$(“#name”).show(): The name id will be shown.
$(“p”).append(“Hello”): The text is appended to all p elements.

Suggest improvement

jQuery :only-of-type Selector

Semantic-UI Input Transparent Variation

Share your thoughts in the comments

Selectors in jQuery

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?