jQuery is undoubtedly the most popular JavaScript library on the web today. It is used by 70% of the top websites and is becoming a defacto standard in web development. If you are looking for a programming job, knowing the library is a big plus.
Things have progressed as well in terms of the quality and availability of teaching material. In other words, now is the best time to learn about web development! In this article, you will find a list of resources that I wish were around when I was starting out with jQuery and which I would recommend to every beginner.
First, Meet the jQuery Family
jQuery is a library that makes it easy to work with the DOM, listen for events, animate elements and issue AJAX requests among other things. However, do you know that the jQuery project actually supports three libraries which bare the name jQuery? These are:
The jQuery library. This is the library that people usually refer to when they say jQuery. This is also what the resources in this article are about. The other two libraries build upon it, with specific use cases in mind. There are two versions of jQuery as of this writing: 1.9.1 and 2.0. Version 2.0 drops support for older browsers like IE 6, 7 and 8, so I strongly suggest you download and use version 1.9.1 which works everywhere.
jQuery Mobile is a lightweight framework for building mobile web apps with HTML5. It lets you build ajax-driven and touch-friendly interfaces with toolbars, buttons, listviews and more, that will look and work consistently across mobile devices. This is a library that I can recommend learning after you get the basics of jQuery, as it builds upon it. Here is one of our tutorials to get you started.
jQuery UI. This is a collection of widgets like date pickers, dialogs, progress bars, effects and more aimed at interactive web applications. I feel that this library is losing mindshare as developers are flocking to more modern frameworks, which is why I would recommend learning Twitter Bootstrap instead.
The jQuery Family
So now that you know a bit more about the jQuery family, where do you start?
The First Steps
There has been a remarkable increase in the number and quality of free resources available for web developers in recent years. This is especially true for jQuery. Here is what you should start with:
JavaScript 101 is a good introductory article to JavaScript from the jQuery site. This is where you should begin if you aren’t familiar with the language. You can then continue with some of the free JS books included in the next chapter.
The jQuery Getting Started Guide is a good first step for the beginner. It explains basics like how you should include jQuery in your page, and how to write your first script.
Try jQuery is a very good interactive course with videos and code challenges that you can take for free.
Try jQuery
After you’ve whetted your appetite, you can read some of the books in the next chapter.
Free eBooks
Tutorials and blog posts are good to learn specific techniques but they aren’t much use if you are entirely new at something. This is what books are best at – they give you a complete and systematic overview of a technology, with examples and plenty of detail.
Franky you can’t learn jQuery without first knowing JavaScript, so here are a few books to get you started:
Eloquent JavaScript is a book that doesn’t only teach you JavaScript, but also the basics of programming. It is a great read for those who don’t have much experience with writing code.
Mozilla Developer Network’s JavaScript Guide is another good and succinct overview of the language.
JavaScript Enlightenment is a book that covers advanced concepts like closures, prototypes, complex values, inheritance and more. It is intended to be a short and digestible summary of the language.
Dom Enlightenment is from the same author, and gives you a deep understanding of the relationship between JS and the DOM. The examples will show you the powerful functionality jQuery uses behind the scenes to make your life easier.
Single Page Web Apps in Depth is a book that teaches you how to make your application feel almost native. You will learn about implementing collections, models and views in JS, synchronizing them with your backend, and writing maintainable code.
Learning JavaScript Design Patterns is a book that explores applying well-known design patterns in the software development world to JavaScript applications.
Patterns for Large-Scale JavaScript Applications is a more complex book that focuses specifically on organizing large code bases. Suitable only for experienced JS developers.
Eloquent JavaScript
And of course, here are some great free jQuery books:
jQuery Fundamentals is a must-read book for every jQuery beginner. It explains in depth all the major jQuery features, and has easy to understand examples that you can run directly in your browser.
jQuery Succinctly is a book that has been written to express the concepts essential to intermediate and advanced jQuery development. This is the perfect next step after the jQuery Fundamentals book above.
jQuery has a very good API documentation, full of example code, which is a book on its own right.
jQuery Fundamentals
[Hey, check our brand new jQuery Trickshots book, where you can learn 100 epic tips and tricks for working with jQuery!]
Courses and training
Courses also go a long way to explaining new concepts. They may include professionally edited videos with exercises and example code. Here are some of the best that are available for free:
Try jQuery. I already mentioned it, but it is included here again for completeness. This course includes videos, example code and excersises.
Lessons by appendTo() contains free video lessons on JavaScript, jQuery, events, methods and selectors.
Learn jQuery is the official learning portal for the library. Here you will find tutorials and articles suitable for beginners.
JavaScript interactive is a console-based crash course that involves writing code in your browser and passing challenges.
Learn jQuery in 30 Days is a free newsletter course by tutsplus. After subscribing you will receive a video lesson in your email every day for 30 days.
Learning Advanced JavaScript is a series of tips by jQuery’s creator John Resig.
Learn jQuery in 30 Days
Videos
Videos are a good and lazy way to learn about new programming topics. The presenter spoon-feeds you with tasty web development knowledge while you are comfortably sitting on your couch. What’s not to like!
Here are some of the best jQuery videos that you can watch right now for free:
jQuery for absolute beginners by Nettuts is getting rather old, but you can still learn some of the fundamentals of the library
Learning jQuery is a huge YouTube playlist with a series of screencasts that covers everything from the ready event to submitting forms with ajax.
Ontwik’s jQuery Videos is a growing collection of high-quality videos and lectures on many topics given on conferences around the world (seems to be down in the moment).
JSConf hosts a collection of videos from the popular JavaScript conference.
Fronteers videos this is the video collection of the Fronteers front-end conference. Some of their videos are in Dutch, but there are plenty of interesting English lectures.
Ontwik jQuery Conference Videos
Presentations
Presentations are like videos, but more concise and without a person standing in the way. Here are some of the most popular jQuery presentations:
jQuery in 30 minutes is a bit old but still interesting for beginners.
jQuery proven performance tips and tricks is a great collection of tips for optimizing your jQuery code.
jQuery Anti-Patterns is a presentation that explains how to properly organize your code and stay clear from anti-patterns that will make your application unmaintainable in the long run.
Using objects to organize your code is another presentation that is focused on code maintainability.
jQuery: It’s a library, not a framework reminds you that although jQuery gives you power, it doesn’t keep your code organized, which can pretty soon lead to a spaghetti code mess.
Things you might not know about jQuery was written for jQuery 1.4, but is also applicable to the latest versions of the library.
jQuery: It’s a library, not a framework
Tutorials and Blogs
Of course, tutorials have their place, and are a good choice once you’ve mastered the basics. Here are the best places to find jQuery tutorials:
Our own tutorial collection covers lots of jQuery goodness. We do all kinds of interesting things with the library and show advanced techniques. (Also all our PSDs are available for download from our free to join Member Area).
Nettuts has a large collection of jQuery tutorials. They’ve pretty much moved away from jQuery for their new stuff which is unfortunate.
jQuery Howto is one of the oldest jQuery blogs. They have covered pretty much everything about the library.
jQuery For Designers used to be a very popular tutorial website which unfortunately hasn’t been updated for a couple of years. Anyway the scripts there are useful even today (with the ocasional fix for jQuery 1.9).
Badass JS is a blog that presents awesome developments in the JavaScript world. Although not a tutorial site, the posts there often lead to in depth technical articles and interesting libraries.
DailyJS is another JavaScript/jQuery blog. You can find lots of new plugins here, and it is updated very often.
jQuery Tutorials from Tutorialzine
Misc
And here are some projects and sites that didn’t fit anywhere, but I think that they are worth a look:
Sorting the jQuery questions on stackoverflow by votes reveals lots of interesting topics that will help you become a better developer. See for yourself.
JavaScript Garden is a growing collection of documentation about the most quirky parts of JavaScript.
jQAPI is an alternative jQuery documentation browser. It has a pretty interface that in my opinion is easier to browse than the official api site.
jQuery Cheatsheet is a quick and neatly organized reference of the entire jQuery API. Highly bookmarkable.
jQuery Deconstructed is a very interesting experiment which visually analyzes and presents the source code of the entire library. Unfortunately it hasn’t been updated for newer version of jQuery.
JavaScript weekly is a weekly newsletter. You will get interesting JavaScript links in your email every Friday.
Unheap is a pretty and tidy collection of jQuery plugins. Everything is neatly organized in categories with links to demos and previews.
jQuery Plugins is the official jQuery plugin site, where you can find lots of plugins organized in categories.
Microjs is a collection of minimal JavaScript libraries (no jQuery plugins here) who are fully featured and lightweight. Only those of small filesize are included here.
JSDB is another collection of useful libraries and plugins, but it is not limited in regards to file size. Sorting the list by popularity reveals lots of life-saving libraries.
CDNJS is a very fast CDN that hosts lots of libraries. You can include jQuery and plugins from their servers, which can speed up your site (and save you some traffic).
Unheap – jQuery plugins and Libraries
Happy Learning!
Know of good learning resources that are not included in this list? Share them in the comment section!