jQuery Fundamentals     $, document, .ready, function(){}
Basic Selectors               *, tag, id, class, .css
Index Filters                    :first, :last, :gt, :lt, :eq, :has, :parent, :empty
Attribute Filter                 element[attribute=”value”]

Animation Methods        .hide, .show, .delay, .slideUp, .slideDown, .fadeOut, .fadeIn, .animate
Attribute Methods         .attr
Class Methods               .hasClass, .addClass, .removeClass, .toggleClass
Content Methods          .val, .text, .html
DOM Traversals             .children, .siblings, .parents, .first, .last
Event Binding                .bind, .click, .hover, .keypress, … etc.

In Details

LESSON #1

$(document).ready(function(){

// BASIC SELECTORS
$('p').css('boder', '4px solid red');
$('#content').css('boder', '4px solid red');
$('*').css('boder', '4px solid red');

// BASIC ANIMATION
$('.box).hide(500).delay(300).show(300);
$('.box).slideUp(500).slideDown(300);
$('.box).fadeOut(500).fadeIn(300);

$('.box).animate( { bottom: '200px', left: '100px', } , 800 );

// INDEX FILTERS
$('p:first').css('boder', '4px solid red');
$('p:last').css('boder', '4px solid red');
$('p:gt(2)').css('boder', '4px solid red');     // Child index number > 2
$('p:lt(2)').css('boder', '4px solid red');     // Child index number < 2
$('p:eq(2)').css('boder', '4px solid red');     // Child index number = 2

// RELATIONSHIP FILTERS
$('h2:has(span)').css('boder', '4px solid red');    // Select h2 that's a parent of a <span>
$('h2:parent').css('boder', '4px solid red');      // Select h2 that is a parent of any child
$('h2:empty').css('boder', '4px solid red');    // Select h2 that is not a parent

// ATTRIBUTE FILTERS
$('p[class="lead"]').css('boder', '4px solid red');     // Select p with class "lead"
$('a[href^=".co.uk"]').css('boder', '4px solid red');     // Select a that has .co.uk in URL

});

LESSON #2

$(document).ready(function(){

// ATTR METHOD
alert($('p:first').attr('class'));        //Alert pops up with the class name of the first paragraph
$('p:first').attr('class', 'not-lead');    //Setting the value of the attribute 'class'
$('img').attr('src','img2.jpg');        //Setting the value of the attribute 'src'

// IMAGE SWAP with ATTR
$('img').delay(400).fadeOut(500, function(){
$(this).attr('src', 'img2.jpg').fadeIn(500);
});

// CLASS METHODS
alert($('p:last').hasClass('lead'));    //hasClass: boolean method checks if elemant has a certain class name
$('p:first').addClass('blue').removeClass('lead');    //addClass & removeClass
$('p').toggleClass('blue');            //toggleClass

// CONTENT METHODS
$('input').val();            //Get value of a form input
$('input').val('Yo dude!');        //Set value of a form input

$('p:first').text();            //Get text of an element in an alert box
$('p:first').text('Hey you guys!');    //Set text of an element

$('p:first').html('Hey there, <em>man</em>!');    //Set text of an element that includes html code

});

LESSON #3

$(document).ready(function(){

// DOM TRAVERSALS
$('h2').css('border', '4px solid red');        // Select H2
$('h2').children().css('border', '4px solid red');    // Select H2's children
$('h2').siblings().css('border', '4px solid red');    // Select H2's siblings
$('h2').parents().css('border', '4px solid red');    // Select H2's parents

$('h2').parents('section').css('border', '4px solid red');    // Select H2's parent <section>
$('h2').siblings('p:first').css('border', '4px solid red');    // Select any of the H2's first siblings
$('h2').siblings('p').first().css('border', '4px solid red');    // Select any of the H2's first siblings (a different way)
$('h2').parents('section').siblings('header').children().css('border',  '4px solid red');
// Select an H2's parent's sibling's children

// The powerful techniques above enable you to select an element and backwards, which you can never do in CSS.

// EVENT BINDING
$('h2').bind('click', function(){
$(this).toggleClass('blue');
});

$('h2').click( function(){
$(this).toggleClass('blue');
});

$('h2').hover( function(){
$(this).toggleClass('blue');
});

$('html').keypress( function(){
$(this).toggleClass('blue');
});

});