如何在一个 html 页面中使用相同的 jQuery 版本（v 1.6.1）安装 2 个 jQuery 插件？答案

【问题标题】：How do you install 2 jQuery plug-ins using the same jQuery version (v 1.6.1) in one html page?如何在一个 html 页面中使用相同的 jQuery 版本（v 1.6.1）安装 2 个 jQuery 插件？
【发布时间】：2011-06-21 11:00:27
【问题描述】：

我对安装 jQuery 插件还很陌生，我只在每个网页上安装了 1 个插件。

现在我正在尝试在同一个 html 页面上安装 2 个 jQuery 插件：

Nivo 滑块
Js 滚动窗格

两者都使用相同的 jQuery 库 v1.6.1，我不太确定如何正确编写这些代码而不引起任何冲突。

我网站中的jQuery代码如下：

<head> 

<!-- START SCROLL PANE SCRIPT --> 
<link href="js/scrollpane/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.jscrollpane.min.js"></script>
<script id="sourcecode" type="text/javascript">
$(function()
{
    $('.scroll-pane').jScrollPane();
});

</script> 

<!-- START NIVO SLIDER SCRIPT --> 
<link href="js/nivo-slider/nivo-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

</head>

我绝对知道这是错误的做法，因为这两个 jQuery 插件在我的网站上都无法正常运行。

请帮助我。 :) 我怎样才能正确编写这两个插件，以便让它们都正常工作？

提前致谢。 :)

【问题讨论】：

只需要包含一个 1.6.1/jquery.js 的实例

标签： jquery javascript

【解决方案1】：

您不需要两次包含 jquery js 文件。因为两者都使用相同版本的 jquery 库。

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/scrollpane/jquery.jscrollpane.min.js"></script>
<script id="sourcecode" type="text/javascript">
$(function()
{
    $('.scroll-pane').jScrollPane();
});

</script> 

<!-- START NIVO SLIDER SCRIPT --> 
<link href="js/nivo-slider/nivo-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

【讨论】：

【解决方案2】：

您无需为此烦恼...一次包含所有必需的 js 文件。两个插件都可以工作

【讨论】：

【解决方案3】：

您不应该加载 jquery 1.6.1 两次。使用 jQuery 库，您通常应该按以下方式对 JavaScript 进行分组：

加载 jquery
加载 jquery UI（以备不时之需）
加载所有插件（一次）
做你“自己的事”

如果您两次加载基本的 jQuery 库，第二次将覆盖现有的 $-object，该对象可能已经被插件扩展。因此，该插件将完全失去其所有功能。

【讨论】：