Recently I have done a project using prototype. However, the performance of jQuery seems much faster than prototype although the difference is not very huge. (check out Dojo vs JQuery vs MooTools vs Prototype Performance Comparison) The other reason is that jQuery community is so huge that more solutions to a problem can be easily found. So I listed out some comparison in methods between prototype and jQuery.

compare prototype and jQuery

prototype method jQuery method comments
$('manager') $('#manager') Prototype $(selector), selector default is the id of the element
$$('#manager') $('#manager') prototype $$ returns an array of prototype element. jQuery $() selector returns a jQuery object reference those matching elements
new Element('input', {'class': 'digit'}) $("< input class='digit' >")  
$('manager').removeClassName('red'); $('#manager').removeClass('red')  
$('manager').addClassName('red'); $('#manager').addClass('red')  
$$('#manager').invoke('addClassName', 'red'); $('#manager').addClass('red') jQuery will automatically apply the method to all the matching elements
$$('#manager').each(function(ele){ele.addClassName('red')}) $('#manager').addClass('red') You don't have to iterate through an array for jQuery
$('manager').observe('click', function(){alert('clicked')}) $('#manager').click(function(){alert('clicked')});  
$$('#manager').each(function(ele){alert(ele.readAttribute('id')}) $.each($('#manager'), function(){alert($(this).attr('id')}) In jQuery earch iterator, the 'this' always refers to the DOM element, in order to use jQuery object method, you should add the jQuery wraper around 'this'
$('manager').readAttribute('name') $('#manager').attr('name')  
$('manager').update("the name") $('#manager').html("the name")  
$('manager').down('div'); $('#manager').find('div')  
$('manager').up('div'); $('#manager').parents('div') In jQuery, .parent() only travels one level up the DOM tree, however parents() will travels all the way up to DOM root

One Response to “compare Prototype and JQuery”

  1. Sandeep says:

    Awesome Post….

Leave a Reply

Your email address will not be published. Required fields are marked *