In this multi-part series, I’m going to take a look at some of these technologies, and how they are affecting the development word, starting today with jQuery.
What Is jQuery?
CSS was a language designed to separate the display code of web page from the HTML. jQuery was created to separate the behavioral code of a page from the HTML. This makes it easier to both build and edit code. It includes several functions that are easy to use and very descriptive, to make coding it easier to understand.
Benefits of jQuery:
The Plug-in Library
jQuery is easily extensible, and has a large library of plug-ins available from a variety of authors. Anybody that wants to make a plug-in is free to. At the time of this writing, there are nearly 2000 plug-ins available at plugins.jquery.com
Cross-Browser Compatibility
All jQuery functions work in IE6+, Firefox 2+, Safari, and Opera. This is a huge timesaver, as it can be very infuriating and time-consuming to rework code that already works in some browsers so that it can work in all of them (I’m looking at you, IE6).
Function Chaining
jQuery is built around using jQuery objects in the code, and every function returns a jQuery object. What this means is that it is very to chain function calls together, and to call functions inside of other functions.
For example, let’s say you have a div with an id of ‘container’ and a link with and id ‘link’. If you wanted to change the backgroundcolor of the div when the link is clicked, you could write this:
$(‘#link’).click(function(){
$(‘#container’).css(‘background-color’,’blue’);
});
The $(‘#id’) in the code is a jQuery object. We use two in this code, one for each HTML element. On the link object, we call the click function, which contains another function, which handles everything that happens on the click. Being able to wrap functions and objects around each other like this makes it very easy to write code that perform complex operations easily.
Now let’s say we want to not only change the background color of the container, but also fade it out over 2 seconds, then fade it back in. We could simply do this in the code:
$(‘#link’).click(function(){
$(‘#container’).css(‘background-color’,’blue’)
.fadeOut(2000)
.fadeIn(2000);
});
This will perform the actions in a sequence. Notice that all three functions are one command (they are separated across lines for visibility). If we wanted to change the background and fade out simultaneously, we just have to change the code slightly:
$(‘#link’).click(function(){
$(‘#container’).css(‘background-color’,’blue’);
$(‘#container’).fadeOut(2000);
});
We just made the functions two separate calls. Now the actions will happen simultaneously.
Conclusion
jQuery is able to take a lot of complex functions and make them simple and quick to implement, and lately has become a favorite tools of both designers and developers. It has become the tool of choice for sites like Google, Amazon, Twitter, NetFlix, Digg, and Dominos Pizza, just to name a few.
