SlideShare ist ein Scribd-Unternehmen logo
1 von 6
Downloaden Sie, um offline zu lesen
JQUERY 1.3 VISUAL CHEAT SHEET                             ★ SELECTORS              ★ CORE     ★ ATTRIBUTES   ★ TRAVERSING              ★ MANIPULATION                 ★ CSS      ★ EVENTS   ★ EFFECTS          ★ AJAX           ★ UTILITIES




LEGEND          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 don't 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)>         :text
Matches 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 the
Matches 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.
                                                                         :animated
Matches 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 parent's even or odd
ancestor 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)>         :enabled
parent > 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)>         :selected
Matches 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.
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


jQuery( 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 a
elements.                                                                                                                                                                                                   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                jQuery
provided 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 XHTML
jQuery( callback )                                              Returns a reference to the first element's 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          jQuery
Execute a function within the context of every                                                                                                                                                              ★ ATTRIBUTES / 4. TEXT
matched element.                                                this new queue (the array of functions).                             removeAttr( name )
                                                                                                                                     Remove an attribute from each of the matched            jQuery
                                                                                                                                     elements.
size( )                                                         dequeue( name )                                                                                                                             text( )
                                                        Num
The 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.
                                                                                                                                                                                                                                                                      String
length                                                                                                                               ★ ATTRIBUTES / 2. CLASS                                                T How to use:
                                                        Num
The 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      jQuery
to 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           jQuery
The 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-1
the document).                                                                                                                       Returns true if the specified class is present on
                                                                                                                                     at least one of the set of matched elements.
                                                                jQuery.extend( object )                                                                                                                     ★ ATTRIBUTES / 5. VALUE
eq( position )                                                                                                          jQuery
                                                       jQuery   Extends the jQuery object itself.
Reduce the set of matched elements to a single
element.                                                                                                                             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,          jQuery
Access 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 with
first element is checked.                                       discretion.                                                                                                                                 checkboxes, and select options that match the set
                                                                                                                                                                                                            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 )                                                     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        jQuery
element.                                                        expression, to the set of matched elements.                         matched element.                                        String         HTML content.
                                                       jQuery
                                                                                                                                    T This property is not available on XML
T 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 specified
filter( expr )                                                  elements.                                                           Set the html contents of every matched element.                        element.
                                                                                                                                                                                            jQuery
Removes all elements from the set of matched                                                                                        T This property is not available on XML
elements that do not match the specified                        closest( expr )                                                     documents
expression(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     jQuery
T 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           jQuery
elements 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 HTML
is( 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. REPLACING
not( expr )                                                     offsetParent( )                                                     Prepend content to the inside of every matched          jQuery
                                                                Returns a jQuery collection with the positioned        jQuery
Removes 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             jQuery
slice( start, end )                                             Get the direct parent of an element. If called on      jQuery       specified, set of elements.                                             JQuery element that was just replaced, which
                                                       jQuery
Selects 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 )
                                                                                                                                                                                            jQuery
andSelf( )                                                      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. REMOVING
T 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,       jQuery
end( )                                                                                                                              specified, set of elements.
Revert the most recent 'destructive' operation,                                                                                                                                                             remove( expr )
changing the set of matched elements to its            jQuery   siblings( expr )                                                                                                                                                                               jQuery
previous 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                                                                          jQuery
operation).                                                     siblings of each of the matched set of elements.                    Insert all of the matched elements before another,
                                                                                                                                    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 )
                                                                                                                                                                                                               Triggers / Bind a function to the error event of     jQuery
clone( )                                                                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           jQuery
clones.                                                                 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     jQuery
clone( 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 )
                                                                                                                             jQuery
Return 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 browser's 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         Int
matched elements.                                                       includes the padding) for the first matched                                                                                            load( fn )
                                                                        element.                                                          unbind( type, fn )                                                   Binds a function to the load event of each           jQuery
