使用多个 jQuery 版本的插件

Question

我使用 AdminLTE 模板。这需要 jQuery 版本 3.X

我也使用 flotchart jq 库，它需要 jQuery 版本 1.11.3

如果我使用 $.noConflict(true) 函数，我可以使用两个不同的 jq 版本。

但是$只能处理一个jq库

如何使用 2 个不同的版本，以及引用 $

的插件

我的页面：在 <head> 部分：

<!-- jQuery 2.1.4 -->
<script src="{{ asset('bower_components/jquery/dist/jquery.min.js') }}"></script>

页尾：

<!-- jQuery 1.11.3 -->
<script src="{{ asset('/bower_components/jquery_1.11.3/jquery.js') }}"></script>
<script type="text/javascript">
var jQuery_1_11_3 = $.noConflict(true);

<script src="{{ asset('/bower_components/Flot/jquery.flot.js') }}"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{{ asset('/bower_components/Flot/excanvas.min.js') }}"></script><![endif]-->
<script src="{{ asset('/bower_components/Flot/jquery.flot.time.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.label.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.canvas.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.crosshair.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.navigate.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.axislabels.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.stack.js') }}"></script>

我遇到了一些错误，但没有帮助

Answer 1

您必须在 $ 之后指定 var，然后选择器将使用那个 Jquery 版本。示例：

$jQuery_1_11_3('input').val();

Answer 2

总的来说，这听起来像是个坏主意，如果确实没有其他可能性和解决方案，您只需要一次使用不同版本的 jQuery。也许，停止使用过时的 flot 库会更好。
您可以多次加载 jQuery 并在它们之后附加需要特定版本的脚本。

只需查看此演示：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
  // jQuery 1 demo
  console.log("I need jQuery 1 and it is actually " + jQuery.fn.jquery);
  console.log("jQuery size() function: " + $("body").size); // exists
</script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.js') }}"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="{{ asset('/bower_components/Flot/excanvas.min.js') }}"></script><![endif]-->
<script src="{{ asset('/bower_components/Flot/jquery.flot.time.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.label.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.resize.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.canvas.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.crosshair.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.navigate.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.axislabels.js') }}"></script>
<script src="{{ asset('/bower_components/Flot/jquery.flot.stack.js') }}"></script>
<!-- Other scripts which require jQuery 1 -->

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  // jQuery 3 demo
  console.log("I need jQuery 3 and it is actually " + jQuery.fn.jquery);
  console.log("jQuery size() function: " + $("body").size); // deprecated and removed
</script>
<!-- Other scripts which require jQuery 3 -->

<!-- 
    Here go your custom scripts which use latest loaded jQuery. 
    Make sure to load the version you use (I hope it is the latest one) 
    in your scripts at last to make sure that jQuery 3 
    is used in all other places by default.
-->

使用多个 jQuery 版本的插件

Use multiple jQuery version with plugins

javascript

jquery

flot