I’ve spent the last few months really digging into jQuery. From in-depth reads of the source code, to examining plugin patterns, all things jQuery have fascinated me lately. The more I dig into the library, the more I have realized it has the possibility of wild power and abuse, mostly because it makes JavaScript look magical.

For even seasoned JavaScript veterans, the ease at which jQuery can do the seemingly impossible is awe inspiring. With a single command, you can select elements at least 3 different ways. That may sound simple, but it’s pretty far from simple under the hood. For instance, you can select an element by Id, class or a collection of elements. The following code illustrates these points:

jQuery('#myId');
jQuery('.myClass');
jQuery('div');

How on earth can jQuery pull this off? Under the hood, jQuery works hard to make your life simple. But, that doesn’t make it fast, or a good idea. And it’s not until you check the JavaScript profiler that you realize that jQuery isn’t magic. It isn’t doing anything you can’t do. It’s just making complicated DOM selection commands easy to access.

Douglas Crockford has long argued that JavaScript is fast, but it’s the DOM [Document Object Model] that makes JavaScript slow. I agree on this point, but without the DOM, JavaScript isn’t really all that useful. Sure, the XHR (ajax) request object is cool. But if you can’t display that ajax data, what’s the point?

Understanding how JavaScript behaves in all browsers is a daunting task to say the least. But really it’s how the DOM behaves in different browsers that is the more surreal challenge. There aren’t too many different ways a for loop or an if conditional can behave. This is where libraries like jQuery, MooTools and Dojo come in. Libraries make the DOM API more consistent for application code, essentially, they make my life easier and maybe yours too.

Libraries like jQuery, which has an amazingly low learning curve, excite people about JavaScript. It makes even total beginners appear good, and also dangerous. And that’s the fun part. jQuery lets you build an application that has an impact. That’s fun to use. And, that’s fun to build.

Cranky JavaScript veterans get frustrated by libraries. People rarely take the time to learn JavaScript, let alone a library API. Why bother reading the source code when examples are a Google away. This behavior leads to scary things, like including multiple libraries on the page or writing JavaScript code that crawls the entire DOM. These are the types of things experienced veterans shake their head over. Several times over the past few months I have reviewed other people’s code and been shocked by some of the things they are doing. I have shaken my head at them. Even scowled a little, or a lot. But it wasn’t until recently that I realized that it doesn’t matter.

It doesn’t matter if you have the most amazing grasp on JavaScript and can work on Crockford’s level. It doesn’t matter if you’re the most horrible coder and make bad decisions everyday. None of that matters. You’re skill in a language is a personal struggle. The public struggle is the experiences you’re building, whether or not your jQuery application engages its users. I want to get better at coding because I enjoy it. But that’s not universal. The only universal thing we can share is the community you build around a product, whether or not you know the language doesn’t matter, why bother.

jQuery has an awesome feature known as the context argument. It’s pretty lightly documented, but it’s extremely useful. Basically, it let’s you do selectors within a specific context. Let’s look at an example.

    <div id="myParentId">
        <div class="childOne">This is the first Child</div>
        <div class="childTwo">This is the Second Child</div>
        <div class="childThree">This is the Thid Child</div>
   </div>

The above is just a simple XHTML scenario.

// basic selector at the top level and cache in a variable
var pid = jQuery('#myParentId');
// select the first child in the context of the myParentId
jQuery('.childOne', pid).bind('click', function(event) { 
        /* do stuff on click to the first Child */ 
});
// select the second child in context of myParentId
jQuery('.childTwo', pid).bind('mouseover', function( event ){ 
       /* do stuff on mouse over for the  child*/ 
});

This is an overly simplistic demonstration of context, but as you can see, it’s essentially like the .find() method. Of course the above could easily be accomplished using many different methods including ‘:first‘ or ‘.eq(index)‘. However, if you are caching your jQuery objects as Dave Artz suggests in his jQuery performance rules, the context argument is super useful.