jQuery Class (“.class”)Selector

Posted in jQuery Tutorial

Updated on Nov 21, 2024

By Mari Selvan

👁️ 40 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In the realm of web development, jQuery stands out as a versatile library that simplifies the process of DOM manipulation and event handling. Among its many features is the $(".class") selector, which allows you to target elements based on their class attributes. Understanding and harnessing the power of this selector can significantly enhance your ability to interact with and manipulate elements on your web page.

In this comprehensive guide, we'll dive into the usage of the jQuery $(".class") selector with practical examples to facilitate your understanding.

🧠 Understanding .class Selector

The $(".class") selector is specifically designed to target HTML elements with a specific class attribute. It enables you to select one or more elements that belong to a particular class, facilitating targeted manipulation or event binding.

💡 Syntax

The syntax for the .class selector is straightforward:

syntax.js

Copied

$(".class")

📝 Example

Selecting Elements by Class:

Let's say you have several elements with the class highlight and you want to select them all. You can achieve this using the $(".class") selector as follows:
index.html
Copied
```
<div class="highlight">Element 1</div>
<div class="highlight">Element 2</div>
<div class="highlight">Element 3</div>
```
example.js
Copied
```
$(".highlight").css("font-weight", "bold");
```
This code will set the font weight of all elements with the class highlight to bold.
Adding or Removing Classes Dynamically:

jQuery allows you to add or remove classes from elements dynamically. For instance, let's add a class active to a button when it is clicked:
index.html
Copied
```
<button class="btn">Click me</button>
```
example.js
Copied
```
$(".btn").click(function() {
    $(this).addClass("active");
});
```
Now, when the button is clicked, it will gain the "active" class, allowing you to apply specific styles or behaviors.
Event Binding to Classed Elements:

You can easily bind events to elements based on their classes using jQuery. Here's an example where we alert a message when a button with the class submit-btn is clicked:
index.html
Copied
```
<button class="submit-btn">Submit</button>
```
example.js
Copied
```
$(".submit-btn").click(function() {
    alert("Form submitted!");
});
```
This code will trigger an alert when the button with the class "submit-btn" is clicked.
Refining Selections with Multiple Classes:

If you need to target elements with multiple classes, you can refine your selection by specifying them together. For example:
index.html
Copied
```
$(".class1.class2")
```
This will select elements that have both class1 and class2 applied to them.

🎉 Conclusion

The $(".class") selector in jQuery is a valuable tool for targeting and manipulating elements based on their class attributes. Whether you need to select elements, add or remove classes dynamically, bind events, or refine selections based on multiple classes, this selector provides a convenient and efficient solution.

By mastering its usage, you can enhance the interactivity and functionality of your web pages with ease.