Understanding Jquery vs Dojo

Loading the script from the Google CDN

Both can be loaded from the Google CDN. If you use any components of Dojo that are not part of Dojo Base (the file being loaded by the script tag below), they will be dynamically pulled from the CDN as well.

//jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

//Dojo
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" type="text/javascript"></script>
Waiting for the DOM Ready Event

The Dojo ready and jQuery ready methods are identical.  With Dojo you dont need to specify the document, as the current document is implied.

//jQuery
 $(document).ready( function(){
   // Your code here
 });

 //Dojo
dojo.ready( function () {
    // Your code here
})

Querying the DOM

Both Dojo and jQuery support the CSS3 selectors. Hence there is no real difference in usage here apart from dojo being more verbose.

When querying the DOM, each method returns their own array type collection of nodes that have been matched. jQuery returns a jQuery Collection and Dojo returns a Dojo NodeList. Both can be accessed just like an array but they allow chaining of methods to quickly add/remove classes, change properties etc.

//jQuery
$("some CSS3 selector");               // Returns a jQuery Collection (kind of like an array)

//Dojo
dojo.query("some CSS3 selector");      // Returns a Dojo Node List (kind of like an array)
Adding and removing classes

Both methods are identical and can be chained infinitely to add and remove classes in a single call.

Adding

//jQuery
$("p:last-of-type").addClass("last");

//Dojo
dojo.query("p:last-of-type").addClass("last");
Removing

//jQuery
$("p:last-of-type").removeClass("last");

//Dojo
dojo.query("p:last-of-type").removeClass("last");

Getting and Manipulating HTML Attributes

Once again the setter and getter methods are identical, making it very easy to remember! As with class manipulation, both will allow these to be chained together for convenience.

Getting attributes

//jQuery
$("a.external_link").attr("target");

//Dojo
dojo.query("a.external_link").attr("target");
Setting attributes

//jQuery
$("a.external_link").attr("target", "_blank");

//Dojo
dojo.query("a.external_link").attr("target", "_blank");

Looping over multiple queried DOM nodes

Since the object returned from querying the DOM is array like in nature, you can loop through the items. Both jQuery Collections and Dojo NodeLists contain built in methods that allow you to conveniently lopp through the items.

Take note that the technique for accessing the current item in the loop is different:

//jQuery
$(".someClass").each( function() {
    $(this).addClass("active");                         //Current node in the loop is available as "this"
});

//Dojo
dojo.query(".someClass").forEach( function(node) {
    dojo.addClass(node, "active");                      //Current node in the loop is available as function argument "node"
});

Creating HTML Nodes

jQuery introduced a novel way of creating HTML elements which was by parsing a string of HTML text string into its correct HTML Object. Due to its convenience, Dojo has a method that allows you to achieve the same thing.

//jQuery - HTML Parsing
var newNode = $("<h1>This is a new heading</h1>");

//jQuery - Alternate
var newNode = $("<h1/>").prop({
    "innerHTML" : "This is a new heading"
});

//Dojo - HTML parsing
var newNode = dojo.toDom("<h1>This is a new heading</h1>");            

//Dojo - Alternate
var newNode = dojo.create("h1", {
    "innerHTML" : "This is a new heading"                             
})

Inserting HTML nodes into the DOM

As opposed to using multiple methods to dictate the position to insert a new element, Dojo opts for a single method with a string argument that dictates the position the new node should be inserted (eg: first, last, after etc).

Append

//jQuery
$("#header").append(newNode);

//Dojo
dojo.place( newNode, "header", "last")
Prepend

//jQuery
$("#header").prepend(newNode);

//Dojo
dojo.place( newNode, "header", "first");
Before

//jQuery
$("#header").before(newNode);

//Dojo
dojo.place( newNode, "header", "before");
After

//jQuery
$("#header").after(newNode);

//Dojo
dojo.place( newNode, "header", "after");

Creating and Inserting HTML nodes in a single go

Both provide convenience methods for creating and inserting in a single call. Dojo’s create method’s third parameter expects the name of an element ID (in the example below, “#article”) but it will also accept an HTML node found by using the dojo.query method.

//jQuery
$("<p>Howdy Ho!</p>").prependTo("#article");

//Dojo
dojo.create("p", {
    "innerHTML": "Howdy Ho!"
}, "article", "first");                                 // Third parameter to this function accepts a CSS ID or an HTML Node.
Removing HTML Nodes from the page

Neither will actively destroy the object, but merely detach it from the DOM.  If the node removed is not referenced anywhere else in the currently running script, then the browser’s garbage collection will destroy the object for you.  Dojo does have an additional dojo.destroy method which will destroy an object for you.

//jQuery
$("#header li").remove();                               //Removes all items in the collection from the page

//Dojo
dojo.query("#header li").orphan();                      //Loops over each item found and hands it over to the destroy node method
Traversing

Dojo does not load the traversing methods by default.  Hence if you want to use the methods below you will need to load the NodeList-traverse extensions before using them.

Next element

//jQuery
$("li:first-of-type").next();                       //Next nodes after found nodes, if available
$("li:first-of-type").next(".active");              //Next nodes, but only if they match the CSS selector


//Dojo
dojo.require("dojo.NodeList-traverse");             //This loads the traversion extensions to Dojo NodeLists.  Only needs to be called once

dojo.query("li:first-of-type").next();
dojo.query("li:first-of-type").next(".active");
Previous element

//jQuery
$("li:first-of-type").prev();                       //Previous nodes after found nodes, if available
$("li:first-of-type").prev(".active");              //Previous nodes, but only if they match the CSS selector


//Dojo
dojo.require("dojo.NodeList-traverse");            

dojo.query("li:last-of-type").prev();
dojo.query("li:last-of-type").prev(".active");
Child elements

//jQuery
$("ul.nav").children();                             // All child nodes of the found nodes
$("ul.nav").children(".active");                    // All child nodes, but only if they match the CSS selector 


//Dojo
dojo.require("dojo.NodeList-traverse");             

dojo.query("ul.nav").children();
dojo.query("ul.nav").children(".active");
Parent element

// jQuery
$("li.active").parent();  

// Dojo
dojo.require("dojo.NodeList-traverse");            
dojo.query("ul.nav").parent();
Advertisements
This entry was posted in Dojo, Javascript, JQuery and tagged , , . Bookmark the permalink.

One Response to Understanding Jquery vs Dojo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s