Tutorials › jQuery in Practice › Selectors

Selectors

5 min read Quiz at the end

jQuery selectors use CSS syntax: $('#id'), $('.class'), $('p'). Combine selectors for precision. Always cache frequently used selectors in variables: var $menu = $('#menu') to avoid repeated DOM searches.

jQuery Selectors

$('p')           // all paragraphs
$('#main')       // ID
$('.card')       // class
$('ul li')       // descendant
$('input[type=text]')  // attribute
$('p:first')     // first p
$('tr:even')     // even rows
$('p:not(.red)') // exclusion

jQuery selectors follow CSS syntax plus extra pseudo-selectors.

← Document Ready Next: DOM Traversal →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which selector selects by class?

💡 Class selectors use a dot prefix: $('.myClass').

2. Which selector selects by ID?

💡 ID selectors use a hash prefix: $('#myId').

3. Which selector selects all elements?

💡 The universal selector * selects every element.

4. Which pseudo-selector gets the first element?

💡 $(':first') or $(':first-child') selects the first matching element.

5. How do you select all inputs of type text?

💡 Attribute selector: $('input[type=text]') selects text inputs.

Quick Access

Selectors

jQuery Selectors

Test your understanding before moving on