Show Menu
Cheatography

Robust jQuery Cheat Sheet by

jQuery

Source & Reference

Selectors

#id
Select By Id
element
Select By Tag
.class
Select By CSS Class
[attr='value']
Select by attribute value
:hidden
must be hidden
:visible
must be visible
:first-child
First child in a sequence
:last-child
last Child in the sequence
:nth-child(#)
Selects all elements of the specified child
:only-child
Selects all elements that are the only child
:contains('text')
Selects all elements containing text
:empty
Selects all elements without children
:has(selector)
Selects all elements that contain at least one element that matches selector
:not(selector)
Selects all elements that do not match the given selector.
:parent
Selects all elements with children
parent > child
Selects all direct child elements specified by "­chi­ld" of elements specified by "­par­ent­".
'ancestor decendant'
Selects all elements that are descen­dants of a given ancestor
'previous + next'
Selects all next elements matching "­nex­t" that are immedi­ately preceded by a sibling "­pre­v"
:even
Select all elements at an even index within the matched set. Zero based
:odd
Select all elements at an odd index within the matched set. Zero based
:animated
Select all elements that are in the progress of an animation at the time the selector is run.
:first
Select First matched element
:last
Select Last matched element
:eq(index)
Select all elements at an index equalt to index within the matched set. Zero based
:gt(index)
Select all elements at an index greater than index within the matched set. Zero based
:lt(index)
Select all elements at an index less than index within the matched set. Zero based
:header
Selects all elements that are headers, like h1 - h6

Attributes

.attr( attributeName [,value])
Get the first matched element attribute OR Set one or more attributes for the set of matched elements.
.removeAttr( attributeName)
Remove an attribute from each element in the set of matched elements.
.prop( propertyName [,value])
Get the first matched element OR Set one or more properties for the set of matched elements.
.removeProp( propertyName)
Remove a property for the set of matched elements.
.val( value)
Get the current value of the first matched element OR Set the value of each element in the set of matched elements.
.html( [htmlString])
Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

Processing

.each(function)
Iterate over a jQuery object, executing a function for each matched element
.map()
Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
.noop()
An empty function.
$.ready()
Specify a function to execute when the DOM is fully loaded.
$.param()
Create a serialized repres­ent­ation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request
.data( [key] [, value])
Retrieve all data OR retireve first matched value or set all keyed values in a matched set

Miscel­laneous

.get([index])
Retrieve the DOM elements matched by the jQuery object.
.index([selector| element])
Search for a given element from among the matched elements.
.toArray()
Retrieve all the elements contained in the jQuery set, as an array.

CSS - Effects

.hide( [duration], [,easing] [,complete])
Display element
.show( [duration], [,easing] [,complete])
Hide element
.toggle( [duration], [,easing] [,complete])
Display or Hide element
.fadeIn( [duration], [,easing][,complete])
Display "fade in"
.fadeOut( [duration], [,easing] [,complete])
Hide "fade out"
.fadeTo( duration, opacity [,easing][,complete])
Set Transp­arency
.slideDown( [duration], [,easing] [,complete])
Display matched elements with a sliding motion
.slideUp( [duration], [,easing] [,complete])
Hide matched elements with a sliding motion
.slideToggle( [duration], [,easing] [,complete])
Display or hide matched elements with a sliding motion
.animate( properties [, duration] [,easing] [,complete] )
Perform a custom animation of a set of CSS properties
.finish( [queue] )
Stop the curren­tly­-ru­nning animation, remove all queued animat­ions, and complete all animations for the matched elements.
.stop( [clearQueue] [,jumpToEnd])
Stop the curren­tly­-ru­nning animation on the matched elements.

CSS - General

.addClass( classNames)
Adds the specified class(es) to each matched element
.css( proper­tyName [,value])
Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element
.hasCl­ass()
Determine whether any of the matched elements are assigned the given class.
.$.escapeSelector()
Escapes any character that has a special meaning in a CSS selector.
.remov­eCl­ass()
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
.toggl­eCl­ass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

Events - Mouse

.click([handler])
Bind an event handler to the “click” JavaScript event, or trigger that event on an element.
.conte­xtmenu([handler])
Bind an event handler to the “conte­xtmenu” JavaScript event, or trigger that event on an element.
.dblclick([handler])
Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element
.hover([handler])
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
.mouse­down([handler])
Bind an event handler to the “mouse­down” JavaScript event, or trigger that event on an element.
.mouse­enter([handler])
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
.mouse­leave([handler])
Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element
.mouse­move([handler])
Bind an event handler to the “mouse­move” JavaScript event, or trigger that event on an element
.mouseout([handler])
Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element
.mouse­over([handler])
Bind an event handler to the “mouse­over” JavaScript event, or trigger that event on an element
.mouseup([handler])
Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element

Events - Keyboard

.keydown(handler)
Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.
.keypress(handler)
Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.
.keyup(handler)
Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

Traversing - Tree & Misc

.children( [selector])
Get the children of each element in the set of matched elements, optionally filtered by a selector.
.closest( [selector])
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
.find( [selector])
Get the descen­dants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
.next( [selector])
Get the immedi­ately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
.nextAll( [selector])
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
.nextUntil( [selector] [,filter])
Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
.offsetParent()
Get the closest ancestor element that is positi­oned.
.parent( [selector])
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
.parents( [selector])
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
.parentsUntil( [selector] [,filter])
Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
.prev( [selector])
Get the immedi­ately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.
.prevAll( [selector])
Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
.prevUntil( [selector] [,filter])
Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
.siblings( [selector])
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
.add( [selector|elements|html])
Create a new jQuery object with elements added to the set of matched elements.
.addBack( [selector])
Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
.contents()
Get the children of each element in the set of matched elements, including text and comment nodes.
.end()
End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

Utilities

$.contains( container, contained)
Check to see if a DOM element is a descendant of another DOM element.
$.each(array, callback)
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays.
$.extend( target [,object1] [,objectN])
Merge the contents of two or more objects together into the first object.
$.fn.extend(obj)
Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
$.globalEval(code)
Execute some JavaScript code globally.
$.grep( array, function [,invert])
Finds the elements of an array which satisfy a filter function. The original array is not affected.
$.inArray( value, array [,fromIndex])
Search for a specified value within an array and return its index (or -1 if not found).
$.isArray(obj)
Determine whether the argument is an array
$.isEmptyObject(obj)
Check to see if an object is empty (contains no enumerable proper­ties).
$.isFunction(obj)
Determine if the argument passed is a JavaScript function object.
$.isNumeric(value)
Determines whether its argument represents a JavaScript number.
$.isPlainObject(obj)
Check to see if an object is a plain object (created using “{}” or “new Object”).
$.isWindow(obj)
Determine whether the argument is a window.
$.isXMLDoc(node)
Check to see if a DOM node is within an XML document (or is an XML document).
$.makeArray(obj)
Convert an array-like object into a true JavaScript array.
$.map( array, callback)
Translate all items in an array or object to new array of items.
$.merge(first, second)
Merge the contents of two arrays together into the first array.
$.noop()
An empty function.
$.now()
Return a number repres­enting the current time.
$.parseHTML( data [,context] [,keepScripts] )
Parses a string into an array of DOM nodes.
$.parseJSON( json)
Takes a well-f­ormed JSON string and returns the resulting JavaScript value
$.parseXML( data)
Parses a string into an XML document.
$.trim( string)
Remove the whitespace from the beginning and end of a string.
$.type( obj)
Determine the internal JavaScript [[Class]] of an object.
$.unique( array)
Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.
$.uniqueSort( array)
Sorts an array of DOM elements, in place, with the duplicates removed.
 

Core

jQuery()
$()
Return a collection of matched elements either found in the DOM based on passed argume­nt(s) or created by passing an HTML string.
$.holdReady(hold)
Holds or releases the execution of jQuery’s ready event.
$.noConflict( [removeAll])
Relinquish jQuery’s control of the $ variable.
$.ready
A Promis­e-like object (or “thena­ble”) that resolves when the document is ready.
.ready( handler)
Specify a function to execute when the DOM is fully loaded.
$.readyException( error)
Handles errors thrown synchr­onously in functions wrapped in jQuery().
$.when(deferreds)
Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynch­ronous events.

Queue

.clear­Queue([queue­Name])
Remove from the queue all items that have not yet been run.
.dequeue([queue­Name])
Execute the next function on the queue for the matched elements.
.queue([queue­Name] [,newQ­ueu­e|c­all­back])
Show or manipulate the queue of functions to be executed on the matched elements.

Ajax

$.ajax( url [,settings])
Perform an asynch­ronous HTTP (Ajax) request.
.ajaxComplete( handler)
Register a handler to be called when Ajax requests complete.
.ajaxError(handler)
Register a handler to be called when Ajax requests complete with an error.
.ajaxSend(handler)
Attach a function to be executed before an Ajax request is sent
.ajaxStart(handler)
Register a handler to be called when the first Ajax request begins.
.ajaxStop(handler)
Register a handler to be called when all Ajax requests have completed
.ajaxSuccess(handler)
Attach a function to be executed whenever an Ajax request completes succes­sfully.
$.ajaxPrefilter( [dataTypes], handler )
Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().
$.ajaxSetup( options)
Set default values for future Ajax requests. Its use is not recomm­ended
$.ajaxTransport( dataType, handler)
Creates an object that handles the actual transm­ission of Ajax data.
$.get( url [,data] [,success] [,dataType])
Load data from the server using a HTTP GET request
$.getJSON( url [,data] [,success] )
Load JSON-e­ncoded data from the server using a GET HTTP request.
$.getScript( url [,success])
Load a JavaScript file from the server using a GET HTTP request, then execute it
$.param(obj)
Create a serialized repres­ent­ation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request.
$.post( url [,data] [,success] [,dataType])
Load data from the server using a HTTP POST request.
.load( url [,data] [,complete] )
Load data from the server and place the returned HTML into the matched element.
.serialize()
Encode a set of form elements as a string for submis­sion.
.serializeArray()
Encode a set of form elements as an array of names and values.

CSS - Dimensions

.offset()
Get the current coordi­nates of the first element, or set the coordi­nates of every element, in the set of matched elements, relative to the document.
.posit­ion()
Get the current coordi­nates of the first element in the set of matched elements, relative to the offset parent.
.scrol­lLeft()
Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.
.scrol­lTop()
Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
.height()
Get the current computed height for the first element in the set of matched elements or set the height of every matched element.
.innerHeight()
Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.
.outerHeight()
Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer height of every matched element.
.width()
Get the current computed width for the first element in the set of matched elements or set the width of every matched element.
.inner­Width()
Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.
.outer­Width()
Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements or set the outer width of every matched element.

Events - Browser

.resize( [handler])
Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.
.scroll( [handler])
Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

Events - Handler Attachment

jQuery.proxy( function, context [,additionalArguments])
Takes a function and returns a new one that will always have a particular context.
.off(events [,selector][,handler])
Remove an event handler.
.on(events [,selector] [,data] [,handler])
Attach an event handler function for one or more events to the selected elements.
.one(events [,data], handler)
Attach a handler to an event for the elements. The handler is executed at most once per element per event type
.trigger(eventType [,extraParameters])
Execute all handlers and behaviors attached to the matched elements for the given event type.
.triggerHandler(eventType [,extraParameters])
Execute all handlers attached to an element for an event
*Most event methods have additional overloads

Events - Forms

.blur( handler)
Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.
.change( handler)
Bind an event handler to the “change” JavaScript event, or trigger that event on an element.
.focus( handler)
Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.
.focusin( handler)
Bind an event handler to the “focusin” event.
.focusout( handler)
Bind an event handler to the “focusout” JavaScript event.
.select( handler)
Bind an event handler to the “select” JavaScript event, or trigger that event on an element.
.submit( handler)
Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

Traversing - Filtering

.eq( index)
Reduce the set of matched elements to the one at the specified index.
.filter( selector)
Reduce the set of matched elements to those that match the selector or pass the function’s test.
.first()
Reduce the set of matched elements to the first in the set.
.has( selector)
Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
.is( select­or|­fun­cti­on|­sel­ect­ion­|el­ements)
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
.last()
Reduce the set of matched elements to the final one in the set.
.map( callback)
Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
.not( selector)
Remove elements from the set of matched elements.
.slice( start [,end])
Reduce the set of matched elements to a subset specified by a range of indices.

Manipu­lation

.after( content|function)
Insert content, specified by the parameter, after each element in the set of matched elements.
.append( content|function)
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
.appendTo( target)
Insert every element in the set of matched elements to the end of the target.
.before( content|function)
Insert content, specified by the parameter, before each element in the set of matched elements.
.clone( [withDataAndEvents])
Create a deep copy of the set of matched elements.
.detach( [selector])
Remove the set of matched elements from the DOM.
.empty()
Remove all child nodes of the set of matched elements from the DOM.
.insertAfter( target)
Insert every element in the set of matched elements after the target
.insertBefore( target)
Insert every element in the set of matched elements before the target.
.prepend( content| function)
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
.prependTo( target)
Insert every element in the set of matched elements to the beginning of the target.
.remove( [selector])
Remove the set of matched elements from the DOM.
.replaceAll( target)
Replace each target element with the set of matched elements.
.replaceWith( newContent| function)
Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
.text()
Get the combined text contents of each element in the set of matched elements, including their descen­dants, or set the text contents of the matched elements.
.unwrap( [selector])
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
.wrap( [wrappingElement| function])
Wrap an HTML structure around each element in the set of matched elements.
.wrapAll( [wrappingElement| function])
Wrap an HTML structure around all elements in the set of matched elements.
.wrapInner( [wrappingElement| function])
Wrap an HTML structure around the content of each element in the set of matched elements.
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Web Programming Cheat Sheet
          jQuery Cheat Sheet
          jQuery Mobile Cheat Sheet