jQuery Functions Cheat Sheet

DOM Manipulation

• $(selector) - Selects DOM elements using CSS-style selectors.

          $("#myElement") // Select by ID
          $(".myClass")   // Select by class
          $("div")        // Select by tag
          

• .html() - Gets or sets the HTML content of an element.

      $("#div1").html()           // Get HTML content
      $("#div1").html("<p>Hello</p>") // Set HTML content
          

• .text() - Gets or sets the text content of an element.

      $("#div1").text()         // Get text content
      $("#div1").text("Hello")  // Set text content
          

• .val() - Gets or sets the value of form inputs.

      $("#input1").val()        // Get input value
      $("#input1").val("Test")  // Set input value    
          

• .attr() - Gets or sets an attribute value of an element.

      $("#img1").attr("src")             // Get attribute
      $("#img1").attr("src", "new.jpg")  // Set attribute
          

• .removeAttr() - Removes an attribute from an element.

      $("#link1").removeAttr("target")  // Remove attribute
          

• addClass() - Adds a CSS class to selected elements.

       $("#div1").addClass("active")  // Add CSS class
      

• .removeClass() - Removes a CSS class from selected elements.

      $("#element").removeClass("className");  // Removes specified class
      

• .toggleClass() - Toggles a CSS class on/off for selected elements.

      $("#element").toggleClass("active");  // Toggles class on/off
      

• .css() - Gets or sets a CSS property of an element.

      $("#element").css("color");  // Gets CSS property
      $("#element").css("color", "red");  // Sets CSS property
      

• .append() - Inserts content at the end of selected elements.

      $("#container").append("<p>New content</p>");  // Adds to end
      

• .prepend() - Inserts content at the beginning of selected elements.

      $("#container").prepend("<p>First content</p>");  // Adds to beginning
      

• .after() - Inserts content after selected elements.

      $("#element").after("<div>New sibling after</div>");  // Inserts after
      

• .before() - Inserts content before selected elements.

      $("#element").before("<div>New sibling before</div>");  // Inserts before
      

• .remove() - Removes selected elements from the DOM.

      $("#element").remove();  // Removes element completely
      

• .empty() - Removes all child elements of selected elements.

      $("#container").empty();  // Clears all child elements
      

Events

• .click() - Binds or triggers a click event handler.

  $("#button").click(function() {
      alert("Button clicked!");
  });
  // Trigger click
  $("#button").click();
      

• .on() - Attaches an event handler for specified events.

  $("#element").on("click", function() {
      console.log("Element clicked");
  });
      

• .off() - Removes an event handler.

  $("#element").off("click");  // Remove click handler
      

• .hover() - Binds handlers for mouseenter and mouseleave events.

  $("#element").hover(
      function() { // mouseenter
          $(this).css("background", "yellow");
      },
      function() { // mouseleave
          $(this).css("background", "white");
      }
  );
      

• .submit() - Binds or triggers a form submit event.

  $("#form").submit(function(e) {
      e.preventDefault();
      alert("Form submitted!");
  });
      

• .keypress() - Binds or triggers a keypress event.

  $("#input").keypress(function(e) {
      console.log("Key pressed: " + e.which);
  });
      

• .focus() - Binds or triggers a focus event.

  $("#input").focus(function() {
      $(this).css("border", "2px solid blue");
  });
      

• .blur() - Binds or triggers a blur event.

  $("#input").blur(function() {
      $(this).css("border", "1px solid gray");
  });
      

Effects & Animations

• .hide() - Hides selected elements.

  $("#element").hide();  // Hide immediately
  $("#element").hide(1000);  // Hide with 1s animation
      

• .show() - Shows selected elements.

  $("#element").show();  // Show immediately
  $("#element").show("slow");  // Show with animation
      

• .toggle() - Toggles between hide and show.

  $("#element").toggle();  // Toggle visibility
  $("#element").toggle(500);  // With 0.5s animation
      

• .fadeIn() - Fades in selected elements.

  $("#element").fadeIn();  // Default fade
  $("#element").fadeIn(2000);  // 2-second fade
      

