jQuery

Go to http://code.jquery.com/ to get jQuery Source and other useful info :)

Difference

jQuery

var divs = $('div');

$(el).css(''border-width', '20px')

$(document).ready(function(){ //code});

Vanilla

var divs = document.querySelectorAll('div')

el.style.borderWidth = '20px'

if (document.readyState != 'loading'){
	fn();
} else{
	document.addEvetListener('DOMContentLoaded',fn);
}

Basics

var listItems = $('li') 
// change all item color to blue
listItems.css('color','blue')

//change only first item color to blue
listItems.eq(0).css('color','blue')

//change text with h1 tag 
$('h1').text("new text")

// change html content with h1 tag
$('h1').html("<em>new text<em>")

//change the attribute(type) of second input to checkbox 
$('input').eq(1).attr('type',''checkbox)

//change the value of first input 
$('input').eq(0).val("new value")

// add & remove class
$('h1').addClass('turnRed')
$('h1').removeClass('turnBlue')

//add iff not turnBlue already
$('h1').toggleClass('turnBlue')

Events

// upon click on h1 header, change the text
$('h1').click(function(){
  $(this).text("I was changed")	
})

//upon any keypress on first input, add class 'turnBlue'
$('input').eq(0).keypress(function(){
  $('h3').toggleClass('turnBlue ')
})

//upon key with value 13 pressed on first input, add class 'turnBlue'
$('input').eq(0).keypress(function(event){
  if (event.which === 13){
  	$('h3').toggleClass('turnBlue ')
  }
})

// on() === eventListener

// upon doubleClick, toggle 'turnBlue' class
$('h1').on('dblclick',function(){
  $(this).toggleClass('turnBlue')
})

//Effects

//all containers fadeout upon click
$('input').eq(1).on('click',function(){
  $('.container').fadeOut(3000)
})