? What Are CSS Classes in jQuery?

A CSS class is a set of styles that can be applied to one or more HTML elements. jQuery provides several methods for working with these classes.

? jQuery Methods for Manipulating CSS Classes

? Example 1: .addClass()

Adds one or more classes to an element.

html
"#addBtn").click(function() {    $("#box").addClass("big green"); // Adds "big" and "green" classes  });</script>

CSS:

css
<div "#removeBtn").click(function() {    $("#box").removeClass("green"); // Removes the "green" class  });</script>

Result: The background will change from green to its default color.

? Example 3: .toggleClass()

Adds the class if it’s not already there, or removes it if it is.

html
"#toggleBtn").click(function() {    $("#box").toggleClass("big green"); // Toggles "big" and "green" classes  });</script>

• The first click will add both classes (big and green).

• The second click will remove them.

? Example 4: .hasClass()

Checks if an element has a specific class.

html
"#checkBtn").click(function() {    if ($("#box").hasClass("big")) {      alert("The box has the 'big' class!");    } else {      alert("The box does not have the 'big' class.");    }  });</script>

? Real-World Use Cases

1. Toggle Active Class on Menu Items

html
".menu-item").click(function() {    $(".menu-item").removeClass("active");  // Remove active class from all    $(this).addClass("active");  // Add active class to the clicked item  });</script>

2. Show/Hide Elements with Classes

html
"#toggleBtn").click(function() {    $("#content").toggleClass("hidden");  });</script>

CSS:

css
.hidden {  display: none;}

? Summary

• .addClass(): Adds one or more classes to an element.

• .removeClass(): Removes one or more classes from an element.

• .toggleClass(): Toggles a class on or off.

• .hasClass(): Checks if an element has a specific class.