Small jQuery Cheat Sheet - Revision history

Admin at 23:46, 11 April 2012

2012-04-11T23:46:06Z

Admin at 08:39, 9 April 2012

2012-04-09T08:39:50Z

Admin at 23:53, 8 April 2012

2012-04-08T23:53:59Z

Show changes

Admin at 23:24, 8 April 2012

2012-04-08T23:24:48Z

Admin at 23:11, 8 April 2012

2012-04-08T23:11:05Z

Admin at 22:22, 8 April 2012

2012-04-08T22:22:47Z

Admin at 21:39, 8 April 2012

2012-04-08T21:39:21Z

Show changes

Admin at 21:07, 8 April 2012

2012-04-08T21:07:52Z

Admin at 20:55, 8 April 2012

2012-04-08T20:55:29Z

Show changes

Admin: Created page with "I always forget this stuff... is it `click()` or `onclick()`? Hope this will be helpful to others too. This is by no means definite or complete guide... well, it's..."

2012-04-08T20:30:12Z

Created page with "I always forget this stuff... is it <tt>click()</tt> or <tt>onclick()</tt>? Hope this will be helpful to others too. This is by no means definite or complete guide... well, it's..."

New page

I always forget this stuff... is it <tt>click()</tt> or <tt>onclick()</tt>?
Hope this will be helpful to others too.

