jQuery - Selectors

The most important functionality of jQuery is provided by its Selectors. This tutorial will explain jQuery Selectors with simple examples covering all the three standard selectors.
jQuery Selectors are used to select HTML element(s) from an HTML document. Consider an HTML document is given and you need to select all the <div> from this document. This is where jQuery Selectors will help.
jQuery Selectors can find HTML elements (ie. Select HTML elements) based on the following:
HTML element Name
HTML element Name
Element ID
Element ID
Element Class
Element Class
Element attribute name
Element attribute name
Element attribute value
Element attribute value
Many more criteria
Many more criteria
The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM). 
jQuery Selectors works in very similar way on an HTML document like an SQL select statement works on a Database.
Following is the jQuery Selector Syntax for selecting HTML elements:
$(document).ready(function(){
    $(selector)
});

A jQuery selector starts with a dollar sign $ and then we put a selector inside the braces (). Here $() is called factory function, which makes use of following three building blocks while selecting elements in a given document:
Represents an HTML element name available in the DOM. For example $('p') selects all paragraphs <p> in the document.
Represents a HTML element available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has some-id as element Id.
Represents a HTML elements available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.
All the above selectors can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.
The jQuery element selector selects HTML element(s) based on the element name. Following is a simple syntax of an element selector:
$(document).ready(function(){
    $("Html Element Name")
});

Please note while using element name as jQuery Selector, we are not giving angle braces alongwith the element. For example, we are giving only plain p instead of <p>.
Following is an example to select all the <p> elements from an HTML document and then change the background color of those elements. You will not see any <p> element in the output generated by this example. You can also change the code to use different element names as selector and then click the icon  to verify the result.
<html>
   <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <h1>jQuery Element Selector</h1>
      <p>This is p tag</p>
      <span>This is span tag</span>
      <div>This is div tag</div>
   </body>
</html>

The jQuery #id selector selects an HTML element based on the element id attribute. Following is a simple syntax of a #id selector:
$(document).ready(function(){
    $("#id of the element")
});

To use jQuery #id selector, you need to make sure that id attribute should be uniquely assigned to all the elements. If you elements will have similar id then it will not produce correct result.
Following is an example to select the <p> element whose id is foo and change the background color of those elements. You can also change the code to use different element id attribute as selector and then click the icon  to verify the result.
<html>
   <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
             $("#foo").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <h1>jQuery Element Selector</h1>
      <p id="foo">This is foo p tag</p>
      <span id="bar">This is bar span tag</span>
      <div id="bill">This is bill div tag</div>
   </body>
</html>

The jQuery .class selector selects HTML element(s) based on the element class attribute. Following is a simple syntax of a .class selector:
$(document).ready(function(){
    $(".class of the element")
});

Because a class can be assigned to multiple HTML elements with in an HTML document, so it is very much possible to find out multiple elements with a single .class selector statement. 
Following is an example to select all the <p> elements whose class is foo and change the background color of those elements. You can also change the code to use different element class name as selector and then click the icon  to verify the result.
<html>
   <head>
      <title>The jQuery Example</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
             $(".foo").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <h1>jQuery Element Selector</h1>
      <p class="foo">This is foo p tag</p>
      <p class="foo">This is one more foo p tag</p>
      <span class="bar">This is bar span tag</span>
      <div class="bill">This is bill div tag</div>
   </body>
</html>

So far we have covered only three standard jQuery Selectors. For a complete detail of all these jQuery selectors, you can go to through jQuery Selectors Reference. 


    27 Lectures 
     1 hours 

 Mahesh Kumar

    27 Lectures 
     1.5 hours 

 Pratik Singh

    72 Lectures 
     4.5 hours 

 Frahaan Hussain

    60 Lectures 
     9 hours 

 Eduonix Learning Solutions

    17 Lectures 
     2 hours 

 Sandip Bhattacharya

    12 Lectures 
     53 mins

 Laurence Svekis
 Print
 Add Notes
 Bookmark this page