Jquery 1.5 Visual Cheat Sheet
Jquery 1.5 Visual Cheat Sheet
5 SELECTORS ✼ CORE ✼ ATTRIBUTES ✼ CSS ✼ TRAVERSING ✼ MANIPULATION ✼ EVENTS ✼ EFFECTS ✼ AJAX ✼ UTILITIES ✼ DEFERRED OBJECT
Designed by Antonio Lupetti © 2011 • http://woorkup.com • http://twitter.com/woork | jQuery is © of John Resig and the jQuery Team.
VISUAL CHEAT SHEET
★ = NEW IN jQUERY 1.5 / f(x) = FUNCTION / a = ARRAY / jQ = jQUERY / El = ELEMENT / 0-1 = BOOLEAN / Obj = OBJECT / NUM = NUMBER / Str = STRING
❉ MANIPULATION / 3. AROUND ❉ EVENTS / 1. DOCUMENT LOADING ❉ EVENTS / 3. MOUSE EVENTS ❉ EVENTS / 4. FORM EVENTS event.pageX
The mouse position relative to the left edge of Num
.unwrap() .click( handler(eventObject) ) .blur( handler(eventObject) ) the document.
.load( handler(eventObject) )
Bind an event handler to the "click" JavaScript jQ Bind an event handler to the "blur" JavaScript jQ
Remove the parents of the set of matched Bind an event handler to the "load" JavaScript jQ
jQ event, or trigger that event on an element. event.pageY
elements from the DOM, leaving the matched event. event, or trigger that event on an element.
The mouse position relative to the top edge of Num
elements in their place. .change( handler(eventObject) )
.dblclick( handler(eventObject) ) the document.
.ready( handler ) Bind an event handler to the "change"
.wrap( wrappingElement ) Bind an event handler to the "dblclick" jQ jQ
Specify a function to execute when the DOM is jQ JavaScript event, or trigger that event on an
jQ
JavaScript event, or trigger that event on an event.preventDefault()
Wrap an HTML structure around each element in fully loaded. element. element. If this method is called, the default action
the set of matched elements. of the event will not be triggered.
.unload( handler(eventObject) ) .focusin( handler(eventObject) ) .focus( handler(eventObject) )
.wrap( wrappingFunction ) jQ jQ Bind an event handler to the "focus" JavaScript jQ event.relatedTarget
Bind an event handler to the "unload" JavaScript Bind an event handler to the "focusin" JavaScript
Wrap an HTML structure around each element in jQ event. event. event, or trigger that event on an element. The other DOM element involved in the event, El
the set of matched elements. if any.
.select( handler(eventObject) )
.focusout( handler(eventObject) )
Bind an event handler to the "select" JavaScript jQ
.wrapAll( wrappingElement ) jQ event.result
❉ EVENTS / 2. HANDLER ATTACHMENT Bind an event handler to the "focusout"
event, or trigger that event on an element.
Wrap an HTML structure around all elements in jQ JavaScript event. This attribute contains the last value returned Obj
the set of matched elements. .bind( eventType, [ eventData ], handler .submit( handler(eventObject) ) by an event handler that was triggered by thisAnything
.hover( handlerIn(eventObject), jQ event, unless the value was undefined.
.wrapInner( wrappingElement ) (eventObject) ) jQ
handlerOut(eventObject) )
Bind an event handler to the "submit" JavaScript
Attach a handler to an event for the elements. jQ event, or trigger that event on an element.
Wrap an HTML structure around the content of jQ Bind two handlers to the matched elements, to be event.stopImmediatePropagation()
each element in the set of matched elements. executed when the mouse pointer enters and Prevents other event handlers from being
.delegate( selector, eventType, leaves the elements. ❉ EVENTS / 5 KEYBOARD EVENTS called.
.wrapInner( wrappingFunction ) handler )
jQ jQ .hover( handler(eventObject) ) .keydown( handler(eventObject) ) event.stopPropagation()
Wrap an HTML structure around the content of Attach a handler to one or more events for all
each element in the set of matched elements. elements that match the selector, now or in the Bind a single handler to the matched elements, to jQ Bind an event handler to the "keydown" jQ Prevents the event from bubbling up the DOM
future, based on a specific set of root elements. be executed when the mouse pointer enters or JavaScript event, or trigger that event on an tree, preventing any parent handlers from
leaves the elements. element. being notified of the event.
❉ MANIPULATION / 4. REPLACING .die() .mousedown( handler(eventObject) ) .keypress( handler(eventObject) ) event.target
Remove all event handlers previously attached jQ El
.replaceWith( newContent ) Bind an event handler to the "mousedown" jQ Bind an event handler to the "keypress" jQ The DOM element that initiated the event.
using .live() from the elements. JavaScript event, or trigger that event on an JavaScript event, or trigger that event on an
Replace each element in the set of matched jQ
element. element. event.timeStamp
elements with the provided new content. .live( eventType, eventData, handler )
.mouseenter( handler(eventObject) ) .keyup( handler(eventObject) ) This attribute returns the number of Num
.replaceWith( function ) Attach a handler to the event for all elements jQ milliseconds since January 1, 1970, when the
Bind an event handler to be fired when the Bind an event handler to the "keyup" JavaScript jQ
jQ which match the current selector, now or in the jQ event is triggered.
Replace each element in the set of matched future. mouse enters an element, or trigger that handler event, or trigger that event on an element.
elements with the provided new content. on an element.
event.type
Str
.replaceAll() .one( eventType, [ eventData ], handler ❉ EVENTS / 6. EVENT OBJECT Describes the nature of the event.
.mouseleave( handler(eventObject) )
jQ (eventObject) ) jQ
A selector expression indicating which element(s) Bind an event handler to be fired when the jQ
Attach a handler to an event for the elements. event.currentTarget event.which
to replace. mouse leaves an element, or trigger that handler
The handler is executed at most once per element. on an element. The current DOM element within the event El For key or button events, this attribute Str
bubbling phase. indicates the specific button or key that was
❉ MANIPULATION / 5. REMOVING .mousemove( handler(eventObject) ) pressed.
.trigger( eventType, extraParameters)
jQ Bind an event handler to the "mousemove"
event.data
Execute all handlers and behaviors attached to jQ
.detach( [ selector ] ) the matched elements for the given event type. JavaScript event, or trigger that event on an Contains the optional data passed to
jQ element. jQuery.fn.bind when the current executing ❉ EVENTS / 6. BROWSER EVENTS
Remove the set of matched elements from the handler was bound.
DOM. .triggerHandler( eventType, .mouseout( handler(eventObject) ) .error( handler(eventObject) )
extraParameters ) event.isDefaultPrevented() jQ
.empty() jQ Bind an event handler to the "mouseout" jQ 0-1 Bind an event handler to the "error"
Execute all handlers attached to an element for JavaScript event, or trigger that event on an Returns whether event.preventDefault() was JavaScript event.
Remove all child nodes of the set of matched jQ ever called on this event object.
an event. element.
elements from the DOM. .resize( handler(eventObject) )
.mouseover( handler(eventObject) ) event.
.remove( [ selector ] ) .unbind( eventType, handler Bind an event handler to the "resize" jQ
Bind an event handler to the "mouseover"
isImmediatePropagationStopped()
jQ (eventObject) ) jQ jQ 0-1 JavaScript event, or trigger that event on an
Remove the set of matched elements from the JavaScript event, or trigger that event on an Returns whether element.
DOM. Remove a previously-attached event handler element. event.stopImmediatePropagation() was ever
from the elements. called on this event object. .scroll( handler(eventObject) )
.mouseup( handler(eventObject) )
❉ MANIPULATION / 6. COPYING .undelegate() event.isPropagationStopped() Bind an event handler to the "scroll" jQ
Bind an event handler to the "mouseup" jQ 0-1 JavaScript event, or trigger that event on an
Remove a handler from the event for all elements JavaScript event, or trigger that event on an Returns whether event.stopPropagation() was
jQ element.
.clone( [ withDataAndEvents ] ) which match the current selector, now or in the element. ever called on this event object.
jQ
Create a deep copy of the set of matched elements. future, based upon a specific set of root elements.
jQUERY 1.5 SELECTORS ✼ CORE ✼ ATTRIBUTES ✼ CSS ✼ TRAVERSING ✼ MANIPULATION ✼ EVENTS ✼ EFFECTS ✼ AJAX ✼ UTILITIES ✼ DEFERRED OBJECT
Designed by Antonio Lupetti © 2011 • http://woorkup.com • http://twitter.com/woork | jQuery is © of John Resig and the jQuery Team.
VISUAL CHEAT SHEET
★ = NEW IN jQUERY 1.5 / f(x) = FUNCTION / a = ARRAY / jQ = jQUERY / El = ELEMENT / 0-1 = BOOLEAN / Obj = OBJECT / NUM = NUMBER / Str = STRING
❉ EFFECTS / 1. BASIC .stop( [ clearQueue ], [ jumpToEnd ] ) .ajaxStop( handler() ) jQuery.grep( array, function jQuery.removeData( element,
Stop the currently-running animation on the jQ Hide a loading message after all the Ajax requests jQ (elementOfArray, indexInArray), [ name ] ) jQ
.hide( duration, [ callback ] ) matched elements. have stopped. [ invert ] ) Remove a previously-stored piece of data.
jQ a
Hide the matched elements. jQuery.fx.off .ajaxError( handler(event, Finds the elements of an array which satisfy a
0-1 jQuery.support
XMLHttpRequest, ajaxOptions, filter function. The original array is not
.show( duration, [ callback ] ) Globally disable all animations. affected. A collection of properties that represent the Obj
jQ thrownError) ) jQ
Display the matched elements. presence of different browser features or
Register a handler to be called when Ajax jQuery.inArray( value, array ) bugs.
❉ AJAX / 1. LOW-LEVEL INTERFACE requests complete with an error.
Search for a specified value within an array Num
❉ EFFECTS / 2. SLIDING jQuery.trim( str )
jQuery.ajax( url, [ settings ] ) ★ .ajaxSend( handler(event, and return its index (or -1 if not found). Obj
Remove the whitespace from the beginning
.slideDown( [ duration ], [ callback ] ) XMLHttpRequest, ajaxOptions) ) jQ and end of a string.
Perform an asynchronous HTTP (Ajax) jqXHR jQuery.isArray( obj ) 0-1
Display the matched elements with a sliding jQ request. Show a message before an Ajax request is sent.
Determine whether the argument is an array. jQuery.parseXML( data ) ★
motion.
jQuery.ajax( settings ) .ajaxSuccess( handler(event, XMLdoc
.slideToggle( [ duration ], [ callback ] ) jQuery.isEmptyObject( obj ) Parses a string into an XML document.
Perform an asynchronous HTTP (Ajax) jqXHR
XMLHttpRequest, ajaxOptions) ) jQ 0-1
jQ Check to see if an object is empty (contains no
Display or hide the matched elements with a request. Show a message when an Ajax request completes properties). jQuery.unique()
sliding motion. successfully. jQ
jQuery.ajaxSetup( option ) Sorts an array of DOM elements, in place,
.slideUp( [ duration ], [ callback ] ) 0-1 jQuery.isFunction( obj ) with the duplicates removed.
Set default values for future Ajax requests. 0-1
Hide the matched elements with a sliding jQ ❉ AJAX / 4. DATA Determine if the argument passed is a
Javascript function object.
motion.
.serialize() ❉ DEFERRED OBJECT ★
❉ AJAX / 2. SHORTHAND METHODS jQuery.isPlainObject( obj )
Encode a set of form elements as a string for Str
❉ EFFECTS / 3. FADING submission. Check to see if an object is a plain object 0-1
deferred.done( doneCallbacks )
jQuery.get( url, [ data ], [ callback(data, (created using "{}" or "new Object").
textStatus, XMLHttpRequest) ], Add handlers to be called when the Deferred
.fadeIn( [ duration ], [ callback ] ) .serializeArray()
[ dataType ] ) Deferred object is resolved.
Display the matched elements by fading them jQ jqXHR Encode a set of form elements as an array of a jQuery.isXMLDoc( node )
to opaque. Load data from the server using a HTTP GET Check to see if a DOM node is within an XML 0-1 deferred.fail( failCallbacks )
names and values.
request. document (or is an XML document). Add handlers to be called when the Deferred
.fadeOut( [ duration ], [ callback ] )
jQuery.getJSON( url, [ data ], Deferred object is rejected.
Hide the matched elements by fading them to jQ ❉ UTILITIES / 1. UTILITIES jQuery.makeArray( obj )
transparent. [ callback(data, textStatus) ] ) jqXHR Convert an array-like object into a true a deferred.isRejected()
Load JSON-encoded data from the server jQuery.browser JavaScript array. Determine whether a Deferred object has 0-1
.fadeTo( duration, opacity, [ callback ] ) using a GET HTTP request.
jQ Contains flags for the useragent, read from been rejected.
Adjust the opacity of the matched elements. navigator.userAgent. While jQuery.browser will Map jQuery.map( array, callback
jQuery.getScript( url, [ success(data, not be removed from future versions of jQuery, deferred.isResolved()
(elementOfArray, indexInArray) ) a
textStatus) ] ) jqXHR every effort to use jQuery.support and proper Determine whether a Deferred object has 0-1
❉ EFFECTS / 4. CUSTOM Load a JavaScript file from the server using a feature detection should be made. Translate all items in an array or array-like
been resolved.
object to another array of items.
GET HTTP request, then execute it. jQuery.browser.version
.animate( properties, options ) deferred.promise()
Str jQuery.merge( first, second ) Promise
Perform a custom animation of a set of CSS jQ .load( url, [ data ], [ complete Returns the version number of the rendering Return a Deferred's Promise object.
Merge the contents of two arrays together into a
properties. (responseText, textStatus, engine for the user's browser.
the first array. deferred.reject( args )
XMLHttpRequest) ] ) jQ
jQuery.contains( container, contained )
.delay( duration, [ queueName ] ) Deferred
Reject a Deferred object and call any
Set a timer to delay execution of subsequent jQ Load data from the server and place the Check to see if a DOM node is within another 0-1 jQuery.noop()
returned HTML into the matched element. failCallbacks with the given args.
items in the queue. DOM node. An empty function.
jQuery.post( url, [ data ], [ success deferred.rejectWith( context,[args] )
.stop( [ clearQueue ], [ jumpToEnd ] ) jQuery.each( collection, callback jQuery.parseJSON( json )
(data, textStatus, XMLHttpRequest) ], Reject a Deferred object and call any Deferred
Stop the currently-running animation on the jQ (indexInArray, valueOfElement) ) Obj Takes a well-formed JSON string and returns Obj failCallbacks with the given context and
[ dataType ] ) jqXHR
matched elements. Iterates through the array displaying each the resulting JavaScript object. args.
Load data from the server using a HTTP POST number as both a word and numeral
jQuery.fx.off request. jQuery.proxy( function, context ) deferred.resolve( args )
0-1
Globally disable all animations. jQuery.extend( target, [ object1 ], Takes a function and returns a new one that f(x) Resolve a Deferred object and call any Deferred
[ objectN ] ) Obj will always have a particular context. doneCallbacks with the given args.
❉ AJAX / 3. AJAX EVENT HANDLERS Merge the contents of two or more objects
❉ EFFECTS / 4. CUSTOM together into the first object. jQuery.queue( element, deferred.resolveWith( args )
.ajaxComplete( handler(event, [ queueName ] ) a
Resolve a Deferred object and call any Deferred
.animate( properties, options ) jQuery.globalEval( code ) doneCallbacks with the given context and
XMLHttpRequest, ajaxOptions) ) jQ Show the queue of functions to be executed on
Perform a custom animation of a set of CSS jQ args.
Execute some JavaScript code globally. the matched element.
properties. Register a handler to be called when Ajax
requests complete.
jQuery.hasData( element ) ★ jQuery.queue( element, queueName, deferred.then( doneCallbacks,
.delay( duration, [ queueName ] ) failCallbacks )
.ajaxStart( handler() ) 0-1 newQueue ) a
Deferred
Set a timer to delay execution of subsequent jQ Determine whether an element has any jQuery Add handlers to be called when the
Register a handler to be called when the first jQ data associated with it. Show the queue of functions to be executed on
items in the queue. Deferred object is resolved or rejected.
Ajax request begins. the matched element.