jQuery Selectors: The Complete Guide with Examples

jQuery selectors borrow CSS syntax and add a few super-powers of their own. If you maintain a legacy project or want fast DOM scripting without writing your own helpers, they're still excellent.

Basic selectors

$("#header")         // by id
$(".card")            // by class
$("input[type=text]") // by attribute
$("ul > li")          // direct child

Filter selectors

$("li:first")
$("li:last")
$("li:eq(2)")
$("tr:even")
$("input:checked")

Form selectors

• :input — all form fields
• :text, :password, :checkbox, :radio
• :disabled, :enabled, :selected

Chain methods on selections

$(".card").addClass("active").fadeIn(200).find("h3").text("Hello");