jQuery Cheatsheet

Hiding all div element using fadeOut()

$(document).ready(function() {
    $('div').fadeOut(1000);
});

Hiding an element with on click event

$(document).ready(function() {
    $("button").click(function() {
        $("#elementId").fadeOut('slow');
    });
});

Sliding down an element with id #header using slideDown()

$(document).ready(function() {
    $('#header').slideDown('slow');
});

Slide down and slide up on click

$(document).ready(function(){
    $('#button').click(function(){
        $('#slidewindow').slideToggle('slow');
        });    
    });

Modifying content

$(document).ready(function(){
    $('p').html("New Content!");
    });

Get value from the input box and append the value as an new element

$(document).ready(function(){
    $("#button").click(function(){
        var toAdd = $('input[name=Item]').val();
        $('.list').append("<div class='item'>"+toAdd+"</div>");
        });    
    });

Get value from the input box and append the value as an new element, remove it if it isclicked

$(document).ready(function(){
    $("#button").click(function(){
        var toAdd = $('input[name=Item]').val();
        $('.list').append("<div class='item'>"+toAdd+"</div>");
        });    
    $(document).on('click', '.item', function() {
        $(this).remove();
        });
    });

Double click event

$(document).ready(function(){
    $('div').dblclick(function(){
        $(this).fadeOut('fast');
        });
    });

Mouseenter and Mouseleave event

$(document).ready(function(){
    $('div').mouseenter(function(){
        $(this).fadeTo('fast',1);
        });
    $('div').mouseleave(function(){
        $(this).fadeTo('fast',0.25);
        });
    });

Focus event and change css on focus

$(document).ready(function(){
    $('input').focus(function(){
        $(this).css("outline-color","red");
        });
    });

Keydown and animate event, this example moves the div to the right 10px in .5 second on any keydown

$(document).ready(function() {
  $(document).keydown(function() {
    $('div').animate({left:'+=10px'},500);
  });
});

Move the element up, down, left, right on w, s, a, d keys respectively. demo

$(document).ready(function(){
    $(document).keydown(function(key){
        switch(parseInt(key.which,10))
        {
            //move left
            case 37: // left arrow
            case 65: // a
                $('div').animate({left:"-=30px"},'fast');
                break;
            //move down
            case 40: //down arrow
            case 83: //s
                $('div').animate({top:"+=30px"},'fast');
                break;
            //move up
            case 38: //up arrow
            case 87: //w
                $('div').animate({top:"-=30px"},'fast');
                break;
            //move right
            case 39: //right arrow
            case 68: //s
                $('div').animate({left:"+=30px"},'fast');
                break;
            default:
                break;
        }
    });
});

Explode the elment on click

$(document).ready(function(){
    $('div').click(function(){
        $(this).effect('explode');
        });
    });

Bounce the element 3 times on click

$(document).ready(function(){
    $('div').click(function(){
        $(this).effect('bounce', {times:3}, 500);
        });
    });

Slide the element on clicke

$(document).ready(function(){
    $('div').click(function(){
        $(this).effect('slide');
        });
    });

Make the element draggable

$(document).ready(function(){
    $("#myDiv").draggable();
    });

Make the element resizable

$(document).ready(function(){
    $('div').resizable();
    });

Make the list item selectable provided the css ol .ui-selected {background: #F39814; color: white;}

$(document).ready(function(){
    $('ol').selectable();
    });