jQuery Selectors
Selectors choose which elements to work with. jQuery supports CSS selectors plus helpful filters like :visible, :contains(), and position filters.
Quick Reference
| Selector / API | Description | Example |
|---|---|---|
#id, .class, tag | Basic CSS selectors. | $('#title'), $('.msg') |
| Attribute selectors | Match by attribute value/pattern. | $('a[target="_blank"]'), $('[href^="/"]') |
| Hierarchy | Descendant, child, and sibling selection. | $('#list li span'), #list > li, .x + p |
| Positional filters | By position in a set. | :first, :last, :eq(2), :lt(3), :odd |
| Content filters | By text/child presence. | :contains('Hi'), :has(img), :empty |
| Visibility filters | Rendered visibility. | :visible, :hidden |
| Form selectors | Inputs and states. | :input, :checked, option:selected |
| Structural | By order/type among siblings. | :nth-child(odd), p:nth-of-type(2) |
| Helpers | Filter after selecting. | .not(sel), .is(sel), .hasClass('x') |
var $items = $('#list li').1) Basic: #id, .class, tag
$('#title').text('New Title');
$('.msg').addClass('hit');
'div' // $('div') selects all divs
2) Attribute Selectors
Match elements using attribute presence or patterns like “starts with”, “ends with”, “contains”.
$('a[target="_blank"]'); // equals
$('a[href^="/"]'); // starts with
$('[data-id*="user"]'); // contains substring
3) Hierarchy: descendant, child, siblings
Use spacing for descendants, > for children, + for adjacent sibling, and ~ for general siblings.
$('#list li span'); // descendant
$('#list > li'); // child
$('.x + p'); // adjacent sibling
$('.x ~ *'); // general siblings
4) Positional Filters
Select by relative position inside the matched set.
$('#list li:first'), $('#list li:last'), $('#list li:eq(2)'),
$('#list li:lt(3)'), $('#list li:gt(1)'), $('#list li:odd')
5) Content Filters
Filter by text content or the presence of child elements.
$('div:contains("Hello")'); // has text "Hello"
$('div:has(span)'); // has a <span>
$('div:empty'), $('div:parent');
6) Visibility: :visible / :hidden
Checks whether elements consume space on the page (not just CSS display:none).
$(':hidden').length; // number hidden
7) Form Selectors
Convenience filters for inputs and states.
$(':input'), $(':checked'), $('option:selected')
8) Multiple selectors, :not(), .is(), .hasClass()
Combine selectors with commas; refine/inspect with helpers.
$('p.a, p.b'); // multiple
$('p:not(.special)'); // exclude
$('p.c').is('.special'); // true/false
$('p.c').hasClass('special');
9) [attr^=val], [attr$=val], [attr*=val]
Match start, end, or substring of an attribute.
$('a[href^="https://"]'); // starts with
$('img[src$=".png"]'); // ends with
$('[data-id*="user"]'); // contains
10) Structural: :nth-child() & :nth-of-type()
Select items by order among siblings. Supports keywords like odd/even or formulas like 2n+1.
$('#u li:nth-child(3)'); // 3rd li
$('#u li:nth-child(odd)'); // odd lis
$('div p:nth-of-type(2)'); // 2nd p in each div
$('*')) with context: $('#root').find('.item').