jQuery_1_introduction.js

$() // Always use jQuery

jQuery.noConflict();

jQuery // Always returns an array

//Making chains methods
jQuery("#container div.gallery").addClass('active').removeClass('hidden').css({ backgroundColor:"yellow" })

jQuery_2_selectors.js

jQuery("p")

jQuery("#some-id")

jQuery(".some-class")

jQuery("#container div.gallery")

jQuery("body > div");

jQuery("body > div: has(a)");

jQuery("a[href$=pdf]");

jQuery("ul li:first")

var $container = jQuery("#lightbox")

jQuery_3_creation.js

jQuery("<h1>Hello!</h1>");

jQuery("<a href='http://hashtrain.com'>HashTrain</a>").insertAfter("div.footer p");

jQuery_4_own_functions.js

//How to add your own custom functions to jQuery

jQuery.fn.myFunction = function() { 
  return $(this).addClass('changed'); 
}

//Alternate syntax

jQuery.fn.extend({
  myFunction: function() {
    return $(this).addClass('changed'); 
  }
});

//And now, use it like this:

jQuery('.changePlease').myFunction();

jQuery_5_own_global_functions.js

jQuery.globalFunction = function() {
  alert('Hi!');
};

//Alternate syntax

jQuery.extend({
  functionOne: function() {
    alert('Hi!');
  }
});

//Usage

jQuery.globalFunction();

jQuery_6_Ajax.js

jQuery("#body").load("/boby_content")

// Global functions

// ajax
jQuery.ajax({
  type: "POST",
  url: "/articles",
  data: "page=1&per_page=10",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

// get
jQuery.get("/articles", function(data){
  alert("Data Loaded: " + data);
});

// post
jQuery.post("/articles", { parent_id: 7, visible: 1 }, function(data) {
  alert("Data Loaded: " + data);
});

// getJSON
jQuery.getJSON("/articles.js", { page: 1, per_page: 10 }, function(json){
  alert("JSON Data: " + json);
});

// getScript - Load JavaScript file and execute it.
jQuery.getScript("/articles.js");

jQuery_6_live.js

jQuery("a.click").bind("click", function() {
  alert("Base click!");
});

jQuery('a.live').live("click", function() {
  alert("Live click!");
});

// This new element also matches the selector .clickme, but since it was added after the call to .bind(), clicks on it will do nothing.
jQuery("body").append("<a href='http://hashtrain.com' class='click'>HashTrain</a>");

// Then clicks on the new element will also trigger the handler.
jQuery("body").append("<a href='http://hashtrain.com' class='live'>HashTrain</a>");

//More details - http://api.jquery.com/live/

jQuery_6_resources.js

/*
 * http://docs.jquery.com - jQuery wiki
 */

/*
 * http://api.jquery.com - jQuery API
 */

/*
 * http://visualjquery.com - "Visual jQuery" from Remy Sharp and Yehuda Katz
 */

jQuery_7_namespace.js

// Add handler
$('.class').bind('click.namespace', function(){
  // do something
});

// call handler
$('.class').trigger('click.namespace');

// remove all the handlers in a given namespace
$('.class').unbind('click.namespace');


// Reade more http://docs.jquery.com/Namespaced_Events