A five minute introduction to effective JavaScript with jQuery

There are some tools that are so powerful that you can do really stupid things with them. Used the wrong way, they allow you to create behemoths of unmaintainable code and co-dependencies. JQuery is one of those tools. On the other hand, used wisely, you can also do infinitely useful things with it. Five minutes will show you how.

If you’ve been building websites for as long as me, then you remember the not so glorious early days of JavaScript. Brainchild of Netscape, and first known was LiveScript, JavaScript was a bit of a curiosity with seemingly limited use.

Its early application was mostly mouseovers – images changing when you put your mouse cursor over them. Eventually someone invented popups and the Internet was hit by the second wave of digital pollution, spam being the first.

Writing anything larger in JavaScript was frustrating as there were no good debuggers and most interpreters threw mysterious error messages that were hard to decode. All of this delayed its widespread adoption and use.

The invention of AJAX and the libraries that have been popping up in the past ten years have changed that. Today, JavaScript is perhaps the most important web technology apart from HTML itself. All modern web applications are implemented in it, including your email (if you’re using Gmail, Hotmail, Yahoo or any other web based email). Of all the libraries, jQuery is without doubt the most popular. It has wide adoption and being bundled with Drupal, for example, has made even more people familiar with it.

The term “library” is often used liberally but in jQuery’s case, it refers to it being a set of methods for manipulating web pages, or the “DOM” as web developers say. The “DOM”, or “document object model” provides a way to programmatically alter and interact with web pages. In addition to this, jQuery also offers utility methods for AJAX and more.

The reason jQuery is so popular is because working with the DOM used to be a very tricky problem. Web browsers aren’t consistent in how the DOM works so when you wanted to write a piece of JavaScript that worked with the DOM, you had to write a lot of conditional code, sometimes for every major browser. JQuery solves this problem by providing a consistent interface so you don’t need to worry about how the browser works. It’s all taken care of. By learning the basic concepts of jQuery, you can write code that works in every browser.

So what can I do with jQuery?

Glad that you asked :)

At the core is the jQuery object. Once you have added jQuery to your web page (see the links at the end for explanations how this is done), you can query the elements on the page using CSS like selectors. The query will return a set of matching elements, which you can then work with. Let’s look at an example:

jQuery('p');

Will return all <p> (paragraph) tags. Say you wanted to show all the text in p tags in a popup you could do:

alert(jQuery('p').text());

Or you could turn them red:

jQuery('p').css('color', 'red');

But jQuery is also often used to animate elements. Two methods available out of the box are fadeIn/fadeOut and slideIn/slideOut:

jQuery('p').fadeOut();

Will make every p element disappear with a fading animation.

One problem that wasn’t possible to solve without writing code that wasn’t standards compliant (i.e. target=“_blank”) is opening links in a new window. With jQuery, it’s easy:

$("a[href^='http://']").click(function(){
  window.open(this.href);
  return false;
});

So far we’re just scratching the surface. Using these concepts you can:

• Create new elements dynamically
• Build interactive HTML based user interfaces
• Find elements based on any of their attributes or contents, effectively allowing CSS3 selectors in older browsers (this is what Modernizr and polyfills do)
• Write functionality that uses AJAX to interact with the web server without a page reload

But jQuery is useful for more than just your own website. Say you’re viewing a site that lists a long number of items. You need to find out how many they are. Using jQuery, the jQuerify bookmarklet and your browser’s console you can easily get a count:

alert(jQuery('div.item').length);

By now, I think you see why jQuery is so powerful and useful and I haven’t even gotten to talking about the thousands of plugins that are available and which extend jQuery’s base methods. I hope I’ve whetted your appetite for learning more about this infinitely useful tool.

Photo: CDWaldi