? jQuery Selectors

? Quick Overview

jQuery selectors are one of the most powerful and flexible features of the library. They are used to select HTML elements and perform actions on them. The syntax is very similar to CSS selectors, and jQuery extends the syntax with additional options.

? Key Concepts

• Select elements using CSS-style syntax
• Chain actions after selecting elements
• Use filters to narrow down selections

? Syntax / Theory

? Basic Selectors

• $("*") – Selects all elements
• $(this) – Current element
• $("p.intro") – Paragraphs with class intro
• $("p:first") – First paragraph

? Hierarchy Selectors

• $("ul li:first") – First li of ul
• $("ul li:first-child") – First child li
• $("div > p") – Direct child
• $("form input") – Descendant

? Attribute Selectors

• $("[href]") – Has attribute
• $("a[target='_blank']") – Exact match
• $("a[target!='_blank']") – Not match
• $("input[type='text']") – Specific type

? Form and Button Selectors

• $(":button") – All buttons
• $(":checkbox") – All checkboxes
• $(":checked") – Selected elements
• $(":input") – All form inputs

? Filtering Selectors

• $("tr:even") – Even rows (0, 2, 4...)
• $("tr:odd") – Odd rows (1, 3, 5...)
• $("div:visible") – Visible elements
• $("div:hidden") – Hidden elements

⛓️ Method Chaining

You can connect multiple actions in a single line of code.

// Chain multiple jQuery methods on the same selection
$("p").css("color", "red").slideUp(1000).slideDown(1000);

? Code Example

// Apply styles using various jQuery selectors
$(document).ready(function() {
$("p.intro").css("font-weight", "bold");
$("a[target='_blank']").css("color", "red");
$("ul li:first-child").css("background", "#dff0d8");
$("tr:odd").css("background-color", "#f2f2f2");

$(":button").click(function() {
$(this).css("background", "#007bff").css("color", "white");
});
});

? Live Output / Explanation

? Interactive Playground: Shape Shifter

Use the buttons below to target specific shapes using jQuery selectors. Watch how specific attributes and classes are targeted.

// 1. Select by Class
$("#sel-class").click(function() {
  resetShapes();
  $(".circle").addClass("highlight");
});

// 2. Select by Attribute (VIP items)
$("#sel-attr").click(function() {
  resetShapes();
  $("[data-type='vip']").addClass("highlight");
});

// 3. Select Even elements (Index 0, 2, 4...)
$("#sel-even").click(function() {
  resetShapes();
  $(".shape:even").addClass("highlight");
});

// 4. Filter Method (Squares only)
$("#sel-filter").click(function() {
  resetShapes();
  $(".shape").not(".circle").addClass("highlight");
});

? Use Cases

• Form validation and UI control
• Dynamic styling
• DOM traversal