jQuery Quick Dev Reference

This jQuery cheat sheet is a great reference for both beginners and experienced developers.

Getting Started

Including jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>

jQuery syntax

$(selector).methodOrFunction();

$('#menu').on('click', () =>{
  $(this).hide();  
});

$("body").css("background", "red");

jQuery document ready

$(document).ready(function() {
  // Runs after the DOM is loaded.
  alert('DOM fully loaded!');
});

$(function(){
  // Runs after the DOM is loaded.
  alert('DOM fully loaded!');
});

jQuery Selectors

Examples

$("button").click(() => {
    $(":button").css("color", "red");
});

$("selector1, selector2 ...selectorn")

Basics

* .class element #id :hidden :visible :contains() :empty :has() :parent parent > child ancestor descendant prev + next prev ~ siblings

Basic Filters

:animated :eq() :even :first :gt() :header :lang() :last :lt() :not() :odd :root :target

Attribute

[name|="value"] [name*="value"] [name~="value"] [name$="value"] [name="value"] [name!="value"] [name^="value"] [name] [name="value"][name2="value2"]

Child Filters

:first-child :first-of-type :last-child :last-of-type :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type()

Forms

:button :checkbox :checked :disabled :enabled :focus :file :image :input :password :radio :reset :selected :submit :text

jQuery Attributes

Examples

$('h2').css({
  color: 'blue',
  backgroundColor: 'gray',
  fontSize: '24px'
});

$('.button').addClass('active'); 

$('.button').on('mouseleave', evt => {
   let e = evt.currentTarget;
   $(e).removeClass('active');
});

$('.choice').toggleClass('highlighted');

Attributes

.attr() .prop() .removeAttr() .removeProp() .val()

jQuery.data() .data() jQuery.hasData() jQuery.removeData() .removeData()

CSS

.addClass() .hasClass() .removeClass() .toggleClass() .css() jQuery.cssHooks jQuery.cssNumber jQuery.escapeSelector()

Dimensions

.height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width()

Offset

.offset() .offsetParent() .position() .scrollLeft() .scrollTop()

jQuery Manipulation

Examples

/*<span>Span.</span>*/
$('span').after('<p>Paragraph.</p>');
/*<span>Span.</span><p>Paragraph.</p>*/

/*<span>Span.</span>*/
$('<span>Span.</span>').replaceAll('p');
/*<p>Span.</p>*/

/*<span>This is span.</span>*/
$('span').wrap('<p></p>');
/*<p><span>This is span.</span></p>*/

Copying

.clone()

DOM Insertion, Around

.wrap() .wrapAll() .wrapInner()

DOM Insertion, Inside

.append() .appendTo() .html() .prepend() .prependTo() .text()

DOM Insertion, Outside

.after() .before() .insertAfter() .insertBefore()

DOM Removal

.detach() .empty() .remove() .unwrap()

DOM Replacement

.replaceAll() .replaceWith()

jQuery Traversing

Filtering

.eq() .filter() .first() .has() .is() .last() .map() .not() .slice()

Miscellaneous Traversing

.add() .addBack() .andSelf() .contents() .each() .end()

Tree Traversal

.children() .closest() .find() .next() .nextAll() .nextUntil() .parent() .parents() .parentsUntil() .prev() .prevAll() .prevUntil() .siblings()

jQuery Events

Examples

// A mouse event 'click'
$('#menu-button').on('click', () => {
  $('#menu').show();
});

// A keyboard event 'keyup'
$('#textbox').on('keyup', () => {
  $('#menu').show();
});

// A scroll event 'scroll'
$('#menu-button').on('scroll', () => {
  $('#menu').show();
});

$('#menu').on('click', event => {
  $(event.currentTarget).hide();
});

$('#menu-btn').on('mouseenter', () => {
  $('#menu').show();
}).on('mouseleave', () => {
  $('#menu').hide();
});

