Programming
jQuery

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', () =>{
  $(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 {.secondary}

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

Combining selectors

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

Basics

Basic Filters

Attribute

Child Filters

Forms

jQuery Attributes

Examples {.secondary .row-span-2}

$('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

CSS

Dimensions

  • .height() (opens in a new tab){data-tooltip="Get the current computed height for the first element in the set of matched elements."}
  • .innerHeight() (opens in a new tab){data-tooltip="Get the current computed height for the first element in the set of matched elements, including padding but not border."}
  • .innerWidth() (opens in a new tab){data-tooltip="Get the current computed inner width for the first element in the set of matched elements, including padding but not border."}
  • .outerHeight() (opens in a new tab){data-tooltip="Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements."}
  • .outerWidth() (opens in a new tab){data-tooltip="Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements."}
  • .width() (opens in a new tab){data-tooltip="Get the current computed width for the first element in the set of matched elements."} {.marker-none .cols-2}

Offset

  • .offset() (opens in a new tab){data-tooltip="Get the current coordinates of the first element in the set of matched elements, relative to the document."}
  • .offsetParent() (opens in a new tab){data-tooltip="Get the closest ancestor element that is positioned."}
  • .position() (opens in a new tab){data-tooltip="Get the current coordinates of the first element in the set of matched elements, relative to the offset parent."}
  • .scrollLeft() (opens in a new tab){data-tooltip="Get the current horizontal position of the scroll bar for the first element in the set of matched elements."}
  • .scrollTop() (opens in a new tab){data-tooltip="Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element."} {.marker-none .cols-2}

jQuery Manipulation

Examples {.secondary .row-span-3}

/*<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

  • .eq() (opens in a new tab){data-tooltip="Reduce the set of matched elements to the one at the specified index."}
  • .filter() (opens in a new tab){data-tooltip="Reduce the set of matched elements to those that match the selector or pass the function's test. "}
  • .first() (opens in a new tab){data-tooltip="Reduce the set of matched elements to the first in the set."}
  • .has() (opens in a new tab){data-tooltip="Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element."}
  • .is() (opens in a new tab){data-tooltip="Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments."}
  • .last() (opens in a new tab){data-tooltip="Reduce the set of matched elements to the final one in the set."}
  • .map() (opens in a new tab){data-tooltip="Pass each element in the current matched set through a function, producing a new jQuery object containing the return values."}
  • .not() (opens in a new tab){data-tooltip="Remove elements from the set of matched elements."}
  • .slice() (opens in a new tab){data-tooltip="Reduce the set of matched elements to a subset specified by a range of indices."} {.marker-none .cols-3}

Miscellaneous Traversing

Tree Traversal

  • .children() (opens in a new tab){data-tooltip="Get the children of each element in the set of matched elements, optionally filtered by a selector."}
  • .closest() (opens in a new tab){data-tooltip="For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree."}
  • .find() (opens in a new tab){data-tooltip="Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element."}
  • .next() (opens in a new tab){data-tooltip="Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector."}
  • .nextAll() (opens in a new tab){data-tooltip="Get all following siblings of each element in the set of matched elements, optionally filtered by a selector."}
  • .nextUntil() (opens in a new tab){data-tooltip="Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed."}
  • .parent() (opens in a new tab){data-tooltip="Get the parent of each element in the current set of matched elements, optionally filtered by a selector."}
  • .parents() (opens in a new tab){data-tooltip="Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector."}
  • .parentsUntil() (opens in a new tab){data-tooltip="Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object."}
  • .prev() (opens in a new tab){data-tooltip="Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector."}
  • .prevAll() (opens in a new tab){data-tooltip="Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector."}
  • .prevUntil() (opens in a new tab){data-tooltip="Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object."}
  • .siblings() (opens in a new tab){data-tooltip="Get the siblings of each element in the set of matched elements, optionally filtered by a selector."} {.marker-none .cols-3}

jQuery Events

Examples {.secondary .row-span-6}

// 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 {.row-span-6}

Document Loading

Event Handler Attachment

Form Events

Keyboard Events

Mouse Events

jQuery Effects

Examples {.secondary .row-span-2}

$('#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 {.secondary .row-span-2}

$.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

  • jQuery.param() (opens in a new tab){data-tooltip="Create a serialized representation of an array, a plain object, or a jQuery object suitable for use in a URL query string or Ajax request. In case a jQuery object is passed, it should contain input elements with name/value properties."}
  • .serialize() (opens in a new tab){data-tooltip="Encode a set of form elements as a string for submission."}
  • .serializeArray() (opens in a new tab){data-tooltip="Encode a set of form elements as an array of names and values."} {.marker-none .cols-2}

Low-Level Interface

Shorthand Methods

Miscellaneous

jQuery Object

Deferred Object {.row-span-2}

Utilities {.row-span-3}

DOM Element Methods

Internals

Callbacks Object

CSS 3JavaScript