7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Web Development

15 Resources To Get You Started With jQuery From Scratch

Scroll to top
Read Time: 6 mins

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
  • Introduction To jQuery

    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

  • jQuery Crash Course

    Digital-Web.com : jQuery: A Crash Course

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

    Visit Article

  • jQuery Crash Course

    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

  • How jquery Works

    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

  • 15 Days Of jQuery : Day 1

    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

  • Visual jQuery : Your jQuery Dictionary

    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

    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

    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

    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

    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

    Enhance The User Experience : 10 Useful jQuery Plugins

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

    Visit Article

  • jQuery.com : Plugins

    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

    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

    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

    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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.