Scribd
Upload
53 views

Jquery Cheatsheet

This document provides a cheat sheet on jQuery selectors, including basic selectors to select elements by tag name, id, class, and other attributes. It also covers child and descendant selectors to select elements based on their relationship in the DOM hierarchy.

Uploaded by

Rohit Haldar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

Jquery Cheatsheet

This document provides a cheat sheet on jQuery selectors, including basic selectors to select elements by tag name, id, class, and other attributes. It also covers child and descendant selectors to select elements based on their relationship in the DOM hierarchy.

Uploaded by

Rohit Haldar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

jQUERY SELECTOR BASIC ATTRIBUTE HIERARCHY BASIC FILTERS CHILD FILTERS

CONTENT FILTERS FORM FILTERS VISIBILITY FILTERS


CHEAT SHEET
BASIC Attribute Contains ('[name*="value"') Attribute Starts With ('[name^="value"]')

Selects elements with specified attribute containing value as a substring Selects elements with specified attribute starting with value
All ('*')

$('[formname*= "log"]') $('[formname^= "log"]')


Selects all elements

Class ('.class') ['<form formname="logged">...</form>','<form formname="blog">...</form>'] ['<form formname="logform">...</form>','<form formname="loginformation">...</


form>']
Select all elements with the given class $('[callsign*="alpha"]')
$('[callsign^="alpha"]')
$('.nameOfClass') ['<ul callsign="alphacat">...</ul>','<li callsign="aalphaa">...</li>']
['<h1 callsign= "alphaone">...</h1>','<div callsign= "alphabravo">...</div>']
['<div class="nameOfClass">...</div>', '<input class="signup nameOfClass">']
Attribute Contains Word ('[name~="value"]') Has Attribute ('[name]')
$('.nameOfClass.otherClass')
Selects elements with specified attribute containing word (space delimited) Selects elements with the attribute
['<div class="nameOfClass otherClass">...</div>', '<div class="nameOfClass
otherClass thirdClass">...</div>'] $('[formname~="log"]') $('[formname]')

Element ('element') ['<form formname="my one log">...</form>','<form formname="hog log dog">...</ ['<form formname="signin">...</form>','<form formname="newuser">...</form>']
form>']
Selects specified element $('[callsign]')
$('[callsign~="alpha"]')
$('div') ['<div callsign= "charlie">...</div>','<a callsign= "nocallsign">...</a>']
['<div callsign="alpha beta delta">...</div>','<h1 callsign="a alpha b">...</h1>']
['<div id= "first">...</div>','<div id= "second">...</div>'] Multiple Attribute ('[name="value"][name2="value2"')

$('body') Selects elements with the specified attribute selectors


Attribute Ends With ('[name$="value"]')
['<body>...</body>'] $('[formname="log"][callsign$="alpha"]')
Selects elements with specified attribute ending with value
ID ('#id') ['<form formname="log">...</form>','<a callsign="thealpha">...</a>']
$('[formname$= "log"]')
Selects the one element with the given ID.
['<form formname="blog">...</form>','<form formname="videolog">...</form>']
HIERARCHY
$('#elementOne') Child ('parent > child')
$('[callsign$="alpha"]')
['<div id= "elementOne">...</div>'] Selects elements that are direct children of a parent
['<div callsign= "newalpha">...</div>','<a callsign= "betaalpha">...</a>']
$('#uniqueID') $('form > input')

['<a id= "uniqueID">...</a>'] ['<input type="text>', '<input type="password">', <input type="submit">']


Attribute Equals ('[name="value"]')
Multiple ('selector1,selector2,selectorN') Descendant ('ancestor descendant')
Selects elements with specified attribute matching the value.
Selects using each of the comma-separated selectors Selects elements that are descendants of an ancestor element
$('[formname= "log"]')
$('.classOne,#elementID') $('body li')
['<form formname="log">...</form>','<div formname="log">...</div>']
['<div class="classOne">...</div>','<input id="elementID">'] ['<li id="one">...</li>', '<li id="two">...</li>', '<li id="three">...</li>']
$('[callsign="alpha"]')
$('form,#uniqueID,.className')
['<h1 callsign= "alpha">...</h1>','<div callsign= "alpha">...</div>'] Next Adjacent ('prev + next')
['<form>...</form>','<a id= "uniqueID">...</a>','<ul class= "className">...</ul>']
Selects sibling elements that are directly follow the prev selector
m
ATTRIBUTE Attribute Not Equal ('[name!="value"]') . co
$('#one + li')
d
Attribute Contains Prefix ('[name|="value"]') Selects elements with specified attributes that don't match value
nte
['<li id= "two">...</li>']
i
Selects elements with specified attribute with value followed by a hypen $('[formname!="log"]')
y pr
t
et
Next Siblings ('prev ~ siblings')
$('[formname|= "log"]') ['<form formname="register">...</form>','<form formname="resetpassword">...</
r
//p
form>'] Selects all sibling elements that follow prev selector
['<form formname="log-in">...</form>','<form formname="log">...</form>'] :
$('[callsign!="alpha"]') $('#two ~ li')
ttp
$('[callsign="alpha"]')
['<div callsign= "tango">...</div>','<a callsign= "bravo">...</a>']
h
['<li id="three">...</li>', '<li id="four">...</li>', '<li id="five">...</li>']
['<div callsign="alpha-beta">...</div>', '<a callsign="alpha-tango">...</a>']
jQUERY SELECTOR BASIC ATTRIBUTE HIERARCHY BASIC FILTERS CHILD FILTERS

CONTENT FILTERS FORM FILTERS VISIBILITY FILTERS


CHEAT SHEET

BASIC FILTERS :last :nth-child()

Filters, which begin with colons (:), can be appended to regular selectors to filter out
Selects the last matched element Selects the child element of a parent matching the given index (1-index)
elements that don't match the filter.
$(':last')
For example, $(':animiated') will give you all animated on a page, while :nth-last-child()
$('form:animated') will give you animated elements within a form. ['<li id= "last">...</li>']
Selects the child element of parent matching the given index, starting from the
:lt()
:animated last (1-index)
Selects from matched elements with an index less than the given index (zero-
Selects elements that are currently being animated index)
:nth-last-of-type()
:eq() $(li:lt(3))
Selects the nth element of a type among siblings of same parent, starting from
Selects the element at the given index of the matched set (zero-index) last (1-index)
['<li id="one">...</li>', '<li id="two">...</li>', '<li id="three">...</li>']
$('li:eq(4)')
:not() :nth-of-type()
['<li id="five">...</li>']
Selects elements that do not match the given selector Selects the nth element of a type among siblings of same parent (1-index)
$('li:eq(0)')
$('input:not(:password)')
['<li id= "one">...</li>'] :only-child
['<input type="text">', '<input type="submit">']

:even Selects elements when they are only child of their parent
:odd
Selects elements with an even index in the matched set (zero-index) Selects elements with an odd index in the matched set (zero-index)
:only-of-type
$('li:even') $('li:even')
Selects elements when they have no siblings of same type
['<li id="one">...</li>', '<li id="three">...</li>', '<li id="five">...</li>'] ['<li id="two">...</li>', '<li id="four">...</li>', '<li id="six">...</li>']

:first :root
CONTENT FILTERS
Selects the element at the root of the document :contains()
Selects the first matched element
$(':root') Selects all elements that contain the specified text
$('li:first')
['<html>...</html>'] $(':contains("Pretty Printed")')
['<li id= "one">...</li>']

:target ['<div>Pretty Printed</div>']


:focus

Selects element that is currently focused Selects the element targetted in URL (e.g. http://url.com/#home) :empty

$(':target') Selects elements with no children or text


:gt
['<div id= "home">...</div>'] $(':empty')
Selects matched elements with index greater than given index (zero-index)

$('li:gt(3)') CHILD FILTERS ['<div></div>', '<td></td>']

['<li id="five">...</li>', '<li id="six">...</li>', '<li id="seven">...</li>']


:first-child :has()

m
:header Selects element that is the first child of parent

co
Selects elements that have at least one element of given selector
Selects elements that are headers (h1, h2, ...)
:first-of-type $('div:has(table)')
d.
$(':header')
nte
Selects first of element type that is a child of parent
i
pr
['<div><table>...</table></div>']
['<h1>...</h1>', '<h3>...</h3>']
ty
et
:last-child

r
:lang() $(':parent')

//p
Selects element that is the last child of parent
Selects elements with the given language. Selects elements that have at least one child element
:
:last-of-type
ttp
$(':lang(en-us)')
Selects last of element type that is a child of parent
$(:parent)
h
['<div lang="en-us">...</div>'] ['<table><tr>...<tr></table>','<div><h1>...</h1></div>']
jQUERY SELECTOR BASIC ATTRIBUTE HIERARCHY BASIC FILTERS CHILD FILTERS

CONTENT FILTERS FORM FILTERS VISIBILITY FILTERS


CHEAT SHEET

FORM FILTERS :input


VISIBILITY FILTERS
Selects elements that are input, select, textarea, and button
:button
:hidden
$(':input')
Selects elements that are buttons
Selects hidden elements.
['<input type="text">', '<textarea>...</textarea>']
$(':button')
Hidden elements either have:
['<button>...</button>', <input type="button">] display:none;
:password In a form, type="hidden"
Width and height are 0
:checkbox Selects elements that are type password

Selects elements that are checkboxes $(':password')


:visible
$(':checkbox') ['<input type="password">']
Selects elements that aren't hidden
['<input type="checkbox">']
:radio
:checked Selects elements that are radio buttons
Selects elements that are checked $(':radio')
$(':checked') ['<input type="radio">']
['<input type="checkbox" checked>']
:reset

:disabled Selects elements that are type reset

Selects elements that are disabled $(':reset')

$(':disabled') ['<input type="reset">']

['<input type="text" disabled>']


:selected
:enabled
Selects elements that are selected
Selects elements that are enabled
$(':selected')
$(':enabled')
['<option value="new" selected>...</option>']
['<input type="text">']
:submit
:file
Selects elements that are type submit
Selects elements of type file
$(':submit')
$(':file')
['<input type="submit">']
['<input type="file">']

:focus :text

m
Selects elements that are in focus Selects elements that are type text

$(':text') . co
$(':focus')
d
['<input type="text">']
nte
['<select>...</select>']
i
y pr
:image
t
ret
//p
Selects elements of type image

:
tp
$(':image')

['<input type="image">'] ht

You might also like