0

谁能帮助我，我是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.滚动：

  <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>

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

4

1 回答 1

3

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

根据第一个真正的问题，这两个库jquery.min.js&jquery-ui.min.js仅因目的和设计而异。提到的第一个是实际的 jQuery 库，它提供了 JavaScript 所需的所有 .Net 样式帮助。它是使用另一个必须包含的主库。

提到的第二个库是jQueryUI 库，它更像是 jQuery 的用户界面库。它还依赖于CSS文件（通常最好在调用 jQuery 库之前加载到 head中）。CSS 文件真正发挥了它添加到 jQuery 库中的功能的强大功能。它实际上扩展到了 jQuery 库，例如，您的“ 1.for ballbounce: ”示例使用了仅通过 jQuery 受到一定限制的方法，但是使用 jQueryUI，您可以使用不同的缓动并实现更多可能.effect动画。

把我带到你的“ 2.for tab content: ”。这是非常过度扩展的，因为您已经包含了 jQueryUI 库，因此您实际上不需要包含tabs.pack. 您还调用了另一个版本的 jQuery。在此处查找有关 jQueryUI 选项卡的更多信息。您不需要任何额外的插件或不同的 jQuery 库。

最后，在您的最后一个示例中，您再次包含了超出必要内容的内容。使用第一个示例的包含，您不需要再次添加 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 调出“类似萤火虫”的控制台窗口，并确保所有内容都正确加载。单击“控制台”选项卡以查看所有错误消息和警告以及运行您自己的测试，例如：

$(".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”的错误和警告消息文本来回答您的问题。不仅在 google 中，而且下次您遇到错误时，请尝试以下操作：

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

  • 使用ctrl+shift+j打开 Google Chrome 的控制台
  • 单击“控制台”选项卡以查看错误消息
  • Highlight the message text and press ctrl+c to copy
  • Go to Google and Click the search bar
  • Press ctrl+v to paste the message into the search field
  • Put a "space" at the end of this text and type in "site:http://stackoverflow.com"
    • This will allow for your exact error message to be searched for on the StackOverflow site only, thus giving you plenty of Q&A on your exact Error!
于 2012-06-02T16:38:36.717 回答