15 Resources To Get You Started With jQuery From Scratch

Jul 15th in JavaScript & AJAX by Jeffrey Way

Maybe you're a seasoned jQuery pro. Heck, maybe you're John Resig. On the other hand, maybe you read words like "Prototype", "jQuery", and "Mootools" and think to yourself, "What the heck are these?" Now is the time to learn.

In this industry - now more than ever - designers are becoming coders, and coders are becoming designers. The idea of a developer ONLY performing frontend or backend work is quickly becoming a dated concept. jQuery will help to bridge the gap. Javascript is not an unattainable skill. In this article, we'll detail fifteen resources to get you started with jQuery from the absolute beginning. If you've been avoiding this library out of some silly sense of fear, now is the time to dive in. You'll be amazed at how simple it can be.

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.

What Exactly Is jQuery?

According to jQuery.com, jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

In simpler terms, jQuery allows you to turn ten lines of traditional Javascript code into two! Combine an enormous range of features with cross-platform compatibility and you have one robust framework. Before you know it, you'll be creating everything from rich forms to Flash-like menus. Don't worry if the task of learning yet another new framework seems daunting. These resources will take you step by step.

Why Would I Use This Library Over The Others?

Ultimately, it comes down to preference. Each framework has its own specific advantages. But, there is a reason why jQuery is the most popular framework available.

Cross-Browser Compatibility. With any Javascript implementation, a web developer can expect to spend a large portion of his or her time compensating for each browser's quirks. Luckily, the jQuery library neutralizes these browser inconsistencies, thus allowing developers more time to work on their code.

CSS Selectors. By utilizing the CSS syntax, developers can use their existing knowledge to traverse their documents. With the addition of many CSS 3 and XPATH selectors, jQuery provides you with a wonderful mechanism for manipulating the elements on your page.

Chaining. jQuery uses a pattern called "chaining" for its methods. Every time you run a method on a jQuery object, the method returns that very same jQuery object. Consequently, you won't have to retype your selectors for each method. Using such a ".NET" type of functionality allows for lower file sizes and greater code readability.

If you're intrigued, you should be! Let's get started.

Step 1: Download The Library

The first step on your journey will be to download the library. Visit jQuery.com and scroll down to the "Download jQuery" section. Choosing one of the listed links will download the library to your computer. Next, you'll need to import the .js file into your solution.

Step 2: Create Your First Function

Within five minutes of learning jQuery, you'll be creating functions. Your first stop should be John Resig's introductory article, "How jQuery Works". He'll show you many easy to understand methods that you can use in your web applications - including adding and removing classes, chaining, and calling the "document.ready" method.

Step 3: Animate Your Elements

This is a controversial topic for many developers. In group number one, there are people who insist on "zero animation". Give the users what they need as fast as possible, and let them be on their way. Don't treat them as if they're chipmunks searching for the next shiny toy. But, there are people in group number two as well. They look at a site, which has some tastefully implemented animation, as a site worthy of their user base. When used correctly, they believe that animation can greatly improve usability. You'll have to decide for yourself which one you are. Never-the-less, jQuery makes animating elements on your page as easy a task as it can possibly be.

Step 4: Plugins

The wonderful thing about jQuery is that, when being initially developed, John Resig and his team ensured that expanding its functionality through the use of plugins could be accomplish with only a few additional lines of code. You'll be writing custom methods in no time! By keeping these plugins separate from the main library (only 16kb, by the way), we can then implement specific plugins only when necessary. As a result, this will allow the size of your javascript files to remain as small as possible.

Step 5: Implementing AJAX Functionality

Feeling confident with your jQuery skills yet? Are you ready to take things to the next level? Why not begin implementing some Ajax functionality into your scripts? Through the use of the "load()" and ".get()" methods, jQuery makes it extremely easy to load data. The following resources will be vital for your education.

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

insic July 15th

Nice article again from nettuts. I love jQuery.
( Reply )
1. Kiran May 8th
  
  Thanks,
  ( Reply )
Reuben July 15th

Nice tutorial, makes me want to learn jQuery, and I might just try.
( Reply )
Gregory July 15th

In regards to “Why Would I Use This Library Over The Others?”- that seems really unfair, Mootools does all that (with the exception of really advanced CSS selectors, although it should be noted that mootools is the fastest framework as far as CSS selectors go).

People like to ignore Mootools (and other frameworks)- jQuery is great, but Mootools is overlooked too often.
( Reply )
Thomas Evan Lecklider July 15th

