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中Element.Shortcuts的一部分的快捷方法，但如果需要，可以自己定义。

但是，如果您对jQuery语法感到满意并且提高了工作效率，请通过Lim Chee Aun查看此项目Mooj。它允许您在MooTools中使用几乎jQueryish语法。

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

如果您想使用jQuery作为DOM和MooTools来实现面向对象的良好状态，请通过Ryan Florence结帐this article。

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

帮助将简单的jQuery转码为mootools

1 个答案: