An introduction to jQuery

This is my first attempt at a technical article, so please bear with me. Comments/feedback on the content and writing style are welcome :)

You've probably heard of JavaScript: the hacky, ugly language that drives most of the cool stuff on the web. I whole-heartedly agree. Hell, the language itself has more inconsistencies than one can imagine. There is no cross-browser standard implementation of JavaScript. Why then is it so popular?

I can't say I have the answer, but there is one crucial JavaScript library, in my opinion, that has contributed to its popularity significantly: jQuery. It is one the few code tools I'd say is "cute" (the others on my list, as of now, are Ruby and Python). Also one of the few things with great documentation.

It's great at manipulating elements on a webpage, and at making cross-browser, pain-free AJAX requests. Let's dive in and see some jQuery code:

$(function() {
  $("input#animator").toggle(function() {
    $('div#foo.bar').slideUp('fast');
    $(this).val('Show');
  }, function() {
    $('div#foo.bar').slideDown('fast');
    $(this).val('Hide');
  });
});

Believe it or not, the highlighted line is all the jQuery code needed to hide the <div> element with id foo and class bar with a quick sliding animation. The first part of that line ('div#foo.bar') is called a selector. jQuery selectors are very similar to CSS selectors. This is one of the many qualities of jQuery: it doesn't force you to learn new, obscure syntax if you're already into web development. The $ is actually the jQuery object (yes, $ is a valid JavaScript identifier); it creates a wrapped set out of DOM elements, which you can then manipulate using the extensive API methods (in this example, the slideUp() method is shown, which accepts 2 arguments: the duration of the animation, and an optional callback). This is the basic idea of jQuery: manipulations on a wrapped set of DOM elements.

There's also another interesting thing in jQuery: plugins. Like this one, developed by me. If you're interested in the code, I've got it on GitHub.

I'll stop here. Anyway the world doesn't need yet another full-fledged jQuery tutorial. This article was just intended to get you interested in jQuery (and get me started writing on this blog). If you want to continue, you could start working your way through the docs, starting here. And you might want to consider learning some JavaScript too. Sad as it is, you can't use jQuery solely. For that purpose, I'd recommend this great book.

UPDATE: Interesting fact on the popularity of JavaScript: It accounts for 19% of all code on GitHub, higher than any other language.

------
If you liked this post, consider following me and Rajat on Twitter.