Help transcoding simple jQuery to mootools

Question

$(".container").hover(
     function(){
              $(".child-1").hide(0);
              $(".child-2").show(0);
     },function(){
              $(".child-1").show(0);
              $(".child-2").hide(0);
});

A project I have requires that I use mootools, but I never used mootools, and jquery makes much more sense to me. Can someone show me how this example would look like in mootools? thanks

Answer 1

MooTools uses two shorthand methods: $ , and $$

<div id="someId">..</div>
<p class="someClass">..</p>

Jquery           | MooTools
-------------------------------
$("#someId")     | $("someId")
$(".someClass")  | $$(".someClass");

In MooTools, $ is only used to search elements by ID, and $$ is for everything else. So the above can be implemented as:

$$(".container").addEvents({
    mouseenter: function() {
        $$(".child-1").hide();
        $$(".child-2").show();
    },
    mouseleave: function() {
        $$(".child-1").show();
        $$(".child-2").hide();
    }
});

.hide() and .show() are shortcut methods that are part of Element.Shortcuts in MooTools-More, but you could define these yourselves if you want.

But, if you're comfortable with the jQuery syntax and it makes you productive, checkout this project Mooj by Lim Chee Aun. It allows you to use an almost jQueryish syntax in MooTools.

If you have no particular reason to use only MooTools, checkout how to use MooTools with jQuery on David Walsh's blog.

If you'd like to use jQuery for the DOM and MooTools for the object-oriented goodiness, checkout this article by Ryan Florence.

And finally for a great side-by-side comparison of both frameworks, checkout this definitive article by Aaron Newton.