Show Menu

jQuery Cheat Sheet by i3quest

List of common jQuery selectors. I had compiled this list a while ago into a word document but do not remember the source now.

General

*
All
element
Element
.class
Class
#id
ID

Attributes

[name]
Has Attribute
[name|­="va­lue­"]
Contains Prefix (before hyphen (-))
[name*­="va­lue­"]
Contains
[name~­="va­lue­"]
Contains Word
[name^­="va­lue­"]
Starts With
[name$­="va­lue­"]
Ends With
[name=­"­val­ue"]
Equals
[name!­="va­lue­"]
Not Equal
[name=­"­v"][­nam­e2=­"­v2"]
Multiple Attributes

Controls

:button
Button
:checkbox
Checkbox
:submit
Submit
:text
Text
:password
Password
:radio
Radio
:reset
Reset
:file
File
:image
Image
:input
input, textarea, select and button elements
 

Functions

:conta­ins­(text)
Elements that contain the specified text.
:eq(n)
Element at index n within the matched set.
:gt(n)
Elements at an index greater than n within the matched set.
:lt(n)
Elements at an index less than index within the matched set.
:has(s­ele­ctor)
Elements which contain at least one element that matches the specified selector.
:not(s­ele­ctor)
Elements that do not match the given selector.
:nth-c­hild()
Elements that are the nth-child of their parent.
:empty
Elements that have no children (including text nodes).
:even
Even elements, zero-i­ndexed.
:first
The first matched element.
:header
Elements that are headers, like h1, h2, h3 and so on.
:last
The last matched element.
:odd
Odd elements, zero-i­ndexed.

Element State

:checked
Checked
:animated
Animated
:disabled
Disabled
:enabled
Enabled
:focus
Focused
:selected
Selected
:visible
Visible
:hidden
Hidden
 

Hierarchy

parent > child
Direct child elements specified by "­chi­ld" of elements specified by "­par­ent­".
ancestor descendant
Elements that are descen­dants of a given ancestor.
selector1, selector2, selectorN
Combined results of all the specified selectors.
prev + next
Next elements matching "­nex­t" that are immedi­ately preceded by a sibling "­pre­v".
prev ~ siblings
Sibling elements that follow after the "­pre­v" element, have the same parent, and match the filtering "­sib­lin­gs" selector.
:first­-child
Elements that are the first child of their parent.
:last-­child
Elements that are the last child of their parent.
:only-­child
Elements that are the only child of their parent.
:parent
Elements that are the parent of another element, including text nodes.
 

Share This Cheat Sheet!

Favourited by 40 Members:

fkorling caroline.artz Eulerintegral333 dmooreTrinity internaciulo Theosis Coldblackice PaulBlp alexikia Dranzz Epoc and 30 more ...

Comments

DaveChild DaveChild, 09:07 24 Dec 11

I know this will make a lot of people very happy - a jQuery cheat sheet has been requested for a long time! Good job :)

Ben23 Ben23, 09:27 14 Jun 12

Should probably be called 'jQuery Selector Cheat Sheet' as it only covers that topic. Useful though, thanks,

simoneast simoneast, 08:01 8 Aug 12

Yeah, as Ben said it is only jQuery "selectors" - which are basically CSS selectors with a few helpful additions.

lek lek, 08:19 13 Aug 12

This will be great to some other beginners, like me.

Steen Steen, 21:43 11 Oct 12

Hmm, maybe it would be good to have the methods listed with args too. This is what I look up the most.

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.