css( 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
                                                                        outerHeight( margin )                                                                                                                  mouseenter( fn )
★ 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          jQuery
Get 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.
                                                                                                                               Int
offsetParent( )                                                         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       jQuery
element.                                                                                                                                                                                                       matched element.

position( )                                                                                                                                                                                                    mouseout( fn )
                                                    Object{top, left}
                                                                        ★ EVENTS / 1. PAGE LOAD
Gets the top and left position of an element                                                                                                                                                                   Bind a function to the mouseout event of each        jQuery
relative 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       jQuery
element.                                                                                                                                  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         jQuery
When a value is passed in, the scroll top                     jQuery    ★ EVENTS / 2. LIVE EVENTS
offset 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
                                                                                                                             jQuery
Gets 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 each
When 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.
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 )
Triggers / Bind a function to the select event of   jQuery
each 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
                                                                                                                    jQuery
submit( ) / 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:                                             jQuery
each 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 AJAX
they 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                                                                     jQuery
completion.                                                  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 already
Hides 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                XMLHttpReq
Hide 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.           XMLHttpReq
toggle( )                                                                                                           jQuery
                                                             T How to use:
Toggle displaying each of the set of matched
elements.                                                        $("p:first").click(function () {
                                                                  $(this).fadeTo("slow", 0.33);                                  jQuery.getScript( url, callback )                                       ★ AJAX / 3. MISC
T 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                                                                                                 XMLHttpReq
                                                                                                                                 Load a remote page using an HTTP POST
toggle( 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       String
elements, 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 (like
Toggle 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");
                                                                 });
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 CREDITS


jQuery.support                                                    jQuery.isArray( obj )                                                   JQUERY 1.3 Visual Cheat Sheet
A collection of properties that represent the           Object    Determine if the parameter passed is an array.
                                                                                                                              0-1         Designed © 2009 by Antonio Lupetti
presence of different browser features or bugs.
                                                                  T How to use:                                                           • http://woork.blogspot.com
                                                                    $("b").append( "" + $.isArray([]));                                   • http://www.twitter.com/woork
jQuery.browser ✽                                                                                                                          • http://www.facebook.com/antoniolupetti
Contains flags for the useragent, read from
navigator.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 to
use jQuery.support and proper feature detection                   Determine if the parameter passed is a                      0-1         • http://woork.blogspot.com
should be made.                                                   Javascript function object.

                                                                                                                                          jQuery | The Write Less, Do More, JavaScript
jQuery.browser.version ✽                                                                                                                  Library
The version number of the rendering engine for           String
                                                                                                                                          jQuery is a fast and concise JavaScript Library that
the user's 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 that
jQuery.boxModel ✽                                                 jQuery.trim( str )                                                      you write JavaScript.
States if the current page, in the user's browser, is      0-1
                                                                  Remove the whitespace from the beginning and
being 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/Contributors
A generic iterator function, which can be used to
seamlessly iterate over both objects and arrays.                      });


jQuery.extend( deep, target, object1, objectN )
Extend one object with one or more others,              Object
returning the modified object.                                    ★ UTILITIES / 5. URLS


