Define Selectors in jQuery and What are the types of selectors?

Last Updated : 19 Dec, 2022

Selectors in jQuery: Selectors in jQuery are functions that primarily focus on selecting particular HTML elements and modifying them as per the action they need to perform. These selectors select particular HTML elements as per their name, element type, class, id, attributes or values of attributes, and much more.

In other words, we can say that selectors are used to picking HTML elements and performing some particular action on them, and this picking of elements is based on some factors like id, class, name, element name, attributes, etc. Selectors play an important part in the selection of one or more elements in jQuery.

These selectors are very similar to the CSS selectors, but jQuery has additional customized selectors.

We can compare these selectors to select statements in SQL that select records from the database based on some conditions.

Syntax of selecting HTML elements using jQuery selectors:

$(document).ready(function(){
    $(selector).action()
});

In jQuery, we select the selector with a dollar sign($) and put the selectors inside the braces(). $() is termed as the factory function.
The action() method is the particular action that we want to be performed by the selected HTML element.

find or select elements in jQuery:

Selector	Description
The element selector	Element selector describes the name of the HTML element available in DOM. For example: $(‘li’) will fetch all the list items present inside the entire document.
The id selector	Element selector describes the HTML element that is available with the particular id in DOM. For example: $(‘#id1’) will fetch all the elements that have the id as ‘id1’ in the document
The class selector	Element selector describes the HTML element that is available with the particular class in DOM. For example: $(‘.class1’) will fetch all the elements that have the class defined as ‘class1’ in the document

We can make use of these selectors in combination with other selectors or they can also be used on their own. All these selectors follow a similar principle in jQuery with some modifications.

Types of selectors in jQuery:

1. The element selector

The element selector in jQuery fetches the HTML elements based on their names.

Syntax:

$(document).ready(function(){
    $(htmlElementName).action()
});

Example: The following example shows a selection of all the paragraph tags <p> that are present inside an HTML document. We will be changing the background color of all the <p> elements in the document to green.

HTML

<!DOCTYPE html>   
<html>   
<head>   
    <title>Element Selector jQuery Example</title>   
    <script type="text/javascript" src= 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
    </script>   
    <script>   
        $(document).ready(function() {   
            $("p").css("background-color", "#006600");   
        });   
    </script>   
</head>   
<body>  
    <h1 style="color:green">GeeksforGeeks</h1>  
    <p>This is a paragraph tag.</p>   
    <p id="id1"> 
        This is a paragraph tag with id selector. 
    </p>   
    <p class="class1"> 
        This is a paragraph tag with class selector. 
    </p>   
</body>   
</html>   

Output:

2. The Id selector

The element selector in jQuery fetches the HTML elements based on their defined id.

Syntax:

$(document).ready(function(){
   $("#id_of_element").action()
});

Example: The example that shows the selection of those paragraph tags that are having their defined id as ‘id1 ‘ in an HTML document. We will be changing the background color of all the <p> elements having ‘id1’ as their defined id in the document to “green”.

HTML

<!DOCTYPE html>   
<html>   
<head>   
    <title>Id Selector jQuery Example</title>   
    <script type="text/javascript" src= 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
    </script>   
    <script>   
         $(document).ready(function() {   
            $('#id1').css("background-color", "#006600");   
         });   
   </script>   
</head>   
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <p>This is a paragraph tag.</p>   
    <p id="id1"> 
        This is a paragraph tag with id selector. 
    </p>   
    <p class="class1"> 
        This is a paragraph tag with class selector. 
    </p>   
</body>   
</html>

Output:

3. The Class selector

The element selector in jQuery fetches the HTML elements based on their defined class.

Syntax:

$(document).ready(function(){
     $(".class_of_element").action()
});

Example: The following example shows the selection of those paragraph tags that is having their defined class as ‘class1 ‘ in the HTML document. We will be changing the background color of the <p> elements having ‘class1’ as their defined class in the document to “green”.

HTML

<!DOCTYPE html>   
<html>   
<head>   
    <title>Class Selector jQuery Example</title>   
    <script type="text/javascript" src= 
"http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
    </script>   
    <script>   
        $(document).ready(function() {   
            $('.class1').css("background-color", "#006600");   
        });   
    </script>   
</head>   
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>  
    <p>This is a paragraph tag.</p>   
    <p id="id1"> 
        This is a paragraph tag with id selector. 
    </p>   
    <p class="class1"> 
        This is a paragraph tag with class selector. 
    </p>   
</body>   
</html>