jQuery Cheatsheet

Hiding all div element using fadeOut()
[code language=”javascript”]
$(document).ready(function() {
$(‘div’).fadeOut(1000);
});
[/code]

Hiding an element with on click event
[code language=”javascript”]
$(document).ready(function() {
$("button").click(function() {
$("#elementId").fadeOut(‘slow’);
});
});
[/code]

Sliding down an element with id #header using slideDown()
[code language=”javascript”]
$(document).ready(function() {
$(‘#header’).slideDown(‘slow’);
});
[/code]

Slide down and slide up on click
[code language=”javascript”]
$(document).ready(function(){
$(‘#button’).click(function(){
$(‘#slidewindow’).slideToggle(‘slow’);
});
});
[/code]

Modifying content
[code language=”javascript”]
$(document).ready(function(){
$(‘p’).html("New Content!");
});
[/code]

Get value from the input box and append the value as an new element
[code language=”javascript”]
$(document).ready(function(){
$("#button").click(function(){
var toAdd = $(‘input[name=Item]’).val();
$(‘.list’).append("<div class=’item’>"+toAdd+"</div>");
});
});
[/code]

Get value from the input box and append the value as an new element, remove it if it isclicked
[code language=”javascript”]
$(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();
});
});
[/code]

Double click event
[code language=”javascript”]
$(document).ready(function(){
$(‘div’).dblclick(function(){
$(this).fadeOut(‘fast’);
});
});
[/code]

Mouseenter and Mouseleave event
[code language=”javascript”]
$(document).ready(function(){
$(‘div’).mouseenter(function(){
$(this).fadeTo(‘fast’,1);
});
$(‘div’).mouseleave(function(){
$(this).fadeTo(‘fast’,0.25);
});
});
[/code]

Focus event and change css on focus
[code language=”javascript”]
$(document).ready(function(){
$(‘input’).focus(function(){
$(this).css("outline-color","red");
});
});
[/code]

Keydown and animate event, this example moves the div to the right 10px in .5 second on any keydown
[code language=”javascript”]
$(document).ready(function() {
$(document).keydown(function() {
$(‘div’).animate({left:’+=10px’},500);
});
});
[/code]

Move the element up, down, left, right on w, s, a, d keys respectively. demo
[code language=”javascript”]
$(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;
}
});
});
[/code]

Explode the elment on click
[code language=”javascript”]
$(document).ready(function(){
$(‘div’).click(function(){
$(this).effect(‘explode’);
});
});
[/code]

Bounce the element 3 times on click
[code language=”javascript”]
$(document).ready(function(){
$(‘div’).click(function(){
$(this).effect(‘bounce’, {times:3}, 500);
});
});
[/code]

Slide the element on clicke
[code language=”javascript”]
$(document).ready(function(){
$(‘div’).click(function(){
$(this).effect(‘slide’);
});
});
[/code]

Make the element draggable
[code language=”javascript”]
$(document).ready(function(){
$("#myDiv").draggable();
});
[/code]

Make the element resizable
[code language=”javascript”]
$(document).ready(function(){
$(‘div’).resizable();
});
[/code]

Make the list item selectable provided the css ol .ui-selected {background: #F39814; color: white;}
[code language=”javascript”]
$(document).ready(function(){
$(‘ol’).selectable();
});
[/code]