$( "p" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

Browser Events

.error() .resize() .scroll()

Event Object

event.currentTarget event.delegateTarget event.data event.isDefaultPrevented() event.isImmediatePropagationStopped() event.isPropagationStopped() event.metaKey event.namespace event.pageX event.pageY event.preventDefault() event.relatedTarget event.result event.stopImmediatePropagation() event.stopPropagation() event.target event.timeStamp event.type event.which

Document Loading

.load() .ready() .unload()

Event Handler Attachment

.bind() .delegate() .die() .live() .off() .on() .one() .trigger() .triggerHandler() .unbind() .undelegate()

Form Events

.blur() .change() .focus() .focusin() .focusout() .select() .submit()

Keyboard Events

.keydown() .keypress() .keyup()

Mouse Events

.click() .contextMenu() .dblclick() .hover() .mousedown() .mouseenter() .mouseleave() .mousemove() .mouseout() .mouseover() .mouseup() .toggle()

jQuery Effects

Examples

$('#menu-button').on('click', () => {
  // $('#menu').fadeIn(400, 'swing')
  $('#menu').fadeIn();
});

$('#menu-button').on('click', () => {
  // $('#menu').fadeOut(400, 'swing')
  $('#menu').fadeOut();
});

Basics

.hide() .show() .toggle()

Sliding

.slideDown() .slideToggle() .slideUp()

Custom

.animate() .clearQueue() .delay() .dequeue() jQuery.dequeue() .finish() jQuery.fx.interval jQuery.fx.off jQuery.speed .queue() jQuery.queue() .stop()

Fading

.fadeIn() .fadeOut() .fadeTo() .fadeToggle()

jQuery Ajax

Examples

$.ajax({
  url: this.action,
  type: this.method,
  data: $(this).serialize()
}).done(function(server_data){
  console.log("success" + server_data);
}).fail(function(jqXHR, status, err){
  console.log("fail" + err);
});

Global Ajax Event Handlers

.ajaxComplete() .ajaxError() .ajaxSend() .ajaxStart() .ajaxStop() .ajaxSuccess()

Helper Functions

jQuery.param() .serialize() .serializeArray()

Low-Level Interface

jQuery.ajax() jQuery.prefilter() jQuery.ajaxSetup() jQuery.ajaxTransport()

Shorthand Methods

jQuery.get() jQuery.getJSON() jQuery.getScript() jQuery.post() .load()

Miscellaneous

jQuery Object

jQuery() jQuery.noConflict() jQuery.sub() jQuery.holdReady() jQuery.when()

Deferred Object

jQuery.Deferred() deferred.always() deferred.done() deferred.fail() deferred.isRejected() deferred.isResolved() deferred.notify() deferred.notifyWith() deferred.pipe() deferred.progress() deferred.promise() deferred.reject() deferred.rejectWith() deferred.resolve() deferred.resolveWith() deferred.state() deferred.then() .promise()

Utilities

jQuery.boxModel jQuery.browser jQuery.contains() jQuery.each() jQuery.extend() jQuery.globalEval() jQuery.grep() jQuery.inArray() jQuery.isArray() jQuery.isEmptyObject() jQuery.isFunction() jQuery.isNumeric() jQuery.isPlainObject() jQuery.isWindow() jQuery.isXMLDoc() jQuery.makeArray() jQuery.map() jQuery.merge() jQuery.noop() jQuery.now() jQuery.parseHTML() jQuery.parseJSON() jQuery.parseXML() jQuery.proxy() jQuery.support jQuery.trim() jQuery.type() jQuery.unique() jQuery.uniqueSort()

DOM Element Methods

.get() .index() .size() .toArray()

Internals

.jquery .context jQuery.error() .length .pushStack() .selector

Callbacks Object

jQuery.Callbacks() callbacks.add() callbacks.disable() callbacks.disabled() callbacks.empty() callbacks.fire() callbacks.fired() callbacks.fireWith() callbacks.has() callbacks.lock() callbacks.locked() callbacks.remove()