jQuery Cheat Sheet jQuery CheatSheet

Hide comments


Introduction to jQuery programming


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


   // Short Document Ready


$(".demo").each(function() {                // parse each .demo element
    document.write($(this).text() + "\n");  // output their text


$("a#mylink").trigger("click"); // triggers event on an element


var jq = $.noConflict();            // avoid conflict with other frameworks also using the dollar sign
    jq("#demo").text("Hello World!");


Selectors to target elements. Similar to CSS.
$("*")                      // all elements
$("p.demo")                 // <p> elements with class="intro"
$("p:first")                // the first <p> element
$("p span")                 // span, descendant of p
$("p > span")               // span, direct child of p
$("p + span")               // span immediately proceeded by a p
$("p ~ span")               // strong element proceeded by p
$("ul li:first")            // the first <li> element of the first <ul>
$("ul li:first-child")      // the first <li> element of every <ul>
$("ul li:nth-child(3)")     // third child
$("[href]")                 // any element with an href attribute
$("a[target='_blank']")     // <a> elements with a target "_blank" attribute
$("a[target!='_blank']")    // <a> elements with a target attribute value other than "_blank"
$(":input")                 // all form elements
$(":button")                // <button> and <input> elements of type="button"
$("tr:even")                // even <tr> elements
$("tr:odd")                 // odd <tr> elements
$("span:parent")            // element which has child element
$("span:contains('demo')")  // element conaining the specified text


$(this).hide()      // the current element
$("div").hide()     // all <div> elements
$(".demo").hide()   // all elements with class="demo"
$("#demo").hide()   // the element with id="demo"


Trigger jQuery events


scroll, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, load, resize, scroll, unload, error


keydown, keypress, keyup


submit, change, focus, blur

DOM Element

blur, focus, focusin, focusout, change, select, submit


load, resize, scroll, unload, error


$(document).ready(function() {              // attach a handler to an event for the elements        
    $("#demo").bind('blur', function(e) {
        //dom event fired


Animation effects

Hide / Show

$("#demo").hide();      // sets to display: none
$("#demo").show(200);   // shows hidden elemnt with animation (speed)
$("#demo").toggle();    // toggle between show and hide

$( "#element" ).hide( "slow", function() {  // hide with callback function
    console.log( "Animation complete." );


fadeIn, fadeOut, fadeToggle, fadeTo
$("#demo").fadeIn();                // fade in a hidden element
$("#demo").fadeOut(300);            // fade out
$("#demo").fadeToggle("slow");      // toggle between fadeIn and hadeOut
$("#demo").fadeTo("slow", 0.25);    // fades to 0.25 opacity


slideDown, slideUp, slideToggle


    opacity: '0.5',
    left: '200px',
    height: '200px'

stop() Method

$('#demo').mouseleave(function(event) {     // hover end
    $('.tab').stop().animate({              // stop() method
        opacity : '0.5',
        marginTop: '10px'
    }, 500, function() {                    // animation complete
        $('#demo').removeClass('hovered');  // callback function
$('#demo').mouseover(function(event) {      // hover begin
    $('.tab').stop().animate({              // stop() method
        opacity : '1',
        marginTop: '0px'
    }, 300, function() {                    // animation complete
        $('#demo').addClass('hovered');     // callback function


$("#demo").css("backgroundColor", "green").slideUp(500).slideDown(500);

DOM Manipulation

Accessing and manipulating the Document Object Model


$("#demo").text();                  // returns text content
$("#demo").html();                  // returns content, including HTML markup
$("#demo").val();                   // returns field value
$("#demo").html('Hey <em>yo</em>'); // sets HTML content


$("#link").attr("href");                    // get an attribute
$("#link").attr("href",'http://htmlg.com'); // set attribute
    "href" : "http://htmlg.com",            // setting multiple attributes
    "title" : "HTML Editor"
$("#link").attr("href", function(i, origValue){
    return origValue + "/help";             // callback function gets and changes the attribute


$(".demo").prepend("Yo!");          // adds content at the beginning in the selected elements
$(".demo").append("<em>Hey!</em>"); // adds content at the end in the selected elements
$(".demo").before("Cheers");        // adds content before the selected elements
$(".demo").after("<em>Peace</em>"); // adds content after the selected elements


$("#demo").remove();            // removes the selected element
$("#demo").empty();             // removes children
$("div").remove(".cl1, .cl2");  // removes divs with the listed classes


$("#demo").addClass("big red"); // add class
$("h1, p").removeClass("red");  // remove class
$("#demo").toggleClass("big");  // toggle between adding and removing


$("#demo").css("background-color");     // returns CSS value
$("#demo").css("color", "blue");        // sets CSS rule
$("#demo").css({"color": "blue", "font-size": "20px"}); // sets multiple CSS properties


width, height, innerWidth, innerHeight, outerWidth, outerHeight
inner - includes padding
outer - includes padding and border


Select elements based on their relation to other elements.
$("#demo").parent();                // accessing direct parent
$("span").parent().hide();          // changing parent color
$("#demo").parents();               // all ancestors of the element
$("#demo").parentsUntil("#demo2");  // all ancestors between two - demo is inside demo2
$("#demo").children();              // all direct children
$("#demo").children(".first");      // all direct children having a specified class
$("#demo").find("span");            // all span elements inside #demo
$("#demo").find("*");               // all descendants
$("#demo").siblings("span");        // span siblings of #demo
$("#demo").next();                  // the next sibling
$("p").nextAll();                   // all next siblings
$("#demo").nextUntil("#demo2");     // siblings between two arguments
$("#demo").prev();                  // the previous sibling
$("p").prevAll();                   // all previous siblings
$("#demo").prevUntil("#demo2");     // previous siblings between two arguments


$("span strong").first();   // first strong in first span
$("span strong").last();    // last strong in last span
$("div").eq(9);             // element with a specific index
$("div").filter(".big");    // all div elements with .big class
$("div").not(".big");       // opposite of filter


Exchanging data with the server dynamically updating parts of the page.
$("#demo").load("file.txt h1.main");                                // returns the h1 tag in the text file
$("#demo").load("file.txt", function(responseTxt, statusTxt, xhr){  // callback function
    if(statusTxt == "success") {
        document.write("Content loaded successfully!"); 
    } else {
        document.write("Error: " + xhr.status + ": " + xhr.statusText); 


$.get("demo.asp", function(data, status){       //$.get(URL,callback);
    document.write("Data: " + data + "\nStatus: " + status);


$.post("demo.asp",      // send HTTP POST request to a page and get the answer
    name: "John",       // send data
    age: 30
function(data, status){ //retreive response
    console.log("Data: " + data + "\nStatus: " + status);

Useful Links

A list of free useful resources.
Apply CSS

Online jQuery Cheat Sheet

jQuery Cheat Seet will help you create the code for animations, various effects and other features for your website. Find the most common code snippets on a single page.

Hide the green comments with the link in the top right corner of the site. Click the code snippets to highlight then copy-paste them in your project!

  • Basics – Introduction to jQuery syntax through commonly used code examles. Learn how to include jQuery in your HTML code.
  • Selector – Similar to how we target CSS elements in the style sheets, we use selectors.
  • Events – Just like we have JavaScript events, we can set up listeners with jQuery.
  • Effects – Learn how to animate the HTML elements. Make them fade, slide or set up any other effect with custom CSS properties.
  • Dom Manipulation – It's easy to get and edit the content of a Document Object Model item.
  • Traversing – The way of targeting elements based on their hierarchy in the code. Imagine that the source of the page is a family tree where you can work with parents, children, siblings etc.
  • Ajax – Exchange data with the server to dynamically update parts of the page.
  • Links – Useful links and online tools to work with jQuery.

Make sure you save this link to help your next project.