jQuery - with keydown event animate your elements!

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

jQuery - focus() function for input element

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

Name:

jQuery - on() method

.on() method can be though of .on() as a general handler that takes the event, its selector, and an action as inputs.

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

jQuery - this keyword

The code below will fadeout all div elements while clicking one div, what if we want to fadeout only clicked div?

1:  $(document).ready(function() {  
2:    $('div').click(function() {  
3:      $(this).fadeOut('slow');  
4:    });  
5:  });$(document).ready(function() {  
6:    $('div').click(function() {  
7:      $(this).fadeOut('slow');  
8:    });  
9:  });  

Use 'this' keyword to indicate the clicked element!

1:  $(document).ready(function() {  
2:    $('div').click(function() {  
3:      $(this).fadeOut('slow');  
4:    });  
5:  });$(document).ready(function() {  
6:    $('div').click(function() {  
7:      $(this).fadeOut('slow');  
8:    });  
9:  });  

jQuery - Start

1:  $(document).ready(function() {  
2:    $('#notready').fadeOut(1000);  
3:  });  

1. $() says, "hey, jQuery things are about to happen!"

2. .ready(); is a function in jQuery. It says "hey, I'm going to do stuff as soon as the HTML document is ready!"