Moving from Prototype to JQuery
On a recent project, I converted a ton of Javascript from Prototype to jQuery in order to take advantage of many of the nice UI elements available. As I did the conversion, I took down some notes that I wanted to share with you about the differences between the two libraries. In some cases, the differences are insignificant, and in a couple of others, the differences merely come down to a difference of opinion among the developers and supporters of the libraries.
Here are the notes:
Getting Ready
Before you can work with elements on the page, those elements must be loaded.
Prototype uses
document.observe("dom:loaded", function() {
// your functions
})
jQuery uses this:
$(document).ready(function(){
// your functions
})
Finding things
In Prototype, you use $() or $$() to locate elements. With $() you use the ID, whereas with $$() you use a CSS selector.
var header = $("header"); // a single element, <div id="header"
var popups = $$("a.popup"); // all elements like <a class="popup">
With JQuery, you do almost all of your element location using $(), which works very much like $$() in Prototype.
var header = $("#header"); // a single element, <div id="header"
var popups = $("a.popup"); // all elements like <a class="popup">
Binding events
Prototype’s Element class has an Observe method. It’s very easy to use and easy on the eyes.
$("header").observe("click", function(event){
alert("Hi there");
});
In jQuery, it’s nearly identical, except that click is a method on the JQuery object.
$("#header").click(function(event){
alert("Hi there");
});
At first, the differences look marginal, but let’s look at a more complicated example:
In Prototype, to find all links on the page with the class “Popup” and make them open in a new window, you have to do this:
function new_window_links(){
links = $$("a.popup");
links.each(function(link){
link.observe("click", function(event){
window.open(link.href);
event.stop();
});
});
}
The Prototype version makes us find all of the elements, loop over them, and then apply the observer to each one.
jQuery can hide the iteration from you, which results in somewhat cleaner code.
function new_window_links(){
links = $("a.popup").click(function(event){
window.open($(this).attr('href'));
event.preventDefault();
});
}
Adding Classes
Prototype:
$(".foo").addClassName("ninja");
$(".foo").addClass("ninja");
Traversing the DOM
Prototype:
parent_of_foo = $("foo").up();
jQuery
parent_of_foo = $("#foo").parent();
Working with HTML attributes
This one was the most difficult to get used to. In Prototype, many of the HTML attributes are available as methods on the Element class.
window.open(link.href);
In jQuery, you use the attr method to get and set the attributes.
window.open(link.attr("http");
This illustrates only a few of the differences between the libraries, but as you can see, the differences don’t realy amount to anything substantial. Both of these libraries greatly simplify cross-browser JavaScript development, so no matter which you choose, you’ll be in good shape.
