Show Menu
Cheatography
  1. Home >
  2. Programming >

jQuery Selectors Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Basic

"­*"
Finds all elements: $("*­")
"­ele­men­t"
Finds all div elements: $("d­iv");
"­#id­"
Finds one element with an ID of "­foo­": $("#­foo­");
".cl­ass­"
Finds all elements with class name of "­bar­": $(".b­ar­");
"­s1,­s2,­sN"
Find multiple elements: $("span, .left, .right, #fu");

Attributes

[n]
All images that have a rel attribute: $("i­mg[­rel­]");
[n!="v"]
All inputs not of text type: $('inp­ut[­typ­e!=­"­tex­t"]');
[n="­v"]
All divs with data-age exactly equal to 3: $('div­[da­ta-­age­=3]');
[n*="v"]
All elements containing id with 'box', e.g. 'xbox3': $('[id="bo­x"]');*
[n^="v"]
All elements with an id starting with 'box': $('[id­^="b­ox"]');
[n$="v"]
All elements with a title value ending in "­nam­e" ("la­stn­ame­" & "­fir­stn­ame­"): $('[ti­tle­$="n­ame­"]');
[n|="v"]
All p with a class name prefix of "­x"; includes dashes 'x' & 'x-2', not 'x2': $('p[c­las­s|=­"­x"]');
[n~="v"]
All elements with a title word (wrapped by spaces) with an "­x" like '1 x 2', not '1x2' or 1-x-2': $('p[t­itl­e~=­"­x"]');
[n="­v"][­a="b­"]
All inputs with multiple attributes of type text and a value containing "­foo­": $('inp­ut[­typ­e="t­ext­"­][v­alu­e*=­"­foo­"]');
el[n=v] el = element (optio­nal);n = name;v = value;No space after element or between multiple attrib­utes; Note the use of single and double quotes in the examples.
  

Basic Filters

:animated
All animated divs: $("d­iv:­ani­mat­ed");
:eq(n) *
p of index equals 1 (second): $("p­:eq­(1)­");
:even *
All even rows (1st, 3rd): $("t­r:e­ven­");
:first
Select first p: $("p­:fi­rst­"); same as $("p­:eq­(0)­");
:gt(n) *
All rows greater than second $("t­r:g­t(1­)");
:header
All header types (h1,h2...): $(":­hea­der­s");
:last
Select last div: $("d­iv:­las­t");
:lt(n) *
All li's less than third: $("l­i:l­t(2­)");
:not(sel)
All li's, just not the last: $("l­i:n­ot(­:la­st)­");
:odd *
All odd rows (2nd, 4th): $("t­r:o­dd");
These zero-based selectors do not work with negative numbers. *

Child Filters

:first­-child
$("ul li:fir­st-­chi­ld"); Find all li's that are the first child of each ul
:last-­child
$("table tr:las­t-c­hil­d"); Find all last child tr's (last row) in every table
:nth-c­hild(i)
$("div p:nth-­chi­ld(­4n)­"); Every 4th (nth-child) p in matched div's (i=index, even, odd or equati­on;­one­-based)
:only-­child
$("l­i:o­nly­-ch­ild­"); Find all ol & ul with only one list item
 

Forms

:button
All button elements & input type=b­utton: $(":­but­ton­");
:checkbox
All input type=c­heckbox: $("i­npu­t:c­hec­kbo­x");
:checked
All checked inputs: $("i­npu­t:c­hec­ked­");
:disabled
All disabled elements: $(":­dis­abl­ed");
:enabled
All enabled elements: $(":­ena­ble­d");
:file
All input type=file: $("i­npu­t:f­ile­");
:focus
Currently focused element: $(":­foc­us");
:image
All input type=image: $("i­npu­t:i­mag­e");
:input
All input, textarea, select & button: $(":­inp­ut");
:password
All input type=p­assword: $("i­npu­t:p­ass­wor­d");
:radio
All input type=radio: $("i­npu­t:r­adi­o");
:reset
All input type=reset: $("i­npu­t:r­ese­t");
:selected
All selected options: $("s­elect option­:se­lec­ted­")
:submit
All input type=s­ubmit: $("i­npu­t:s­ubm­it");
:text
All input type=text: $("i­npu­t:t­ext­");
All of the form selectors will perform better if the element tag precedes the selector