NOTE: This was an April Fools joke for April 1st, 2008.

Over the past two years, seeing hundreds of thousands of people use jQuery, a major point has become apparent: jQuery simply isn’t able to scale to handle the development needs of most power users. It lacks the clarity and power functionality that most developers need in order build applications in a collaborative environment.

For this reason I’ve put a lot of work into a new library (which sits on top of jQuery), called:

Classy Query

» View Source to Classy Query





If one thing has become apparent to me it’s that users enjoy working with the typical Class-style of object creation and inheritance. Because of this I’ve constructed the entirety of Classy Query in an classical manner (you can inherit and override any piece of functionality that you desire).

Before we go too far, let’s take a look at the type of clearly-defined code that you can now write with Classy Query:

<script src="jquery.js"></script> <script src="classy.js"></script> <script> jQuery.Events.addEventListener(document, "ready", function(){ jQuery.querySelectorAll("div").forEach(function(elem){ jQuery.DOM.append(elem, " <b>More...</b>"); }); jQuery.querySelectorAll("div b").forEach(function(elem){ jQuery.Events.addEventListener(elem, "click", function(elem, event){ var next = jQuery.Traversal.nextSibling(elem); var animation = jQuery.Effects.buildAnimation( next, {height: "toggle"}); amimation.start(); }); }); }); </script>

You can even sub-class functionality, creating your own pieces of encapsulation. All of the class and inheritance functionality is taken care of by the Simple JavaScript Inheritance code released last week.

jQuery.DOM.boldWrapInner = jQuery.DOM.wrapInner.extend({ attach: function(elem){ this._super(elem, "<b></b>"); } }); jQuery.querySelectorAll("div").forEach(function(elem){ jQuery.DOM.boldWrapInner(elem); });

Additionally you can treat pieces of functionality as if they were attachable behaviors, like so:

jQuery.querySelectorAll("div").attach(new jQuery.DOM.boldWrapInner());

There’s a number of core features encompassed in Classy Query that really help to transform the traditional jQuery experience into something much more usable.

Class creation

The full Simple JavaScript Inheritance API is included in Classy Query, allowing you to extend and create JavaScript ‘classes’, like so:

var Person = jQuery.Class.create({ init: function(name){ this.name = name; } }); var ClassyDude = Person.extend({ sipWine: function(){ return "Has a beautiful bouquet."; } });

Inheritance

It’s possible to inherit from any existing piece of Classy Query functionality, supporting a true ‘programming in the large’ mindset. You can inherit from, or completely override, existing methods with ease (especially since they’re all classes).

jQuery.Effects.collapse = jQuery.Effects.buildAnimation.extend({ attach: function(elem){ this._super(elem, {height: "hide", width: "hide"}); } });

Behaviors

Behaviors tend to encapsulate a portion of functionality which is applied against an element (such as making a table sortable or making an item draggable). Classy Query supports a technique to make this particular implementation trivial.

jQuery.querySelectorAll("div") .attach(new jQuery.DOM.addClassName("current"));

No more ‘this’

The ‘this’ keyword is confusing and frequently misused. To counter this all access to elements (within functions) is done by the first argument, rather than through ‘this’.

jQuery.querySelectorAll("div").forEach(function(elem){ jQuery.DOM.addClassName(elem, "current"); });

Re-Structuring

The hierarchy of jQuery has been completely re-organized. Rather than having a single, flat, interface through which to access all methods functionality has been broken down into individual groupings of methods. These groupings tend to, also, coordinate with the jQuery Documentation for convenience.

Additionally, nearly all the method names have been re-named in order to provide a greater level of clarity to developers. Frequently it was found that the concise method names of jQuery provided too much confusion to developers just getting started with the library. The end result is a library that is easier to read and understand for developers.

The full list of categories and changed methods can be found in the following table:

jQuery Classy Query jQuery jQuery.querySelectorAll each forEach prepend jQuery.DOM.prepend append jQuery.DOM.append before jQuery.DOM.insertBefore after jQuery.DOM.insertAfter wrap jQuery.DOM.wrap wrapInner jQuery.DOM.wrapInner wrapAll jQuery.DOM.wrapAll clone jQuery.DOM.clone empty jQuery.DOM.empty remove jQuery.DOM.remove replaceWith jQuery.DOM.replaceWith removeAttr jQuery.DOM.removeAttribute addClass jQuery.DOM.addClassName hasClass jQuery.DOM.hasClassName removeClass jQuery.DOM.removeClassName offset jQuery.DOM.getOffset text jQuery.DOM.getText text jQuery.DOM.setText html jQuery.DOM.getHTML html jQuery.DOM.setHTML attr jQuery.DOM.getAttribute attr jQuery.DOM.setAttribute val jQuery.DOM.getValue val jQuery.DOM.setValue height jQuery.DOM.getHeight height jQuery.DOM.setHeight width jQuery.DOM.getWidth width jQuery.DOM.setWidth css jQuery.DOM.getCSS css jQuery.DOM.setCSS children jQuery.Traverse.getChildElements find jQuery.Traverse.getDescendantElements next jQuery.Traverse.getNextSiblingElements nextAll jQuery.Traverse.getAllNextSiblingElements parent jQuery.Traverse.getParentElements parents jQuery.Traverse.getAncestorElements prev jQuery.Traverse.getPreviousSiblingElements prevAll jQuery.Traverse.getAllPreviousSiblingElements siblings jQuery.Traverse.getSiblingElements filter jQuery.Traverse.filterSelector bind jQuery.Events.addEventListener unbind jQuery.Events.removeEventListener trigger jQuery.Events.triggerEvent hover jQuery.Events.hover toggle jQuery.Events.toggle show jQuery.Effects.show hide jQuery.Effects.hide toggle jQuery.Effects.toggle animate jQuery.Effects.buildAnimation queue jQuery.Effects.queue dequeue jQuery.Effects.dequeue $.ajax jQuery.Ajax.request load jQuery.Ajax.loadAndInsert ajaxSetup jQuery.Ajax.setup serialize jQuery.Ajax.getSerializedString serializeArray jQuery.Ajax.getSerializedArray

querySelector and querySelectorAll

Finally, rather than having a generic, catch-all, method as jQuery selector functionality is deferred to the new querySelector and querySelectorAll methods. These methods only support pure CSS 1-3 selectors (nothing extra) in an attempt to avoid any unpleasant situations when a browser’s native querySelectorAll is implemented.

jQuery.querySelectorAll("div").forEach(function(elem){ jQuery.Effect.hide( elem ); }); jQuery.Effect.hide( jQuery.querySelector("#item") )

» View Source to Classy Query

I hope this particular library will be of use to the general jQuery-using population. I hope we can start to have an open dialog, moving forward, getting everyone to adopt a more standard approach to JavaScript development. There’s no reason why we shouldn’t be using this tried-and-true approach to application development. It’s worked in an untold number of existing applications, it’s bound to work here as well. Enjoy.