From Web Directions North 2008, Jonathan Snook compares some of the leading JavaScript Frameworks out there.

10. var Person = Class.create({
initialize: function(name) {
this.name = name; },
say: function(message) {
return this.name + ': ' + message; }
});

11. ['foo', 'bar', 'baz']
.each(function(name, index) {
this[name] = index; })

12. ['foo', 'bar', 'baz']
.filter(function(name, index) {
return name[0] == 'b' })

13. $A(document.getElementsByTagName('p')).each(
function(el){el.className = 'bigpimpin'}
)

16. $('p')
.addClass('bigpimpin')
.html('WDN08FTW!')
.click(function(){this.innerHTML = 'no
seriously, for the win'});

17. jQuery.fn.newMethod = function(){
return this;
};

18. $('.parentElement').hider(
{
toclick: function(el){
return $('.trigger', el) },
tohide: function(el){
return $('ul', el).hide() },
effect: 'slide'
}
)

19. jQuery.fn.hider = function(options)
{
return this.each(function(){
// hide the element and its parent
var hide = options.tohide(this);
var click = options.toclick ? options.toclick(this) : this;
if(options.hide) jQuery(hide).hide();
jQuery(click).click(function()
{
if(options.effect == 'slide')
{
jQuery(hide).slideToggle('fast');
}else{
jQuery(hide).animate({opacity:'toggle'},'fast');
}
return false;
});
});
}

23. var tree = new Ext.tree.TreePanel({
el:'tree',
animate:true,
autoScroll:true,
loader: new Ext.tree.TreeLoader({dataUrl:'/server/script'}),
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true} });
// set the root node
var root = new Ext.tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false, // disable root node dragging
id:'source
tree.setRootNode(root);
// render the tree
tree.render();
root.expand(false, /*no anim*/ false);

27. var Person = new Class({
initialize: function(name){
this.name = name; }
});

35. <style type=quot;text/cssquot;>
@import quot;http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.cssquot;;
@import quot;http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.cssquot;
</style>
<script type=quot;text/javascriptquot;
src=quot;http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.jsquot;
djConfig=quot;parseOnLoad: truequot;></script>
<script type=quot;text/javascriptquot;>
dojo.require(quot;dojo.parserquot;);
dojo.require(quot;dijit.form.Buttonquot;);
dojo.require(quot;dijit.Menuquot;);
function call_function(choice) {
console.debug(choice+quot; was clicked.quot;);
}
</script>

36. <div dojoType=quot;dijit.form.DropDownButtonquot;>
<span>Edit</span>
<div dojoType=quot;dijit.Menuquot; id=quot;Editquot;>
<div dojoType=quot;dijit.MenuItemquot; label=quot;Copyquot;
onclick=quot;call_function('copy');quot;></div>
<div dojoType=quot;dijit.MenuItemquot; label=quot;Cutquot;
onclick=quot;call_function('cut');quot;></div>
<div dojoType=quot;dijit.MenuItemquot; label=quot;Pastequot;
onclick=quot;call_function('paste');quot;></div>
</div>
</div>

39. $('elementId').hide();
$('elementId').show();

40. $('#elementId').hide();
$('#elementId').show();
$('#elementId').toggle();
$('#elementId').slideToggle();

41. new Effect.toggle(
$('elementID'),'blind')

43. new Ajax.Autocompleter(
'contact_name',
'contact_name_auto_complete',
'/server/script', {});

44. new YAHOO.widget.AutoComplete(
quot;myInputquot;,
quot;myContainerquot;,
myDataSource);

45. // An XHR DataSource
var myServer =
var mySchema = [quot;ResultItemquot;,
quot;KeyDataFieldquot;];
var myDataSource = new YAHOO.widget
.DS_XHR(myServer, mySchema);

48. new Control.Slider('handle',
'track', {
sliderValue:100000,
range: $R(10000, 500000),
onSlide: function(v) {
SB.setBudget(v); }
});

52. Shadowbox.lib = {
getStyle: function(el, style){
return jQuery(el).css(style);
},
}