Main image of article jQuery for Beginners

Summary

Over the past few years, jQuery has grown into an important element of JavaScript and web development. Although some people argue that this cross-platform JavaScript library is rapidly outliving its usefulness, its ubiquity means it's actually not going anywhere soon; if you’re interested in JavaScript, it’s well worth your time to learn enough jQuery to be useful. But how much do you need to know to land a job? Many people claim you can pick up jQuery before learning JavaScript. While that might work for freelance web developers, if you're trying to land a full-time job as a web developer, and you're in competition with other candidates, you want to make sure you know JavaScript as well as jQuery. You don't need to be a full-on JavaScript ninja before starting down the jQuery path, but you certainly want to know the language, especially how to use callback functions. So let's start there. In addition to knowing the basics of JavaScript (what a variable is, how to create and call a function, and so on), you should know how to create functions that can serve as callback functions. In addition, you should understand two important facets of the language: how to manage arrays, and how the “this” variable is used in a callback function. Why should you know how to manage arrays? When you search for elements in your HTML document, even if you find one element (or zero elements, for that matter), you nonetheless get back an object that contains an array of elements. In the zero-element scenario, your result is an object with an empty array; you don't get back a null variable, as some people might expect. For example, jQuery calls for events typically look like this:
jQuery('.clickable').on('click', function() {

   console.log(jQuery(this).attr('id'));

});
This short bit of code demonstrates several things. First, the jQuery ('.clickable') call returns a list of elements, specifically any elements that have class clickable. Next, this code calls the “on” function for that single array. (It does not call “on” for each element in the array, which is important to understand.) This code provides the “on” function with two arguments: the name of the event to handle (click) and a function to call in response to that event. Look at how there are two arguments given to “on,” and that the second argument is a function. The code for jQuery's “on” function assigns this event to all the elements it finds that are of class .clickable. How does it know which elements? The object you got back from the first call to jQuery returned an object that includes a member function called on. The code inside that member function has access to the object, including the array that contains the selected elements found in the first call. Understanding the mechanics of this is vital to truly understanding jQuery. Finally, the callback function will get called for each element that matches the selector. It might be zero times, one time, or many times. Inside the callback function is the “this” variable. In JavaScript, the “this” variable can be messy: what it refers to depends on how the function containing it is called. jQuery carefully manages this for you, so that your callback assuredly refers to the current element. With a solid beginner-to-intermediate understanding of JavaScript, you can easily master jQuery. But here's the catch: By itself, jQuery really isn't all that big. You can read through the entire documentation in a few hours. The key to learning jQuery is figuring out how to accomplish tasks in jQuery. As such:
  • Read the documentation.
  • Familiarize yourself with the functions available. For example, know that there are different ways to find the parent of an element, such as parents() and closest(), and understand the difference.
  • Learn how to chain your commands; most functions in jQuery return the same list of elements you started with, which means you can continue processing by simply tacking on more functions preceded by a dot, as in: $('div').addClass('selected').show();
  • Understand when the document is finished loading and how to write code that safely access the elements only after the document is loaded. There are several ways to accomplish this.
  • Learn CSS selectors. This is vital, because it's through CSS selectors that you use jQuery to locate your elements.
  • Understand HTML best practices, and when to use IDs versus classes. (Yes, that's a separate issue from jQuery, but it impacts how you use jQuery.)
In addition, you should know how to use the browser debuggers, especially Firebug and Chrome's debugger. (IE has a decent debugger, and you'll need to know how to use it when porting to IE.) Learn how to set breakpoints inside your callback functions, and the order in which code gets executed. For example, depending on the situation, the “on” function that assigns a function might get called immediately, but the code in its event callback won't get called until the event takes place. Any code immediately following the “on” function will get called immediately after the function is called, again, likely before an event takes place. You can see this in action by setting breakpoints in the debugger: one on the line before your “on” call, one on the “on” call itself, one inside the callback, and one immediately after the “on” call. You should also know about available plugins. This is a bit of a loaded statement, however, because in addition to the official jQuery plugins (jQueryUI), there are thousands of free third-party plugins (which is one reason jQuery is so popular) that can accomplish nearly anything. Finding them requires searching, which is okay: you can save lots of time by searching for a plugin before attempting to create one yourself. When you find one, test it out thoroughly to make sure it really does what you need, and that it actually works well without bugs. There are so many little tricks to jQuery, from keeping the document from “flashing” before plugins kick in to modifying the look of the elements. You can learn about many of these via online search, but the hard part is figuring out these tricks even exist. By looking at the code of other websites, you can discover quite a few that will prove useful. As you can see, jQuery incorporates enough quirks (and interacts with enough technologies) to keep things interesting. If you’re on the hunt for a JavaScript job, knowing jQuery’s ins and outs can give you a bit of leg up on other candidates, if only because it makes your programming knowledge look even more comprehensive. But as with all things coding-related, no matter how much you think you know, you can always learn more.