Tuesday, April 1st, 2008

jQuery gets Classy

Category: jQuery

Finally, you can throw away the concise jQuery code, and you can instead grab a more verbose version Classy Query, that John Resig has provided.

This extra verbosity is perfect for a compiler or a document parser. The important people.

You can now write code like this:

  1. <script src="jquery.js"></script>
  2. <script src="classy.js"></script>
  3. <script>
  4. jQuery.Events.addEventListener(document, "ready", function(){
  5.   jQuery.querySelectorAll("div").forEach(function(elem){
  6.     jQuery.DOM.append(elem, " <b>More...</b>");
  7.   });
  9.   jQuery.querySelectorAll("div b").forEach(function(elem){
  10.     jQuery.Events.addEventListener("click", function(elem, event){
  11.       var next = jQuery.Traversal.nextSibling(elem);
  12.       var animation = jQuery.Effects.buildAnimation( next, {height: "toggle"});
  13.       amimation.start();
  14.     });
  15.   });
  16. });
  17. </script>

Finally. Check out the source.

Posted by Dion Almaer at 3:50 am

4 rating from 30 votes


Comments feed TrackBack URI

Finally, a jQuery I would use! ;)

Comment by Dylan Schiemann — April 1, 2008

More options for the people, nice job jQuery team. Now fix my bug report!

Comment by Jigs — April 1, 2008

French internet company located in French Riviera and specialized in online services is searching for :

A senior Web 2.0 Developer (freelance)
Required skills :Web 2.0/Javascript/Ajax/Prototype.js
Expert-level knowledge of LAMP, Javascript, Ajax, and related application development,
Knowledges in cross browser development (IE, Firefox)

Salary : Competitive, based on skills and expérience

To apply, please sent your job application to : atricot@oodesk.com

Comment by leselles — April 1, 2008

I am not really sure why anyone wants this really. Sure, i can see that it is more “class-y” for those prototype people, but compare the same code above to the normal “classic” jQuery code and you can see why jQuery’s simplicity is beautiful. Why complicate it? It does the same thing, doesnt it? It just does it neater, smaller, and easier to read.

Comment by Bryan — April 1, 2008

Well, Bryan, I don’t know why you would say a thing like that. You really should read the source code before you criticize this brillant library!

Comment by MG — April 1, 2008

This syntax has better verbs than the abbreviated and overloaded jQuery syntax and so might make it more user-friendly for new and casual learners. Who knew that attr() could mean both getAttribute() and setAttribute()? What are one(), css() and val()?

Comment by oliverclevont — April 2, 2008

@overclevont: I agree entirely. I was frustrated to learn that click() can be used both to register an onclick and to trigger a click event. I would have assumed it just triggered the click event until I saw people registering functions that way. Also, it isn’t clear from the name whether you are adding a new function to happen onclick, or overwriting previously existing functions with the new one.

As far as the classy.js library, I really like the idea and am a fan of John Resig’s work but I haven’t personally spent much time with it. But, the example provided on this page certainly looks familiar to someone coming from a Java background (or MooTools/Prototype frameworks).

While the extra verbosity will annoy some, I think others will enjoy the class functionality as it is both familiar and useful. It may be going against the core tenets of the library, but this type of extension should always seen as a welcome addition to the developer’s arsenal, should they choose to use it.

Comment by jdempcy — May 6, 2008

Leave a comment

You must be logged in to post a comment.