CheatSheetsHero

Catalog / jQuery Cheatsheet

jQuery Cheatsheet

A quick reference guide to jQuery, covering selectors, DOM manipulation, events, effects, and AJAX.

Selectors

Basic Selectors

$('*')

Selects all elements.

$(this)

Selects the current HTML element.

$('p')

Selects all <p> elements.

$('.example')

Selects all elements with class=“example”.

$('#firstname')

Selects the element with id=“firstname”.

Attribute Selectors

$('[href]')

Selects all elements with a href attribute.

$('[href="http://example.com"]')

Selects all elements with href value equals “http://example.com”.

$('[href*=".net"]')

Selects all elements with href value containing “.net”.

$('[href^="http"]')

Selects all elements with href value starting with “http”.

$('[href$=".jpg"]')

Selects all elements with href value ending with “.jpg”.

Hierarchy Selectors

$('ancestor descendant')

Selects all elements that are descendants of a given ancestor.

$('parent > child')

Selects all elements that are direct children of a specified parent element.

$('prev + next')

Selects all elements that are the immediately following sibling of a specified element.

$('prev ~ siblings')

Selects all sibling elements that follow after the “prev” element.

DOM Manipulation

Adding Content

.append(content)

Appends content to the end of each element in the set of matched elements.

.prepend(content)

Inserts content to the beginning of each element in the set of matched elements.

.after(content)

Inserts content after each element in the set of matched elements.

.before(content)

Inserts content before each element in the set of matched elements.

Removing Content

.empty()

Removes all child nodes from the set of matched elements.

.remove()

Removes the set of matched elements from the DOM.

Replacing Content

.replaceWith(content)

Replaces each element in the set of matched elements with the provided new content.

Attributes

.attr(attributeName)

Get the value of an attribute for the first element in the set of matched elements.

.attr(attributeName, value)

Set one or more attributes for the set of matched elements.

.removeAttr(attributeName)

Remove an attribute from each element in the set of matched elements.

CSS

.css(propertyName)

Get the value of a computed style property for the first element in the set of matched elements.

.css(propertyName, value)

Set one or more CSS properties for the set of matched elements.

Events

Basic Events

.click(function)

Binds an event handler to the “click” JavaScript event.

.dblclick(function)

Binds an event handler to the “dblclick” JavaScript event.

.mouseenter(function)

Binds an event handler to the “mouseenter” JavaScript event.

.mouseleave(function)

Binds an event handler to the “mouseleave” JavaScript event.

.hover(function1, function2)

A shorthand method for .mouseenter() and .mouseleave().

.mousedown(function)

Binds an event handler to the “mousedown” JavaScript event.

.mouseup(function)

Binds an event handler to the “mouseup” JavaScript event.

.keydown(function)

Binds an event handler to the “keydown” JavaScript event.

.keyup(function)

Binds an event handler to the “keyup” JavaScript event.

Event Handling

.on(event, childSelector, data, function)

Attaches an event handler function for one or more events to the selected elements.

.off(event, selector, function)

Remove an event handler.

.trigger(event, extraParameters)

Execute all handlers and behaviors attached to the matched elements for the given event type.

Effects

Basic Effects

.show(speed, callback)

Displays the matched elements.

.hide(speed, callback)

Hides the matched elements.

.toggle(speed, callback)

Displays or hides the matched elements.

Fading

.fadeIn(speed, callback)

Fades in the matched elements.

.fadeOut(speed, callback)

Fades out the matched elements.

.fadeTo(speed, opacity, callback)

Adjusts the opacity of the matched elements.

.fadeToggle(speed, callback)

Fades in or out the matched elements.

Sliding

.slideDown(speed, callback)

Slides down the matched elements.

.slideUp(speed, callback)

Slides up the matched elements.

.slideToggle(speed, callback)

Slides up or down the matched elements.

Animation

.animate(properties, speed, easing, callback)

Performs a custom animation of a set of CSS properties.

.stop(clearQueue, jumpToEnd)

Stop the currently-running animation on the matched elements.
Download PDF