A lot of developers and website owners alike have been using jQuery for a while now. Yet many people are still confused as to what exactly jQuery is.

Put simply, jQuery is a collection of pre-written Javascript that allows a developer or designer to focus on what they want to do, instead of how to do it.

Javascript: A Standard

Back in the days of Netscape 4.0 or Internet Explorer 5, Javascript was a bit finicky. You might say that it’s implementation was sporadic, haphazard and worst of all: nonstandard.

But today we find ourselves in a very different world. While CSS and to a lesser extent HTML still have some large standardization problems across modern browsers, today’s average web surfer is using a fairly standard Javascript engine, and even better, the browsers are fast enough at implementing it that using it becomes practical.

While Javascript is still a bit of a black-box of mystery to many developers, jQuery is the brainchild of John Resig, a former employee of the Mozilla Foundation (makers of FireFox) and a self-proclaimed “Javascript evangelist”.

Part of the problem with Javascript, Resig discovered, was that few developers had the time or the ability to go through and learn the complex and long-winded syntax of Javascript to do anything useful. But in 2006 he released jQuery to the masses, opening up the interactive web to many.

jQuery: A Focus On The Product

jQuery provided a library of common functions that developers could use.  Want to dynamically add the “ready” class to all forms? Well that’s a simple:

$.('form').addClass('ready');

There’s (almost) nothing to it.

jQuery is used by sites big and small. From this very website to Google and NetFlix.

Using jQuery allows the developer to focus on what they want done instead of how they have to do it, which can be very useful for web UI developers.

But jQuery is really brought to life by the multitude of extensions available, and to give you an idea of just what these extensions do, below you will find links to all the jQuery extensions used on this website.

jQuery Tools
Cycle
Colorbox
Preload

jQuery: A Primer

There are two simple concepts that you need to understand to use jQuery on your site. The first is that you need to include certain files to use the jQuery tools. The second is that you need to initialize the scripts in order for them to turn on.

This is actually a lot simpler than it sounds.

To include jQuery files, whether it’s a core file or a plugin, you simply use code like so in the head tag of your page:

<script language="text/javascript" src="./js/jquery-min.js"></script>

In the above example, you simply need to replace the “src” property with the relative address of the javascript file you want to include.

After you’ve included you files, you can initialize them like so:

$(document).ready(function(){
	$.preload([ 'black_arrow_big', 'black' ], {base:'images/tooltip/',ext:'.png'});
}

This particular line is how this website preloads some of its images using the Preload plugin that was linked earlier in this post.

Generally plugin authors provide many examples of what code you need to initialize their scripts, and in some cases you may even be able to copy and paste.

While jQuery certainly isn’t the perfect solution, for most projects it provides enough functionality without cluttering up the page, and that’s nearly the definition of a good code library.

Tags: about, Javascript, jquery, standards

This entry was posted on Friday, June 12th, 2009 at 8:00 am and is filed under Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.