15 Resources To Get You Started With jQuery From Scratch

In Articles, 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.

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.

Comments

Add a Comment

Note: We use Gravatars on NETTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

Trackbacks

Leave a Trackback

FlashDen	Flash Components
AudioJungle	Music Loops & Sound Effects
ThemeForest	Site Templates & Themes

PSDTUTS	Photoshop Tutorials
VECTORTUTS	Illustrator Tutorials
AUDIOTUTS	Music & Sound Tutorials
NETTUTS	Web Development Tutorials

FreelanceSwitch	Freelance Advice
Jobs.FSW	Freelance Jobs
FaveUp	Design Inspiration
Envato	About Us