Learning jQuery + best practices in 24 hours

Question

This may sound impossible but read on.

I need to learn jQuery a little bit to keep current and be able to convince an employer I can cope with it within less than 2 days.

Now, I should mention that I actually know javascript. This is a bit ambiguous kind of a statement but--whereas I am no Doug Crockford--I certainly I don't mean I can just about toggle an element's visibility using inline code. I would go so far as to say that I am VERY familiar with MooTools, have read its source code on and off for the last 3 years as well that of countless MooTools plugins.

Now, through helping out on SO the MooTools tag, I have inadvertently picked up a lot of jQuery code as well. And there's the API doc page, that's fair enough--as long as I want to work with DOM, AJAX, events etc, I can find my way. This is not what the post is about.

I am after very specific resources and guides / examples of well-organised and well written code for jQuery. For instance, things I am interested in (but not limited to):

• peculiarities to do with the API, eg. .bind != ECMA bind
• limitations, like element attributes (.attr?) + workarounds for properties and other pitfalls
• selector performance (if Sizzle differs from Slick) and...
• ...caching selectors - does it work, how etc as jQuery returns itself.
• best practices on readability and writing easy to follow and understand spaghetti code
• best practices on writing plugins - how to structure, are there any common/accepted/preferred nomenclatures and so forth, i.e. the jQuery equivalent of this mootools guide
• is there any better way to handle inheritance in the classic OOP sense? I know of moo4q but let's assume I want to do this w/o the help of mootools for a moment. And yes, I know I can still use pure javascript for basic stuff.
• are there any specific differences in API (aside from ++ changelog) I need to be aware of between different jQuery versions?
• GC. do you do any, do you remove events, nodes etc?
• bits to avoid. eg, I have seen ppl complain on twitter that element storage is slow.
• advice on structuring a proper 'enterprise-level-or-near-enough' jQuery-based _application__ (I know, I know - Dojo, ExtJS, or even MooTools but it's possible with jQuery, right? so many people swear by it and claim to have done it...)
• whatever you think I need to read to get started

With that in mind, I would like just links to either tutorials or articles or even posts here on SO that can cover on the areas mentioned and advanced jQuery development.

Some select plugins that are written by respected / renowned authors will also be appreciated, particularly ones that differ in how they are organised and easy to extend. With so so many to choose from, the majority are probably little past the hello spaghetti world phase so I wouldn't want to use them as the examples upon which to base my own work. I am not after plugins that are upvoted by designers as they do a pretty effect, I want examples of pretty code.

That's about it. Any help appreciated - will start reading on Sunday and need to be able to write an extendible plugin like this modal / lightbox class for mootools that I wrote in 2-3 hours a few days ago. I'd like to convert it to jQuery as an exercise w/o making it less modular / extendible: http://jsfiddle.net/dimitar/6creP/

Thanks in advance, will try to answer everyone that replies as well

Answer 1

You're lucky. The same happened to me, and read the book "Jquery in Action, 2nd Edition" in 3 days. It's an excellent book. I think you can finish in 1 day all the jquery core section (more than half of the book), that is the most important pare.

Guess what. I got the job :) (I learnt more while i was already on the job, but it was enough to show I knew jquery hehe)

Answer 2

jQuery is very similar in terms of what it offers to MooTools, while very different in how it offers those things. MooTools is very explicit and requires a deeper understanding of how some things work under the hood, while jQuery hides that complexity away. Hiding complexity follows the 80-20 principle in my opinion, and when the abstraction leaks 20% of the times, understanding the inner workings becomes important.

Having a good grasp of MooTools in and out should make it very easy for you to pickup jQuery. Some examples of this explicit behavior would be how jQuery wraps single and multiple elements under the $ umbrella, while MooTools provides an explicit interface for both with $ and $$.

When making AJAX calls for one's own domain or external domains using JSONP, jQuery routes everything through the $.ajax function, while MooTools again has separate interfaces for those in Request and Request.JSONP.

Neither approach is good or bad, but re-using the same interfaces that most are already familiar with reduces the learning curve.

Some good resources for diving deep into jQuery would be,

• John Resig's blog
• jQuery's official blog
• Video presentation on advanced jQuery concepts.
• Hottest jQuery answers on StackOverflow

With respect to code organization, most code written for jQuery is very different to MooTools. While MooTools uses a very classical style using classes, and objects, jQuery code is mostly very DOM-centric. So even with custom plugins, you'll be attaching data to DOM elements. To see some almost real-life examples of a DOM-centric approach, you can watch the video linked in this answer.

I wouldn't worry much about selector engine performance as that's mostly a red-herring unless you are writing Excel for the web or something.