jQuery - Selectors



The most important functionality of jQuery is provided by it's Selectors. This tutorial will explain jQuery Selectors with simple examples covering all the three standard selectors.

jQuery 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

  • Element ID

  • Element Class

  • Element attribute name

  • Element attribute value

  • 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 to select the records.

jQuery Selector Syntax

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:

Selector Name Description
The element Selector

Represents an HTML element name available in the DOM. For example $('p') selects all paragraphs <p> in the document.

The #id Selector

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.

The .class Selector

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 element Selector

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

Examples

Following is an example to select all the <p> elements from an HTML document and then change the background color of those paragraphs. 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 run button to verify the result.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(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 #id Selector

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 DOM elements. If your elements will have similar ids then it will not produce correct result.

Examples

Following is an example to select the <p> element whose id is foo and change the background color of those paragraphs.. You can also change the code to use different element id attribute as selector and then click the icon run button to verify the result.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("#foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery #id 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 .class Selector

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.

Examples

Following is an example to select all the 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 run button to verify the result.

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $(".foo").css("background-color", "yellow");
   });
</script>
</head>
<body>
   <h1>jQuery .class 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.

Advertisements