jQuery Visual Cheat Sheet (by WOORK)_1
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
485
On Slideshare
485
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JQUERY 1.3 VISUAL CHEAT SHEET SELECTORS CORE ATTRIBUTES TRAVERSING MANIPULATION CSS EVENTS EFFECTS AJAX UTILITIESLEGEND C SELECTORS / 3. BASIC FILTERS SELECTORS / 5. ATTRIBUTE FILTERS SELECTORS / 7. VISIBILITY FILTERS El Element a<> Array :first :hidden a<El> [attribute] a<El(s)> a<i> Array of i Matches the first selected element. a<El(s)> Matches all elements that are hidden. Fx Function Matches elements that have the specified attribute. a<i(s)> Array of i (s) Num Number T Notes :last :visible Int Integer a<El> a<El(s)> Matches the last selected element. [attribute=value] Matches all elements that are visible. Deprecated in 0-1 Boolean ✽ Matches elements that have the specified attribute a<El(s)> jQuery 1.3 with a certain value.Designed by Antonio Lupetti :not(selector) Filters out all elements matching the given a<El(s)>• http://woork.blogspot.com • http://www.twitter.com/woork selector. [attribute!=value] SELECTORS / 8. FORMS Matches elements that either dont have the a<El(s)> :even specified attribute or do have the specified a<El(s)> attribute but not with a certain value. :input Matches even elements, zero-indexed. SELECTORS / 1. BASIC Matches all input, textarea, select and button a<El(s)> elements.#id :odd [attribute^=value] a<El(s)> a<El(s)> :textMatches a single element with the given id a<El> Matches odd elements, zero-indexed. Matches elements that have the specified attribute a<El(s)> and it starts with a certain value. Matches all input elements of type text.attribute. :password :eq(index) a<El(s)>element a<El> Matches all input elements of type password. a<El(s)> Matches a single element by its index. [attribute$=value]Matches all elements with the given name. a<El(s)> Matches elements that have the specified attribute :radio and it ends with a certain value. a<El(s)> :gt(index) Matches all input elements of type radio..class a<El(s)> a<El(s)> Matches all elements with an index above theMatches all elements with the given class. :checkbox given one. [attribute*=value] a<El(s)> Matches all input elements of type checkbox. Matches elements that have the specified attribute a<El(s)>.class.class :lt(index) and it contains a certain value. :submit a<El(s)> Matches all elements with an index below the a<El(s)> a<El(s)>Matches all elements with the given classes. Matches all input elements of type submit. given one. [attributeFilter1][attributeFilter2] :image :header a<El(s)>* [attributeFilterN] a<El(s)> Matches all input elements of type image. a<El(s)> a<El(s)>Matches all elements. Matches all elements that are headers, like h1, Matches elements that match all of the specified h2, h3 and so on. attribute filters. :reset a<El(s)>selector1, selector2, selectorN Matches all input elements of type reset. :animatedMatches the combined results of all the specified a<El(s)> :button Matches all elements that are currently being a<El(s)>selectors. animated. a<El(s)> Matches all button elements and input elements of type button SELECTORS / 6. CHILD FILTERS :file a<El(s)> 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<El(s)> parent or that are the parents even or oddancestor descendant children.Matches all descendant elements specified by a<El(s)> :contains(text) a<El(s)> SELECTORS / 9. FORM FILTERS"descendant" of elements specified by "ancestor". Matches elements which contain the given text. :first-child Matches all elements that are the first child of their a<El(s)> :enabledparent > child :empty a<El(s)> a<El(s)> parent. Matches all elements that are enabled.Matches all child elements specified by "child" of Matches all elements that have no children a<El(s)>elements specified by "parent. (including text nodes). :last-child :disabled a<El(s)>prev + next :has(selector) Matches all elements that are the last child of their a<El(s)> Matches all elements that are disabled.Matches all next elements specified by "next" that a<El(s)> Matches elements which contain at least one a<El(s)> parent.are next to elements specified by "prev". element that matches the specified selector. :checked a<El(s)> Matches all elements that are checked.prev ~ siblings :parent :only-child a<El(s)> Matches all elements that are parents - they have a<El(s)> Matches all elements that are the only child of a<El(s)> :selectedMatches all sibling elements after the "prev" a<El(s)>element that match the filtering "siblings" selector. child elements, including text. their parent. Matches all elements that are selected.
  • 2. 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. HTMLjQuery( expression, context ) data( name ) attr( name ) html( )This function accepts a string containing a CSS Returns value at named data store for the Any Get the html contents (innerHTML) of the first jQuery Access a property on the first matched element.selector which is then used to match a set of element, as set by data(name, value). matched element. This property is not available This method makes it easy to retrieve aelements. on XML documents (although it will work for property value from the first matched element. XHTML documents). If the element does not have an attribute with Object String data( name, value ) such a name, undefined is returned. T How to use:jQuery( html, ownerDocument ) jQuery Stores the value in the named spot. $("p").click(function () {Create DOM elements on-the-fly from the jQueryprovided String of raw HTML. T Attributes include title, alt, src, href, width, var htmlStr = $(this).html(); style, etc. $(this).text(htmlStr); removeData( name ) });jQuery( elements ) jQuery Removes named data store from an element.Wrap jQuery functionality around a single or an jQuery attr( properties ) jQuery html( val )array of DOM Element(s) . Set a key/value object as properties to all matched elements. Set the html contents of every matched element. queue( name ) This property is not available on XML documents (although it will work for XHTMLjQuery( callback ) Returns a reference to the first elements queue a<Fx> jQuery documents).A shorthand for $(document).ready(). (which is an array of functions). attr( key, value ) jQuery Set a single property to a value, on all matched jQuery T How to use: elements. $("div").html(" queue( name, callback ) jQuery <span class=red>Hello Adds a new function, to be executed, onto the end of the queue of all matched elements. attr( key, fn ) <b>Again</b></span>"); CORE / 2. OBJECT ACCESSORS Set a single property to a computed value, on all jQuery matched elements.each( callback ) queue( name, queue ) jQuery Replaces the queue of all matched element with jQueryExecute a function within the context of every ATTRIBUTES / 4. TEXTmatched element. this new queue (the array of functions). removeAttr( name ) Remove an attribute from each of the matched jQuery elements.size( ) dequeue( name ) text( ) NumThe number of elements in the jQuery object. jQuery Get the combined text contents of all matched Removes a queued function from the front of the elements. queue and executes it. Stringlength ATTRIBUTES / 2. CLASS T How to use: NumThe number of elements in the jQuery object. var str = $("p:first").text(); $("p:last").html(str);selector CORE / 4. PLUGIN addClass( class )A selector representing selector originally passed String Adds the specified class(es) to each of the set of jQueryto jQuery(). matched elements. text( val ) jQuery jQuery.fn.extend( object ) Set the text contents of all matched elements.context Extends the jQuery element set to provide new jQueryThe DOM node context originally passed to jQuery El methods (used to make a typical jQuery plugin). hasClass( class )() (if none was passed then context will be equal to 0-1the document). Returns true if the specified class is present on at least one of the set of matched elements. jQuery.extend( object ) ATTRIBUTES / 5. VALUEeq( position ) jQuery jQuery Extends the jQuery object itself.Reduce the set of matched elements to a singleelement. removeClass( class ) Removes all or the specified class(es) from the jQuery val( )get( ) set of matched elements. Get the input value of the first matched element. a<El>Access all matched DOM elements. CORE / 5. INTEROPERABILITY T How to use: String | a<> toggleClass( class ) $("input").keyup(function () {get( index ) var value = $(this).val(); Adds the specified class if it is not present, jQueryAccess a single matched DOM element at a El jQuery.noConflict( ) removes the specified class if it is present. $("p").text(value);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 )Searches every matched element for the object and toggleClass( class, switch ) val( val )returns the index of the element, if found, starting Num jQuery.noConflict( extreme ) Adds the specified class if the switch is true, jQuery Set the text contents of all matched elements.with zero. If a jQuery object is passed, only the jQuery removes the specified class if the switch is false. Checks, or selects, all the radio buttons, jQuery Extends the jQuery object itself. Use withfirst element is checked. discretion. checkboxes, and select options that match the set of values.
  • 3. 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 AROUDeq( index ) add( expr ) html( ) wrap( html )Reduce the set of matched elements to a single Adds more elements, matched by the given jQuery Get the html contents (innerHTML) of the first Wrap each matched element with the specified jQueryelement. expression, to the set of matched elements. matched element. String HTML content. jQuery T This property is not available on XMLT How to use: documents $("div").eq(2).addClass("blue"); children( expr ) Get a set of elements containing all of the unique wrap( elem ) jQuery html( val ) jQuery immediate children of each of the matched set of Wrap each matched element with the specifiedfilter( expr ) elements. Set the html contents of every matched element. element. jQueryRemoves all elements from the set of matched T This property is not available on XMLelements that do not match the specified closest( expr ) documentsexpression(s). wrapAll( html ) Get a set of elements containing the closest jQuery jQuery parent element that matches the specified text( ) Wrap all the elements in the matched set into a jQueryT How to use: selector, the starting element included. Get the combined text contents of all matched String 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 ) elements (including text nodes), or the content text( val ) jQuery Wrap all the elements in the matched set into a jQuery document, if the element is an iframe. Set the text contents of all matched elements. single wrapper element.filter( fn )Removes all elements from the set of matched jQueryelements that do not match the specified function. find( expr ) jQuery wrapInner( html ) Searches for descendent elements that match the specified expression. Wrap the inner child contents of each matched jQuery element (including text nodes) with an HTMLis( expr ) MANIPULATION / 2. INSERTING INSIDE structure.Checks the current selection against an expression 0-1 next( expr )and returns true, if at least one element of the append( content ) Get a set of elements containing the unique next jQuery wrapInner( elem )selection fits the given expression. jQuery siblings of each of the given set of elements. Append content to the inside of every matched Wrap the inner child contents of each matched element. jQuery 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 Find all sibling elements after the current Append all of the matched elements to another,into another set of values in a jQuery array element. specified, set of elements.(which may, or may not contain elements). prepend( content ) MANIPULATION / 5. REPLACINGnot( expr ) offsetParent( ) Prepend content to the inside of every matched jQuery Returns a jQuery collection with the positioned jQueryRemoves elements matching the specified jQuery element. 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 ) Prepend all of the matched elements to another, jQuery HTML or DOM elements. This returns the jQueryslice( start, end ) Get the direct parent of an element. If called on jQuery specified, set of elements. JQuery element that was just replaced, which jQuerySelects a subset of the matched elements. a set of elements, parent returns a set of their has been removed from the DOM. unique direct parent elements. parents( expr ) replaceAll( selector ) Get a set of elements containing the unique MANIPULATION / 3. INSERTING OUTSIDE Replaces the elements matched by the specified jQuery jQuery TRAVERSING / 2. CHAINING ancestors of the matched set of elements (except selector with the matched elements. for the root element). after( content ) jQueryandSelf( ) prev( expr ) Insert content after each of the matched elements.Add the previous selection to the current selection. Get a set of elements containing the unique jQuery previous siblings of each of the matched set of MANIPULATION / 6. REMOVINGT How to use: jQuery elements. before( content ) jQuery Insert content before each of the matched elements. $("div").find("p").andSelf().addClass("border"); empty( ) $("div").find("p").addClass("background"); prevAll( expr ) jQuery jQuery Remove all child nodes from the set of matched Find all sibling elements in front of the current insertAfter( selector ) elements. element. Insert all of the matched elements after another, jQueryend( ) specified, set of elements.Revert the most recent destructive operation, remove( expr )changing the set of matched elements to its jQuery siblings( expr ) jQueryprevious state (right before the destructive jQuery insertBefore( selector ) Removes all matched elements from the DOM. Get a set of elements containing all of the unique jQueryoperation). siblings of each of the matched set of elements. Insert all of the matched elements before another, specified, set of elements.
  • 4. 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 ) Triggers / Bind a function to the error event of jQueryclone( ) height( ) bind( type, data, fn ) each matched element.Clone matched DOM Elements and select the jQuery Get the current computed, pixel, height of the Int Binds a handler to one or more events (like jQueryclones. first matched element. click) for each matched element. Can also bind focus( ) / focus( fn ) custom events. Triggers / Bind a function to the focus event of jQueryclone( bool ) height( val ) each matched element.Clone matched DOM Elements, and all their event jQuery jQuery one( type, data, fn ) Set the CSS height of every matched element.handlers, and select the clones. Binds a handler to one or more events to be jQuery keydown( ) / keydown( fn ) executed once for each matched element. Triggers / Bind a function to the keydown event jQuery width( ) of each matched element. Get the current computed, pixel, width of the Int first matched element. trigger( event, data ) keypress( ) / keypress( fn ) CSS / 1. CSS jQuery Trigger an event on every matched element. jQuery Triggers / Bind a function to the keypress event of each matched element.css( name ) width( val ) jQueryReturn a style property on the first matched String Set the CSS width of every matched element. triggerHandler( event, data )element. keyup( ) / keyup( fn ) Triggers all bound event handlers on an element (for a specific event type) WITHOUT Object Triggers / Bind a function to the keyup event of jQuery innerHeight( ) executing the browsers default actions, each matched element.css( properties ) bubbling, or live events.Set a key/value object as style properties to all jQuery Gets the inner height (excludes the border and Intmatched elements. includes the padding) for the first matched load( fn ) element. unbind( type, fn ) Binds a function to the load event of each jQuerycss( name, value ) This does the opposite of bind, it removes bound jQuery matched element.Set a single style property to a value on all jQuery innerWidth( ) events from each of the matched elements.matched elements. Gets the inner width (excludes the border and mousedown( fn ) Int includes the padding) for the first matched Binds a function to the mousedown event of jQuery element. each matched element. EVENTS / 3. INTERACTION HELPERS mouseenter( fn ) outerHeight( margin ) CSS / 2. POSITIONING jQuery Gets the outer height (includes the border and Int Bind a function to the mouseenter event of each padding by default) for the first matched hover( over, out ) matched element.offset( ) element. Simulates hovering (moving the mouse on, and jQueryGet the current offset of the first matched Object{top, left} off, an object). This is a custom method which mouseleave( fn )element, in pixels, relative to the document. provides an in to a frequent task. jQuery outerWidth( margin ) Bind a function to the mouseleave event of each Get the outer width (includes the border and matched element. IntoffsetParent( ) padding by default) for the first matched toggle( fn, fn2, fn3, fn4, ... )Returns a jQuery collection with the element. jQuery mousemove( fn ) jQuery Append all of the matched elements to another,positioned parent of the first matched specified, set of elements. Bind a function to the mousemove event of each jQueryelement. matched element.position( ) mouseout( fn ) Object{top, left} EVENTS / 1. PAGE LOADGets the top and left position of an element Bind a function to the mouseout event of each jQueryrelative to its offset parent. EVENTS / 4. EVENT HELPERS matched element. ready( fn )scrollTop( ) Binds a function to be executed whenever the jQuery blur( ) / blur( fn ) mouseover( fn )Gets the scroll top offset of the first matched Int DOM is ready to be traversed and manipulated. Triggers / Bind a function to the blur event of jQuery Bind a function to the mouseover event of each jQueryelement. each matched element. matched element.scrollTop( val ) change( ) / change( fn ) mouseup( fn ) Triggers / Bind a function to the chenge event of jQuery Bind a function to the mouseup event of each jQueryWhen a value is passed in, the scroll top jQuery EVENTS / 2. LIVE EVENTSoffset is set to that value on all matched each matched element. matched element.elements. live( type, fn ) click( ) / click( fn ) resize( fn )scrollLeft( ) Binds a handler to an event (like click) for all Triggers / Bind a function to the click event of jQuery Bind a function to the resize event of each jQuery jQueryGets the scroll left offset of the first matched Int current - and future - matched element. Can also each matched element. matched element.element. bind custom events. dblclick( ) / dblick( fn ) scroll( fn )scrollLeft( val ) die( type, fn ) jQuery jQuery jQuery Triggers / Bind a function to the dblclick event Bind a function to the scroll event of eachWhen a value is passed in, the scroll left offset jQuery matched element. This removes a bound live event. of each matched element.is set to that value on all matched elements.
  • 5. JQUERY 1.3 VISUAL CHEAT SHEET SELECTORS CORE ATTRIBUTES TRAVERSING MANIPULATION CSS EVENTS EFFECTS AJAX UTILITIES EFFECTS / 2. SLIDING EFFECTS / 5. CUSTOM AJAX / 2. EVENTSselect( ) / select( fn )Triggers / Bind a function to the select event of jQueryeach matched element. animate( params, duration, easing, callback ) slideDown( speed, callback ) ajaxComplete( callback ) Reveal all matched elements by adjusting their A function for making custom animations. Attach a function to be executed whenever an jQuerysubmit( ) / submit( fn ) height and firing an optional callback after AJAX request completes. completion. T How to use:Triggers / Bind a function to the submit event of jQuery $("#go").click(function(){ T How to use: jQueryeach matched element. $("#block").animate({ $("#msg").ajaxComplete(function slideUp( speed, callback ) jQuery width: "70%", (event,request, settings){unload( fn ) Hide all matched elements by adjusting their jQuery opacity: 0.4, $(this).append("<li>Complete!</li>");Binds a function to the unload event of each jQuery height and firing an optional callback after completion. }, 1500 ); });matched element. }); slideToggle( speed, callback ) ajaxError( callback ) Toggle the visibility of all matched elements by jQuery animate( params, options ) Attach a function to be executed whenever an jQuery jQuery EFFECTS / 1. BASICS adjusting their height and firing an optional A function for making custom animations. AJAX request fails. callback after completion.show( ) ajaxSend( callback )Displays each of the set of matched elements if stop( clearQueue, gotoEnd ) Attach a function to be executed before an AJAXthey are hidden. Stops all the currently running animations on all jQuery jQuery request is sent. EFFECTS / 3. FADING the specified elements.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("<li>Starting request at " +show( speed, callback ) opacity and firing an optional callback after AJAX / 1. AJAX REQUESTS settings.url + "</li>");Show all matched elements using a graceful jQuery completion. });animation and firing an optional callback after jQuerycompletion. T How to use: jQuery.ajax( options ) XMLHttpReq ajaxStart( callback ) $(document.body).click(function () { Load a remote page using an HTTP request.hide( ) $("div:hidden:first").fadeIn("slow"); Attach a function to be executed whenever an jQuery }); AJAX request begins and there is none alreadyHides each of the set of matched elements if they load( url, data, callback ) active.are shown. jQuery Load HTML from a remote file and inject it into jQuery fadeOut( speed, callback ) the DOM.T How to use: Fade out all matched elements by adjusting ajaxStop( callback ) $("p").hide() their opacity to 0, then setting display to "none" jQuery Attach a function to be executed whenever all jQuery and firing an optional callback after jQuery.get( url, data, callback, type ) AJAX requests have ended. completion.hide( speed, callback ) Load a remote page using an HTTP GET XMLHttpReqHide all matched elements using a graceful request. 0-1 fadeTo( speed, opacity, callback )animation and firing an optional callback after ajaxSuccess( callback )completion. Fade the opacity of all matched elements to a Attach a function to be executed whenever an jQuery specified opacity and firing an optional callback jQuery.getJSON( url, data, callback, type ) after completion. AJAX request completes successfully. Load JSON data using an HTTP GET request. XMLHttpReqtoggle( ) jQuery T How to use:Toggle displaying each of the set of matchedelements. $("p:first").click(function () { $(this).fadeTo("slow", 0.33); jQuery.getScript( url, callback ) AJAX / 3. MISCT How to use: jQuery Loads, and executes, a local JavaScript file XMLHttpReq }); $("button").click(function () { using an HTTP GET request. $("p").toggle(); jQuery.ajaxSetup( options ) }); jQuery.post( url, data, callback, type ) Setup global settings for AJAX requests. EFFECTS / 4. SETTINGS Load a remote page using an HTTP POST XMLHttpReqtoggle( switch ) request.Toggle displaying each of the set of matched serialize( ) jQuery jQuery.fx.off T How to use:elements based upon the switch (true shows all Serializes a set of input elements into a string of Stringelements, false hides all elements). Globally disable all animations. data. $.post("test.php", { func: T How to use: "getNameAndTime" }, 0-1 function(data){ serializeArray( )toggle( speed, callback ) jQuery.fx.off = true; alert(data.name); // John Serializes all forms and form elements (likeToggle displaying each of the set of matched jQuery $("input").click(function(){ a<Object>elements using a graceful animation and firing console.log(data.time); // 2pm the .serialize() method) but returns a JSON data $("div").toggle("slow"); structure for you to work with.an optional callback after completion. }, "json"); });
  • 6. JQUERY 1.3 VISUAL CHEAT SHEET SELECTORS CORE ATTRIBUTES TRAVERSING MANIPULATION CSS EVENTS EFFECTS AJAX UTILITIES UTILITIES / 1. DETECTION UTILITIES / 3. TEST OPERATIONS REFERENCE AND CREDITSjQuery.support jQuery.isArray( obj ) JQUERY 1.3 Visual Cheat SheetA collection of properties that represent the Object Determine if the parameter passed is an array. 0-1 Designed © 2009 by Antonio Lupettipresence of different browser features or bugs. T How to use: • http://woork.blogspot.com $("b").append( "" + $.isArray([])); • http://www.twitter.com/woorkjQuery.browser ✽ • http://www.facebook.com/antoniolupettiContains flags for the useragent, read fromnavigator.userAgent. While it is unlikely Map jQuery.isFunction( obj ) Download or buy a printed copy of this Visual Cheat Sheet here:jQuery.browser will be removed, every effort touse jQuery.support and proper feature detection Determine if the parameter passed is a 0-1 • http://woork.blogspot.comshould be made. Javascript function object. jQuery | The Write Less, Do More, JavaScriptjQuery.browser.version ✽ LibraryThe version number of the rendering engine for String jQuery is a fast and concise JavaScript Library thatthe users browser. simplifies HTML document traversing, event handling, UTILITIES / 4. STRING OPERATIONS animating, and Ajax interactions for rapid web development. jQuery is designed to change the way thatjQuery.boxModel ✽ jQuery.trim( str ) you write JavaScript.States if the current page, in the users browser, is 0-1 Remove the whitespace from the beginning andbeing rendered using the W3C CSS Box Model end of a string. jQuery Official Web Page • http://jquery.com/ Original documentation • http://docs.jquery.com T How to use: Tutorials • http://docs.jquery.com/Tutorials $("button").click(function () { Bug Traker • http://dev.jquery.com/ String var str = " lots of spaces before and after "; Discussion • http://docs.jquery.com/Discussion UTILITIES / 2. ARRAYS AND OBJECTS alert("" + str + ""); jQuery is © of John Resig and the jQuery Team. str = jQuery.trim(str);jQuery.each( object, callback ) • http://ejohn.org Object alert("" + str + " - no longer"); • http://docs.jquery.com/ContributorsA generic iterator function, which can be used toseamlessly iterate over both objects and arrays. });jQuery.extend( deep, target, object1, objectN )Extend one object with one or more others, Objectreturning the modified object. UTILITIES / 5. URLSjQuery.grep( array, callback, invert ) jQuery.param( obj )Finds the elements of an array which satisfy a a<> Serializes an array of form elements or anfilter function. The original array is not affected. object (core of .serialize() method).jQuery.makeArray( obj ) T How to use: String THE k a<> var params = { width:1680, height:1050 };Turns anything into a true array. var str = jQuery.param(params); WORKING $("#results").text(str); BRAINjQuery.map( array, callback )Translate all items in an array to another array a<>of items.jQuery.inArray( value, array )Determine the index of the first parameter in the NumArray (-1 if not found).jQuery.merge( first, second ) a<>Merge two arrays together.jQuery.unique( array )Remove all duplicate elements from an array of a<>elements. Note that this only works on arrays ofDOM elements, not strings or numbers.