Transcript of "Jquery 17-visual-cheat-sheet1"

1.
jQUERY 1.7 CORE ✼ SELECTORS ✼ ATTRIBUTES ✼ TRAVERSING ✼ MANIPULATION ✼ CSS ✼ EVENTS EFFECTS ✼ AJAX ✼ UTILITIES ✼ CALLBACKS ✼ DATA & MISC ✼ DEFERRED OBJECT VISUAL CHEAT SHEET ★ = NEW OR CHANGED IN jQUERY 1.7 / f(x) = FUNCTION / a = ARRAY / jQ = jQUERY / El = ELEMENT / 0-1 = BOOLEAN / Obj = OBJECT / NUM = NUMBER / Str = STRING❉ CORE Attribute Ends With Selector [name :empty Selector :last-child Selector $="value"] Select all elements that have no children (including text nodes). Selects all elements that are the last child of their parent.jQuery.holdReady( hold ) u Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison :enabled Selector :last SelectorHolds or releases the execution of jQuerys ready event. is case sensitive. Selects all elements that are enabled. Selects the last matched element.jQuery() jQ Attribute Equals Selector [name="value"] :eq() Selector :lt() SelectorAccepts a string containing a CSS selector which is then Selects elements that have the specified attribute with aused to match a set of elements. value exactly equal to a certain value. Select the element at index n within the matched set. Select all elements at an index less than index within the matched set.jQuery( selector [, context] ) - jQuery( element )jQuery( object ) - jQuery( elementArray ) Attribute Not Equal Selector [name! :even SelectorjQuery( jQuery object ) Multiple Attribute Selector [name="value"] ="value"] Selects even elements, zero-indexed. [name2="value2"] Select elements that either dont have the specifiedjQuery.noConflict( [removeAll] ) Obj Matches elements that match all of the specified attribute filters. attribute, or do have the specified attribute but not with a :file Selector certain value.Relinquish jQuerys control of the $ variable. Selects all elements of type file. Multiple Selector (“selector1, selector2, selectorN”)jQuery.sub() jQ Attribute Starts With Selector :first-child Selector [name^="value"] Selects the combined results of all the specified selectors.Creates a new copy of jQuery whose properties and Selects all elements that are the first child of their parent.methods can be modified without affecting the original Selects elements that have the specified attribute with a value beginning exactly with a given string. Next Adjacent Selector (“prev + next”)jQuery object. :first Selector Selects all next elements matching "next" that are immediately :button Selector Selects the first matched element. preceded by a sibling "prev".jQuery.when( deferreds ) pr Selects all button elements and elements of type button.Provides a way to execute callback functions based on one :focus selector Next Siblings Selector (“prev ~ siblings”)or more objects, usually Deferred objects that representasynchronous events. Selects element if it is currently focused. Selects all sibling elements that follow after the "prev" element, :checkbox Selector have the same parent, and match the filtering "siblings" Selects all elements of type checkbox. selector. :gt() Selector Select all elements at an index greater than index within the :not() Selector❉ SELECTORS :checked Selector matched set. Selects all elements that do not match the given selector. Matches all elements that are checked.All Selector (“*”) Has Attribute Selector [name] :nth-child() SelectorSelects all elements. Child Selector (“parent > child”) Selects elements that have the specified attribute, with any value. Selects all elements that are the nth-child of their parent. Selects all direct child elements specified by "child" of:animated Selector elements specified by "parent". :has() Selector :odd SelectorSelect all elements that are in the progress of ananimation at the time the selector is run. Class Selector (“.class”) Selects elements which contain at least one element that Selects odd elements, zero-indexed. matches the specified selector. Selects all elements with the given class. :only-child SelectorAttribute Contains Prefix Selector [name| :header Selector="value"] :contains() Selector Selects all elements that are the only child of their parent. Selects all elements that are headers, like h1, h2, h3 and so on.Selects elements that have the specified attribute with a Select all elements that contain the specified text.value either equal to a given string or starting with that :parent Selectorstring followed by a hyphen (-). :hidden Selector Select all elements that are the parent of another element, Descendant Selector (“ancestor Selects all elements that are hidden. including text nodes. descendant”)Attribute Contains Selector[name*="value"] Selects all elements that are descendants of a given ID Selector (“#id”) :password Selector ancestor.Selects elements that have the specified attribute with a Selects a single element with the given id attribute. Selects all elements of type password.value containing the a given substring. :disabled Selector :image Selector :radio SelectorAttribute Contains Word Selector Selects all elements that are disabled. Selects all elements of type image. Selects all elements of type password.[name~="value"]Selects elements that have the specified attribute with a Element Selector (“element”) :input Selector :reset Selectorvalue containing a given word, delimited by spaces. Selects all elements with the given tag name. Selects all input, textarea, select and button elements. Selects all elements of type reset.

2.
jQUERY 1.7 CORE ✼ SELECTORS ✼ ATTRIBUTES ✼ TRAVERSING ✼ MANIPULATION ✼ CSS ✼ EVENTS EFFECTS ✼ AJAX ✼ UTILITIES ✼ CALLBACKS ✼ DATA & MISC ✼ DEFERRED OBJECT VISUAL CHEAT SHEET ★ = NEW OR CHANGED IN jQUERY 1.7 / f(x) = FUNCTION / a = ARRAY / jQ = jQUERY / El = ELEMENT / 0-1 = BOOLEAN / Obj = OBJECT / NUM = NUMBER / Str = STRING:selected Selector .removeProp( propertyName ) jQ .filter() jQ .not() jQSelects all elements that are selected. Remove a property for the set of matched elements. Reduce the set of matched elements to those that match Remove elements from the set of matched elements. the selector or pass the functions test. .not( selector ) - .not( elements ) - .not( function(index) ):submit Selector .toggleClass( className ) jQ .filter( selector ) - .filter( function(index) ) .filter( element ) - .filter( jQuery object )Selects all elements of type submit. Add or remove one or more classes from each element in the set of matched elements, depending on either the .offsetParent() jQ classs presence or the value of the switch argument. .find( selector ) jQ:text Selector Get the closest ancestor element that is positioned. .val() Str Get the descendants of each element in the current set ofSelects all elements of type text. matched elements, filtered by a selector, jQuery object, or Get the current value of the first element in the set of N element. .parent( [selector] ) jQ matched elements.:visible Selector a() .find( selector ) - .find( jQuery object ) - .find( element ) Get the parent of each element in the current set of .val( value ) - .val( function(index, value) ) matched elements, optionally filtered by a selector.Selects all elements that are visible. jQ .first() jQ Reduce the set of matched elements to the first in the set. .parents( [selector] ) jQ ❉ TRAVERSING❉ ATTRIBUTES Get the ancestors of each element in the current set of .has() jQ matched elements, optionally filtered by a selector. .add() jQ.addClass() jQ Reduce the set of matched elements to those that have a Add elements to the set of matched elements. descendant that matches the selector or DOM element.Adds the specified class(es) to each of the set of matched .parentsUntil() jQelements. .add( selector ) - .add( elements ) - .add( html ) .has( selector ) - .has( contained ) Get the ancestors of each element in the current set of .add( jQuery object ) - .add( selector, context ).addClass( className ) - .addClass( function(index, matched elements, up to but not including the elementcurrentClass) ) ★ .is() 0-1 matched by the selector, DOM node, or jQuery object. .andSelf() jQ .parentsUntil( [selector] [, filter] ).attr() Str Add the previous set of elements on the stack to the Check the current matched set of elements against a .parentsUntil( [element] [, filter] ) current set. selector, element, or jQuery object and return true if atGet the value of an attribute for the first element in the set least one of these elements matches the given arguments.of matched elements. .children( [selector] ) jQ .is( selector ) - .is( function(index) ) - .is( jQuery object ).attr( attributeName ) - .attr( attributeName, value ) .is( element ) .prev( [selector] ) jQ Get the children of each element in the set of matched elements, optionally filtered by a selector. Get the immediately preceding sibling of each element in .last() jQ the set of matched elements, optionally filtered by a.hasClass( className ) Str selector.Determine whether any of the matched elements are .closest() jQ Reduce the set of matched elements to the final one in theassigned the given class. set. Get the first element that matches the selector, beginning a() at the current element and progressing up through the .prevAll( [selector] ) jQ.html() Str DOM tree. .map( callback(index, domElement) ) jQ Get all preceding siblings of each element in the set of jQ .closest( selector ) - .closest( selector [, context] ) Pass each element in the current matched set through a matched elements, optionally filtered by a selector.Get the HTML contents of the first element in the set of .closest( jQuery object ) - .closest( element ) function, producing a new jQuery object containing thematched elements. .closest( selectors [ , context ] ) return values..html( htmlString ) - .html( function(index, oldhtml) ) .prevUntil() jQ .contents() jQ .next( [selector] ) jQ Get all preceding siblings of each element up to but not.prop() Str Get the children of each element in the set of matched including the element matched by the selector, DOM node, elements, including text and comment nodes. Get the immediately following sibling of each element inGet the value of a property for the first element in the set jQ or jQuery object. the set of matched elements. If a selector is provided, itof matched elements. retrieves the next sibling only if it matches that selector. .prevUntil( [selector] [, filter] ).prop( propertyName ) - .prop( propertyName, value ) .each( function(index, Element) ) jQ .prevUntil( [element] [, filter] ) Iterate over a jQuery object, executing a function for each .nextAll( [selector] ) jQ matched element.★ .removeAttr( attributeName ) jQ Get all following siblings of each element in the set of matched elements, optionally filtered by a selector. .siblings( [selector] ) jQRemove an attribute from each element in the set of .end() jQmatched elements. Get the siblings of each element in the set of matched End the most recent filtering operation in the current elements, optionally filtered by a selector. chain and return the set of matched elements to its .nextUntil() jQ.removeClass() jQ previous state. Get all following siblings of each element up to but not including the element matched by the selector, DOM node, .slice( start [, end] ) jQRemove a single class, multiple classes, or all classes from .eq( index ) jQ or jQuery object passed.each element in the set of matched elements. Reduce the set of matched elements to a subset specified Reduce the set of matched elements to the one at the .nextUntil( [selector] [, filter] ) - .nextUntil( [element] [,.removeClass( [className] ) by a range of indices. specified index. filter] ).removeClass( function(index, class) )

3.
jQUERY 1.7 CORE ✼ SELECTORS ✼ ATTRIBUTES ✼ TRAVERSING ✼ MANIPULATION ✼ CSS ✼ EVENTS EFFECTS ✼ AJAX ✼ UTILITIES ✼ CALLBACKS ✼ DATA & MISC ✼ DEFERRED OBJECT VISUAL CHEAT SHEET ★ = NEW OR CHANGED IN jQUERY 1.7 / f(x) = FUNCTION / a = ARRAY / jQ = jQUERY / El = ELEMENT / 0-1 = BOOLEAN / Obj = OBJECT / NUM = NUMBER / Str = STRING❉ MANIPULATION .hasClass( className ) Str .remove( [selector] ) Str .val() Str Determine whether any of the matched elements are Remove the set of matched elements from the DOM. Get the current value of the first element in the set of N.addClass() jQ assigned the given class. matched elements. a()Adds the specified class(es) to each of the set of matched .removeAttr( attributeName ) jQ .val( value ) - .val( function(index, value) ) jQ .html() Strelements. Remove an attribute from each element in the set of Get the HTML contents of the first element in the set of jQ matched elements..addClass( className ) - .addClass( function(index, matched elements. .width() IntcurrentClass) ) .html( htmlString ) - .html( function(index, oldhtml) ) Get the current computed width for the first element in .removeClass() jQ the set of matched elements..after() jQ .innerHeight() Int Remove a single class, multiple classes, or all classes from .width( value ) - .width( function(index, width) )Insert content, specified by the parameter, after each each element in the set of matched elements.element in the set of matched elements. Get the current computed height for the first element in .removeClass( [className] ) the set of matched elements, including padding but not .wrap() jQ.after( content [, content] ) - .after( function(index) ) .removeClass( function(index, class) ) border. Wrap an HTML structure around each element in the set.append() jQ .innerWidth() Int .removeProp( propertyName ) jQ of matched elements. .wrap( wrappingElement ) - .wrap( function(index) )Insert content, specified by the parameter, to the end of Get the current computed width for the first element in Remove a property for the set of matched elements.each element in the set of matched elements. the set of matched elements, including padding but not border..append( content [, content] ) .replaceAll( target ) jQ .wrapAll( wrappingElement ) jQ.append( function(index, html) ) .insertAfter( target ) Int Replace each target element with the set of matched Wrap an HTML structure around all elements in the set of elements. matched elements..appendTo( target ) jQ Insert every element in the set of matched elements after the target.Insert every element in the set of matched elements to the .replaceWith() jQ .wrapInner() jQend of the target. .insertBefore( target ) Int Replace each element in the set of matched elements with Wrap an HTML structure around the content of each the provided new content. element in the set of matched elements..attr() jQ Insert every element in the set of matched elements before the target. .replaceWith( newContent ) - .replaceWith( function ) .wrapInner( wrappingElement )Get the value of an attribute for the first element in the set .wrapInner( function(index) )of matched elements. .offset() Int .scrollLeft() jQ.attr( attributeName ) - .attr( attributeName, value ) Get the current coordinates of the first element in the set Get the current horizontal position of the scroll bar for the of matched elements, relative to the document. first element in the set of matched elements. ❉ CSS.before() jQ .offset( coordinates ) - .offset( function(index, coords) ) .scrollLeft( value )Insert content, specified by the parameter, before eachelement in the set of matched elements. .outerHeight( [includeMargin] ) Int .addClass() jQ .scrollTop() jQ.before( content [, content] ) - .before( function ) Get the current computed height for the first element in Adds the specified class(es) to each of the set of matched the set of matched elements, including padding, border, Get the current vertical position of the scroll bar for the elements. and optionally margin. Returns an integer (without "px") first element in the set of matched elements..clone() jQ .addClass( className ) - .addClass( function(index, representation of the value or null if called on an empty currentClass) ) .scrollTop value )Create a deep copy of the set of matched elements. set of elements..clone( [withDataAndEvents] ).clone( [withDataAndEvents] [,deepWithDataAndEvents] ) .position() Obj .text() jQ .css() Str Get the current coordinates of the first element in the set Get the combined text contents of each element in the set Get the value of a style property for the first element in jQ.css() Str of matched elements, relative to the offset parent. of matched elements, including their descendants. the set of matched elements. jQ .text( textString ) - .text( function(index, text) ) .css( propertyName ) - .css( propertyName, value )Get the value of a style property for the first element inthe set of matched elements. .prepend( content [, content] ) jQ .css( propertyName, function(index, value) ) .css( map ).css( propertyName ) - .css( propertyName, value ) Insert content, specified by the parameter, to the .toggleClass() jQ.css( propertyName, function(index, value) ) beginning of each element in the set of matched elements. Add or remove one or more classes from each element in.css( map ) jQuery.cssHooks Obj the set of matched elements, depending on either the .prependTo( target ) jQ classs presence or the value of the switch argument. Hook directly into jQuery to override how particular CSS.detach( [selector] ) jQ Insert every element in the set of matched elements to the .toggleClass( className ) properties are retrieved or set, normalize CSS property beginning of the target. .toggleClass( className, switch ) naming, or create custom properties.Remove the set of matched elements from the DOM. .prop() Str.empty() jQ .unwrap() jQ .hasClass( className ) Str Get the value of a property for the first element in the set jQRemove all child nodes of the set of matched elements of matched elements. Remove the parents of the set of matched elements from Determine whether any of the matched elements arefrom the DOM. the DOM, leaving the matched elements in their place. assigned the given class. .prop( propertyName ) - .prop( propertyName, value )

