Accomplishing Common Tasks Using MooTools, jQuery, and Dojo

By  on  

I've been dabbling with Dojo quite a bit lately. I feel great about my MooTools and jQuery skills but I'm a bit still raw when it comes to Dojo. What's important that I keep in mind, however, is that the tasks I'm trying to accomplish are the same -- the syntax is simply different. Here are a few basic JavaScript tasks and the syntax to accomplish them within each awesome framework.

Execute Code when the DOM is Ready

Dojo Toolkit

dojo.ready(function() {
	//do stuff


jQuery(document).ready(function() {
	//do stuff


window.addEvent('domready',function() {
	//do stuff

Collect Elements

Dojo Toolkit

var myElement = dojo.byId('myElement');
var divs = dojo.query('div');


var myElement = jQuery('#myElement');
var divs = jQuery('div');


var myElement ='myElement');
var divs = $$('div');

Create Event Listeners

Dojo Toolkit

dojo.connect(dojo.byId('myElement'),'onclick',function() {
	alert('You clicked me!');


jQuery('#myElement').click(function() {
	alert('You clicked me!');

MooTools'myElement').addEvent('click',function() {
	alert('You clicked me!');

Create a New Element, Inject Into Document.Body

Dojo Toolkit

	innerHTML: 'This is a new element',
	id: 'myElement'


jQuery('<div id="myElement">This is a new element</div>').appendTo('body');


new Element('div',{
	id: 'myElement',
	text: 'This is a new element'

Execute AJAX Requests

Dojo Toolkit

	url: 'save.php',
	content: {
		id: dojo.byId('user-id').value
	load: function(response) {
		alert('Received the following response:  ' + response);


	url: 'save.php',
	type: 'post',
	data: {
		id: jQuery('#user-id').val()
	success: function(response) {
		alert('Received the following response:  ' + response);


new Request({
	url: 'save.php',
	method: 'post',
	data: {
	onSuccess: function(response) {
		alert('Received the following response:  ' + response);

Animate the Opacity of an Element

Dojo Toolkit

dojo.anim('myElement',{ opacity: 0.7 }, 250);


//duration first...ftl

MooTools'myElement').set('tween',{ duration: 250 }).fade(0.7);

See? Dojo, jQuery, and MooTools aren't that different. Same problems, different solution syntax. Like Pete Higgins says: It's just JavaScript!

Track.js Error Reporting

Upcoming Events

Recent Features

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • Create a Simple News Scroller Using MooTools, Part I:  The Basics

    News scroller have been around forever on the internet. Why? Because they're usually classy and effective. Over the next few weeks, we'll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we...

  • iPhone Checkboxes Using MooTools

    One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...


  1. In most of examples above, I love the way Dojo and Mootools create DOM element and inject to other element. Everything else, I like the way jQuery acts.

    But, of course, these are just some simple and common examples, and it’s hard to say which is better. I just realize the different coding styles between them.

    Thank you for sharing.

  2. Hi David,

    recently I found a javascript framework matrix from Matthias Schütz:
    It’s a comparison between jQuery, mootools, dojo, prototype,, extjs, adobe spry, bcc glow and yui.

  3. Wonderful article! I’ve been using jQuery since years and it definitely rocks!! But I too believe It’s just JavaScript!

    Thanks for sharing!

  4. jQuery 1.4 added a way to create elements similar to MooTools and Dojo

  5. Paul de Vries

    Why did you not you use $(‘element’) to get the ID with mootools? Much shorter!

  6. This sums up why I chose jQuery. Simpler, shorter syntax (and more plugins and bigger dev community..)
    Not to diss Mootools (began with Moo just for the name ;) ) or other JS-frameworks, all have their strengths I guess.

  7. @Deluxe Blog Tips:

    The Dojo versions of some of the above could be much more concise. Eg: connect() example could be done as:

    dojo.query("#someId").onclick(function(){ alert("Yep."); });

    or the placement of DOM:


    or animation:

    dojo.query("#someNode").anim({ opacity: 0.75 });

    Moo also has NodeList-like chaining methods, though there is a LOT more to JavaScript than traversing the DOM

  8. @Deluxe Blog Tips: What Pete Higgins said.

  9. Arian

    I agree with @phiggins last sentence.

    When people compare js frameworks, they always compare how to modify DOM/Ajax and Animation. But there is much more, mootools has Class, how do Dojo and jQuery do such things. I know jQuery has some jQuery.fn.plugin thing for creating your own plugin, but how does Dojo do that.

    And what about things you could do with Arrays/Strings and other native types. What are the differences between the frameworks when working with that.

    Long story short: I would like to see some other comparisons than just the DOM, because we’ve seen that already.

  10. @Arian: I wanted to keep it basic. Your requests could fill a book. :)

  11. Arian

    That might be true, though it would be interesting to see some other basic things other than the DOM ;) Maybe more key differences. Now it may look that they are all the same, just another syntax. Anyway, keep up the good work!

  12. @Arian, it would be pointless comparing jQuery to Dojo/Mootools in non-DOM situations because jQuery IS a DOM library… that’s what it does. It doesn’t “add anything to the language.”

  13. Thanks David.
    In solving many(but not all) cases JQuery has a shorter and simpler approach than any other library,Mootools is the second choice for me in the exceptions.I love both of them.

  14. Nicely summarized: don’t rewrite stuff using another library just because you aren’t familiar with its syntax.

    Is that it?

  15. Nice comparison thanks, good to see using Jquery means less hand cramp ;)

  16. @Alex Crooks: Well, it can be more brain cramp too…

  17. CTuLT

    I would like to use all these libraries on a site, but my clients say “This is too slow” or one I really hate, “Why are we hiring a web developer, wouldn’t it be faster, easier and cheaper to do in FRONTPAGE?” All because I use jQuery, Mootools, and Dojo?

  18. while i’m originally a jquery nut (and thought ppl who use mootools were nuts), i can’t get over how useful mt’s class implementation is, esp with ajax.

    this.myRequest = new Request({…});
    // then later in code

    perfect.. as far as i can tell, in dojo & jquery it sends the request as you create it, with mt you can set them up and manipulate them later. very helpful imo, esp with ajax apps.

  19. David,

    Can you please update this post for Dojo 1.7 and email me please.

  20. Vote539

    Thanks for this simple and well-presented comparison!

    I would also appreciate an updated comparison with Dojo 1.7+, since the syntax for performing common operations changed significantly between 1.6 and 1.7. I haven’t found very many examples of the new Dojo syntax outside of the documentation.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!