Learning jQuery + best practices in 24 hours_问答_开发者

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 (as开发者_运维问答ide 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

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)

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.

jQuery fundamentals, the book, with many contributors who are well respected in the community, is easy to absorb in a couple days and completely free online!

http://jqfundamentals.com/book/

being relatively new to jQuery myself, and a total noob to JS, I'd say you have the head start ;)

How are you with CSS? - the CSS selector engine (Sizzle) with jQuery is a piece of cake if you know your CSS, and as far as I know you can use "old fashioned" ;) JS too

I also think that you'll have the upper hand if you know your CSS "bugs" which I think you will do, e.g. animation using jQuery is not a magic cure for any bugs, but the terminology slideUp(), hide() etc. sure makes it easy .. but if an effect would produce a CSS bug without the JS it will still do so via jQuery and perhaps things like the removeAttr() bug may be something to be aware of, something which could easily be done in JS (if you're that way knowledgeable)

I don't know how easy or difficult you find this sort of thing, but when I'm ~~learning~~ cramming I tend to look at all questions (here and on forums) regardless of how "easy or basic" I think they are, then by pasting the code and trying others answers then letting the Search Engines guide me you usually get to the root and make discoveries that can be added to your knowledge toolbox

e.g. today this question taught me something.. I suppose it depends really on how much you have to learn in 2 days! Good Luck!!