jQuery is definitely the best Javascript library. I switched over from Script.aculo.us and am really impressed. CSS selectors, chainability, and intuitive syntax make it pretty dang easy to use.

I also recently implemented the AJAX functionality you talked about in the last article you mentioned.

Great post!
( Reply )
Jakob Sandberg July 15th

Great Article. You did a great job describing what jQuery is.
Thanks!
( Reply )
Andrei Constantin July 15th

I was looking for something like this since first tutorials with jquery popped in here

Thanks a lot!
( Reply )
Zim July 15th

If you are patient, I suggest this video from Google Tech Talks: http://www.youtube.com/watch?v=8mwKq7_JlS8
The speaker is a 12 years old kid, but trust me, he’s really good explaining what’s jQuery about! I started after listening him.
Trial, error, and a lot of help from internet!
Good luck for those who are starting with this
( Reply )
Bilal July 15th

Thnx a lot.I want to learn one of these frameworks but i got silly sense of fear like u said..Now im ready to study..

Thnx again..
( Reply )
Jbcarey July 16th

This is exactly what I’m going to need…. I’ve been into site for years now, but I’ve only started working in a company and I’m desperatly lacking these JS skills….

THANKS!
( Reply )
Ben Griffiths July 16th

Great introductions, thanks
( Reply )
decimus July 16th

Great article. Im gonna dig it
( Reply )
Chris Loft July 16th

EXCELLENT – I’, just a beginner – neither a good designer nor a good coder – I have enjoyed using jquery and this guide will be an excellent resource – thank you
Chris Loft
Adelaide, sunny South Australia
( Reply )
Sam July 16th

Great list, I transformed from Novice to Competent in about 3 hours.
( Reply )
Shane July 16th

Wondered how long it’d be before we saw another jQuery post

I’ve been using it for a while now, and have found that I’ve lost weight, been able to swim faster and do some amazing stuff with JavaScript. OK, only one of those, but hey, it sure makes me happy.

As I’ve become more proficient I’ve found that writing my own plugins has really helped to harness the full power of jQuery.

Thanks for posting.
( Reply )
Chris July 16th

Having just started out learning jQuery this is a very useful roundup!
Now heading off to surf the sites I hadn’t come across before…
( Reply )
yat temizliği July 16th

thank you wery much
( Reply )
moritzpeuser July 16th

This is the time to start with jQuery.
Thank you for sharing!
( Reply )
Danny July 16th

awesome article, i love the resources
( Reply )
ben July 16th

thank you for this introduction to jQuery it was very helpfull
( Reply )
Sean O July 16th

You left out one of the best resources out there, Karl Swedberg’s Learning jQuery:
http://www.learningjquery.com

Also, his (and Jonathan Chaffer’s) book of the same name is required Summer Reading.
( Reply )
John Deszell July 16th

Very cool, I want to start getting my feet wet with some jQuery. I just need to find time to learn it Maybe the fifteenDaysOfJquery.com will help, just take my time.
( Reply )
Andy Gongea July 16th

Thanks for this awesome list. I want to learn jQuery and I think this is very useful.
( Reply )
Ryan July 16th

Aren’t you missing the most obvious site out there? learningjquery.com is quite valuable for those learning the library.
( Reply )
Aaron July 16th

Yea I really think jQuery is the mother of all frameworks, its versatile, powerful, and doesn’t have a major learning curve. Ive had the unfortunate experience of building something out in a different frame work only to find that a new functionality I wanted to do was basically impossible without a doctorate degree in java mumbo jumbo.
( Reply )
Simon North July 16th

Thanks for the great list, I have been wanting to learn jQuery for a while but had no idea where to start, so this list can really help.

Simon
help-developer.com
( Reply )
w1sh July 16th

Nice! Thank you so much for posting this roundup. I’m about to jump head first into this.

Keep up the good work Eden!
( Reply )
Nysuatro July 16th

Wonderfull article. Really helpfull
( Reply )
Richard, Peacock Carter July 16th

‘The idea of a developer ONLY performing frontend or backend work is quickly becoming a dated concept.’

I’d agree with that, though I’ve escaped quite a lot of development so far – useful to have a business partner who develops!
( Reply )
Lakeshia Burnside July 16th

I was really looking for something like this thanks so MUCH!!!
I’ve experimented with Mootools but i think Jquery is alot easier.
( Reply )
Smukkekim July 16th

Remy Sharp has an adapted version of Visual JQuery on his site:

http://remysharp.com/visual-jquery/

It has two advantages – its for a newer version of JQuery and Remy has (at least in my opinion) a much more accesible division of topics.
( Reply )
Toup July 16th

