Selectors

Reaching Elements by CSS Syntax

jQuery selectors are CSS selectors extended with a few jQuery-specific helpers. They return a jQuery object wrapping the matching elements.

Core Selectors

$('#header')        // by id
$('.card')          // by class
$('div')            // by element name
$('input[type=text]') // attribute selector
$('ul li.active')   // descendant with class

Positional Selectors

$('li:first')       // first matching
$('li:last')        // last matching
$('li:eq(2)')       // the third element (0-based)
$('li:even')        // zero-indexed even positions
$('li:odd')         // zero-indexed odd positions

Form and Content Selectors

$(':input')         // all input-like controls
$(':checked')       // checked checkboxes/radios
$(':disabled')      // disabled elements
$('div:has(p)')     // divs containing a paragraph
$('li:not(.muted)') // everything except muted

Traversal: Move From a Selection

$('.card').find('.title')   // descendants
$('#list').children()        // direct children
$('li').parent()             // direct parent
$('li').siblings()           // same-level siblings
$('li').next() / $('li').prev()

Key Points

• Selectors mirror CSS, so CSS knowledge transfers directly.
• jQuery adds :eq, :even, :has, :not and friends.
• Each query returns a jQuery object you can chain.
• Traversal methods refine a selection without more queries.