• .fadeOut() - Fades out selected elements.

  $("#element").fadeOut();  // Default fade
  $("#element").fadeOut("fast");  // Fast fade
      

• .fadeToggle() - Toggles between fadeIn and fadeOut.

  $("#element").fadeToggle();  // Toggle fade
  $("#element").fadeToggle(1000);  // 1s animation
      

• .slideUp() - Slides up (hides) selected elements.

  $("#element").slideUp();  // Default slide
  $("#element").slideUp(800);  // 0.8s slide
      

• .slideDown() - Slides down (shows) selected elements.

  $("#element").slideDown();  // Default slide
  $("#element").slideDown("slow");  // Slow slide
      

• .slideToggle() - Toggles between slideUp and slideDown.

  $("#element").slideToggle();  // Toggle slide
  $("#element").slideToggle(600);  // 0.6s animation
      

• .animate() - Performs custom animations on CSS properties.

  $("#element").animate({
      opacity: 0.5,
      left: "+=50",
      height: "toggle"
  }, 1000);  // 1s animation
      

AJAX

• $.ajax() - Performs an asynchronous HTTP request.

  $.ajax({
      url: "api/data",
      type: "GET",
      success: function(response) {
          console.log("Data received:", response);
      },
      error: function(xhr) {
          console.error("Error:", xhr.statusText);
      }
  });
      

• $.get() - Loads data from a server using an HTTP GET request.

  $.get("api/data", function(response) {
      $("#result").text(response);
  }).fail(function() {
      alert("Error loading data");
  });
      

• $.post() - Loads data from a server using an HTTP POST request.

  $.post("api/save", 
      { name: "John", age: 30 },
      function(response) {
          alert("Data saved: " + response);
      }
  );
      

• $.getJSON() - Loads JSON-encoded data from a server.

  $.getJSON("api/users", function(data) {
      $.each(data, function(i, user) {
          $("#users").append(`<li>${user.name}</li>`);
      });
  });
      

• .load() - Loads HTML content from a server into an element.

  // Load entire response
  $("#content").load("partials/page.html");
  // Load specific element from response
  $("#content").load("partials/page.html #main");
      

Traversal & Filtering

• .find() - Finds descendant elements matching a selector.

  // Find all spans inside a div
  $("#container").find("span");
  // Equivalent to:
  $("#container span");
      

• .parent() - Gets the parent of each selected element.

  // Get direct parent
  $(".child").parent();
  // Get parent with specific class
  $(".child").parent(".parent-class");
      

• .children() - Gets the children of each selected element.

  // Get all direct children
  $("#parent").children();
  // Get children with specific class
  $("#parent").children(".child-class");
      

• .siblings() - Gets the siblings of each selected element.

  // Get all siblings
  $(".item").siblings();
  // Get siblings with specific class
  $(".item").siblings(".active");
      

• .next() - Gets the immediately following sibling.

  // Get next sibling
  $("#item1").next();
  // Get next sibling with class
  $("#item1").next(".highlight");
      

• .prev() - Gets the immediately preceding sibling.

  // Get previous sibling
  $("#item2").prev();
  // Get previous div sibling
  $("#item2").prev("div");
      

• .filter() - Reduces the set of matched elements based on a condition.

  // Filter by selector
  $("div").filter(".important");
  // Filter by function
  $("div").filter(function() {
      return $(this).css("display") !== "none";
  });
      

• .not() - Removes elements from the matched set.

  // Exclude by selector
  $("p").not(".exclude");
  // Exclude by DOM element
  var toExclude = $("#exclude-me");
  $("p").not(toExclude);
      

• .first() - Gets the first element in the matched set.

  // Get first paragraph
  $("p").first();
      

• .last() - Gets the last element in the matched set.

  // Get last list item
  $("li").last();
      

• .eq() - Gets an element at a specific index in the matched set.

  // Get 3rd element (0-based index)
  $("tr").eq(2);
  // Get 2nd last element
  $("li").eq(-2);