Six Things Every jQuery Developer Should Know

Six Things Every jQuery Developer Should Know

Elijah Manor | November 13, 2009

 

This article is not intended to be a beginner’s guide to jQuery development. Instead, it  examines some of the more nuanced situations you encounter during jQuery development. Here are some assumptions I’ve made about what you should know before reading this article:

• Basic understanding of JavaScript and the DOM
• How to use common jQuery CSS selectors (example:  $('div a').fadeOut('slow');)
• A working knowledge of basic jQuery functions (such as  fadeOut, animate, slideUp, and so on)
• An understanding of callback functions and anonymous functions.

If you are not familiar with these concepts, you might consider brushing up with a jQuery tutorial such as Jeffrey Way's jQuery for Absolute Beginners video series, which contains 15 professional beginner videos that bring any developer up to speed with jQuery.

1. What Is This?

After I learned the basics of jQuery and was amazed by how much is possible with so little code, I started branching out and tried more complicated functions and plug-ins. However, before long I was confused about the concept of the thiskeyword. If you are a beginner, this can be quite confusing if you don’t understand it correctly. Sometimes it refers to a DOM element and other times it can refer to a jQuery object. Without knowing how to tell the difference, your work is more like an exercise in guessing than programming.

Under normal circumstances, the this keyword refers to a DOM element. It is most commonly used inside a callback function, such as when binding to an event, iterating over elements with the each function, using animations, using filters, and various other functions.

Numerous functions inside jQuery can accept callback functions that you might not have noticed before. For example, jQuery has two functions for fadeOut. One function takes only a speed argument, but the other function accepts a speed argument and a callback function. After the DOM selection fades out, the callback function provided is triggered, and at that point the this keyword refers to the selected DOM element. If more than one element is selected to fadeOut, the callback is triggered after the corresponding element fades out. Here are several examples of using the this keyword:

//Binding to an event
$('a').click(function() {
   //this refers to the anchor DOM element
   console.log("this.href = '" + this.href + "'");
})
					
//Iterating over elements from a jQuery selection
$('a').each(function() {
   //this refers to the anchor DOM element
   console.log("this.href = '" + this.href + "'");
});
					
//Fading DOM elements from a jQuery selection
$('a').fadeOut('slow', function() {
   //this refers to the anchor DOM element that was just faded out
   console.log("this.href = '" + this.href + "'");
});

This code creates a delegate off of the unordered list (ul) and is listening to the click event off of the list item (li) children. When a list item is clicked, the event propagates up to the unordered list, and at that point the event handler is called, appending a new Dynamic Item list (<li>Dynamic  Item</li>) item to the unordered list.

I added as a comment the syntax to remove the event handler attached by the delegate method. As before, there are three ways to call the undelegate method, ranging from dangerous to safe.

Conclusion

jQuery is a great JavaScript library that is fast, easy to use, and powerful. I find that it is a fairly easy library to start using immediately, and once you start using it more and more, you will find yourself needing to understand some of the deeper concepts to get the full benefits of the library.

I hope that this article has made you aware of some of these important concepts. In addition, there are other things that you should familiarize yourself with, such as how to create a jQuery plug-in, how to use jQuery alongside other JavaScript frameworks, how to perform complex animations, best practices using AJAX, and so on.

The jQuery community  has grown quickly, and the number of plug-ins, tutorials, articles, and Web sites increase every day. If you are interested in continuing your jQuery learning, I encourage you to follow me on Twitter for a fresh set of jQuery links and to check out my blog for my daily Tech Tweets roundup blog posts that contains numerous jQuery links to aid in your learning process.