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.
What Exactly Is jQuery?
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.
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.
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.
Digital-Web.com : jQuery: A Crash Course
Here’s a crash course in jQuery written with code-savvy web designers in mind.
Slideshare.net : “Learning jQuery In 30 Minutes”
If you enjoy slideshows, this tutorial will teach you the fundamentals of jQuery in thirty minutes.
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.
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.
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.
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.
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.
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.
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.
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.
Step 4: Plugins
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”.
Enhance The User Experience : 10 Useful jQuery Plugins
In this article, James Padolsey details his top ten favorite 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.
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.
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.
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.
Nettuts.com : How To Load In And Animate Content With jQuery
how you can load and animate data using jQuery.