In this series of posts, I will be quickly introducing you with the jQuery framework. After Prototype I was impressed with jQuery and its philosophy to “Write less Do More”, and they have really achieved it. Javascript has never been easy writing for different browsers, but since the inception of the popular Javascript frameworks like Prototype and jQuery and many others it has become a more interesting task. You don’t need to worry now if my code will be supported on this browser or that, just open up your ideas and code the features that are attractive and make your projects successful.
These frameworks are nothing but are cleverly written set of functions, methods that cuts down your repetitive tasks, concentrating more on program logic and getting rid of browser compatibility issues. Ofcourse these frameworks themselves support a specific set of browsers afterall they are themselves written in Javascript, however all modern browsers are supported by them.
Ok lets quick start jQuery.
This is just quick go through, there is no specific sequence i have maintained here and i have assumed that you are familiar with Javascript, function definitions and callbacks. So lets start.
First of all you need to include the jQuery library into your page. You can download the latest copy of jQuery from its official site.
Bind Function on ready state:
jQuery(document).ready(function(){ //function definition });
Bind function on window load:
if you want to bind or execute a function on load event of a window you can have it this way,
jQuery(window).bind(“load”, function(){ //function definition });
You may bind as many function calls as you wish.
Find an element with particular id.
jQuery(“#loader”).toggle();
The above example will find an element identified by id (here ‘#loader’). The toggle() method toggles display of an element (show/hide).
Find element(s) with particular class applied to it.
jQuery(“.blue_container”).css(“background-color”,”#FF0000″);
The above example will find all the elements that have class “blue_container” and changes each elements background-color to red (#FF0000). It internally loops over each matching elements and applies the the desired css. The css(“property”,”value”) method is used to apply a css to an element.
Loop through the matching elements
jQuery(“.blue_container”).each(function(){ //function definition });
The each() function iterates over the matching elements one by one. In the above example, it will iterate over all those elements where class applied is “blue_container”. You can supply a function which will be applied to each matching elements. Inside the function you can access the current element using jQuery(this) syntax. example, the following statement inside the function definition, would change each elements background color to red color.
jQuery(this).css(“background-color”,”#FF0000″);