jQuery — Selectors

Basic Selectors

$("#id")          // ID selector
$(".class")       // Class selector
$("element")      // Element selector
$("*")            // Universal selector
$(this)           // Current element

Hierarchical Selectors

$("div p")        // All p inside div (descendant)
$("div > p")      // Direct children only
$("div + p")      // Next sibling p
$("div ~ p")      // All following siblings

Attribute Selectors

$("[href]")               // Has href attribute
$("[href='#home']")       // Equals specific value
$("[href$='.pdf']")       // Ends with .pdf
$("[href^='https']")      // Starts with https
$("[title*='hello']")     // Contains 'hello'
$("[type='text']")        // Exact match

Filter Selectors

$("p:first")          // First p
$("p:last")           // Last p
$("p:eq(2)")          // Third p (0-indexed)
$("p:odd")            // Odd-indexed p elements
$("p:even")           // Even-indexed p elements
$("p:not(.skip)")     // Without .skip class

Content Filters

$("p:contains('hello')")  // Contains text
$("p:empty")              // No children/text
$("div:has(p)")           // Has p inside
$("td:parent")            // Has children

Visibility Filters

$("p:visible")   // Visible elements
$("p:hidden")    // Hidden elements

Form Selectors

$(":input")      // All form elements
$(":text")       // Text inputs
$(":password")   // Password inputs
$(":checkbox")   // Checkboxes
$(":radio")      // Radio buttons
$(":submit")     // Submit buttons
$(":selected")   // Selected options
$(":checked")    // Checked inputs

Combining Selectors

$("div.active, p.highlight");  // Union
$("div.container > p:first");  // Complex chain

Mini Practice

1. Select elements using five different selector types
2. Use attribute selectors to find links
3. Filter form inputs by type
4. Combine multiple selectors

Up Next

Continue with Events — handling user interactions.