Class Selector in jQuery With Code Example

Class Selector in jQuery

To choose HTML components according to their associated CSS class, jQuery’s.class selector is a basic technique. For altering groups of elements with identical styling or behaviour, it is effective since it lets you target one or more elements that belong to the same class. In addition to certain proprietary ones, jQuery’s selectors are based on CSS selectors.

Syntax:

 $('.classid')

Parentheses () are used after the dollar sign ($): The jQuery factory function, sometimes known as jQuery(), is this. It is employed for defining or accessing jQuery.
a period that comes right before the class name. A class selector is distinguished from an ID selector (which employs #) or a tag name selector by this period.
The classid is the real name of the CSS class that you wish to choose. It needs to be surrounded by single or double quote marks.

To be even more exact, you may combine the class selector with a tag name. For instance, $(‘p.small’) chooses all paragraphs that have the class tiny. You can use $(‘.big.small’) to pick components that have all of the required classes by combining several classes.

How it Works

When utilising a selector for.class:

Querying the DOM: This selection expression is used by jQuery to “query” or “find” HTML components within the Document Object Model (DOM). As a network of objects, the DOM represents HTML and acts as the interface between JavaScript and a web page.

Implicit Iteration: Automatically and implicitly, jQuery methods applied to the generated jQuery object will iterate through all selected items after elements matching the class selector have been located. To apply modifications to each element, you can accomplish this without using explicit loops, such as for loops in ordinary JavaScript. Code is greatly simplified and becomes less prone to errors as a result.

Cross-Browser Compatibility: jQuery replaces missing DOM functions and manages browser-dependent peculiarities to guarantee that class selection and related operations execute consistently across different browsers.

An element can have multiple classes (e.g., <p class=”first class another class”>).The class is applicable to many HTML elements.

Code Example

Let’s demonstrate how to change items on a web page using the.class selector. A common DHTML effect, this example shows how to use jQuery to dynamically add and delete a CSS class.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>The second jQuery example</title>
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
  
  <style>
    /* Style for the mClass to show changes */
    .mClass {
      background-color: lightblue;
      color: darkblue;
      font-weight: bold;
      padding: 10px;
      border: 2px solid blue;
    }
    #c {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#a").click(function(){
        $("#c").addClass("mClass");
      });
      $("#b").click(function(){
        $("#c").removeClass("mClass");
      });
    });
  </script>
</head>
<body>
  <h1>Editing Style Sheets with jQuery</h1>
  <button id="a">Add CSS class</button>
  <button id="b">Remove CSS class</button>
  <hr/>
  <div id="c">
    <p>This is a div container with an ID "c". Its style will change.</p>
  </div>
</body>
</html>

Output:

Editing Style Sheets with jQuery

Add CSS class Remove CSS class
This is a div container with an ID "c". Its style will change.

How the Code Works

HTML The page has a div container (ID c) and two buttons (IDs a and b).
Library for jQuery jquery-1.8.2.min.The jQuery library becomes available when the js file is loaded.
Adding JavaScript code to $(document).ready() $(document).ready(function(){…}). This prohibits early access to elements and ensures that the code executes only after the web page loads and the DOM is formed.
$(‘#a’).To activate the feature, use click(function(){…}) on the button with ID a.
$(“#c”);”addClass(“mClass”); This line targets the div with ID c using an ID selection before using the.addClass() method.
The mClass style sheet class is dynamically assigned to the specified element by the addClass() method. This modifies the div’s look without requiring a page reload.
$(‘#b’).Using click(function(){…}), The function is activated by clicking the button with ID b.
$(“#c”);-removeClass(“mClass”); This line makes use of the.removeClass() method and targets the same div. By removing the mClass style, the removeClass() function returns the div to its initial look.

You can also utilise the related method.toggleClass(). This technique removes or adds CSS classes. Depends on element state. Use.hasClass() to determine whether an element has a particular class. The.class selector is essential for developing dynamic HTML (DHTML) effects and complex interactive web front ends, as are functions like addClass(), removeClass(), and toggleClass().

Page Content

Tutorials

Class Selector in jQuery With Code Example