jQuery cheatsheet

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

#Getting Started

#Including jQuery

#Official CDN

#jQuery syntax

 $(selector).methodOrFunction(); 

#Example:

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

#Combining selectors

$("selector1, selector2 . selectorn") 

#Basics

#Basic Filters

#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

#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

#Data

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

#CSS

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

#Dimensions

#Offset

#jQuery Manipulation

#Examples

/*Span.*/ $('span').after('
Paragraph.
'); /*Span.
Paragraph.
*/ /*Span.*/ $('Span.').replaceAll('p'); /*
Span.
*/ /*This is span.*/ $('span').wrap(' '); /*
This is span.
*/ 

#Copying

#DOM Insertion, Around

#DOM Insertion, Inside

#DOM Insertion, Outside

#DOM Removal

#DOM Replacement

• .replaceAll()
• .replaceWith()

#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

• 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