帮助将简单的 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.Shortcuts 在 MooTools-More 中，但如果您愿意，您可以自己定义这些。

但是，如果您熟悉 jQuery 语法并提高工作效率，请查看此项目 Mooj作者：林志安。它允许您在 MooTools 中使用近乎 jQuery 的语法。

如果您没有特殊原因只使用 MooTools，请在 David Walsh 的博客上查看如何使用 MooTools 与 jQuery 。

如果您想使用 jQuery 来实现 DOM 并使用 MooTools 来实现面向对象的优点，请查看 这篇文章，作者：Ryan Florence。

最后，要对这两个框架进行详细的并排比较，请查看 Aaron Newton 撰写的权威文章。