帮助将简单的jQuery转码为mootools

Question

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

我有一个项目要求我使用mootools,但我从未使用过mootools,而jquery对我来说更有意义.有人能告诉我这个例子在mootools中的样子吗？谢谢

Answer 1

MooTools使用两种简写方法:$和$$

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

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

在MooTools中,$仅用于按ID搜索元素,而$$用于其他所有元素.所以上面的内容可以实现为:

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

.hide()和.show()是Element.ShortcutsMooTools-More 中的一部分快捷方法,但如果你愿意,你可以自己定义这些方法.

但是,如果您对jQuery语法感到满意并且它让您高效,那么请查看MoojLim Chee Aun的这个项目.它允许您在MooTools中使用几乎jQueryish语法.

如果你没有特别的理由只使用MooTools,请在David Walsh的博客上查看如何在jQuery中使用MooTools.

如果您想使用jQuery的DOM和MooTools的对面向对象的goodiness,结账本文由Ryan佛罗伦萨.

最后,为了对这两个框架进行大量的并排比较,请查看Aaron Newton的这篇权威文章.