幫助將簡單的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的，更Element.Shortcuts一部分，但如果你願意，你可以定義這些自己。

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

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

如果您希望將jQuery用於面向對象的DOM和MooTools，請使用Ryan Florence的結帳this article。

最後，對於這兩個框架的優秀並排比較，請查看Aaron Newton的definitive article。