codeboom.io

jQuery CHEAT SHEET

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

webjsjavascriptlibrary
9
Sections
48
Cards

#Getting Started

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

Official CDN

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  crossorigin="anonymous"
></script>
jQuery syntax
$(selector).methodOrFunction();

Example:

$('#menu').on('click', function () {
  $(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');
});

Combining selectors

$('selector1, selector2 ...selectorn');
Basics
Basic Filters
Attribute
Child Filters
Forms

#jQuery Attributes

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

jQuery addClass

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

jQuery removeClass

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

jQuery .toggleClass

$('.choice').toggleClass('highlighted');
Attributes
CSS
Dimensions
Offset

#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
DOM Insertion, Around
DOM Insertion, Inside
DOM Insertion, Outside
DOM Removal
DOM Replacement

#jQuery Traversing

Filtering
Miscellaneous Traversing
Tree Traversal

#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();
});

Event object

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

Method chaining

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

Prevents the event

$('p').click(function (event) {
  event.stopPropagation();
  // Do something
});
Browser Events
Event Object
Document Loading
Event Handler Attachment
Form Events
Keyboard Events
Mouse Events

#jQuery Effects

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

fadeOut effect

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

#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
Helper Functions
Low-Level Interface
Shorthand Methods

#Miscellaneous

jQuery Object
Deferred Object
Utilities
DOM Element Methods
Internals
Callbacks Object