幫助將簡單的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中Element.Shortcuts一部分的快捷方式，但是您可以根據需要自行定義。

但是，如果您對jQuery語法感到滿意並提高了工作效率，請Mooj Lim Chee Aun的這個Mooj項目。 它允許您在MooTools中使用幾乎jQuery的語法。

如果沒有特別的理由只使用MooTools，請在David Walsh的博客上查看如何在jQuery中使用MooTools 。

如果您想將jQuery用於DOM，將MooTools用於面向對象的優點，請查閱Ryan Florence的這篇文章 。

最后，為了對這兩個框架進行詳盡的並排比較，請查閱Aaron Newton的這篇權威文章 。