JQUERY 1.3 VISUAL CHEAT SHEET & SELECTORS & CORE & ATTRIBUTES & TRAVERSING & MANIPULATION & CSS & EVENTS & EFFECTS & AJAX & UTILITIES & SELECTORS / 3. BASIC FILTERS & SELECTORS / 5. ATTRIBUTE FILTERS & SELECTORS / 7. VISIBILITY FILTERS LEGEND C a<> Array El Element :first :hidden a [attribute] a a a Array of i Matches the first selected element. Matches all elements that are hidden. F Function Matches elements that have the specified attribute. x a Array of i (s) Num Number :visible T Notes :last a Int Integer a Matches all elements that are visible. Matches the last selected element. [attribute=value] Deprecated in 0-1 Boolean =' a Matches elements that have the specified attribute jQuery 1.3 with a certain value. :not(selector) Designed by Antonio Lupetti a Filters out all elements matching the given " http://woork.blogspot.com " http://www.twitter.com/woork selector. [attribute!=value] & SELECTORS / 8. FORMS Matches elements that either don't have the a :even specified attribute or do have the specified a :input attribute but not with a certain value. Matches even elements, zero-indexed. a & SELECTORS / 1. BASIC Matches all input, textarea, select and button elements. [attribute^=value] #id :odd a :text a a Matches elements that have the specified attribute a Matches a single element with the given id Matches odd elements, zero-indexed. Matches all input elements of type text. and it starts with a certain value. attribute. :password a :eq(index) element a Matches all input elements of type password. a [attribute$=value] Matches a single element by its index. Matches all elements with the given name. a Matches elements that have the specified attribute :radio a and it ends with a certain value. Matches all input elements of type radio. :gt(index) .class a a Matches all elements with an index above the :checkbox Matches all elements with the given class. given one. a [attribute*=value] Matches all input elements of type checkbox. a Matches elements that have the specified attribute :lt(index) .class.class and it contains a certain value. :submit a a a Matches all elements with an index below the Matches all elements with the given classes. Matches all input elements of type submit. given one. [attributeFilter1][attributeFilter2] :image a :header * [attributeFilterN] Matches all input elements of type image. a a a Matches all elements that are headers, like h1, Matches all elements. Matches elements that match all of the specified h2, h3 and so on. :reset attribute filters. a Matches all input elements of type reset. selector1, selector2, selectorN :animated a Matches the combined results of all the specified :button a Matches all elements that are currently being selectors. a animated. Matches all button elements and input elements of type button & SELECTORS / 6. CHILD FILTERS :file a Matches all input elements of type file. & SELECTORS / 2. HIERARCHY :nth-child(index/even/odd/equation) & SELECTORS / 4. CONTENT FILTERS Matches all elements that are the nth-child of their a parent or that are the parent's even or odd ancestor descendant children. :contains(text) a Matches all descendant elements specified by a & SELECTORS / 9. FORM FILTERS Matches elements which contain the given text. "descendant" of elements specified by "ancestor". :first-child a Matches all elements that are the first child of their :enabled parent > child :empty a parent. a Matches all elements that are enabled. a Matches all child elements specified by "child" of Matches all elements that have no children elements specified by "parent. (including text nodes). :disabled :last-child a Matches all elements that are disabled. prev + next :has(selector) a Matches all elements that are the last child of their a a Matches all next elements specified by "next" that Matches elements which contain at least one parent. are next to elements specified by "prev". element that matches the specified selector. :checked a Matches all elements that are checked. :parent :only-child prev ~ siblings a a Matches all elements that are parents - they have Matches all elements that are the only child of :selected a Matches all sibling elements after the "prev" a child elements, including text. their parent. element that match the filtering "siblings" selector. Matches all elements that are selected. JQUERY 1.3 VISUAL CHEAT SHEET & SELECTORS & CORE & ATTRIBUTES & TRAVERSING & MANIPULATION & CSS & EVENTS & EFFECTS & AJAX & UTILITIES & CORE / 1. THE JQUERY FUNCTION & CORE / 3. DATA & ATTRIBUTES / 1. ATTR & ATTRIBUTES / 3. HTML data( name ) html( ) jQuery( expression, context ) attr( name ) Any Returns value at named data store for the Get the html contents (innerHTML) of the first This function accepts a string containing a CSS jQuery Access a property on the first matched element. element, as set by data(name, value). matched element. This property is not available selector which is then used to match a set of This method makes it easy to retrieve a on XML documents (although it will work for elements. property value from the first matched element. XHTML documents). Object If the element does not have an attribute with String T How to use: data( name, value ) such a name, undefined is returned. jQuery jQuery( html, ownerDocument ) Stores the value in the named spot. $("p").click(function () { jQuery Create DOM elements on-the-fly from the T Attributes include title, alt, src, href, width, var htmlStr = $(this).html(); provided String of raw HTML. style, etc. $(this).text(htmlStr); }); removeData( name ) jQuery jQuery( elements ) Removes named data store from an element. jQuery attr( properties ) Wrap jQuery functionality around a single or an html( val ) jQuery array of DOM Element(s) . Set a key/value object as properties to all Set the html contents of every matched element. matched elements. This property is not available on XML queue( name ) documents (although it will work for XHTML a Returns a reference to the first element's queue x jQuery( callback ) documents). jQuery (which is an array of functions). attr( key, value ) jQuery A shorthand for $(document).ready(). jQuery T How to use: Set a single property to a value, on all matched elements. $("div").html(" queue( name, callback ) Hello jQuery Adds a new function, to be executed, onto the Again"); end of the queue of all matched elements. attr( key, fn ) & CORE / 2. OBJECT ACCESSORS jQuery Set a single property to a computed value, on all matched elements. queue( name, queue ) each( callback ) jQuery jQuery Replaces the queue of all matched element with Execute a function within the context of every & ATTRIBUTES / 4. TEXT this new queue (the array of functions). removeAttr( name ) matched element. jQuery Remove an attribute from each of the matched elements. text( ) size( ) dequeue( name ) Num Get the combined text contents of all matched The number of elements in the jQuery object. jQuery Removes a queued function from the front of the elements. queue and executes it. String length T How to use: & ATTRIBUTES / 2. CLASS Num The number of elements in the jQuery object. var str = $("p:first").text(); $("p:last").html(str); selector addClass( class ) & CORE / 4. PLUGIN String A selector representing selector originally passed jQuery Adds the specified class(es) to each of the set of text( val ) to jQuery(). matched elements. jQuery jQuery.fn.extend( object ) Set the text contents of all matched elements. context jQuery Extends the jQuery element set to provide new The DOM node context originally passed to jQuery methods (used to make a typical jQuery plugin). hasClass( class ) El () (if none was passed then context will be equal to 0-1 Returns true if the specified class is present on the document). at least one of the set of matched elements. jQuery.extend( object ) & ATTRIBUTES / 5. VALUE eq( position ) jQuery Extends the jQuery object itself. jQuery Reduce the set of matched elements to a single removeClass( class ) element. val( ) jQuery Removes all or the specified class(es) from the Get the input value of the first matched element. get( ) set of matched elements. a Access all matched DOM elements. T How to use: & CORE / 5. INTEROPERABILITY String | a<> $("input").keyup(function () { toggleClass( class ) get( index ) var value = $(this).val(); jQuery Adds the specified class if it is not present, El Access a single matched DOM element at a jQuery.noConflict( ) $("p").text(value); removes the specified class if it is present. specified index in the matched set. jQuery Run this function to give control of the $ variable }).keyup(); back to whichever library first implemented it. index( subject ) toggleClass( class, switch ) val( val ) Searches every matched element for the object and jQuery Num jQuery.noConflict( extreme ) Adds the specified class if the switch is true, returns the index of the element, if found, starting Set the text contents of all matched elements. jQuery removes the specified class if the switch is false. with zero. If a jQuery object is passed, only the jQuery Checks, or selects, all the radio buttons, Extends the jQuery object itself. Use with first element is checked. checkboxes, and select options that match the set discretion. of values. JQUERY 1.3 VISUAL CHEAT SHEET & SELECTORS & CORE & ATTRIBUTES & TRAVERSING & MANIPULATION & CSS & EVENTS & EFFECTS & AJAX & UTILITIES & TRAVERSING / 1. FILTERING & TRAVERSING / 3. FINDING & MANIPULATION / 1. CONTENTS & MANIPULATION / 4. INSERTING AROUD eq( index ) html( ) add( expr ) wrap( html ) Reduce the set of matched elements to a single jQuery Get the html contents (innerHTML) of the first Adds more elements, matched by the given jQuery Wrap each matched element with the specified element. matched element. String expression, to the set of matched elements. HTML content. jQuery T This property is not available on XML T How to use: documents children( expr ) $("div").eq(2).addClass("blue"); wrap( elem ) Get a set of elements containing all of the unique jQuery html( val ) jQuery immediate children of each of the matched set of Wrap each matched element with the specified Set the html contents of every matched element. filter( expr ) elements. element. jQuery T This property is not available on XML Removes all elements from the set of matched elements that do not match the specified documents closest( expr ) expression(s). Get a set of elements containing the closest wrapAll( html ) jQuery jQuery text( ) parent element that matches the specified jQuery Wrap all the elements in the matched set into a T How to use: selector, the starting element included. String Get the combined text contents of all matched single wrapper element. $("div").css("background", "#c8ebcc") elements. .filter(".middle") contents( ) .css("border-color", "red"); Find all the child nodes inside the matched jQuery wrapAll( elem ) text( val ) elements (including text nodes), or the content jQuery jQuery Wrap all the elements in the matched set into a document, if the element is an iframe. Set the text contents of all matched elements. single wrapper element. filter( fn ) jQuery Removes all elements from the set of matched find( expr ) elements that do not match the specified function. wrapInner( html ) jQuery Searches for descendent elements that match the Wrap the inner child contents of each matched specified expression. jQuery element (including text nodes) with an HTML & MANIPULATION / 2. INSERTING INSIDE is( expr ) structure. Checks the current selection against an expression 0-1 next( expr ) and returns true, if at least one element of the append( content ) jQuery wrapInner( elem ) Get a set of elements containing the unique next selection fits the given expression. jQuery Append content to the inside of every matched siblings of each of the given set of elements. Wrap the inner child contents of each matched jQuery element. element (including text nodes) with a DOM element. map( callback ) appendTo( selector ) nextAll( expr ) Translate a set of elements in the jQuery object jQuery jQuery jQuery Append all of the matched elements to another, Find all sibling elements after the current into another set of values in a jQuery array specified, set of elements. element. (which may, or may not contain elements). prepend( content ) & MANIPULATION / 5. REPLACING offsetParent( ) jQuery not( expr ) Prepend content to the inside of every matched jQuery Returns a jQuery collection with the positioned element. jQuery Removes elements matching the specified parent of the first matched element. expression from the set of matched elements. replaceWith( content ) prependTo( selector ) Replaces all matched elements with the specified parent( expr ) jQuery jQuery HTML or DOM elements. This returns the Prepend all of the matched elements to another, slice( start, end ) JQuery element that was just replaced, which Get the direct parent of an element. If called on specified, set of elements. jQuery jQuery a set of elements, parent returns a set of their has been removed from the DOM. Selects a subset of the matched elements. unique direct parent elements. parents( expr ) replaceAll( selector ) jQuery Get a set of elements containing the unique & MANIPULATION / 3. INSERTING OUTSIDE Replaces the elements matched by the specified jQuery & TRAVERSING / 2. CHAINING ancestors of the matched set of elements (except selector with the matched elements. for the root element). after( content ) jQuery prev( expr ) andSelf( ) Insert content after each of the matched elements. Get a set of elements containing the unique Add the previous selection to the current selection. jQuery previous siblings of each of the matched set of & MANIPULATION / 6. REMOVING jQuery before( content ) elements. T How to use: jQuery Insert content before each of the matched elements. $("div").find("p").andSelf().addClass("border"); empty( ) prevAll( expr ) $("div").find("p").addClass("background"); jQuery Remove all child nodes from the set of matched jQuery Find all sibling elements in front of the current insertAfter( selector ) elements. element. jQuery Insert all of the matched elements after another, end( ) specified, set of elements. Revert the most recent 'destructive' operation, remove( expr ) jQuery siblings( expr ) changing the set of matched elements to its jQuery insertBefore( selector ) Removes all matched elements from the DOM. jQuery previous state (right before the destructive Get a set of elements containing all of the unique jQuery Insert all of the matched elements before another, operation). siblings of each of the matched set of elements. specified, set of elements. JQUERY 1.3 VISUAL CHEAT SHEET & SELECTORS & CORE & ATTRIBUTES & TRAVERSING & MANIPULATION & CSS & EVENTS & EFFECTS & AJAX & UTILITIES & MANIPULATION / 7. COPYING & CSS / 3. HEIGHT AND WIDTH & EVENTS / 2. EVENT HANDLING error( ) / error( fn ) jQuery Triggers / Bind a function to the error event of clone( ) height( ) bind( type, data, fn ) each matched element. jQuery Int Binds a handler to one or more events (like Clone matched DOM Elements and select the Get the current computed, pixel, height of the jQuery click) for each matched element. Can also bind clones. first matched element. focus( ) / focus( fn ) custom events. jQuery Triggers / Bind a function to the focus event of each matched element. clone( bool ) height( val ) jQuery one( type, data, fn ) jQuery Clone matched DOM Elements, and all their event Set the CSS height of every matched element. jQuery handlers, and select the clones. Binds a handler to one or more events to be keydown( ) / keydown( fn ) executed once for each matched element. jQuery Triggers / Bind a function to the keydown event of each matched element. width( ) Int Get the current computed, pixel, width of the trigger( event, data ) first matched element. keypress( ) / keypress( fn ) jQuery & CSS / 1. CSS Trigger an event on every matched element. jQuery Triggers / Bind a function to the keypress event of each matched element. width( val ) css( name ) jQuery String Set the CSS width of every matched element. triggerHandler( event, data ) Return a style property on the first matched keyup( ) / keyup( fn ) element. Triggers all bound event handlers on an jQuery Object Triggers / Bind a function to the keyup event of element (for a specific event type) WITHOUT each matched element. innerHeight( ) executing the browser's default actions, css( properties ) bubbling, or live events. jQuery Gets the inner height (excludes the border and Set a key/value object as style properties to all Int includes the padding) for the first matched load( fn ) matched elements. element. jQuery unbind( type, fn ) Binds a function to the load event of each jQuery matched element. css( name, value ) This does the opposite of bind, it removes bound innerWidth( ) events from each of the matched elements. jQuery Set a single style property to a value on all mousedown( fn ) matched elements. Gets the inner width (excludes the border and Int jQuery includes the padding) for the first matched Binds a function to the mousedown event of element. each matched element. & EVENTS / 3. INTERACTION HELPERS mouseenter( fn ) outerHeight( margin ) & CSS / 2. POSITIONING jQuery Bind a function to the mouseenter event of each Gets the outer height (includes the border and Int hover( over, out ) matched element. padding by default) for the first matched element. offset( ) Simulates hovering (moving the mouse on, and jQuery off, an object). This is a custom method which Object{top, left} mouseleave( fn ) Get the current offset of the first matched provides an 'in' to a frequent task. element, in pixels, relative to the document. jQuery Bind a function to the mouseleave event of each outerWidth( margin ) matched element. Get the outer width (includes the border and Int offsetParent( ) padding by default) for the first matched toggle( fn, fn2, fn3, fn4, ... ) element. jQuery mousemove( fn ) Returns a jQuery collection with the Append all of the matched elements to another, jQuery positioned parent of the first matched jQuery specified, set of elements. Bind a function to the mousemove event of each element. matched element. position( ) mouseout( fn ) & EVENTS / 1. PAGE LOAD Object{top, left} Gets the top and left position of an element jQuery Bind a function to the mouseout event of each relative to its offset parent. & EVENTS / 4. EVENT HELPERS matched element. ready( fn ) jQuery mouseover( fn ) scrollTop( ) blur( ) / blur( fn ) Binds a function to be executed whenever the jQuery Int DOM is ready to be traversed and manipulated. jQuery Gets the scroll top offset of the first matched Triggers / Bind a function to the blur event of Bind a function to the mouseover event of each element. each matched element. matched element. change( ) / change( fn ) mouseup( fn ) scrollTop( val ) jQuery jQuery Triggers / Bind a function to the chenge event of Bind a function to the mouseup event of each When a value is passed in, the scroll top jQuery & EVENTS / 2. LIVE EVENTS each matched element. matched element. offset is set to that value on all matched elements. click( ) / click( fn ) resize( fn ) live( type, fn ) scrollLeft( ) jQuery jQuery Binds a handler to an event (like click) for all Triggers / Bind a function to the click event of Bind a function to the resize event of each jQuery Int current - and future - matched element. Can also Gets the scroll left offset of the first matched each matched element. matched element. bind custom events. element. dblclick( ) / dblick( fn ) scroll( fn ) scrollLeft( val ) die( type, fn ) jQuery jQuery Triggers / Bind a function to the dblclick event Bind a function to the scroll event of each jQuery jQuery When a value is passed in, the scroll left offset This removes a bound live event. of each matched element. matched element. is set to that value on all matched elements. JQUERY 1.3 VISUAL CHEAT SHEET & SELECTORS & CORE & ATTRIBUTES & TRAVERSING & MANIPULATION & CSS & EVENTS & EFFECTS & AJAX & UTILITIES & EFFECTS / 2. SLIDING & EFFECTS / 5. CUSTOM & AJAX / 2. EVENTS select( ) / select( fn ) jQuery Triggers / Bind a function to the select event of animate( params, duration, easing, callback ) each matched element. slideDown( speed, callback ) ajaxComplete( callback ) A function for making custom animations. Reveal all matched elements by adjusting their Attach a function to be executed whenever an jQuery submit( ) / submit( fn ) height and firing an optional callback after AJAX request completes. T How to use: completion. jQuery Triggers / Bind a function to the submit event of T How to use: $("#go").click(function(){ jQuery each matched element. $("#block").animate({ $("#msg").ajaxComplete(function jQuery slideUp( speed, callback ) (event,request, settings){ width: "70%", unload( fn ) Hide all matched elements by adjusting their jQuery $(this).append("
Complete!
"); opacity: 0.4, jQuery height and firing an optional callback after Binds a function to the unload event of each }); }, 1500 ); completion. matched element. }); slideToggle( speed, callback ) ajaxError( callback ) animate( params, options ) jQuery Toggle the visibility of all matched elements by Attach a function to be executed whenever an jQuery jQuery adjusting their height and firing an optional AJAX request fails. & EFFECTS / 1. BASICS A function for making custom animations. callback after completion. show( ) ajaxSend( callback ) stop( clearQueue, gotoEnd ) Displays each of the set of matched elements if Attach a function to be executed before an AJAX jQuery Stops all the currently running animations on all they are hidden. request is sent. jQuery the specified elements. & EFFECTS / 3. FADING T How to use: T How to use: jQuery $("p").show() $("#msg").ajaxSend(function(evt, request, fadeIn( speed, callback ) settings){ Fade in all matched elements by adjusting their $(this).append("
Starting request at " + show( speed, callback ) & AJAX / 1. AJAX REQUESTS opacity and firing an optional callback after settings.url + "
"); Show all matched elements using a graceful completion. jQuery }); animation and firing an optional callback after jQuery T How to use: completion. jQuery.ajax( options ) XMLHttpReq ajaxStart( callback ) $(document.body).click(function () { Load a remote page using an HTTP request. $("div:hidden:first").fadeIn("slow"); Attach a function to be executed whenever an jQuery hide( ) AJAX request begins and there is none already }); Hides each of the set of matched elements if they active. load( url, data, callback ) are shown. jQuery jQuery Load HTML from a remote file and inject it into fadeOut( speed, callback ) the DOM. T How to use: Fade out all matched elements by adjusting ajaxStop( callback ) jQuery $("p").hide() their opacity to 0, then setting display to "none" jQuery Attach a function to be executed whenever all and firing an optional callback after jQuery.get( url, data, callback, type ) AJAX requests have ended. completion. XMLHttpReq hide( speed, callback ) Load a remote page using an HTTP GET request. Hide all matched elements using a graceful 0-1 fadeTo( speed, opacity, callback ) animation and firing an optional callback after ajaxSuccess( callback ) Fade the opacity of all matched elements to a completion. jQuery Attach a function to be executed whenever an specified opacity and firing an optional callback jQuery.getJSON( url, data, callback, type ) AJAX request completes successfully. after completion. XMLHttpReq Load JSON data using an HTTP GET request. toggle( ) jQuery T How to use: Toggle displaying each of the set of matched $("p:first").click(function () { elements. jQuery.getScript( url, callback ) $(this).fadeTo("slow", 0.33); & AJAX / 3. MISC T How to use: jQuery XMLHttpReq Loads, and executes, a local JavaScript file }); using an HTTP GET request. $("button").click(function () { $("p").toggle(); jQuery.ajaxSetup( options ) }); jQuery.post( url, data, callback, type ) Setup global settings for AJAX requests. & EFFECTS / 4. SETTINGS XMLHttpReq Load a remote page using an HTTP POST toggle( switch ) request. serialize( ) Toggle displaying each of the set of matched jQuery jQuery.fx.off T How to use: elements based upon the switch (true shows all String Serializes a set of input elements into a string of Globally disable all animations. elements, false hides all elements). data. $.post("test.php", { func: "getNameAndTime" }, T How to use: 0-1 function(data){ serializeArray( ) toggle( speed, callback ) jQuery.fx.off = true; alert(data.name); // John Serializes all forms and form elements (like a