jQuery.grep( array, callback, invert )                            jQuery.param( obj )
Finds the elements of an array which satisfy a           a<>      Serializes an array of form elements or an
filter 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);                                            BRAIN
jQuery.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        Num
Array (-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 of
DOM elements, not strings or numbers.

Weitere ähnliche Inhalte

Was ist angesagt?

Google app engine cheat sheet
Google app engine cheat sheetGoogle app engine cheat sheet
Google app engine cheat sheetPiyush Mittal
 
Introduction to Client-Side Javascript
Introduction to Client-Side JavascriptIntroduction to Client-Side Javascript
Introduction to Client-Side JavascriptJulie Iskander
 
SeneJug java_8_prez_122015
SeneJug java_8_prez_122015SeneJug java_8_prez_122015
SeneJug java_8_prez_122015senejug
 
Machine learning Lecture 3
Machine learning Lecture 3Machine learning Lecture 3
Machine learning Lecture 3Srinivasan R
 
Ruby object model at the Ruby drink-up of Sophia, January 2013
Ruby object model at the Ruby drink-up of Sophia, January 2013Ruby object model at the Ruby drink-up of Sophia, January 2013
Ruby object model at the Ruby drink-up of Sophia, January 2013rivierarb
 
Corejava Online 100
Corejava Online 100Corejava Online 100
Corejava Online 100reynolds
 
Action Script
Action ScriptAction Script
Action ScriptAngelin R
 
Paca java script slid
Paca java script slidPaca java script slid
Paca java script slidpacatarpit
 
Oop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalOop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalMichael Stal
 
jQuery 1.7 visual cheat sheet
jQuery 1.7 visual cheat sheetjQuery 1.7 visual cheat sheet
jQuery 1.7 visual cheat sheetJiby John
 
Oop2011 actor presentation_stal
Oop2011 actor presentation_stalOop2011 actor presentation_stal
Oop2011 actor presentation_stalMichael Stal
 

Was ist angesagt? (12)

Google app engine cheat sheet
Google app engine cheat sheetGoogle app engine cheat sheet
Google app engine cheat sheet
 
Introduction to Client-Side Javascript
Introduction to Client-Side JavascriptIntroduction to Client-Side Javascript
Introduction to Client-Side Javascript
 
SeneJug java_8_prez_122015
SeneJug java_8_prez_122015SeneJug java_8_prez_122015
SeneJug java_8_prez_122015
 
Machine learning Lecture 3
Machine learning Lecture 3Machine learning Lecture 3
Machine learning Lecture 3
 
Ruby object model at the Ruby drink-up of Sophia, January 2013
Ruby object model at the Ruby drink-up of Sophia, January 2013Ruby object model at the Ruby drink-up of Sophia, January 2013
Ruby object model at the Ruby drink-up of Sophia, January 2013
 
Corejava Online 100
Corejava Online 100Corejava Online 100
Corejava Online 100
 
Action Script
Action ScriptAction Script
Action Script
 
Computer Programming 2
Computer Programming 2 Computer Programming 2
Computer Programming 2
 
Paca java script slid
Paca java script slidPaca java script slid
Paca java script slid
 
Oop2010 Scala Presentation Stal
Oop2010 Scala Presentation StalOop2010 Scala Presentation Stal
Oop2010 Scala Presentation Stal
 
jQuery 1.7 visual cheat sheet
jQuery 1.7 visual cheat sheetjQuery 1.7 visual cheat sheet
jQuery 1.7 visual cheat sheet
 
Oop2011 actor presentation_stal
Oop2011 actor presentation_stalOop2011 actor presentation_stal
Oop2011 actor presentation_stal
 

Andere mochten auch

Camrade audio
Camrade audioCamrade audio
Camrade audioAVNed
 
OUP Presentation - AnkosLink 2013
OUP Presentation - AnkosLink 2013OUP Presentation - AnkosLink 2013
OUP Presentation - AnkosLink 2013vlopezr
 
HXR-MC2000E
HXR-MC2000EHXR-MC2000E
HXR-MC2000EAVNed
 
Dedolight Felloni TecPro
Dedolight Felloni TecProDedolight Felloni TecPro
Dedolight Felloni TecProAVNed
 
BRC family
BRC familyBRC family
BRC familyAVNed
 
JVC GY-HM890E
JVC GY-HM890EJVC GY-HM890E
JVC GY-HM890EAVNed
 
BRC-H700P
BRC-H700PBRC-H700P
BRC-H700PAVNed
 
Sony PMW-150
Sony PMW-150Sony PMW-150
Sony PMW-150AVNed
 
Sachtler Cine DSLR
Sachtler Cine DSLRSachtler Cine DSLR
Sachtler Cine DSLRAVNed
 

Andere mochten auch (9)

Camrade audio
Camrade audioCamrade audio
Camrade audio
 
OUP Presentation - AnkosLink 2013
OUP Presentation - AnkosLink 2013OUP Presentation - AnkosLink 2013
OUP Presentation - AnkosLink 2013
 
HXR-MC2000E
HXR-MC2000EHXR-MC2000E
HXR-MC2000E
 
Dedolight Felloni TecPro
Dedolight Felloni TecProDedolight Felloni TecPro
Dedolight Felloni TecPro
 
BRC family
BRC familyBRC family
BRC family
 
JVC GY-HM890E
JVC GY-HM890EJVC GY-HM890E
JVC GY-HM890E
 
BRC-H700P
BRC-H700PBRC-H700P
BRC-H700P
 
Sony PMW-150
Sony PMW-150Sony PMW-150
Sony PMW-150
 
Sachtler Cine DSLR
Sachtler Cine DSLRSachtler Cine DSLR
Sachtler Cine DSLR
 

Kürzlich hochgeladen

Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQuiz Club NITW
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17Celine George
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research DiscourseAnita GoswamiGiri
 
CHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptxCHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptxAneriPatwari
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfJemuel Francisco
 
4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptxmary850239
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Projectjordimapav
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxSayali Powar
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptxmary850239
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfPatidar M
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseCeline George
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4JOYLYNSAMANIEGO
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxAnupam32727
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1GloryAnnCastre1
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesVijayaLaxmi84
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Association for Project Management
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptxDhatriParmar
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...DhatriParmar
 

Kürzlich hochgeladen (20)

Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITWQ-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
Q-Factor HISPOL Quiz-6th April 2024, Quiz Club NITW
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research Discourse
 
CHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptxCHEST Proprioceptive neuromuscular facilitation.pptx
CHEST Proprioceptive neuromuscular facilitation.pptx
 
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdfGrade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
Grade 9 Quarter 4 Dll Grade 9 Quarter 4 DLL.pdf
 
4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx4.11.24 Mass Incarceration and the New Jim Crow.pptx
4.11.24 Mass Incarceration and the New Jim Crow.pptx
 
ClimART Action | eTwinning Project
ClimART Action    |    eTwinning ProjectClimART Action    |    eTwinning Project
ClimART Action | eTwinning Project
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
 
How to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 DatabaseHow to Make a Duplicate of Your Odoo 17 Database
How to Make a Duplicate of Your Odoo 17 Database
 
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of EngineeringFaculty Profile prashantha K EEE dept Sri Sairam college of Engineering
Faculty Profile prashantha K EEE dept Sri Sairam college of Engineering
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their uses
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
 
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
 

J query.1.3.visual.cheat.sheet.by.woork

  • 1. JQUERY 1.3 VISUAL CHEAT SHEET ★ SELECTORS ★ CORE ★ ATTRIBUTES ★ TRAVERSING ★ MANIPULATION ★ CSS ★ EVENTS ★ EFFECTS ★ AJAX ★ UTILITIES LEGEND 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 don't 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)> :text Matches 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 the Matches 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. :animated Matches 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 parent's even or odd ancestor 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)> :enabled parent > 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)> :selected Matches 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. HTML jQuery( 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 a elements. 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 jQuery provided 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 XHTML jQuery( callback ) Returns a reference to the first element's 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 jQuery Execute a function within the context of every ★ ATTRIBUTES / 4. TEXT matched element. this new queue (the array of functions). removeAttr( name ) Remove an attribute from each of the matched jQuery elements. size( ) dequeue( name ) text( ) Num The 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. String length ★ ATTRIBUTES / 2. CLASS T How to use: Num The 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 jQuery to 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 jQuery The 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-1 the document). Returns true if the specified class is present on at least one of the set of matched elements. jQuery.extend( object ) ★ ATTRIBUTES / 5. VALUE eq( position ) jQuery jQuery Extends the jQuery object itself. Reduce the set of matched elements to a single element. 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, jQuery Access 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 with first 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 AROUD eq( 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 jQuery element. expression, to the set of matched elements. matched element. String HTML content. jQuery T This property is not available on XML T 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 specified filter( expr ) elements. Set the html contents of every matched element. element. jQuery Removes all elements from the set of matched T This property is not available on XML elements that do not match the specified closest( expr ) documents expression(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 jQuery T 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 jQuery elements 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 HTML is( 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. REPLACING not( expr ) offsetParent( ) Prepend content to the inside of every matched jQuery Returns a jQuery collection with the positioned jQuery Removes 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 jQuery slice( start, end ) Get the direct parent of an element. If called on jQuery specified, set of elements. JQuery element that was just replaced, which jQuery Selects 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 ) jQuery andSelf( ) 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. REMOVING T 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, jQuery end( ) specified, set of elements. Revert the most recent 'destructive' operation, remove( expr ) changing the set of matched elements to its jQuery siblings( expr ) jQuery previous 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 jQuery operation). 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 jQuery clone( ) 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 jQuery clones. 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 jQuery clone( 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 ) jQuery Return 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 browser's 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 Int matched elements. includes the padding) for the first matched load( fn ) element. unbind( type, fn ) Binds a function to the load event of each jQuery css( 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 outerHeight( margin ) mouseenter( fn ) ★ 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 jQuery Get 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. Int offsetParent( ) 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 jQuery element. matched element. position( ) mouseout( fn ) Object{top, left} ★ EVENTS / 1. PAGE LOAD Gets the top and left position of an element Bind a function to the mouseout event of each jQuery relative 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 jQuery element. 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 jQuery When a value is passed in, the scroll top jQuery ★ EVENTS / 2. LIVE EVENTS offset 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 jQuery Gets 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 each When 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. EVENTS select( ) / select( fn ) Triggers / Bind a function to the select event of jQuery each 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 jQuery submit( ) / 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: jQuery each 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 AJAX they 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 jQuery completion. 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 already Hides 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 XMLHttpReq Hide 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. XMLHttpReq toggle( ) jQuery T How to use: Toggle displaying each of the set of matched elements. $("p:first").click(function () { $(this).fadeTo("slow", 0.33); jQuery.getScript( url, callback ) ★ AJAX / 3. MISC T 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 XMLHttpReq Load a remote page using an HTTP POST toggle( 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 String elements, 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 (like Toggle 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 CREDITS jQuery.support jQuery.isArray( obj ) JQUERY 1.3 Visual Cheat Sheet A collection of properties that represent the Object Determine if the parameter passed is an array. 0-1 Designed © 2009 by Antonio Lupetti presence of different browser features or bugs. T How to use: • http://woork.blogspot.com $("b").append( "" + $.isArray([])); • http://www.twitter.com/woork jQuery.browser ✽ • http://www.facebook.com/antoniolupetti Contains flags for the useragent, read from navigator.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 to use jQuery.support and proper feature detection Determine if the parameter passed is a 0-1 • http://woork.blogspot.com should be made. Javascript function object. jQuery | The Write Less, Do More, JavaScript jQuery.browser.version ✽ Library The version number of the rendering engine for String jQuery is a fast and concise JavaScript Library that the user's 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 that jQuery.boxModel ✽ jQuery.trim( str ) you write JavaScript. States if the current page, in the user's browser, is 0-1 Remove the whitespace from the beginning and being 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/Contributors A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. }); jQuery.extend( deep, target, object1, objectN ) Extend one object with one or more others, Object returning the modified object. ★ UTILITIES / 5. URLS jQuery.grep( array, callback, invert ) jQuery.param( obj ) Finds the elements of an array which satisfy a a<> Serializes an array of form elements or an filter 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); BRAIN jQuery.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 Num Array (-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 of DOM elements, not strings or numbers.