E-com DevBlog Spider-ball-vacuum

jQuery… IBM endorsed?!?

Now that I have your attention, it's not completely what you are thinking, they haven't endorsed it for E-Com, but they have a very nice article written up in the DeveloperWorks under "XML - Web Development". I have toyed with jQuery a bit and I think it may be a better solution for simple animation and style changing. It is by no means a replacement for prototype (which is so powerful - for js - that it gives me headaches), but it is a nice solution to simple problems, and it has some very nice features (you can select anything, seriously, anything on the page). There's just one thing to remember... Unobtrusiveness is the key so remember to put everything in the "document ready" section.

$(document).ready(function() {
   // put all your jQuery goodness in here.
});

OR you can use the short cut, like so...

$(function() {
   // Put more jQuery goodness here.
});

So if you wanted to do a click event, you would do something like this.

$(document).ready(function() {
   $('#buttonDiv').click(function() {
      $('#grow').animate({height: 500, width: 500 }, "slow", function(){
         alert('The element is done growing!');
      }); //alert function
   }); //click function
}); //ready function

I threw in some extra commenting so you could more easily see the ending tags of each function (also this blog engine tends to remove all whitespace in the code section so while it looks pretty while typing, it usually comes out stripped...) Also something to keep in mind is that all javascript should be unobtrusive, meaning you shouldn't need to use onClick events unless you absolutely have to. So as typed in the jQuery example above, the line " $('#buttonDiv').click(function() {//do something} " would be something close to " docuement.getElementById('buttonDiv').click(function() {//do something} " in standard javascript.

Anyway, that is a quick intro to jQuery, check "Simplifiy Ajax development with jQuery" on DeveloperWorks for more.