Advertisement
JavaScript & AJAX

15 Resources To Get You Started With jQuery From Scratch

by

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

Related Posts
  • Code
    Theme Development
    How to Pass PHP Data and Strings to JavaScript in WordPressPhp js 400
    It's good practice to put all your data in static strings in your PHP files. If you need to use some data in JavaScript later on, it's also good practice to put your data as data-* attributes in your HTML. But in some certain scenarios, you have no choice but to pass strings directly to your JavaScript code. If you are including a JavaScript library, and you've found yourself initializing a JavaScript object inside your header.php then assigning data to its properties, then this article is for you. This article will teach you on how to properly pass PHP data and static strings to your JavaScript library.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Web Design
    Case Studies
    How They Did It: Alice in VideolandAlice retina
    This summer I started building a modern retelling of "Alice in Wonderland", an interactive storybook web app by the name of Alice in Videoland. It ended up being featured in a sister article in Adobe Inspire as well as turning into an encore-winning presentation I gave at CSS Dev Conf 2013. The project was meant to be educational, a testing ground for new CSS animation techniques and desktop-to-tablet JavaScript. I keep Alice's source up on GitHub where anyone can examine my code, but sometimes it's nice to have someone go over the reasoning with you.Read More…
  • Code
    JavaScript & AJAX
    Required JavaScript ReadingRequired js retina preview
    I'm asked regularly about books and online resources to get up to speed on JavaScript. Seems like everyone wants to get in on the JS action and with good reason; it's a great language to know if you're interested in exciting career opportunities. It's also pretty fun to play with.Read More…
  • Code
    jQuery
    The State of jQuery in 2013Code
    A long time ago, in a galaxy far, far away, JavaScript was a hated language. In fact, “hated” is an understatement; JavaScript was a despised language. Consequently, developers generally treated it as such, only tipping their toes into the JavaScript waters when they needed to sprinkle a bit of flair into their applications. Some form validation here, an image slider there. Despite the fact that there is a whole lot of good in the JavaScript language, due to widespread ignorance, few took the time to properly learn it.Read More…
  • Code
    Articles
    Master Developers: Dave Methvin (jQuery Core Team Lead)Davemethvin1
    Most of us are familiar with the jQuery JavaScript library, and likely use it in at least some of our projects. But how much do we know about the people who tirelessly give their time to maintaining the web's most popular JavaScript library? I recently had the chance to interview jQuery Core Team leader, Dave Methvin, and discuss how he became involved with the project and where he sees front-end development headed. He's been a contributor to jQuery since 2006, and is also the President of the jQuery Foundation.Read More…