fullstack

jQuery

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>

#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 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");

#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 Replacement

#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

#Document Loading

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

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