Jquery Cheat Sheet PDF

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>']

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>']

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

Jquery Cheat Sheet PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery Cheat Sheet PDF

Uploaded by

Copyright:

Available Formats

jQUERY SELECTOR BASIC ATTRIBUTE HIERARCHY BASIC FILTERS CHILD FILTERS

CONTENT FILTERS FORM FILTERS VISIBILITY FILTERS

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

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

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

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

CONTENT FILTERS FORM FILTERS VISIBILITY FILTERS

BASIC FILTERS :last :nth-child()

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

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

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

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

CONTENT FILTERS FORM FILTERS VISIBILITY FILTERS

FORM FILTERS :input

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

:disabled Selects elements that are type reset

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

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

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

You might also like