Nice ressources, thanks for putting it all together.

As for the Plugin part of your article, I found this article particulary enlighting :

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

Hope that helps. Kudos again for the nice article.
( Reply )
Josh July 16th

Great post! I was hoping to find a list like this here
( Reply )
MrQwest July 16th

It seems like a lot of people are now learning jQuery, me being one of them! This post has helped me understand some of the basics, and I’ll definitily be referring back!

Thanks!
( Reply )
Scienceo July 16th

The resources of jquery seem endless! That’s fantastic!
( Reply )
Eric July 16th

The thing about jQuery is… it’s not just easy to use – it’s incredibly intuitive. So if I want to hide an element, the function to call is hide(). If I want to fade an element in, I call fadeIn(). If I want to focus an input field, what do I call? That’s right, focus(). Another great thing is how easy it is to get and set elements in a page. So if I have an input field with id “phone-number” I just call up $(’#phone-number’).val(); and that gets the value for me! If I want to set that value to something I just use $(’#phone-number’).val(’555-5555′);. How easy is that?
( Reply )
Jeffrey Way July 16th

Thanks, everyone! Let me know if you have any questions and I’ll see if I can help.
( Reply )
Braden Keith July 16th

Awesome! Can I request the same kind of thing for PHP? Resources to get you started with PHP from scratch.
( Reply )
Luke Robinson July 16th

Great article. Here’s another awesome resource, the book and the blog, Learning jQuery at http://www.learningjquery.com
( Reply )
Snorri3D July 17th

nice 1
( Reply )
Connor July 17th

Man…I wish I had a list like this, when I first started learning JQuery!
( Reply )
Ben July 17th

Does anyone have a link to a good tutorial on the best way to load jquery? Like the fastest method to load the script – it would be good to see a tutorial on here about it too!

great site

i used jquery to make a fading header link at http://ripesurfing.com
( Reply )
Grafiko July 17th

Great compilation of articles, great work as always
( Reply )
Braden Keith July 17th

Just so I don’t leave it up to NT to publish something about it, does anyone know of a collection of this like NT has published, but for PHP?
( Reply )
Joefrey Mahusay July 17th

Great links.
( Reply )
Niklas July 20th

Great collection of useful jQuery examples and especially inspiration! Thank you!
( Reply )
Cristian Gorrino July 27th

Thank you very much, this is great!
( Reply )
Ryan Battles - Freelance Web Designer July 28th

This list is amazing. I have just bookmarked it as I plan to learn jQuery next in my lineup of new skills as a web developer as well as a web designer.
( Reply )
Raj August 4th

gr8 list. Thanx a lot!
( Reply )
Kolo August 10th

nice tut – about to get started on jquery. thanks!
( Reply )
Windows Themes September 5th

Great resources Jeffrey. Thanks
( Reply )
ajabogado September 18th

Really a comprehensive list. thanks much.
( Reply )
saurabh September 23rd

good resources … thnx a lot…
( Reply )
Web Design Long Beach October 1st

Cool! I have been looking to get started on jQuery so I can improve my website, http://www.jadgraphics.net
( Reply )
Aditya October 13th

Wow, this will make my drab Classifieds site into a better experience..
( Reply )
kd November 10th

really a gr8 post…thks for all the excellent help
( Reply )
Mounir.dz November 17th

Nice article , thanks .
( Reply )
Sridhar November 24th

I love u nettuts
( Reply )
gregsometimes December 15th

Someone who goes by the name of “gregsometimes” (I wonder what or who he is all other times?) has posted a few interesting articles that touch on the in-depth information about jQuery, writing plug-ins and the meaning of the oh-so-ever ambiguous dollar sign ($) usage.

A brief explanation of what does the Dollar Sign actually mean in jQuery:
http://www.authenticsociety.com/blog/JavaScript_DollarSign

gShuffle plugin example. There is a detailed description of what it does and how it does it as well:
http://www.authenticsociety.com/gShuffle-1/

And finally, an in-depth article on how to build jQuery plugins:
http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner
( Reply )
Uber Person December 24th

awesome post!!!!
( Reply )
husien January 4th

great list man ……thanks alot
( Reply )
Mehran Khajavi(sinoohe) January 5th

It is so good !!!
good luck and have a best day
( Reply )
Tadd January 5th

JQuery – what a wonderful thing indeed! I’ve been trying my darnedest to learn it in order to get this form functioning – and this article has been a lifesaver! Thank you!
( Reply )
Wazdesign January 8th

Hey I am designer and Just stated learning jQuery.. its robust fine..
( Reply )
webbo January 16th

Just about to start learning JQuery, so this will be a fantastic start. Many thanks.
( Reply )
Rajesh January 23rd

i appreciate with this library,
i like this library and also insic pic
( Reply )
Josh January 29th

Thanks for the post. I’ve found some helpful resources that I’ll continue to visit.
( Reply )
cruis January 31st

great links and hope there are more excelent works and examples about jquery adding to this blog.
( Reply )
Mahesh Dasari February 3rd

Two Thumbs up for great articles provided
( Reply )
Suresh February 11th

Thank you. Its very Useful
( Reply )
Christiano Milfont March 12th

bacana o post, excelente catalogação principalmente para quem está iniciando
( Reply )
Kate Mag March 29th

Thank you so much, the article is what i’m looking for. Bookmark it
( Reply )
Xtence April 7th

Great post, all the great resources at once, thanks!
( Reply )
jQuery humper April 8th

jQuery is the monkey’s fat juicy sweaty hairy salty swinging-on-a-hot-day bollocks.
( Reply )
1. Mahbub April 15th
  
  Lols!
  
  I’m also building a tips and tricks site for jquery. It’s jquerymagic.com . Hope it would come on the list some day.
  ( Reply )
swamy May 13th

cool article
( Reply )
Russ May 14th

thanks for the list! The first link appears to be broken/moved. I think it should be…

http://css-tricks.com/video-screencasts/20-introduction-to-jquery/

for the CSS Tricks introduction to jQuery
( Reply )
CMS Design May 28th

You’ve got a Javascript error in your page.
( Reply )
wpdigger June 3rd

Great Article. You did a great job. Thanks a lot!
( Reply )
khreativ June 4th

thanks alot for this article. I’m in the process of adding JQuery to my skillset and this looks like it’ll be a great resource! thanks again!
( Reply )
Palau June 15th

I’m new in JQuery and this list is certainly helpful. Thanks pal!
( Reply )
sabaqahmad June 30th

i am thankful to u
( Reply )
jason millward July 20th

great stuff – thanks for this
( Reply )
Joe October 11th

Great List!!!
( Reply )

Add Your Comment

( GET A GRAVATAR )

Your Name
October 11th

Cancel

Tuts+	Tutorials & Resources
Psdtuts+	Photoshop & Graphics
Nettuts+	Web Design & Development
Vectortuts+	Vectors & Illustration
Audiotuts+	Music & Sound
Aetuts+	AfterEffects & Motion
Activetuts+	Flash Tutorials
Cgtuts+	Computer Graphics
Phototuts+	Photography

ActiveDen	Flash Marketplace
ThemeForest	Web & CMS Themes
GraphicRiver	Graphics, Vectors & Icons
VideoHive	Motion Graphics & Projects
AudioJungle	Loops & Effects

FreelanceSw	Freelance Jobs & Community
Rockable	Books & How-To
Creattica	Design Community
Mac.AppStorm	Mac Apps
Web.AppStorm	Web Apps
WorkAwesome	Be Awesome At Work
Envato	About Us

15 Resources To Get You Started With jQuery From Scratch

Author: Jeffrey Way

What Exactly Is jQuery?

Why Would I Use This Library Over The Others?

Step 1: Download The Library

Recommended Reading

CSS-Tricks.com : Introduction To jQuery

Digital-Web.com : jQuery: A Crash Course

Slideshare.net : "Learning jQuery In 30 Minutes"

Step 2: Create Your First Function

Recommended Reading

jQuery.com : "How jQuery Works"

FifteenDaysOfJquery.com : Day 1

VisualJquery.com : "Your jQuery Dictionary"

Step 3: Animate Your Elements

Recommended Reading

jQuery.com : "Animations"

Detached Designs : Learning About The Animation Abilities Of jQuery

Web Designer Wall : jQuery Tutorials For Designers

Step 4: Plugins

Recommended Reading

jQuery Corner Gallery

Enhance The User Experience : 10 Useful jQuery Plugins

jQuery.com : "Plugins"

Step 5: Implementing AJAX Functionality

Recommended Reading

Sitepoint.com : Easy AJAX With jQuery

jQuery For Designers: Using AJAX To Validate Forms

Nettuts.com : How To Load In And Animate Content With jQuery

Related Posts

Enjoy this Post?

Plus Members

User Comments

Add Your Comment

Subscribe

Write for us!

User Plus

Copyright & Usage

Write a Tutorial

Suggestions?

Related Sites