Mastering jQuery: From DOM Manipulation to Dynamic Interactivity

Chapter 3: jQuery Selectors, Filters & Events

🔹 1. Why Selectors, Filters & Events Matter in jQuery

Selectors and event handlers are the core building blocks of jQuery.

• Selectors let you target any HTML element with incredible precision.
• Filters allow you to narrow down your selections.
• Events let your application react to user input, clicks, and interactions.

Master these, and you can control every piece of your front-end like a pro.

🔹 2. jQuery Selectors – The Basics

jQuery uses CSS-style selectors to target HTML elements.

✅ Common Selector Patterns

$("#logo").hide();            // Hide element by ID

$(".btn").css("color", "red"); // Change text color for all buttons

🔹 3. Chaining Selectors

You can use combinations and hierarchy:

$("div .note")     // All elements with class 'note' inside a div

$("ul > li")       // Only direct children <li> of <ul>

$("input:checked") // Only checked checkboxes/radios

🔹 4. Advanced Filtering in jQuery

✅ Filter Methods

$("li").filter(":odd").css("background", "#f0f0f0");

✅ You can also chain .find(), .children(), .parent() for DOM traversal.

🔹 5. Event Handling Basics

✅ Syntax:

$(selector).on(event, childSelector (optional), function)

✅ Example: Click Event

$("#submitBtn").on("click", function() {

  alert("Button was clicked!");

});

✅ Other Events:

🔹 6. Event Delegation

In dynamic content (like added elements), direct binding doesn’t work.

Use event delegation instead:

$(document).on("click", ".dynamicBtn", function() {

  alert("You clicked a new button!");

});

✅ This binds the event to a static parent (document), not the dynamically created child.

🔹 7. Prevent Default Behavior

Use .preventDefault() in event handlers to stop default browser actions.

$("a").on("click", function(e) {

  e.preventDefault();

  alert("Link clicked, but not followed.");

});

🔹 8. Toggle, Show, Hide Events with jQuery

jQuery allows instant UI interactivity:

$(".faq").on("click", function() {

  $(this).next(".answer").slideToggle();

});

✅ Combine this with .addClass() and .removeClass() for styling changes.

🔹 9. Combining Selectors, Filters & Events

Example: Make only even list items clickable.

$("ul li").filter(":even").on("click", function() {

  $(this).css("background-color", "yellow");

});

🔹 10. Summary Table: jQuery Selectors & Events