0

Why jQuery is so awesome

jQuery is a gift from heaven

jQuery – a gift from above

jQuery is awesome.

I could leave it there, but I feel compelled to back up my claims and bring others towards the jQuery shaped light.

Cast your mind back to the pre-jQueric era (I’m assuming that’s a word) when people like me wrote lines and lines of JavaScript to accomplish something pretty mundane. Although I did get a well deserved sense of satisfaction when my 50 lines of script successfully ran to validate a basic form, it always left me thinking ‘there must be an easier way to do this?’.

Fortunately, a more industrious chap by the name of John Resig had similar qualms, and decided to change all that by creating a library that would make JavaScript a lot quicker to write. Now a few years on from its inception, jQuery has evolved to play host to a plethora of shiny, out-of-the-box plugins that can instantly transform your content into something very eye-catching.

So jQuery can:
- Make JavaScript quicker to write
- Make querying and manipulating the JavaScript DOM a doddle
- Provide plugins to do complicated things with ease

So, how do you get started?
At its core, jQuery is a single .js file which can be downloaded and included on any webpage. In practise, there are other sets of jQuery other libraries which extend the core to enable flashier features like better animations and effects. But to get started, all you need is the single core jQuery library and stick it on your webpage before any JavaScript that references it. You can download the latest jQuery library at http://docs.jquery.com/Downloading_jQuery.

Syntax
The biggest barrier to entry with jQuery is getting over the syntax. It took me a few attempts to full embrace it, but it’s worth sticking with.
jQuery uses a $(selector) syntax to find DOM elements on the page, where the selector roughly correlates to how CSS accesses the DOM. That is, a “.” identifies a DOM element by its class name and a “#” by its ID. Leaving out a “.” or “#” uses the tag name instead, so:

$(‘.myclass’) – looks for everything on the page with a class of ‘myclass’
$(‘#myid’) – looks for everything on the page with an ID of ‘myid’
$(‘form’) – looks for all forms on the page.

There are lots of other useful things you can do narrow your selection by, but these above are the basics.

Functions & Attributes
Once you’ve found your DOM element, the next thing is to do something with it. jQuery has a large variety of useful functions
and attributes that can be used, so its best to check out the official online documentation, but here are a few handy functions:

Val - Sets or gets the value of an input.

Example:
 $(‘#myid’).val(‘Hello!’);

In the above example, an input with an ID of ‘myid’ will have it’s value changed to ‘Hello!’. If we were to not pass any parameter to the the val function, it would return the value rather than set it (see below).

Each – Loop through each DOM element found by the selector

Example:
 $(‘input’).each(function(){
    alert($(this).val());
 })

This loops through each input on the page, and alerts its value.

Bind – Associates handlers with DOM events

Example:
 $(‘#myid’).bind(‘click’, function() {
    alert(“I’ve been clicked!”);
 });

When the element with an id of ‘myid’ is clicked on, an alert will be displayed.

Checkout jQuery.com
This is only scratching the surface of the tip of the iceberg, and I’ve not even touched on things like AJAX, attributes, CSS, etc, so checkout out the official jQuery site for comprehensive documentation at http://www.jquery.com.
I know there are other libraries out there, but jQuery happens to be the one I use, and I’m sure people have equal convictions about others. I’d be interested to hear your comments on how the other libraries compare.

About Darren Johnson

Darren is a consultant at ECS and, in addition to his great development work, he’s our UI enthusiast.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>