jQuery Selectors: The Complete Guide with Examples

jQuery selectors borrow CSS syntax and add a few super-powers of their own. On the Laravel and WordPress admin panels I still maintain, jQuery is everywhere — and knowing the selector shortcuts saves me from writing a dozen custom helpers. Even if you're planning to migrate to vanilla JS, understanding the jQuery selector ecosystem makes reading legacy code much easier. Here's the complete practical reference, in the order I actually use these.

1. Basic selectors — pure CSS syntax

$("#header")           // by id
$(".card")              // by class
$("input[type=text]")   // by attribute
$("ul > li")            // direct child
$("nav a")              // descendant
$("h2 + p")             // adjacent sibling
$("*")                  // everything (careful!)

2. Multiple selectors — comma is 'or'

$("h1, h2, h3").addClass("heading");
$(".error, .warning").css("color", "red");

3. Filter selectors — jQuery-only shortcuts

$("li:first")           // first li in the set
$("li:last")
$("li:eq(2)")           // 3rd (zero-indexed)
$("li:gt(3)")           // index > 3
$("li:lt(2)")           // index < 2
$("tr:even")            // 0, 2, 4…
$("tr:odd")             // 1, 3, 5…
$(":contains('Total')") // text match
$("p:empty")            // no children/text

4. Form selectors — the hidden productivity boost

$(":input")             // every form field
$(":text")              // text inputs only
$(":password")
$(":checkbox")
$(":radio")
$(":submit")
$(":file")
$(":checked")           // currently checked
$(":selected")          // selected option
$(":disabled") / $(":enabled")

5. Attribute selectors

$("a[href^='https']")   // starts with
$("a[href$='.pdf']")    // ends with
$("a[href*='youtube']") // contains
$("input[name!='hidden']") // not equal
$("[data-role='admin']")

6. Chain methods on selections — the real jQuery magic

$(".card")
  .addClass("active")
  .find("h3").text("Hello").end()   // .end() pops back to .card
  .fadeIn(200);

7. Traversal methods — walk the DOM

$(el).parent()
$(el).parents(".modal")     // any ancestor matching selector
$(el).closest("form")       // nearest ancestor (including self)
$(el).children("li")
$(el).find(".btn")          // any descendant
$(el).siblings()
$(el).next() / $(el).prev()

8. Vanilla JS equivalents (for when you migrate)

// $(".card")            -> document.querySelectorAll(".card")
// $(el).addClass("x")   -> el.classList.add("x")
// $(el).closest(".m")   -> el.closest(".m")   // native since 2018
// $(el).find(".b")      -> el.querySelectorAll(".b")
// $(":checked")         -> document.querySelectorAll(":checked")