Jquery Visual Cheat Sheet 1.4.2
Jquery Visual Cheat Sheet 1.4.2
2 SELECTORS ✼ CORE ✼ ATTRIBUTES ✼ CSS ✼ TRAVERSING ✼ MANIPULATION ✼ EVENTS ✼ EFFECTS ✼ AJAX ✼ UTILITIES
❉ ATTRIBUTES / 1. ATTR ❉ ATTRIBUTES / 5. VALUE .height() ❉ TRAVERSING / 2. TREE TRAVERSAL .prevUntil( [ selector ] ) ★
Get the current computed height for the first Int
.attr( attributeName ) .val() Get the ancestors of each element in the current jQ
element in the set of matched elements. .children( [ selector ] ) set of matched elements, optionally filtered by a
Get the value of an attribute for the first Obj Get the current value of the first element in Str | a
.innerHeight() Get the children of each element in the set of jQ selector.
element in the set of matched elements. the set of matched elements. matched elements, optionally filtered by a
Get the current computed height for the first Int selector. .siblings( [ selector ] )
.attr( attributeName, value ) .val( value ) element in the set of matched elements,
Obj jQ including padding but not border. Get the siblings of each element in the set of jQ
Set one or more attributes for the set of Set the value of each element in the set of .closest( selector ) matched elements, optionally filtered by a
matched elements. matched elements.
.innerWidth() Get the first ancestor element that matches the jQ selector.
.removeAttr() selector, beginning at the current element and
Get the current computed width for the first Int progressing up through the DOM tree.
jQ element in the set of matched elements,
Remove an attribute from each element in the ❉ CSS / 1. CSS
set of matched elements. including padding but not border. .closest( selectors, [ context ] ) ★ ❉ TRAVERSING / 2. MISCELLANEOUS
.css( propertyName ) .outerHeight()
Str Get the first ancestor element that matches the jQ .add()
Get the value of a style property for the first jQ
❉ ATTRIBUTES / 2. CLASS Get the current computed height for the first selector, beginning at the current element and
element in the set of matched elements. Int Add elements to the set of matched elements.
element in the set of matched elements, progressing up through the DOM tree.
including padding, border, and optionally .add( selectors, [ context ] ) ★
.addClass( class ) .css( propertyName, value )
margin. .find( selector ) jQ
jQ Set one or more CSS properties for the set of jQ
Adds the specified class(es) to each of the set of Get the descendants of each element in the jQ Add elements to the set of matched elements.
matched elements. matched elements. .outerWidth()
current set of matched elements, filtered by a
Get the current computed width for the first Int selector. .andSelf()
element in the set of matched elements, Add the previous set of elements on the stack to jQ
.hasClass( class ) ❉ CSS / 2. POSITIONING including padding and border. .next( [ selector ] )
0-1 the current set.
Determine whether any of the matched Get the immediately following sibling of each jQ
elements are assigned the given class. .scrollLeft() .width( value ) .contents()
element in the set of matched elements, optionally
Set the CSS width of each element in the set of jQ jQ
Get the current horizontal position of the Int filtered by a selector. Get the children of each element in the set of
.removeClass( class ) scroll bar for the first element in the set of matched elements. matched elements, including text nodes.
matched elements. .nextAll( [ selector ] )
Remove a single class, multiple classes, or all jQ .width()
classes from each element in the set of matched Get all following siblings of each element in the jQ .end()
.scrollLeft( value ) Get the current computed width for the first Int
elements. set of matched elements, optionally filtered by a End the most recent filtering operation in the jQ
Set the current horizontal position of the element in the set of matched elements. selector. current chain and return the set of matched
jQ
.toggleClass( class, switch ) scroll bar for each of the set of matched elements to its previous state.
elements. .nextUntil( [ selector ] )
Add or remove one or more classes from each
element in the set of matched elements, jQ ❉ TRAVERSING / 1. FILTERING Get all following siblings of each element up to jQ
depending on either the class's presence or the
.offset() but not including the element matched by the
value of the switch argument. Get the current coordinates of the first Obj .eq( - index ) ★ selector. ❉ MANIPULATION / 1. INSIDE
element in the set of matched elements, {top, left} jQ
relative to the document. Reduce the set of matched elements to the one at .offsetParent() .append( content )
the specified index. jQ
❉ ATTRIBUTES / 3. HTML Get the closest ancestor element that is Insert content, specified by the parameter, to the jQ
.offset( coordinates ) positioned. end of each element in the set of matched
.eq( index ) elements.
.html() Set the current coordinates of every element jQ
in the set of matched elements, relative to Reduce the set of matched elements to the one at jQ .parent( [ selector ] )
Get the HTML contents of the first element in Str .append( function(index, html) ) ★
the document. the specified index. Get the parent of each element in the current set jQ
the set of matched elements. of matched elements, optionally filtered by a
.position() .filter( selector ) selector.
Insert content, specified by the parameter, to the jQ
Obj jQ end of each element in the set of matched
.html( htmlString ) Get the current coordinates of the first Reduce the set of matched elements to those that elements.
jQ element in the set of matched elements, {top, left} match the selector or pass the function's test. .parents( [ selector ] )
Set the HTML contents of each element in the
set of matched elements. relative to the offset parent. Get the ancestors of each element in the current jQ .appendTo( target )
.is( selector ) set of matched elements, optionally filtered by a
.scrollTop() Insert every element in the set of matched jQ
Check the current matched set of elements 0-1 selector.
elements to the end of the target.
Get the current vertical position of the scroll Int against a selector and return true if at least one
❉ ATTRIBUTES / 4. TEXT bar for the first element in the set of of these elements matches the selector. .parentsUntil( [ selector ] ) ★
.prepend( content )
matched elements.
.text() .map( callback(index, domEl) ) Get the ancestors of each element in the current jQ Insert content, specified by the parameter, to the jQ
.scrollTop( value ) set of matched elements, up to but not including beginning of each element in the set of matched
Get the combined text contents of each element Str Pass each element in the current matched set jQ the element matched by the selector. elements.
in the set of matched elements, including their Set the current vertical position of the scroll through a function, producing a new jQuery
descendants. bar for each of the set of matched elements. object containing the return values. .prependTo( target )
.prev( [ selector ] )
.text( textString ) .not() Get the immediately preceding sibling of each jQ Insert content, specified by the parameter, to the jQ
jQ jQ element in the set of matched elements, optionally end of each element in the set of matched
Set the content of each element in the set of ❉ CSS / 3. HEIGHT & WIDTH Remove elements from the set of matched
filtered by a selector. elements.
matched elements to the specified text. elements.
.height( value ) .prevAll( [ selector ] )
.slice( start, [ end ] )
Set the CSS height of every matched jQ Get all preceding siblings of each element in the
Reduce the set of matched elements to a subset jQ jQ
element. set of matched elements, optionally filtered by a
specified by a range of indices.
selector.
jQUERY 1.4.2 SELECTORS ✼ CORE ✼ ATTRIBUTES ✼ CSS ✼ TRAVERSING ✼ MANIPULATION ✼ EVENTS ✼ EFFECTS ✼ AJAX ✼ UTILITIES
❉ MANIPULATION / 2. OUTSIDE .replaceWith( function ) .live( eventType, eventData, handler ) ★ .mousedown( handler(eventObject) ) .keypress( handler(eventObject) )
Replace each element in the set of matched jQ Bind an event handler to the "mousedown" jQ Bind an event handler to the "keypress" jQ
.after( content ) Attach a handler to the event for all elements jQ JavaScript event, or trigger that event on an
elements with the provided new content. JavaScript event, or trigger that event on an
jQ which match the current selector, now or in the element.
Insert content, specified by the parameter, after element.
.replaceAll() future.
each element in the set of matched elements.
jQ .mouseenter( handler(eventObject) ) .keyup( handler(eventObject) )
A selector expression indicating which element(s) .one( eventType, [ eventData ], handler
.after( function(index) ) ★ to replace. Bind an event handler to be fired when the jQ Bind an event handler to the "keyup" jQ
(eventObject) ) mouse enters an element, or trigger that handler JavaScript event, or trigger that event on an
Insert content, specified by the parameter, to the jQ jQ on an element.
Attach a handler to an event for the elements. element.
end of each element in the set of matched The handler is executed at most once per
elements. ❉ MANIPULATION / 5. REMOVING element. .mouseleave( handler(eventObject) )
Bind an event handler to be fired when the jQ
.before( content ) .detach( [ selector ] ) ★ .trigger( eventType, extraParameters) mouse leaves an element, or trigger that handler
❉ EVENTS / 6. EVENT OBJECT
Insert content, specified by the parameter, before jQ jQ Execute all handlers and behaviors attached to jQ on an element.
each element in the set of matched elements. Remove the set of matched elements from the
the matched elements for the given event type.
event.currentTarget
DOM. .mousemove( handler(eventObject) ) El
The current DOM element within the event
.before( function ) ★ .triggerHandler( eventType, Bind an event handler to the "mousemove" jQ bubbling phase.
.empty()
jQ extraParameters ) jQ JavaScript event, or trigger that event on an
Insert content, specified by the parameter, before Remove all child nodes of the set of matched jQ
element. event.data
each element in the set of matched elements. elements from the DOM. Execute all handlers attached to an element for
an event. Contains the optional data passed to Anything
.mouseout( handler(eventObject) ) jQuery.fn.bind when the current executing
.insertAfter( target ) .remove( [ selector ] )
.unbind( eventType, handler Bind an event handler to the "mouseout" jQ handler was bound.
Insert every element in the set of matched jQ Remove the set of matched elements from the jQ
(eventObject) ) ★ JavaScript event, or trigger that event on an
elements after the target. DOM. jQ element. event.isDefaultPrevented()
0-1
Remove a previously-attached event handler Returns whether event.preventDefault() was
.insertBefore( target ) .mouseover( handler(eventObject) )
from the elements. ever called on this event object.
Insert every element in the set of matched jQ
❉ MANIPULATION / 6. COPYING Bind an event handler to the "mouseover" jQ
event.
elements before the target. .undelegate() JavaScript event, or trigger that event on an
.clone( [ withDataAndEvents ] ) Remove a handler from the event for all elements element. isImmediatePropagationStopped()
jQ jQ 0-1
which match the current selector, now or in the Returns whether
Create a copy of the set of matched elements. .mouseup( handler(eventObject) )
❉ MANIPULATION / 3. AROUND future, based upon a specific set of root elements. event.stopImmediatePropagation() was ever
Bind an event handler to the "mouseup" jQ called on this event object.
.unwrap() ★ JavaScript event, or trigger that event on an
❉ EVENTS / 1. DOCUMENT LOADING element. event.isPropagationStopped()
Remove the parents of the set of matched jQ ❉ EVENTS / 3. MOUSE EVENTS 0-1
Returns whether event.stopPropagation() was
elements from the DOM, leaving the matched .load( handler(eventObject) ) ever called on this event object.
elements in their place. .click( handler(eventObject) )
Bind an event handler to the "load" JavaScript jQ ❉ EVENTS / 4. FORM EVENTS
Bind an event handler to the "click" JavaScript jQ event.pageX
event.
.wrap( wrappingElement ) event, or trigger that event on an element. The mouse position relative to the left edge of Num
.blur( handler(eventObject) )
Wrap an HTML structure around each element in jQ .ready( handler ) jQ the document.
.dblclick( handler(eventObject) ) Bind an event handler to the "blur" JavaScript
the set of matched elements. Specify a function to execute when the DOM is jQ
Bind an event handler to the "dblclick" event, or trigger that event on an element. event.pageY
fully loaded. jQ
.wrap( wrappingFunction ) ★ JavaScript event, or trigger that event on an
.change( handler(eventObject) ) The mouse position relative to the top edge of Num
jQ .unload( handler(eventObject) ) element. the document.
Wrap an HTML structure around each element in Bind an event handler to the "change" jQ
Bind an event handler to the "unload" JavaScript jQ
the set of matched elements. .focusin( handler(eventObject) ) JavaScript event, or trigger that event on an event.preventDefault()
event. jQ element. Undefined
Bind an event handler to the "focusin" JavaScript If this method is called, the default action
.wrapAll( wrappingElement ) event. of the event will not be triggered.
jQ .focus( handler(eventObject) )
Wrap an HTML structure around all elements in
.focusout( handler(eventObject) ) jQ event.relatedTarget
the set of matched elements. ❉ EVENTS / 2. HANDLER ATTACHMENT Bind an event handler to the "focus" JavaScript
Bind an event handler to the "focusout" jQ event, or trigger that event on an element. The other DOM element involved in the event, El
.wrapInner( wrappingElement ) .bind( eventType, [ eventData ], handler JavaScript event. if any.
jQ .select( handler(eventObject) )
Wrap an HTML structure around the content of (eventObject) ) jQ jQ
each element in the set of matched elements. .hover( handlerIn(eventObject), Bind an event handler to the "select" JavaScript event.result
Attach a handler to an event for the elements. event, or trigger that event on an element.
handlerOut(eventObject) ) This attribute contains the last value returned Obj
.wrapInner( wrappingFunction ) ★ jQ by an event handler that was triggered by this
.delegate( selector, eventType, Bind two handlers to the matched elements, to be .submit( handler(eventObject) )
jQ executed when the mouse pointer enters and event, unless the value was undefined.
Wrap an HTML structure around the content of handler ) ★ Bind an event handler to the "submit" JavaScript jQ
each element in the set of matched elements. leaves the elements.
jQ event, or trigger that event on an element. event.stopImmediatePropagation()
Attach a handler to one or more events for all
elements that match the selector, now or in the .hover( handler(eventObject) ) ★ Prevents other event handlers from being
future, based on a specific set of root elements. called.
Bind a single handler to the matched elements, to jQ ❉ EVENTS / 5 KEYBOARD EVENTS
❉ MANIPULATION / 4. REPLACING
be executed when the mouse pointer enters or event.stopPropagation()
.die() ★ .keydown( handler(eventObject) )
leaves the elements.
.replaceWith( newContent ) jQ Prevents the event from bubbling up the DOM
jQ Remove all event handlers previously attached Bind an event handler to the "keydown" jQ tree, preventing any parent handlers from
Replace each element in the set of matched JavaScript event, or trigger that event on an
using .live() from the elements. being notified of the event.
elements with the provided new content. element.
jQUERY 1.4.2 SELECTORS ✼ CORE ✼ ATTRIBUTES ✼ CSS ✼ TRAVERSING ✼ MANIPULATION ✼ EVENTS ✼ EFFECTS ✼ AJAX ✼ UTILITIES
event.target .fadeOut( [ duration ], [ callback ] ) jQuery.post( url, [ data ], [ success jQuery.browser jQuery.map( array, callback
El
The DOM element that initiated the event. Hide the matched elements by fading them jQ (data, textStatus, XMLHttpRequest) ], Contains flags for the useragent, read from (elementOfArray, indexInArray) ) a
to transparent. [ dataType ] ) XMLHR navigator.userAgent. While jQuery.browser Map Translate all items in an array or array-
event.timeStamp will not be removed from future versions of like object to another array of items.
.fadeTo( duration, opacity, Load data from the server using a HTTP
This attribute returns the number of jQuery, every effort to use jQuery.support
Num POST request.
milliseconds since January 1, 1970, when the [ callback ] ) jQ and proper feature detection should be made. jQuery.merge( first, second )
event is triggered. Adjust the opacity of the matched elements. Merge the contents of two arrays together a
jQuery.browser.version
into the first array.
event.type ❉ AJAX / 3. AJAX EVENT HANDLERS Returns the version number of the rendering String
Str
Describes the nature of the event. engine for the user's browser. jQuery.noop() ★
❉ EFFECTS / 4. CUSTOM Function
.ajaxComplete( handler(event, jQuery.contains( container,
event.which An empty function.
.animate( properties, options ) XMLHttpRequest, ajaxOptions) ) jQ contained )
For key or button events, this attribute Str 0-1
indicates the specific button or key that was Perform a custom animation of a set of CSS jQ Register a handler to be called when Ajax Check to see if a DOM node is within another jQuery.parseJSON( json ) ★
pressed. properties. requests complete. DOM node. Object
Takes a well-formed JSON string and
.delay( duration, [ queueName ] ) jQuery.each( collection, callback returns the resulting JavaScript object.
jQ
.ajaxError( handler(event,
Set a timer to delay execution of subsequent XMLHttpRequest, ajaxOptions, (indexInArray, valueOfElement) ) jQuery.proxy( function, context ) ★
❉ EVENTS / 6. BROWSER EVENTS items in the queue.
Object
thrownError) ) jQ Iterates through the array displaying each Function
.error( handler(eventObject) ) number as both a word and numeral Takes a function and returns a new one
.stop( [ clearQueue ], [ jumpToEnd ] ) Register a handler to be called when Ajax that will always have a particular context.
Bind an event handler to the "error" jQ jQ requests complete with an error. jQuery.extend( target, [ object1 ],
Stop the currently-running animation on the
JavaScript event. matched elements. [ objectN ] ) jQuery.queue( element,
.ajaxSend( handler(event, Object
.resize( handler(eventObject) ) Merge the contents of two or more objects [ queueName ] ) a
jQuery.fx.off XMLHttpRequest, ajaxOptions) )
0-1 jQ together into the first object. Show the queue of functions to be executed
Bind an event handler to the "resize" jQ Globally disable all animations. Show a message before an Ajax request is on the matched element.
JavaScript event, or trigger that event on an jQuery.globalEval( code )
element. sent.
Execute some JavaScript code globally. jQuery.queue( element,
.scroll( handler(eventObject) ) queueName, newQueue )
❉ AJAX / 1. LOW-LEVEL INTERFACE .ajaxStart( handler() ) jQuery.grep( array, function a
Bind an event handler to the "scroll" jQ Show the queue of functions to be executed
Register a handler to be called when the first jQ (elementOfArray, indexInArray),
JavaScript event, or trigger that event on an jQuery.ajax( settings ) on the matched element.
element. Ajax request begins. [ invert ] )
XMLHR a
Perform an asynchronous HTTP (Ajax) jQuery.removeData( element,
request. Finds the elements of an array which satisfy a
filter function. The original array is not [ name ] ) jQ
.ajaxStop( handler() )
❉ EFFECTS / 1. BASIC jQuery.ajaxSetup( option ) jQ
affected. Remove a previously-stored piece of data.
0-1 Hide a loading message after all the Ajax
Set default values for future Ajax requests. requests have stopped. jQuery.inArray( value, array ) jQuery.support
.hide( duration, [ callback ] )
jQ Search for a specified value within an array Num
Hide the matched elements. A collection of properties that represent the Object
and return its index (or -1 if not found). presence of different browser features or
.ajaxSuccess( handler(event,
.show( duration, [ callback ] ) ❉ AJAX / 2. SHORTHAND METHODS jQuery.isArray( obj )
bugs.
jQ XMLHttpRequest, ajaxOptions) ) jQ
Display the matched elements. 0-1
jQuery.get( url, [ data ], [ callback Show a message when an Ajax request Determine whether the argument is an array. jQuery.trim( str )
completes successfully. Remove the whitespace from the beginning Object
(data, textStatus, XMLHttpRequest) ], jQuery.isEmptyObject( obj ) ★ and end of a string.
❉ EFFECTS / 2. SLIDING [ dataType ] ) XMLHR
0-1
Check to see if an object is empty (contains no
Load data from the server using a HTTP jQuery.unique()
.slideDown( [ duration ], [ callback ] ) GET request. ❉ AJAX / 4. DATA properties).
Sorts an array of DOM elements, in place,
Display the matched elements with a sliding jQ jQuery.isFunction( obj ) with the duplicates removed. Note that this jQ
.serialize()
motion. jQuery.getJSON( url, [ data ], 0-1 only works on arrays of DOM elements,
Encode a set of form elements as a string for String Determine if the argument passed is a
[ callback(data, textStatus) ] ) XMLHR Javascript function object.
not strings or numbers.
.slideToggle( [ duration ], [ callback ] ) submission.
jQ Load JSON-encoded data from the server
Display or hide the matched elements with a using a GET HTTP request. .serializeArray() jQuery.isPlainObject( obj ) ★
sliding motion.
Encode a set of form elements as an array of a 0-1
Check to see if an object is a plain object ❉ CREDITS
.slideUp( [ duration ], [ callback ] ) names and values. (created using "{}" or "new Object").
jQuery.getScript( url, [ success(data,
Hide the matched elements with a sliding jQ Designed by Antonio Lupetti © 2010
textStatus) ] ) XMLHR jQuery.isXMLDoc( node )
motion. • http://woorkup.com • http://twitter.com/woork
Load a JavaScript file from the server using ❉ UTILITIES / 1. UTILITIES Check to see if a DOM node is within an XML 0-1
a GET HTTP request, then execute it. document (or is an XML document). jQuery is © of John Resig and the jQuery Team.