jQuery Demo 1

I did several demonstrations during the Alamo Coders presentation.  I am going to walk through two of them that I think are the most interesting.  One cool thing about jQuery demonstrations is that you don’t need very many of them.  One or two real world examples will demonstrate 80% of jQuery’s functionality.  Not because the library is not robust, but because it is such a compact library and you can do so much with just a few statements.

Formatting Table Rows

Those of you who have been doing web development for a long time will really appreciate this.  It was always a pain to style alternating rows in a table.  jQuery makes this very easy. 

$.ready(function(){
    $('tr:even').css('background-color','gray');
    $('tr:odd').css('background-color','#CCCCCC');
});

And that’s it.  All table rows are now formatted.  Here is the output.

What is happening here is the $.ready(function(){}) statement is the jQuery replacement for window.onload.  It fires as soon as the DOM is ready to be acted upon, whereas the window.onload does not fire until the entire page is loaded — including images.

jQuery uses a CSS Selector style of element retrieval. the $(‘tr:even’) returns back a jQuery object that contains a list of all <tr> elements on the page, the :even is a pseudo-selector that returns the even numbered rows. 

Once the elements are selected, jQuery then performs whatever action you need against all of the elements that match the selector.  In this case, we are adding a background color via the css styles.

Another important feature in the design of jQuery is that all methods are chainable. You can get a selection of elements and perform several manipulate them in the same operation.  You can also stop the chain with the end() function, which takes you back to your original selection.  This can reduce the statement above to one statement.

$('tr')
    .filter(':even').css('background-color','grey').end()
    .filter(':odd').css('background-color','#CCCCCC');

While this does the same as the first statement, I can keep working with my original list of <tr> elements and do things like hover styling. Let’s assume that we have stopped hacking our CSS and put all of these into CSS classes.

$('tr')
    .filter(':even').addClass('even-rows').end()
    .filter(':odd').addClass('odd-rows').end()
    .hover(function(){
               $(this).addClass('hover');
           },
           function{
                $(this).removeClass('hover');

            });

Here are the results

A slightly Different Outcome with find() method

When writing these demos the first time, I accidentally used the find() method instead of filter() and got an interesting result that I though would be really useful someday.  While filter reduces the original selection, find will select child elements that meet the new selector, so when I did this:

$('tr')
    .find(':even').css('background-color','grey').end()
    .find(':odd').css('background-color','#CCCCCC');

I got this result:

Now my colums are alternating.  Just something to keep in the back of your head when you need it 🙂

Conclusion

This is a very simple demo, and you can find plenty of these all over the web.  But this exposes you to jQuery selectors, css modification, event handling and traversal.  There’s a lot more in the library, but we just hit a lot of them.