JavaScript Framework Translation Guide

March 04, 2010 — Code

You may have already chosen your favorite JavaScript framework, but if you’re working on many different sites, chances are you need to know how to use some other frameworks as well. What follows is a mini translation dictionary: instructions for accomplishing some common tasks in jQuery, Prototype, MooTools, and YUI (versions 2 and 3). This should also serve as a means for superficial comparison of the libraries.

Event Listeners

DOM Ready

jQuery

$(document).ready(...);

Prototype

document.observe("dom:loaded", ...);

MooTools

window.addEvent("domready", ...);

YUI2

YAHOO.util.Event.onDOMReady(...);

YUI3

YUI().use("base", function(Y){
  Y.on("domready", ..., Y);
});

Page Fully Loaded (including images, etc)

jQuery

$(window).load(...);

Prototype

Event.observe(window, "load", ...);

MooTools

window.addEvent("load", ...);

YUI2

YAHOO.util.Event.onContentReady(...);

YUI3

YUI().use("base", function(Y){
  Y.on("load", ..., window);
});

Respond to Click Event

jQuery

$("#id").bind("click", function(event){...});

Prototype

$("id").observe("click", function(event){...});

MooTools

$("id").addEvent("click", function(event){...});

YUI2

YAHOO.util.Event.addListener("id", "click", function(event){...});

YUI3

YUI().use("node-base", function(Y){
  Y.on("click", function(event){...}, "#id");
});

DOM Manipulation

Note that most frameworks’ selectors return proxies (eg, a jQuery object) instead of actual DOM objects. Please see each framework’s documentation for methods of manipulating DOM elements.

Get Element By ID

jQuery

$("#id")

Prototype

$("id") // or $$("#id")

MooTools

$("id")

YUI2

YAHOO.util.Dom.get("id")

YUI3

YUI().use("node", function(Y){
  Y.one("#id");
});

Get All <p>s Within an Element

jQuery

$("#id p") // returns a jQuery object

Prototype

$$("#id p")

MooTools

$("id").getElements("p")

YUI2

YAHOO.util.Dom.getChildrenBy("id", function(el){
  return el.nodeName.toLowerCase() == "p";
})

YUI3

YUI().use("node", function(Y){
  Y.one("#id p");
});

Append Child Element to a Parent

jQuery

$("#id").append(...);

Prototype

$("id").insert(...);

MooTools

$("id").inject(...);

YUI2

YAHOO.util.Dom.get("id").appendChild(...);

YUI3

YUI().use("node", function(Y){
  Y.one("#id").appendChild(...);
});

AJAX

GET Request With Parameters (and Handle Successful Response)

jQuery

$.get("/url", {request: "params"}, function(data, status){...});

Prototype

new Ajax.Request("/url", {
  method:     "get",
  parameters: {request: "params"},
  onSuccess:  function(response){...}
});

MooTools

new Request({
  method:    "get",
  url:       "/url",
  data:      {request: "params"},
  onSuccess: function(text, xml){...}
});

YUI2

YAHOO.util.Connect.asyncRequest("GET", "/url?with=params", {
  success: function(response){...}
});

YUI3

YUI().use("io", function(Y){
  Y.io("/url?with=params", {
    on: {
      success: function(id, o, args){...}
    }
  });
});