Jquery 和 Mootools，.noConflict 失败

Question

我有一个需要使用 mootools 日历的应用程序，但是，我使用 jquery 作为我的主要应用程序结构。

一旦我将 mootools 与 jquery 结合使用，两者都不起作用，而当我只有一个时，它们就可以正常工作。我做了一些研究，说我可以使用一种名为 .noconflict 的方法，虽然我已经尝试过，但我还没有得到它来解决我的问题。也许有人可以更好地向我解释在哪里进行实际的 .noconflict 调用，也许可以帮助我完成这项工作。

谢谢！

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var fixHeight = function () {
                var gutter = 50;
                var newHeight = $(window).height() - (gutter*2);
                $('#container').height(newHeight);
        }
        $(function(){ 

            fixHeight();
            $('ul#nav li.item').each(function(index) {
                if ($(this).attr("name") == "media") {
                    $(this).attr("id","active");
                }
            });
            $('input').focus(function() {
                $(this).attr("value","");
            }).blur(function() {
                $(this).attr("value",$(this).attr("original-value"));
            });

            $(window).resize(function() {
                fixHeight();
            }).load(function() {
                fixHeight();
            });

        });  
     </script>
     <script type="text/javascript" src="http://taptouchclick.com/js/mootools-1.2.4-core-yc.js"></script>
     <script type="text/javascript">
        window.addEvent('domready', function(){
             var smoothCalendar = new SmoothCalendar("calendar");
        });
    </script>

Answer 1

是的，noConflict 方法应该可以工作，但是如果不行或者您想以其他方式执行此操作，则应该将脚本封装在自调用函数中，并将参数设置为 main库对象：

(function($){
    // al your jquery logic here
    alert($ instanceof jQuery);
})(jQuery)

之后，您应该包含下一个库（在您的例子中为 MooTools）并正常编写脚本，或者 - 非常确定 - 您也可以将 MooTools 逻辑封装在函数中。

Answer 2

就应该没问题

jQuery.noConflict();

如果您只需调用： ...在包含 Mootools JS 文件之前

。然后，您可以通过使用 jQuery 而不是 $ 来使用 jQuery 函数。例子：

jQuery('.selector').hide();  // instead of $('.selector').hide();

Answer 3

您还可以通过 DOM-ready 事件将 $ 传回：

$.noConflict();

// Non-jQuery code goes here

jQuery(document).ready(function($) {
    // You can now use the dollar sign safely inside of this function
}