Learn jquery from beginners to advanced level - part 3 (Final Part)

Finally I am writing the third and last tutorial of this tutorial series. Again I am saying if you are new visitor and haven't read my first two tutorial of this series then please read those tutorials first. Click to read Part 1 and click to read Part 2. One thing I want to ensure you is that if you read and understand all of these three tutorials then you can say yourself the expert of jquery, and you can do any task in jquery with minimum effort. Ok. Now let's start right from there, where we were.

Events

When the DOM is ready…

$(document).ready(function(){
 //Your code will come here
});

• Fires when the document is ready for programming.
• Uses advanced listeners for detecting.
• window.onload() is a fallback.

Attach Event

// execute always
$("div").bind("click", fn);
// execute only once
$("div").one("click", fn);

Possible event values:

blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error (or any custom event)

jQuery.Event object
Detaching Events

$("div").unbind("click", fn);

(Unique ID added to every attached function)

Events Triggering

$("div").trigger("click");

Triggers browser’s event action as well. Can trigger custom events. Triggered events bubble up.

Events Helpers

// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()

And many others…

Preventing Browser Default Action

// use different triggering function
$("div").triggerHandler("click");

// prevent default action in handler
function clickHandler(e) {
 e.preventDefault();
}

// or just return false
function clickHandler(e) {return false;}

Preventing Bubbling
// stop bubbling, keep other handler
function clickHandler(e) {
 e.stopPropagation();
}

// stop bubbling and other handlers
function clickHandler(e) {
 e.stopImmediatePropagation();
}

// or just return false
function clickHandler(e) {return false;}

Live Events (Attach events to dynamically created elements)

// attach live event
("div").live("click", fn);
// detach live event
("div").die("click", fn);

Currently supported events:

click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Effects

Showing or Hiding Element

// just show
$("div").show();
// reveal slowly, slow=600ms
$("div").show("slow");
// hide fast, fast=200ms
$("div").hide("fast");
// hide or show in 100ms $(“div”).toggle(100);

Sliding Elements

$("div").slideUp();
$("div").slideDown("fast");
$("div").slideToggle(1000);

Fading Elements

$("div").fadeIn("fast");
$("div").fadeOut("normal");
// fade to a custom opacity
$("div").fadeTo ("fast", 0.5);

Fading === changing opacity

Detecting animation completion

$("div").hide("slow", function() {
  alert("The DIV is hidden");
});

$("div").show("fast", function() {
  $(this).html("Hello jQuery");
}); // this is a current DOM element 

Every effect function has a (speed, callback) overload

Custom Animation

// .animate(options, duration)
$("div").animate({
    width: "90%",
    opacity: 0.5,
    borderWidth: "5px"
     }, 1000);

Chaining Animation

$("div").animate({width: "90%"},100)
  .animate({opacity: 0.5},200)
  .animate({borderWidth: "5px"});

By default animations are queued and than performed one by one

Controlling Animations Sync

$("div")
 .animate({width: "90%"},
      {queue:false, duration:1000})
 .animate({opacity : 0.5});

The first animation will be performed immediately without queuing

AJAX with jQuery

Loading content

$("div").load("content.htm");
// passing parameters
$("#content").load("getcontent.aspx",
     {"id":"33","type":"main"});

Sending GET/POST requests

$.get("test.aspx", {id:1},
  function(data){alert(data);});

$.post("test.aspx", {id:1},
  function(data){alert(data);});

Retrieving JSON Data

$.getJSON("users.aspx", {id:1},
  function(users)
  {
   alert(users[0].name);
  });

Retrieving JS Files

$.getScript("script.js",
  function()
  {
   doSomeFunction();
  });

Extending the Library

Adding Methods

// definition
jQuery.fn.printLine = function(s) {
 return jQuery(this).each(function() {   this.append("<div>"+ s +"</div>");
 });
};
// usage
$("#log").printLine("Hello");

Closure to solve the $ issue

(function ($) {
  jQuery.fn.printLine = function(s) {
 return $(this).each(function() {    this.append("<div>"+ s +"</div>");
 });
};
})(jQuery);

Custom Selectors

$.expr[‘:’].test = function(o, i, m, s) {
// o – current object in the selection
// i – loop index in the stack
// m – meta data about your selector
// s – stack of all the elements
// return true to include the element
// return false to exclude the element
};

So that's it. I tried my level best to teach you jquery from beginners to advanced level in this series of tutorials. Now just you have to practice more and more to get a grip on jquery.

I love your feedback.