JQuery Class Selector Tutorial 🎯

Welcome to our comprehensive guide on JQuery Class Selector! In this lesson, we will explore how to select elements by class in JQuery, making your life easier when working with HTML documents.

Let's start with the basics. In HTML, we often use classes to style and group elements. JQuery allows us to target these classes with ease.

What is a Class Selector in JQuery? 📝

A class selector in JQuery is used to select one or more HTML elements based on the class attribute. This is particularly useful when you need to manipulate multiple elements that share the same class.

How to Use Class Selector in JQuery? 💡

To use a class selector, we use the . (dot) symbol followed by the class name. Here's a simple example:

javascript

$( ".myClass" ).click(function() {
  alert( "Handler for .myClass clicks!" );
});

In the above example, .myClass is the class selector, and it targets all HTML elements with the class myClass. When any of these elements are clicked, an alert box will be displayed.

Real-world Example 💡

Let's consider a scenario where you have multiple buttons with the class .btn. By using the class selector, you can add a click event to all these buttons without having to write separate event handlers for each one.

html

<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>

javascript

$( ".btn" ).click(function() {
  alert( "Handler for .btn clicks!" );
});

In this example, all buttons with the class .btn will trigger the alert box when clicked.

Advanced Example 💡

Let's say you want to change the text of buttons with the class .btn when they are clicked.

html

<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>

javascript

$( ".btn" ).click(function() {
  $(this).text("You clicked me!");
});

In this example, when a button with the class .btn is clicked, its text will be changed to "You clicked me!".

Quiz 🎯

By learning the JQuery class selector, you've taken a big step towards mastering JQuery. In the next lesson, we will explore the id selector and how it can be used to target specific elements. Stay tuned! 🎉