jQuery is one of the most popular DOM manipulation library. This jQuery Cheatsheet is aimed at experienced jQuery developers. This is not complete reference to jQuery library. This jQuery Cheatsheet is my version of most commonly used jQuery DOM manipulations for quick reference.
If you are new to jQuery, then take a look at jQuery Basics with Examples article.
jQuery Selectors
| $(“*”) | Select all DOM elements on the page. |
| $(“#elementID”) | Select all DOM elements with id = elementID. |
| $(“.elementClassName”) | Select all DOM elements with className = elementClassName. |
| $(“element”) | Select all DOM elements with given tag name. |
| $(“div, span, input”) | Multiple Selectors. Select all div, span, and input DOM elements. |
| Contains Selector [name*=”value”] | Selects elements that have the specified attribute with a value containing a given substring. $( "input[name*='man']" ).val( "has man in name attribute!" ) |
| Starts With Selector [name^=”value”] | Selects elements that have the specified attribute with a value beginning exactly with a given string. |
| Ends With Selector [name$=”value”] | Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. $( "input[id$='letter']" ).val( "has a letter as end of id value." ); |
| Equals Selector [name=”value”] | Selects elements that have the specified attribute with a value exactly equal to a certain value. |
| Multiple Attribute Selector [name=”value”][name2=”value2″] | Matches elements that match all of the specified attribute filters. |
jQuery Form Interactions
| .show() | Shows DOM element. Sets style property display = inline. |
| .hide() | Hides DOM element. Sets style property display = none. |
| $(“#elemID :checked”) | Matches all elements that are checked or selected. The :checked selector works for checkboxes, radio buttons, and options of select elements. For ex: $("#elemID :checked").val() |
| $(“select option:selected”) | Selects all elements that are selected. The :selected selector works for <option> elements. It does not work for checkboxes or radio inputs; use :checked for them. |
| .val() | Gets the current value of first matched element in the set. |
jQuery Events
| .ready() | Specify a function to execute when the DOM is fully loaded. |
| .blur() | Binds blur event handler to an element. |
| .change() | Binds change event handler to the change of an element. |
| .focus() | Binds focus event handler to the focus of an element. |
| .submit() | Binds focus event handler to the submit of form. |
| .on() | Attach an event handler function for one or more events to the selected elements. |
| .off() | Remove an event handler. |
| .click() | Bind an event handler to the “click” JavaScript event, or trigger that event on an element. |
| .dblclick() | Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element. |
| .hover() | Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. |
| .trigger() | Execute all handlers and behaviors attached to the matched elements for the given event type. |
| event.preventDefault() | If this method is called, the default action of the event will not be triggered. |
| event.stopPropagation() | Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. |
| .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. |
jQuery Manipulations
| .attr() | Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched elements. For Ex: $("#elem").attr("checked") => Gives value of checked attribute for #elem id.$("#elem").attr("checked", "false") => Sets checked attribute value to false for #elem id. |
| .prop() | Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element. |
Attributes vs. Properties
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
For a checked checkbox return values will be different for attr() and prop(). .attr( “checked” ) => returns checked .prop( “checked” ) => returns true |
|
| .removeAttr() | Remove an attribute from each element in the set of matched elements. |
| .removeProp() | Remove a property for the set of matched elements. |
| .val() | Gets the current value of first matched element in the set. |
| .css() | Gets value of specified style or sets value of style. For Ex: $("#elem").css("display") => Gets first computed value of display CSS property for #elem id.$("span").css("display", "inline") => Sets display CSS property to inline for all span elements. |
| .addClass() | Adds specified class to all matched elements. For ex: $( "p" ).addClass( "myClass yourClass" ); |
| .removeClass() | Removes specified class to all matched elements. |
| .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 state argument. |
| .hasClass() | Determines whether any of the matched elements are assigned the given class. |
| .clone() | Makes a deep copy of element. |
| .empty() | Empty all child elements and text within each matched elements |
| .remove() | Remove the set of matched elements from the DOM. |
| .html() | Gets html content of first matched element or sets html content for all matched elements. |
| .after() | Insert content after each matched elements |
| .insertAfter() | Insert every element in the set of matched elements after the target. |
| .before() | Insert content before each matched elements |
| .insertBefore() | Insert every element in the set of matched elements before the target. |
| .append() | Insert content to the end of each matched elements |
| .prepend() | Insert content, specified by the parameter, to the beginning of each element in the set of matched elements. |
| .appendTo() | Insert each element in the set of matched elements to the end of the target. |
| .prependTo() | Insert every element in the set of matched elements to the beginning of the target. |
| .replaceAll() | Replace each target element with the set of matched elements. |
| .text() | Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements. |
jQuery Miscellaneous
| .data() | Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. |
| .removeData() | Remove a previously-stored piece of data. |
| .each() | Iterate over a jQuery object, executing a function for each matched element. |
| .map() | Pass each element in the current matched set through a function, producing a new jQuery object containing the return values. |
| .filter() | Reduce the set of matched elements to those that match the selector or pass the function’s test. |
| .length() | Return The number of elements in the jQuery object. |
| .toArray() | Retrieve all the elements contained in the jQuery set, as an array. |
