Question

任何人都可以帮助我，我是jquery的新手。我为我的项目添加了三个jquery插件。

我想知道单页中是否可以有多个jquery？

告诉我这个文件会做什么：

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

请清楚说明这些文件是否相同，库和版本之间有什么区别？有什么不同吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

1.球反弹：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
  $(document).ready(function() {

$("ul.menu li,ul.social_media li").mouseenter(function () {
      $(this).effect("bounce", { times:2 }, 400);
});

  });
  </script>

2.对于标签内容：

<script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.tabs.pack.js" type="text/javascript"></script>


        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">

        <script type="text/javascript">
            $(function() {
              $('#container-5').tabs({ fxSlide: false, fxFade: false, fxSpeed: 'normal' });
            });
        </script>

3.for scroll：

  <script src="js/jquery.thumbnailScroller.js"></script>
      <script src="js/jquery-ui-1.8.13.custom.min.js"></script>
      <link href="js/jquery.thumbnailScroller.css" rel="stylesheet" />

      <script>
(function($){
window.onload=function(){   
    $("#tS1").thumbnailScroller({       
        scrollerType:"hoverAccelerate",     
        scrollerOrientation:"horizontal",       
        scrollEasing:"easeOutCirc",         
        scrollEasingAmount:400,         
        acceleration:2,         
        scrollSpeed:400,        
        noScrollCenterSpace:4,      
        autoScrolling:0,        
        autoScrollingSpeed:1000,        
        autoScrollingEasing:"easeInOutQuad",        
        autoScrollingDelay:20 
    });
    $("#tS2").thumbnailScroller({ 
        scrollerType:"clickButtons", 
        scrollerOrientation:"horizontal", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:600, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
    $("#tS3").thumbnailScroller({ 
        scrollerType:"hoverPrecise", 
        scrollerOrientation:"vertical", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:800, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
}
})(jQuery);
</script>

这是我的代码。帮助我避免此代码中的冲突。

Answer 1

jQuery Lib Ver 1.5（如您的问题中所示）和最新的Ver 1.72之间存在一些 MAJOR 差异。其中最大的一个是引入.on()，意在取代流行的.live()和.delegate()。这些jQuery方法将事件绑定到文档，并允许更动态的布局。关于差异存在一些混乱，我不会重新发明轮子。有关详细信息，请查看此StackOverflow Q&A。另外，请查看1.7 Release Notes以获取更多信息。简而言之，.on已经提高了性能，并且需要更少的输入。

根据第一个真实的问题，2个图书馆jquery.min.js＆amp; jquery-ui.min.js，仅因目的和设计而异。提到的第一个是实际 jQuery Library，它提供了JavaScript所需的所有.Net样式帮助。它是必须包含的主库，才能使用另一个。

提到的第二个库是jQueryUI Library，它更像是用于jQuery的用户界面库。它在 CSS 文件上也是依赖（通常最好加载头 BEFORE 调用jQuery库）。 CSS文件真实地将添加的函数的 Power 带到jQuery库中。它实际上扩展到了jQuery库，例如，你的“ 1.for ball bounce：”示例使用.effect方法，这种方法仅限于jQuery，但是使用jQueryUI，你能够使用不同的easings并实现更多可能的动画。

将我带到您的“ 2.for标签内容： ”。这是非常过度扩展的，因为您已经包含了jQueryUI库，因此您不应该真正需要包含tabs.pack。你还调用了另一个版本的jQuery。查找有关jQueryUI Tabs Here的更多信息。您不需要任何额外的插件或不同的jQuery库。

最后，在你的上一个例子中，你再次包含了超过必要的内容。使用 First 示例的包含，您不需要再次添加jQuery。下面我将向您展示一个完整的重写并尝试包含您拥有的所有内容而不需要额外的“垃圾”。

<!DOCTYPE html>
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
        <!--
            Key Note:
                The following implies that you HAVE downloaded the Thumbnail Scroller plugin and placed its CSS
                File in a directory named "css" on the project directory.
                As far as I can tell it only extends the CSS of jQueryUI and therefor
                should be inserted just after the link for jQueryUI's CSS.
        -->
        <link href="css/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <!--
            Key Note:
                The following link ALSO implies that you downloaded this library and placed it
                in a directory named "js" on your project directory's home.
                In his blog article he show you placing this at the end and adding no conflict.
                If you are not using other Library rivals of jQuery (Prototype, MooTools, etc...),
                you don't really need to include noConflict.
                Also, adding the "framework" at the end of your HTML is a common and OLD practice.
                It's no longer the most effecient way to handle your "framework".
                It may be good still, to include your exterior work (aka, everything not in a library)
                to the end, but the framework should be the first thing that loads now a days, unless
                you like seeing weird 2 second pauses as you page is "built" after it's loaded.
        -->
        <script src="js/jquery.thumbnailScroller.js"></script>

        <script type="text/javascript">
            $(function() {
                $(".menu li, .social_media li").mouseenter(function () {
                    // altho, i'm not sure this will achieve the effect you want,
                    // yoiu might consider wrapping your list objects in a div
                    // with a class to call like:
                    // <li><div class="bounce-me">content</div></li>
                    // then simply change the previous line too:
                    // $(".bounce-me").mouseenter(...
                    $(this).effect("bounce", { times:2 }, 400);
                });

                $('#container-5').tabs({
                    fx: [{ // this basically calls jQuery's .animate command each time a tab is clicked
                        //  see http://api.jquery.com/animate/ for more info
                        duration: 'normal'
                    }]
                });

                $("#tS1").thumbnailScroller({      
                    scrollerType:"hoverAccelerate",     
                    scrollerOrientation:"horizontal",       
                    scrollEasing:"easeOutCirc",         
                    scrollEasingAmount:400,         
                    acceleration:2,         
                    scrollSpeed:400,        
                    noScrollCenterSpace:4,      
                    autoScrolling:0,        
                    autoScrollingSpeed:1000,        
                    autoScrollingEasing:"easeInOutQuad",        
                    autoScrollingDelay:20 
                });
                $("#tS2").thumbnailScroller({
                    scrollerType:"clickButtons", 
                    scrollerOrientation:"horizontal", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:600, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
                $("#tS3").thumbnailScroller({
                    scrollerType:"hoverPrecise", 
                    scrollerOrientation:"vertical", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:800, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
            });
        </script>
    </head>
    <body>
        <!-- CONTENT GOES HERE -->
    </body>
</html>

最后一个有用的提示

如果您在Google Chrome中“测试”您的观看次数，请按ctrl + shift + j调出“类似firebug”的控制台窗口，并确保所有内容都正确加载。单击“控制台”选项卡以查看所有错误消息和警告，以及运行您自己的测试，如：

$(".click-me").click(function(e) { 
    // the following will show in console when an element 
    // having the class "click-me" is clicked
    console.log("I've been Clicked!"); 
});

在旁注

您可以使用错误和警告消息文字到“Google”来回答您的问题。不仅在谷歌，但下次你遇到错误，请尝试以下方法：

阅读以下内容，因为最后有一个非常有用的提示

使用 ctrl + shift + j
点击“控制台”标签以查看错误消息
突出显示消息文本，然后按 ctrl + c 进行复制
转到Google并点击搜索栏
按 ctrl + v 将邮件粘贴到搜索字段
在本文末尾加上“空格”，然后输入“网站：http://stackoverflow.com ”
- 这将允许您在StackOverflow网站上搜索确切的错误消息，从而为您提供足够的Q＆amp; A确切错误！

如何避免jquery库冲突？

1 个答案: