Javascript Frameworks Abound

Do we really need another Javascript framework?

There’s the Dojo Toolkit. It’s mature and includes the kitchen sink. Then there’s Prototype. It’s wildly popular and several popular UI layers are built on top of it, including script.aculo.us, Rico, and others. Of course, you can’t leave out mootools. It’s UI library, moo.fx, can also sit on top of Prototype if you so desire. There’s Y!UI, the Yahoo! User Interface library. And we’ve got ExtJs, a robust interface framework that can leverage Y!UI, Prototype, or jQuery.

jQuery

Which brings us to… jQuery. Yep, it is yet another Javascript framework (YAJF). jQuery, though, is arguably the fastest and the most elegant of the lot. It supports CSS3, browser detection, method chaining, plugins, Ajax (gotta have that to be cool), flexible selectors, and basic UI effects. All in under 20K.

Simple July 4th jQuery Demo

Okay, so by way of introduction, here’s a simple little jQuery demonstration.

Click this link to turn this article red white and blue and get the lyrics to “God Bless America,” then click again to return to normal.

God Bless America,
Land that I love.
Stand beside her, and guide her
Thru the night with a light from above.
From the mountains, to the prairies,
To the oceans, white with foam
God bless America, My home sweet home.

The code is below, and is doing this: to the anchor tag (“a”) with an id of “redwhiteblue”, toggle between two functions on each click event; the first function loops through all the paragraph elements within divs of class “entry” and assigns a css color style based on the index mod 3 (iteratively assign from an array of red, white, and blue); the second function simply assigns a css color style of black to all paragraphs within divs of class “entry”; both functions return false to short-circuit the link.

Update: The commented section below is replaced by the three lines that follow it, suggested by jQuery’s creator, John Resig (thanks, John). What I was doing with a clumsy for loop, iterating through each paragraph I selected with a cobbled-together XPath, is better done with the each method, applying a simple function along the selected vector. It goes to show just how slick the library really is.

  var rwb=Array("#f00","#aaa","#00f");
  $("a#redwhiteblue").toggle( function() {
    $("p.Godblessamerica").slideDown(300);
//    for(i=0;i<$("div#jqueryintro p").length;i++){
//      $("div#jqueryintro p:nth(" + i + ")").css({color:rwb[i % 3]});
//    } return false;
    $("div#jqueryintro p").each(function(i){
      $(this).css({color:rwb[i % 3]});
    }); return false;
  },
  function(){
    $("p.Godblessamerica").slideUp(300);
    $("div#jqueryintro p").css({color:"#000"});
    return false;
  });

More jQuery Demos

Here are a few other little demos I fiddled up along the way.

Toggle Red Demo

Click this link to toggle the following paragraph between black and red text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis adipiscing purus eu elit. Quisque feugiat malesuada lectus. Suspendisse potenti. Donec viverra, nisi et lobortis sollicitudin, erat quam condimentum sapien, at volutpat ipsum neque tristique lorem.

   $("a.togglered").toggle(function(){
     $("p.redtarget").css({color:"#AA0000"});
   },function(){
     $("p.redtarget").css({color:"#000"});
   });

Toggle Visibility

Okay click this link to reveal a DIV with some text. Then, click again to re-hide the text.

That’s a toggle tacked onto the DIV. Here’s the code to make that happen.

  $("a.intro").click( function() {
    $("div.introtarget").toggle(100);return false;
  });

Translated into English, that means “select A tags of class intro, then handle click events by executing a function that finds divs of class introtarget and attach a toggle of speed 100 to them; then return false.”

Get Stock Quote With Ajax

Of course, jQuery supports Ajax. Here’s a simple demo that calls a PHP file that merely takes the URL passed in, fetches it, then echos the results.

The jQuery Javascript code takes the output (in this case just a number), and sticks it into the lasttrade span.

Last Trade:

  $("form#stockform").submit(function(){
    var sym = $("input#sym").val();
    var yurl = "http://finance.yahoo.com/d/quotes.csv?" +
       "f=l1&s="+sym;
    var furl = "geturl.php?url=" + escape(yurl);
    $("span#lasttrade").load( furl );
    return false;
  });

Shortest jQuery Tutorial Ever

Hey! Learn jQuery now. Here’s what you do to get your feet wet with jQuery.

1. Start with a basic HTML file.

   <html>
   <body>
     <p>Here is <a href="#" id="clickme">a link</a>.</p>
     <p class="lorem">Lorem ipsum dolor sit amet,
       consectetuer adipiscing elit.</p>
     <p>This text is here to stay.</p>
     <p class="lorem">Phasellus luctus. Suspendisse nisi
     	neque, feugiat eget, ullamcorper at, feugiat ut,
     	tellus.</p>
   </body>
   </html>

2. Link in the jQuery library. You can do this by referencing the code at code.jquery.com or by downloading jquery.js and linking to it.

   Below I’m linking to the packed version of jQuery 1.1.3.1 (the latest at the time of this update).

   <head>
     <script type="text/javascript"
       src="http://code.jquery.com/jquery-1.1.3.1.pack.js"/>
   </head>

3. Add the standard jQuery document ready state handler function. This is a pattern used for most jQuery work, wherein your jQuery code resides.

   <script>
   $(document).ready(function() {
     // your code here
   });
   </script>

4. Flesh it out with some jQuery scripting. See above for examples; the code snippets in the examples can be dropped into the ready function, provided you add the proper elements to the HTML as well.

   <script>
   $(document).ready(function() {
     $("a#clickme").click( function() {
       $("p.lorem").toggle(100);return false;
     });
   });
   </script>

Update and Wrapping Up

Since publishing this article I’ve made a few updates. First was to incorporate John Resig’s suggestion for the July 4th demo. Using each had crossed my mind but I was looking at it wrong and ended up patching an XPath together to get what I wanted.

The second update was to add some additional comments to the Shortest jQuery Tutorial Ever section.

And last, I incorporated today’s update to jQuery itself, now at version 1.1.3.1. Interestingly enough, though the tutorial had you link in version 1.1.3, I had been loading an older (pre-1.1.3) version on this site and was a little disappointed that the demos were a little sluggish. Linking to 1.1.3.1 provided a significant and very noticeable boost to performance. They said 1.1.3 was 800% faster than 1.1.2, and I mostly believed them — but come on, everyone claims they’re latest release of whatever is 800% faster. It’s like marketing boilerplate. I think they make rubber stamps that say that. But I can vouch that the latest release of jQuery is at least, technically speaking, a whole bunch faster.