Pages

Monday, June 27, 2011

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.

12 comments:

  1. Nice start .. it was indeed an inspiring article, maybe a live example could have been a jewel .. but one thing .. I think JQuery has "so much more" than its documentation .. the sample book is a nice way indeed

    ReplyDelete
  2. @Pranav: Thanks for that great idea. Never struck me. I've incorporated the live example like you suggested :)

    ReplyDelete
  3. an awesome post .. as usual, your work gets me more interested into jQuery, and I am learning why I shouldn't even bother about JS !!

    So, I think I'll stop struggling with JS next time I have an idea in mind, and just try what jQuery has to offer ;-)

    ReplyDelete
  4. @Rajat: I'm not saying you should *comepletely* ignore JS. You should know the JS prototypal inheritance model, anonymous functions, and functions as first class objects atleast. For that, read the JS book I've linked to at the end (JavaScript: The Good Parts).

    ReplyDelete
  5. Nice plugin. If you're still working on it, you could add a counter for each notification and thus give each an id.
    Then call
    $('.notiy-osd').animate({top:'+=});
    before assigning the newest one it's class and displaying it.
    What else are you working on?

    ReplyDelete
  6. Forgot to & l t ; and & g t ;
    That's top:'+=height_of_newest_notification+spacing'

    ReplyDelete
  7. @Suhail: you basically want a "stacking" feature? like, notifications should not override the previous ones, but rather appear below them, right? I myself was thinking of that. I'll implement it when I get the time.

    As for what else I'm working on, check this out: http://evening-rain-487.heroku.com/
    I'm not exactly working on it right now, but I'm in half a mind to add more functionality to it. It started out as an assignment for my internship.

    btw, you have any of your jQuery work online? Are you on GitHub?

    ReplyDelete
  8. Yeah, a stacking feature. Hard to think in English when you have code in your mind. :P

    What's the backend for that site? The UI is sexy and the concept is great too.

    I've used jquery extensively, started writing a plugin for a realistic book too, but in between exams, formatting my laptop and negligence, it got lost. As of now, my Github profile is empty. I'm working on a closed source Android app, but have plans for an open-source Android building map-building framework afterwards.

    ReplyDelete
  9. the backend for the site uses Sinatra (a Ruby framework). No points to me for the concept: that was given in the problem statement itself :P

    What do you mean by a "realistic plugin for a book"? Something that can be used to make jQuery-powered ebooks?

    Android apps eh? Sounds cool. Do keep me posted on your work :)

    ReplyDelete
  10. An ebook that looks like an actual book.
    The plugin was supposed to change the contents of a page to a two column layout with height as height of the browser, so that it looks like two pages of a book. And dragging the right page to the left side would function like flipping a page.

    ReplyDelete
  11. Right. Like http://www.20thingsilearned.com/. Btw, that's open source now, so you could use that code in your plugin :)

    Otherwise if you need a guide/tutorial to making the page-flipping effect, here's one: www.html5rocks.com/tutorials/casestudies/20things_pageflip.html

    ReplyDelete
  12. Had seen the site, but not the tutorial. I think I'll work on it when I'm back in college. Soon I'll probably be starting a GWT open-source project as part of my internship. So finally my github gets attention.

    ReplyDelete