jQuery .Class Selector

jQuery | .Class Selector: Learn about the jQuery .Class Selector with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 03, 2022

.Class Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing the jQuery .Class Selector.

The jQuery .Class selector helps to select the element through its class names. The "class name" is an attribute for elements those needs similar properties. It is specified within the ‘class attribute’ of the element. A CSS class can be defined within the style tag, and hence its name can be passed to the elements that you won't be similar in properties. Generally, a class name should not start with a numerical value as it is not accepted by some browsers.

When selecting the DOM element using the class of the element, always make sure to pass the class name along with the (.) prepending it.

.Class Selector Syntax

$('.Class_name');

Once the element is selected, you can access those and perform the actions that you want to perform on them. The example given below shows the selection of all the elements on click by passing the appropriate class name.

jQuery .Class Selector Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
      .color{
      color: darkblue;
      font-size: large;
      font-weight: bold;
      }
      .newClass{
      color: darkmagenta;
      font-family: monospace;
      font-weight: bold;
      }
    </style>
  </head>
  
  <body>
    <h2>jQuery - .Class Selector</h2>
    <p>Click the button to Select the element with class name - 'color'.</p>
    <button>Select with Class</button>
    <hr>
    <div>
      <p class="color" id="one">Welcome to Include Help !</p>
      <p id="two">This is a jQuery Tutorial for Selectors.</p>
      <p class="color" id="three">Thanks for visiting !</p>
    </div>
    <hr>
    <h3></h3>
  
  </body>
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('.color').toggleClass('newClass');
        });
    });
  </script>
</html>

Output:

jQuery #id Selector

jQuery Universal (*) Selector

Comments and Discussions!

Load comments ↻