RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


An Introduction to jQuery, Part 1 : Page 7

jQuery is a small JavaScript library that makes development of HTML-based client JavaScript drastically easier.


Plug-ins for Everything Else

Plug-ins are one of the main reasons that jQuery has become so popular. This is partly because jQuery has an extremely simple plug-in API. There is a jQuery.fn property which hosts any operational functions that can operate on the matched set. By simply implementing a new function on jQuery.fn you effectively create a new matched set function that works just like jQuery's built-in functions. Here's a very simple pulse plug-in that pulses an element by fading it out partially and then fading it back to full visibility:

   $.fn.pulse = function(time) 
     if (!time)
       time = 2000;
     // this == jQuery instance   
     this.fadeTo(time,0.30, function() { 
     return this; // return jQuery
You can now simply use a jQuery instance and the pulse function on it to pulse matched elements. For example, earlier you added a new item to the grid. You could pulse this item instead of fading it in by writing:

     .css("background", "paleyellow")
This plug-in also works against multiple matched elements. The following example pulses the even rows in the grid:

A plug-in receives a this pointer that is the jQuery matched set. So you can apply further functionality to the matched set in the plug-in code. If the plug-in doesn't have a distinct return value you should always return the original jQuery result set to make the function chainable, for example:

This plug-in is simplistic. More commonly, you need a little bit of set-up data as well some logic to loop and manipulate the matched elements individually. The following code shows a slightly more realistic plug-in that centers any elements in the browser window or inside of another element.

   // This jQuery centerInClient plug-in 
   // centers content in the window
   $.fn.centerInClient = function(options) {
     var opt = { 
       container: window,    
       completed: null
     $.extend(opt, options);
     return this.each(function(i) {
       var el = $(this);
       var jWin = $(opt.container);
       var isWin = opt.container == window;
       // have to make absolute
       el.css("position", "absolute");
       // height is off a bit so fudge it
       var hFudge = 2.2;
       var x = (isWin ? jWin.width() : 
          Win.outerWidth()) / 2 - el.outerWidth() / 2;
       var y = (isWin ? jWin.height() : 
          jWin.outerHeight()) / hFudge - 
          el.outerHeight() / 2;
       el.css({ left: x + jWin.scrollLeft(), 
         top: y + jWin.scrollTop() });
       var zi = el.css("zIndex");
       if (!zi || zi == "auto")
         el.css("zIndex", 1);
       // if specified make callback and pass element
       if (opt.completed)
This plug-in includes a couple of common patterns. First it has a set of option parameters that you can pass in as an object map (i.e., {container: "#divContainer"} ). Notice that opt is defined as a private variable and then extended with the option parameter object. $.extend() is a wonderful utility function that extends an object with the content of another object. This makes parameter processing easy, because you need to pass in only the parameters you're interested in. Most plug-ins accept options parameters in this fashion and it's a good idea to implement options in your own plug-ins.

The next common plug-in pattern is to return this.each( function() {...}); which ensures that the jQuery matched set gets returned. The .each function iterates through each of the matched DOM elements individually, letting you operate against them one at a time. Inside the .each() function handler, the this pointer is always the DOM element iterated over. You can use $(this) to get a jQuery instance for that element, which is typically what you want to manipulate the element.

Because it's so easy to create plug-ins, I've ended up creating quite a few myself for both my own and for shared use. The simple plug-in model is a genius concept: It lets jQuery stay small, including only a core set of features while still exposing all the functionality of the core library to any extensions. It's a model more API vendors should embrace and execute as nicely as jQuery has.

What's Not to Like?

If all this sounds like a glowing commercial for a tool, you can be assured that I'm just a happy user who stumbled onto this library some time ago and fell in love with it immediately. I tend to be very critical of the tools I use, but I have yet to have any serious complaints about jQuery. This library just works for me and it works the way I like to work.

However, the jQuery library is not "the perfect tool," and it doesn't solve every possible JavaScript and DOM problem for you. Still, in over a year of using it, I haven't run into a showstopper problem. You may still need a set of a few helper functions to help with non-DOM related functionality. For example, I still use my old JavaScript library to get functionality such as date and number formatting, windowing support, and a host of other features. That's unlikely to ever go away. But I can simply toss out large parts of my old library because jQuery replaces its functionality—in most cases much more elegantly than my own code did.

To be honest I'm grasping to find fault with jQuery for balance here because my editor mentioned I should mention the downsides. Sorry—you'll have to dig up your own dirt. Good luck with that. A quick search around the web seems to confirm my feelings—there's not a lot of negative content on jQuery. But you can judge for yourself by trying it out.

Coming Soon: jQuery, AJAX, and ASP.NET Server Integration

You've seen jQuery's core functionality for DOM manipulation and JavaScript extensions on the client-side, but I haven't covered AJAX and server-side integration with ASP.NET, so that'll be the focus of a follow-up article. You'll see jQuery's AJAX functionality and how to use ASP.NET as a back end to receive AJAX calls in a variety of ways: plain page callbacks, REST calls, and WCF. You'll also see how to integrate ASP.NET controls with jQuery or jQuery plug-ins in combination with server-side components and how to manage jQuery scripts in general in your ASP.NET applications.

Until then, check out jQuery for yourself. You won't be disappointed.

Rick Strahl is the big Kahuna and janitor at West Wind Technologies in Maui, Hawaii. When he�s not out playing on waves and water, he likes to write code until the cows come home. Rick specializes in web and distributed applications with .NET and provides training and mentoring to clients and customers. He's also a C# MVP and ASP Insider, a frequent contributor to magazines and books, a frequent speaker at international developer conferences, and the co-publisher of CoDe Magazine. For more information please visit his Web site at www.west-wind.com.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date