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.
