如何在一个HTML中运行多个版本的Jquery

Question

我想知道是否有人能告诉我，是否可以在一个html文件中运行多个版本的jquery？即

我有6个dive，每个潜水包含一个不同的jquery插件。第一个插件运行在最新的jquery上。第二个由更老的版本提供动力等等。

我试图将所有这些都实现到一个html中，但是一旦我在下面实现了脚本2，脚本1，那么#1就不再工作了，但是#2确实实现了。一旦我在#2下面实现了#3，那么#3就开始工作，上面的一切都中断了。

有什么特别的方法吗？我尝试过应用noConflict代码，但是我分配给它的脚本就停止工作了。除非我做错了。

我考虑过使用if语句来表示，如果单击var=plugin 1，则取消所有其他jquery，只对特定插件播放jquery。其他插件也是如此。但我不确定这是否可行。

我还考虑过为每个插件使用单独的$(Document).ready(){}，但也不确定这是否有效。

有人知道我怎么解决这个问题吗？在过去的三天里，我一直在与这只野兽搏斗&你将永远感激我的夜晚。

ps:我没有提供任何代码，因为它太多了，到处都是。如果你愿意的话我可以。

谢谢

<!DOCTYPE html>
<html>
<head>

<!-- jQuery -->
<script src="jquery191.js"></script>


<!-- easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- liteAccordion js -->
<script src="js/liteaccordion.jquery.js"></script>
<script src="js/datepicker.js"></script>
<script ></script>
<script ></script>
<script ></script>
<script ></script>

<!-- liteAccordion css -->
<link href="css/liteaccordion.css" rel="stylesheet" /> 



<!-- liteAccordion js -->
<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#div1').liteAccordion({
                onTriggerSlide : function() {
                    this.find('figcaption').fadeOut();
                },
                onSlideAnimComplete : function() {
                    this.find('figcaption').fadeIn();
                },
                autoPlay : true,
                pauseOnHover : true,
                theme : 'stitch',
                rounded : true,
                enumerateSlides : true
        }).find('figcaption:first').show();


 <!-- date picker js -->     
        $('#trip input#leavedate, #trip input#returndate').datepicker({ dateFormat: 'D, M d, yy', showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true }); // format: Thurs, Jan 31, 2008, only show when the user clicks the calendar



    }); 
  </script> 

  // datepicker

  <link rel="stylesheet" href="ui.datepicker.css"/>
    <style type="text/css">
    body { font-family: verdana, arial, sans-serif; color: white; font-size: 0.8em; }
    #trip{ background-color: black; width: 500px;}
    #trip fieldset { border-width: 1px; width: 470px; }
    #trip .fields { padding: 25px; margin-bottom: 20px; }
    #trip div { clear: both; }
    #trip label { float: left; width: 165px; }
    #trip input { float: left; width: 200px; }
    #trip .ui-datepicker-trigger { float: left; width: 16px; }
    </style>

  // datepicker

<script src="jq.js"></script>   
<script type="text/javascript">
    var jQuery_1_2_6 = $.noConflict(true);
    </script>   

<script language="JavaScript" src="jq.date.js"></script>
<script language="JavaScript">

</script>

// Style switch

<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />




<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>
<script src="/mint/?js" type="text/javascript"></script>




</head>
<body>
    <div id="div1">
            <ol>
                <li>
                    <h2><span>Slide One</span></h2>
                    <div><p><img src="img-one/1.jpg">HELLO HELLOHELLOHELLOHELLO</p></div>
                </li>
                <li>
                    <h2><span>Slide Two</span></h2>
                    <div></div>
                </li>
                <li>
                    <h2><span>Slide Three</span></h2>
                    <div></div>
                </li>
                <li>
                    <h2><span>Slide Four</span></h2>
                    <div></div>
                </li>
                <li>
                    <h2><span>Slide Five</span></h2>
                    <div></div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
    </div>

    <br><br>
    <!-- Date Picker -->
    <div id="div2">
        <form id="trip" action="#" >
            <fieldset>
                <legend>Trip Length</legend>
                    <div class="fields">
                        <div><label for="leavedate">Departure Date:</label> <input type="text" id="leavedate" name="leavedate"/></div>
                        <div><label for="returndate">Return Date:</label> <input type="text" id="returndate" name="returndate"/></div>
                    </div>

            </fieldset>

        </form>
    </div>
    <br><br><br><br>

    <!-- Style Switcher -->
    <div>
    <h1>Stylesheet switcher using jQuery</h1>
        <p>This is a simple example of my stylesheet switcher which is very simple thanks to the power of <a href="http://www.jquery.com/">jQuery</a>.</p>
        <p><strong>Update 25/08/2006:</strong> Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]</p>
        <p><strong>Update 20/08/2006:</strong> Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]</p>
        <p>
            Currently active stylesheet:
            <span id="st1">styles1</span>
            <span id="st2">styles2</span>
            <span id="st3">styles3</span>
        </p>
        <p>Choose a different stylesheet:</p>
        <ul>
            <li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a></li>
            <li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a></li>
            <li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a></li>

        </ul>
        <p>Please view source to see how it works or see the <a href="http://www.kelvinluck.com/article/switch-stylesheets-with-jquery">full article</a> about this script for more information. You can download the relevant Javascript here: <a href="styleswitch.js">styleswitch.js</a>, <a href="jquery.js">jquery.js</a></p>


    </div>

    <!-- FOUR -->

    <div>



    </div>






</body>
</html>

Answer 1

这应该很简单：

<script type='text/javascript' src='js/jquery.1.0.0.js'></script>  
<script type='text/jvascript'>
  var $jq1 = jQuery.noConflict();
</script>


<script type='text/javascript' src='js/jquery.2.0.0.js'></script>  
<script type='text/jvascript'>
  var $jq2 = jQuery.noConflict();
</script>


<script type='text/javascript' src='js/jquery.3.0.0.js'></script>  
<script type='text/jvascript'>
  $(document).ready(function() {
    console.log('constructed with jQuery 3.0.0');
  });
</script>

但是，您必须确保正确的脚本在正确的范围内，通常需要执行如下操作：

$('#id').plugin();

例如，这必须是：

$jq1('#id').plugin(); 

Answer 2

Here is an example of changing the jQuery namespace。您可以在不同的命名空间上运行旧版本，以避免冲突和混淆。