如何结合其他JS框架运行JQuery（这里：mootools）？

Question

我有两个我想在页面上执行的功能。 首先是一些jQuery在加载时在我的网站中慢慢消失。 第二个是自动滚动div的一些javascript。 我遇到的问题是让他们在同一页面上工作。 另外他们工作正常。 代码如下所示：

<head>

<link rel="stylesheet" type="text/css" href="style.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script>
<script type="text/javascript" src="mootools-1.3.1.1-more.js"></script>
<script type="text/javascript" src="scrollGallery.js"></script>

<script type="text/javascript">
window.addEvent('domready', function() {
   var scrollGalleryObj = new scrollGallery({
      start:0,
      autoScroll: true
   });
});
</script>

<script>
$(document).ready(function(){
   if (document.images){
     $('#container').hide();                        
     $(window).load(function(){                         
        $.fx.speeds._default = 1000;                        
        $("#container").delay(500).fadeIn(2000);                
     });
   }
});
</script>

</head>

任何人对我做错了什么都有任何建议。 我还在学习javascript，所以它可能会对这里的人们显而易见，在这种情况下，我提前为我的新问题道歉！

Answer 1

由于你的评论似乎已经填满了，我会把它放在这里

您需要使用jQuery.noConflict()因为在mootools和jquery中有2个冲突的javascript库

除此之外，正如IMSoP指出的那样，您只需要使用一个DOMReady事件，并将所有代码放入一个这样的包装器中（未经测试）

<script type="text/javascript">
window.addEvent('domready', function() {
   var scrollGalleryObj = new scrollGallery({
      start:0,
      autoScroll: true
   });

    var j = jQuery.noConflict();
       if (document.images){
          j('#container').hide();                        
          j(window).load(function(){                         
             j.fx.speeds._default = 1000;                        
             j("#container").delay(500).fadeIn(2000);                
         });
       }
});
</script>

Answer 2

所以，像

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
  var scrollGalleryObj = new scrollGallery({
    start:0,
    autoScroll: true
  });

  if (document.images){
    jQuery('#container').hide();                        
    jQuery(window).load(function(){                         
       jQuery.fx.speeds._default = 1000;                        
       jQuery("#container").delay(500).fadeIn(2000);                
    });
  }
});
</script>

应该工作吗？ - 我绝对没有测试过！

Answer 3

根据Dave Walsh的博客，这里有另一个选项http://davidwalsh.name/jquery-mootools

尝试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>

<script>

    //no conflict jquery
    jQuery.noConflict();

    // jquery stuff
    (function($) {
       if (document.images){
         $('#container').hide();                        
         $(window).load(function(){                         
            $.fx.speeds._default = 1000;                        
            $("#container").delay(500).fadeIn(2000);                
         });
       }
    })(jQuery);

</script>

<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script>
<script type="text/javascript" src="mootools-1.3.1.1-more.js"></script>
<script type="text/javascript" src="scrollGallery.js"></script>

<script type="text/javascript">

    // moo stuff
    window.addEvent('domready', function() {
       var scrollGalleryObj = new scrollGallery({
          start:0,
          autoScroll: true
       });
    });

</script>

Answer 4

此链接将帮助您。 当我们为Jquery使用两个javascript框架时，我们可以使用JQuery而不是$。 即使你可以试试这个代码：

<script type="text/javascript">
    var $j = jQuery.noConflict();
    jQuery(document).ready(function(){
      var scrollGalleryObj = new scrollGallery({
        start:0,
        autoScroll: true
      });

      if (document.images){
        $j('#container').hide();                        
        $j(window).load(function(){                         
           $j.fx.speeds._default = 1000;                        
           $j("#container").delay(500).fadeIn(2000);                
        });
      }
    });
    </script>

如何结合其他JS框架运行JQuery（这里：mootools）？

问题描述

4 个解决方案

解决方案1
5 已采纳 2013-08-01 13:16:55

解决方案2
4 2013-08-01 13:24:11

解决方案3
3 2013-08-01 13:27:27

解决方案4
1 2013-08-01 13:42:53

如何结合其他JS框架运行JQuery（这里：mootools）？

问题描述

4 个解决方案

解决方案1 5 已采纳 2013-08-01 13:16:55

解决方案2 4 2013-08-01 13:24:11

解决方案3 3 2013-08-01 13:27:27

解决方案4 1 2013-08-01 13:42:53

解决方案1
5 已采纳 2013-08-01 13:16:55

解决方案2
4 2013-08-01 13:24:11

解决方案3
3 2013-08-01 13:27:27

解决方案4
1 2013-08-01 13:42:53