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.

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.

Recommended Reading

• 

  CSS-Tricks.com : Introduction To jQuery

  In his jQuery screencast, Chris Coyier, over at CSS-Tricks, will give you a basic introduction to including jQuery on your web page and writing a few functions.

  Visit Article

• 

  Digital-Web.com : jQuery: A Crash Course

  Here’s a crash course in jQuery written with code-savvy web designers in mind.

  Visit Article

• 

  Slideshare.net : “Learning jQuery In 30 Minutes”

  If you enjoy slideshows, this tutorial will teach you the fundamentals of jQuery in thirty minutes.

  Visit Article

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.

Recommended Reading

• 

  jQuery.com : “How jQuery Works”

  In his introductory article, John Resig – the creator of jQuery – will take you from the basics to creating animations. This is an essential read if you’re just getting started.

  Visit Article

• 

  FifteenDaysOfJquery.com : Day 1

  In a brave attempt to cover many of jQuery’s features in two weeks, “15 Days Of jQuery” goes over one topic per day. In this specific article, you’ll learn how to use the “document.ready()” method.

  Visit Article

• 

  VisualJquery.com : “Your jQuery Dictionary”

  Think of VisualjQuery.com as your digital dictionary. It will show you the syntax and definition for every jQuery method available. Keep this site bookmarked.

  Visit Article

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.

Recommended Reading

• 

  jQuery.com : “Animations”

  This should be your first stop when learning about jQuery’s animation abilities. It will detail the parameters needed when using this method.

  Visit Article

• 

  Detached Designs : Learning About The Animation Abilities Of jQuery

  Are you a complete novice when it comes to animation? This tutorial will assume that you have no knowledge. Topics covered are increasing and decreasing text, moving elements, chaining animations, and more.

  Visit Article

• 

  Web Designer Wall : jQuery Tutorials For Designers

  Still confused about jQuery’s power? This site will list ten examples ranging from menus to image replacements.

  Visit Article

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.

Recommended Reading

• 

  jQuery Corner Gallery

  Looking for a way to easily add rounded corners to your elements? With corners ranging from rounded to dog-eared, this plugin may find a permament spot in your “toolbox”.

  Visit Article

• 

  Enhance The User Experience : 10 Useful jQuery Plugins

  In this article, James Padolsey details his top ten favorite plugins.

  Visit Article

• 

  jQuery.com : “Plugins”

  As always, jQuery.com proves to be a valuable resource. This article will give you step by step instructions when it comes to creating your first plugin.

  Visit Article

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.

Recommended Reading

• 

  Sitepoint.com : Easy AJAX With jQuery

  In his article for Sitepoint, Akash Mehta will show you how to simplify the process of adding Ajax to your applications with the help of jQuery.

  Visit Article

• 

  jQuery For Designers: Using AJAX To Validate Forms

  Remy will show us how we can use AJAX, along with the jQuery library, to add some server-side validation to our forms.

  Visit Article

• 

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

  Always remember to browse NETTUTs “Javascript” category when searching for jQuery tutorials. In this tutorial, we’ll show you
  how you can load and animate data using jQuery.

  Visit Article