Javascript Library Smackdown: JQuery v. Prototype

And the winner is... JQuery!

Listen, Prototype makes Javascript interesting. It's a great [big] library. It's beautiful. Go and use it. It's nice, really.

But, JQuery, oh JQuery! JQuery makes Javascript fun — just as advertised! Though Prototype is starting to feature some of the same features, JQuery already allows you to objectify any element(s) that can be selected with any CSS 1-3 selector (yes, any valid selector, including the ones that browsers don't support) as well as most any XPath designation as well. It opens the DOM like some well written book.

For instance to make a table with styles alternating on every other row, here's the code to do it using either library:

Prototype (1.5.x version)

$$("table").each(function(table){
  Selector.findChildElements(table, ["tr"])
    .findAll(function(row,i){ return i % 2 == 1; })
    .invoke("addClassName", "odd");
});

JQuery (1.0.2 version)

$("tr:nth-child(odd)").addClass("odd");

Source: Zebra Table Showdown.

Both work and both are cool, but I know which one I'd rather write.

Note that your happiness with one style vs. the other may vary, particularly depending on how well you like parentheses — a complicated jQuery script starts to look kind of like a Lisp program pretty quickly.

If you've heard about Prototype or any of the other javascript libraries out there that are making coding client-side Javascript bearable at long last, you'll definitely want to give JQuery a look.