帮助将简单的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()是MooTools-More中的一部分，但是如果你愿意，你可以自己定义它们。

但是，如果您对jQuery语法感到满意，并且它使您的工作效率更高，请查看Lim Chee Aun的这个项目Mooj。它允许您在MooTools中使用近乎jQueryish的语法。

如果您没有特别的理由只使用MooTools，请在David Walsh的博客上查看如何使用MooTools with jQuery。

如果您想将jQuery用于DOM，将MooTools用于面向对象的优点，请查看Ryan Florence所著的this article。

最后，要对这两个框架进行很好的并列比较，请查看Aaron Newton的这个definitive article。