4.
jQUERY 1.7 CORE ✼ SELECTORS ✼ ATTRIBUTES ✼ TRAVERSING ✼ MANIPULATION ✼ CSS ✼ EVENTS EFFECTS ✼ AJAX ✼ UTILITIES ✼ CALLBACKS ✼ DATA & MISC ✼ DEFERRED OBJECT VISUAL CHEAT SHEET ★ = NEW OR CHANGED IN jQUERY 1.7 / f(x) = FUNCTION / a = ARRAY / jQ = jQUERY / El = ELEMENT / 0-1 = BOOLEAN / Obj = OBJECT / NUM = NUMBER / Str = STRING.height() Int .toggleClass() jQ .die() jQ event.result ObjGet the current computed height for the first element in Add or remove one or more classes from each element in Remove all event handlers previously attached The last value returned by an event handler that wasthe set of matched elements. the set of matched elements, depending on either the using .live() from the elements. triggered by this event, unless the value was undefined. classs presence or the value of the switch argument..height( value ) .die( eventType [, handler] ).height( function(index, height) ) .toggleClass( className ) .die( eventTypes ) event.stopImmediatePropagation() .toggleClass( className, switch ) Prevents other event handlers from being called..innerHeight() Int .error() jQ .width() IntGet the current computed height for the first element in Bind an event handler to the "error" JavaScript event. event.stopPropagation()the set of matched elements, including padding but not Get the current computed width for the first element in .error( handler(eventObject) )border. the set of matched elements. Prevents the event from bubbling up the DOM tree, .error( [eventData], handler(eventObject) ) .width( value ) - .width( function(index, width) ) preventing any parent handlers from being notified of the event..innerWidth() Int event.currentTarget jQGet the current computed width for the first element in The current DOM element within the event bubblingthe set of matched elements, including padding but not event.target el phase.border. ❉ EVENTS The DOM element that initiated the event. event.data Any.offset() Int .bind() jQ event.timeStamp N The optional data passed to jQuery.fn.bind when theGet the current coordinates of the first element in the set Attach a handler to an event for the elements. current executing handler was bound. The difference in milliseconds between the time theof matched elements, relative to the document. browser created the event and January 1, 1970. .bind( eventType [, eventData], handler(eventObject) ).offset( coordinates ) - .offset( function(index, coords) ) .bind( eventType [, eventData], preventBubble ) ★ event.delegateTarget el .bind( events ) event.type Str The element where the currently-called jQuery event.outerHeight( [includeMargin] ) Int handler was attached. .blur() jQ Describes the nature of the event.Get the current computed height for the first element inthe set of matched elements, including padding, border, Bind an event handler to the "blur" JavaScript event, or event.isDefaultPrevented() 0-1and optionally margin. Returns an integer (without "px") trigger that event on an element. event.which Nrepresentation of the value or null if called on an empty Returns whether event.preventDefault() was ever called .blur( handler(eventObject) ) For key or button events, this attribute indicates theset of elements. on this event object. .blur( [eventData], handler(eventObject) ) specific button or key that was pressed..outerWidth( [includeMargin] ) Int event.isImmediatePropagationStopped() 0-1 .change() jQ .focus() jQGet the current computed width for the first element in Returns whether event.stopImmediatePropagation() was Bind an event handler to the "change" JavaScript event, ever called on this event object. Bind an event handler to the "focus" JavaScript event, orthe set of matched elements, including padding and or trigger that event on an element. trigger that event on an elementborder. .change( handler(eventObject) ) .focus( handler(eventObject) ) event.isPropagationStopped() 0-1 .change( [eventData], handler(eventObject) ) .focus( [eventData], handler(eventObject) ).position() Obj Returns whether event.stopPropagation() was ever calledGet the current coordinates of the first element in the set on this event object. .click() jQof matched elements, relative to the offset parent. .focusin() jQ Bind an event handler to the "click" JavaScript event, or event.namespace Str trigger that event on an element. Bind an event handler to the "focusin" event..removeClass() jQ The namespace specified when the event was triggered. .focusin( handler(eventObject) ) .click( handler(eventObject) ) .click( [eventData], handler(eventObject) ) .focusin( [eventData], handler(eventObject) )Remove a single class, multiple classes, or all classes fromeach element in the set of matched elements. event.pageX N.removeClass( [className] ) .dblclick() jQ The mouse position relative to the left edge of the .focusout() jQ.removeClass( function(index, class) ) document. Bind an event handler to the "dblclick" JavaScript event, Bind an event handler to the "focusout" JavaScript event. or trigger that event on an element. event.pageY .focusout( handler(eventObject) ).scrollLeft() Int N .focusout( [eventData], handler(eventObject) ) .dblclick( handler(eventObject) )Get the current horizontal position of the scroll bar for the .dblclick( [eventData], handler(eventObject) ) The mouse position relative to the top edge of thefirst element in the set of matched elements. document. .hover() jQ.scrollLeft( value ) .delegate() jQ event.preventDefault() u Bind two handlers to the matched elements, to be Attach a handler to one or more events for all elements executed when the mouse pointer enters and leaves the.scrollTop() Int that match the selector, now or in the future, based on a If this method is called, the default action of the event will elements. specific set of root elements. not be triggered.Get the current vertical position of the scroll bar for the .hover( handlerIn(eventObject)first element in the set of matched elements. .delegate( selector, eventType, handler ) .handlerOut(eventObject) ) .delegate( selector, eventType, eventData, handler ) event.relatedTarget el .hover( handlerInOut(eventObject) ).scrollTop( value ) .delegate( selector, events ) The other DOM element involved in the event, if any.