文章/答案/技术大牛

发布

社区首页 >问答首页 >如何避免jquery库冲突？

问如何避免jquery库冲突？
EN

Stack Overflow用户

提问于 2012-06-01 12:12:10

回答 1查看 5.8K关注 0票数 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>

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

jquery-plugins

jquery

jquery-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-06-02 16:38:36

在LIBVER1.5(如您的问题所示)和最新的Ver 1.72之间，jQuery有一些主要的Ver 1.72差异。其中最大的一项是.on()的引入，它旨在取代曾经流行的.live()和.delegate()。这些jQuery方法将事件绑定到文档，并允许进行更动态的布局。对于不同之处有一些混淆，我不会重新发明轮子。请查看此StackOverflow问答以获得更多信息。此外，请查看1.7释放说明以获得更多信息。简而言之，.on提高了性能，只需要稍微少输入。

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

提到的第二个库是jQueryUI库，它更像是jQuery的用户界面库。它也是CSS文件上的依赖(通常最好在调用jQuery库之前先在head 中加载)。CSS文件真正带来了将添加到jQuery库中的功能的威力。它实际上扩展到了jQuery库，例如，“1.弹出：”示例使用了.effect方法，该方法仅通过jQuery进行了一些限制，但是对于jQueryUI，您可以使用不同的http://jqueryui.com/demos/effect/easing.html并获得更多可能的动画。

让我看一下您的“2.关于选项卡内容：”。这是非常过分的，因为您已经包含了jQueryUI库，因此您不应该真的需要包含tabs.pack。您还调用了另一个版本的jQuery。查找有关jQueryUI Tabs在这里的更多信息。您不需要任何额外的插件或不同的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!"); 
});

关于边注

您可以使用Error和警告消息文本"Google“来回答您的问题。不仅在google中，而且下一次当您遇到错误时，请尝试如下：

在结尾处有一个非常有用的提示，请通读以下内容

用ctrl+shift+j打开Google控制台
单击“控制台”选项卡查看错误消息
突出显示消息文本，然后按ctrl+c复制。
转到谷歌并单击搜索栏
按ctrl+v将消息粘贴到搜索字段
在本文末尾加上“空格”，并在"site:http://stackoverflow.com“中键入
- 这将允许只在StackOverflow站点上搜索您的确切错误消息，从而为您提供大量关于您的准确错误的问答！

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/10850033

复制

相似问题

问如何避免jquery库冲突？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何避免jquery库冲突？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何避免jquery库冲突？
EN