This is by no means definite or complete guide... well, it's a cheat sheet.
Most of the stuff here is just DOM and events related. AJAX etc. is best described in [http://api.jquery.com/ jQuery docs].

* '''.add()'''
Add elements to the set of matched elements.
* '''.addClass()'''
Adds the specified class(es) to each of the set of matched elements.
* '''.after()'''
Insert content, specified by the parameter, after each element in the set of matched elements.
* '''.animate()'''
Perform a custom animation of a set of CSS properties.
* '''.append()'''
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
* '''.attr()'''
Get the value of an attribute for the first element in the set of matched elements.
* '''.before()'''
Insert content, specified by the parameter, before each element in the set of matched elements.
* '''.children()'''
Get the children of each element in the set of matched elements, optionally filtered by a selector.
* '''.clearQueue()'''
Remove from the queue all items that have not yet been run.
* '''.click()'''
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
* '''.css()'''
Get the value of a style property for the first element in the set of matched elements.
* '''.delay()'''
Set a timer to delay execution of subsequent items in the queue.
* '''.each()'''
Iterate over a jQuery object, executing a function for each matched element.
* '''.fadeIn()'''
Display the matched elements by fading them to opaque.
* '''.fadeOut()'''
Hide the matched elements by fading them to transparent.
* '''.fadeTo()'''
Adjust the opacity of the matched elements.
* '''.fadeToggle()'''
Display or hide the matched elements by animating their opacity.
* '''.filter()'''
Reduce the set of matched elements to those that match the selector or pass the function's test.
* '''.find()'''
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
* '''.first()'''
Reduce the set of matched elements to the first in the set.
* '''.focus()'''
Bind an event handler to the "focus" JavaScript event, or trigger that event on an element.
* '''.focusin()'''
Bind an event handler to the "focusin" event.
* '''.focusout()'''
Bind an event handler to the "focusout" JavaScript event.
* '''.height()'''
Get the current computed height for the first element in the set of matched elements.
* '''.hide()'''
Hide the matched elements.
* '''.hover()'''
Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
* '''.html()'''
Get the HTML contents of the first element in the set of matched elements.
* '''.innerHeight()'''
Get the current computed height for the first element in the set of matched elements, including padding but not border.
* '''.innerWidth()'''
Get the current computed width for the first element in the set of matched elements, including padding but not border.
* '''.insertAfter()'''
Insert every element in the set of matched elements after the target.
* '''.insertBefore()'''
Insert every element in the set of matched elements before the target.
* '''.keydown()'''
Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.
* '''.keypress()'''
Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.
* '''.keyup()'''
Bind an event handler to the "keyup" JavaScript event, or trigger that event on an element.
* '''.last()'''
Reduce the set of matched elements to the final one in the set.
* '''.map()'''
Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
* '''.mousedown()'''
Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
* '''.mouseenter()'''
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
* '''.mouseleave()'''
Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
* '''.mousemove()'''
Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.
* '''.mouseout()'''
Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.
* '''.mouseover()'''
Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.
* '''.mouseup()'''
Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.
* '''.next()'''
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
* '''.nextAll()'''
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
* '''.nextUntil()'''
Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
* '''.outerHeight()'''
Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
* '''.outerWidth()'''
Get the current computed width for the first element in the set of matched elements, including padding and border.
* '''.parent()'''
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
* '''.parents()'''
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
* '''.position()'''
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
* '''.prepend()'''
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
* '''.prependTo()'''
Insert every element in the set of matched elements to the beginning of the target.
* '''.prev()'''
Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
* '''.remove()'''
Remove the set of matched elements from the DOM.
* '''.removeAttr()'''
Remove an attribute from each element in the set of matched elements.
* '''.removeClass()'''
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
* '''.resize()'''
Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.
* '''.scroll()'''
Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.
* '''.scrollLeft()'''
Get the current horizontal position of the scroll bar for the first element in the set of matched elements.
* '''.scrollTop()'''
Get the current vertical position of the scroll bar for the first element in the set of matched elements.
* '''.select()'''
Bind an event handler to the "select" JavaScript event, or trigger that event on an element.
* '''.show()'''
Display the matched elements.
* '''.siblings()'''
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
* '''.slideDown()'''
Display the matched elements with a sliding motion.
* '''.slideToggle()'''
Display or hide the matched elements with a sliding motion.
* '''.slideUp()'''
Hide the matched elements with a sliding motion.
* '''.stop()'''
Stop the currently-running animation on the matched elements.
* '''.submit()'''
Bind an event handler to the "submit" JavaScript event, or trigger that event on an element.
* '''.text()'''
Get the combined text contents of each element in the set of matched elements, including their descendants.
* '''.toggle()'''
Display or hide the matched elements.
* '''.toggle()'''
Bind two or more handlers to the matched elements, to be executed on alternate clicks.
* '''.toggleClass()'''
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
* '''.val()'''
Get the current value of the first element in the set of matched elements.
* '''.width()'''
Get the current computed width for the first element in the set of matched elements.
* '''.wrap()'''
Wrap an HTML structure around each element in the set of matched elements.
* '''.wrapAll()'''
Wrap an HTML structure around all elements in the set of matched elements.
* '''.wrapInner()'''
Wrap an HTML structure around the content of each element in the set of matched elements.

@@ Line 211: / Line 211: @@
 * '''eventData''' A map of data that will be passed to the event handler.
 * '''handler(eventObject)''' A function to execute each time the event is triggered.
 === .height() and .width() ===
@@ Line 388: / Line 397: @@
 === .position() ===
 Get the current coordinates of the first element in the set of matched elements, relative to the offset parent. Returns an object containing the properties ''top'' and ''left''. See also ''.offset()''.
 === .remove() ===

@@ Line 280: / Line 280: @@
   .keyup()
 Trigger the "keydown"/"keypress"/"keyup" event.
 === .map() ===

@@ Line 283: / Line 283: @@
 === .map() ===
 Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
 === .mousedown() and .mouseup() ===
 Bind an event handler to the "mousedown"/"mouseup" JavaScript event, or trigger that event on an element.
-=== .mouseenter() and .mouseleave() ===
+ .mousedown( handler(eventObject) )
-Bind an event handler to be fired when the mouse enters/leaves an element, or trigger that handler on an element.
+ .mouseup( handler(eventObject) )
-=== .mousemove() ===
+* '''handler(eventObject)''' A function to execute each time the event is triggered.
-Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.
+ .mousedown( [eventData], handler(eventObject) )
-=== .mouseout() ===
+ .mouseup( [eventData], handler(eventObject) )
-Bind an event handler to the "mouseout" JavaScript event, or trigger that event on an element.
+* '''eventData''' A map of data that will be passed to the event handler.
-=== .mouseover() ===
+* '''handler(eventObject)''' A function to execute each time the event is triggered.
-Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.
+ .mousedown()
 === .next() and .prev() ===
 Get the immediately following/preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next/previous sibling only if it matches that selector.
 === .nextAll() and .prevAll() ===
 Get all following/preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
 === .nextUntil() and .prevUntil() ===
 Get all following/preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
 === .outerHeight() and .outerWidth() ===
 Get the current computed height/width for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or ''null'' if called on an empty set of elements.
 === .parent() ===
 Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
 === .parents() ===
 Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
 === .position() ===
 Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
 === .remove() ===
 Remove the set of matched elements from the DOM.
 === .removeAttr() ===
 Remove an attribute from each element in the set of matched elements.
 === .removeClass() ===
 Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
 === .resize() ===
 Bind an event handler to the "resize" JavaScript event, or trigger that event on an element.
 === .scroll() ===
 Bind an event handler to the "scroll" JavaScript event, or trigger that event on an element.

@@ Line 1: / Line 1: @@
-I always forget this stuff... is it <tt>click()</tt> or <tt>onclick()</tt>?
+I always forget this stuff... is it <tt>click()</tt> or <tt>onclick()</tt>? <small>(it's <tt>click()</tt> in case you're wondering)</small>
 Hope this will be helpful to others too.
 This is by no means definite or complete guide... well, it's a cheat sheet.
 Most of the stuff here is just DOM and events related. AJAX etc. is best described in [http://api.jquery.com/ jQuery docs].
@@ Line 111: / Line 113: @@
   .css( propertyName, function(index, value) )
 * '''propertyName''' A CSS property name.
-* '''function(index, value)''' A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
+* '''function(index, value)''' A function returning the value to set. ''this'' is the current element. Receives the index position of the element in the set and the old value as arguments.
   .css( map )
 * '''map''' A map of property-value pairs to set.
@@ Line 129: / Line 131: @@
   .delay( duration [, queueName] )
 * '''duration''' An integer indicating the number of milliseconds to delay execution of the next item in the queue.
-* '''queueName''' A string containing the name of the queue. Defaults to fx, the standard effects queue.
+* '''queueName''' A string containing the name of the queue. Defaults to ''fx'', the standard effects queue.
 === .each() ===
@@ Line 172: / Line 174: @@
 * '''selector''' A string containing a selector expression to match the current set of elements against.
   .filter( function(index) )
-* '''function(index)''' A function used as a test for each element in the set. this is the current DOM element.
+* '''function(index)''' A function used as a test for each element in the set. Within the function, ''this'' is the current DOM element.
   .filter( element )
 * '''element''' An element to match the current set of elements against.
@@ Line 212: / Line 214: @@
 === .height() and .width() ===
 Get the current computed height/width for the first element in the set of matched elements.
 === .hide() and .show() ===
 Hide/Display the matched elements.
 === .hover() ===
 Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
 === .html() ===
 Get the HTML contents of the first element in the set of matched elements.
 === .innerHeight() and .innerWidth() ===
@@ Line 227: / Line 261: @@
 === .insertAfter() and .insertBefore() ===
 Insert every element in the set of matched elements after/before the target.
-=== .keydown() and .keyup() ===
+=== .keydown(), .keypress() and .keyup() ===
-Bind an event handler to the "keydown"/"keyup" JavaScript event, or trigger that event on an element.
+Bind an event handler to the "keydown"/"keypress"/"keyup" JavaScript event, or trigger that event on an element.
+ .keydown( handler(eventObject) )
-=== .keypress() ===
+ .keypress( handler(eventObject) )
-Bind an event handler to the "keypress" JavaScript event, or trigger that event on an element.
+ .keyup( handler(eventObject) )
 === .map() ===

@@ Line 53: / Line 53: @@
 ** specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).
-=== .append() ===
+=== .append() and .prepend() ===
-Insert content, specified by the parameter, to the end of each element in the set of matched elements.
+Insert content, specified by the parameter, to the end/beginning of each element in the set of matched elements.
   .append( content [, content] )
-* '''content''' DOM element, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
+ .prepend( content [, content] )
-* '''content''' One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.
+* '''content''' DOM element, HTML string, or jQuery object to insert at the end/beginning of each element in the set of matched elements.
   .append( function(index, html) )
-* '''function(index, html)''' A function that returns an HTML string, DOM element(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, ''this'' refers to the current element in the set.
+ .prepend( function(index, html) )
 === .attr() ===
@@ Line 202: / Line 210: @@
 * '''handler(eventObject)''' A function to execute each time the event is triggered.
-=== .height() ===
+=== .height() and .width() ===
-Get the current computed height for the first element in the set of matched elements.
+Get the current computed height/width for the first element in the set of matched elements.
-=== .hide() ===
+=== .hide() and .show() ===
-Hide the matched elements.
+Hide/Display the matched elements.
 === .hover() ===
@@ Line 228: / Line 236: @@
 === .map() ===
 Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
-=== .mousedown() ===
+=== .mousedown() and .mouseup() ===
-Bind an event handler to the "mousedown" JavaScript event, or trigger that event on an element.
+Bind an event handler to the "mousedown"/"mouseup" JavaScript event, or trigger that event on an element.
-=== .mouseenter() ===
+=== .mouseenter() and .mouseleave() ===
-Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
+Bind an event handler to be fired when the mouse enters/leaves an element, or trigger that handler on an element.
-=== .mouseleave() ===
 Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.
 === .mousemove() ===
 Bind an event handler to the "mousemove" JavaScript event, or trigger that event on an element.
@@ Line 240: / Line 246: @@
 === .mouseover() ===
 Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element.
-=== .mouseup() ===
+=== .next() and .prev() ===
-Bind an event handler to the "mouseup" JavaScript event, or trigger that event on an element.
+Get the immediately following/preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next/previous sibling only if it matches that selector.
-=== .next() ===
+=== .nextAll() and .prevAll() ===
-Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
+Get all following/preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
-=== .nextAll() ===
+=== .nextUntil() and .prevUntil() ===
-Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
+Get all following/preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
-=== .nextUntil() ===
+=== .outerHeight() and .outerWidth() ===
-Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
+Get the current computed height/width for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or ''null'' if called on an empty set of elements.
 === .outerHeight() ===
-Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
-=== .outerWidth() ===
-Get the current computed width for the first element in the set of matched elements, including padding and border.
 === .parent() ===
 Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
@@ Line 258: / Line 260: @@
 === .position() ===
 Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
 === .remove() ===
 Remove the set of matched elements from the DOM.
@@ Line 280: / Line 276: @@
 === .select() ===
 Bind an event handler to the "select" JavaScript event, or trigger that event on an element.
 === .siblings() ===
 Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
-=== .slideDown() ===
+=== .slideDown() and .slideUp() ===
-Display the matched elements with a sliding motion.
+Display/Hide the matched elements with a sliding motion.
 === .slideToggle() ===
 Display or hide the matched elements with a sliding motion.
 === .stop() ===
 Stop the currently-running animation on the matched elements.
@@ Line 304: / Line 296: @@
 === .val() ===
 Get the current value of the first element in the set of matched elements.
 === .wrap() ===
 Wrap an HTML structure around each element in the set of matched elements.

@@ Line 7: / Line 7: @@
 ==== .add() ====
 Add elements to the set of matched elements.
 ==== .addClass() ====
 Adds the specified class(es) to each of the set of matched elements.
 ==== .after() ====
 Insert content, specified by the parameter, after each element in the set of matched elements.
 ==== .animate() ====
 Perform a custom animation of a set of CSS properties.
 ==== .append() ====
 Insert content, specified by the parameter, to the end of each element in the set of matched elements.
 ==== .attr() ====
 Get the value of an attribute for the first element in the set of matched elements.
 ==== .before() ====
 Insert content, specified by the parameter, before each element in the set of matched elements.
 ==== .children() ====
 Get the children of each element in the set of matched elements, optionally filtered by a selector.
 ==== .clearQueue() ====
 Remove from the queue all items that have not yet been run.
 ==== .click() ====
 Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

Small jQuery Cheat Sheet - Revision history

Admin at 23:46, 11 April 2012

Admin at 08:39, 9 April 2012

Admin at 23:53, 8 April 2012

Admin at 23:24, 8 April 2012

Admin at 23:11, 8 April 2012

Admin at 22:22, 8 April 2012

Admin at 21:39, 8 April 2012

Admin at 21:07, 8 April 2012

Admin at 20:55, 8 April 2012

Admin: Created page with "I always forget this stuff... is it click() or onclick()? Hope this will be helpful to others too. This is by no means definite or complete guide... well, it's..."

Admin: Created page with "I always forget this stuff... is it `click()` or `onclick()`? Hope this will be helpful to others too. This is by no means definite or complete guide... well, it's..."