包含外部js库和js代码文件时使用jquery noconflict函数

Question

是否需要在以下

中使用jquery noconflict（）方法

情况。

`<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jq180customcode.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript" src="jq171customcode.js"></script>`

以上情况是我们在a中使用不同的jquery库 单页并加载具有特定于自定义代码的外部文件 上面提到的图书馆。

如果确实需要使用jquery noconflict方法，请说明如何操作 用它。

这里jq180customcode和jq171customcode外部javascript文件包含编写的脚本函数，记住外部库jq-1.8.0和jq-1.7.1库分别是“jq180customcode.js”包含特定于html页面的函数根据“jq-1.8.0.js”创建，“jq171customcode.js”包含特定于html页面的函数，这些函数是根据“jq-1.7.1.js”创建的。我特别想知道是否需要在这些“customcode”文件中使用jquery.noconflict，如果必须使用它如何？

Answer 1

更好的解决方案是不在同一页面上使用多个jQuery副本。只需使用一个。理想情况下比其中任何一种都更新。

但如果你真的想：

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jq180customcode.js"></script>
<script>
var jq180 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jq171customcode.js"></script>
<script>
var jq171 = jQuery.noConflict(true);
</script>

请注意，jq180customcode.js必须立即获取jQuery和/或$符号的副本并存储它。一个好方法是这样的：

(function($) {
    // The code here
})(jQuery);

在The code here内，代码可以使用$来引用代码加载时出现的jQuery。

在上述所有之后的脚本中，您将使用jq180或jq171，具体取决于您要使用的jQuery副本。

当然，您可以关闭其中一个noConflict，并使用jQuery（和$）代替另一个。例如（稍微重新排序）：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jq171customcode.js"></script>
<script>
var jq171 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jq180customcode.js"></script>

现在，您对jQuery v1.7.1使用jq171，对jQuery v1.8.0使用jQuery或$。

以下是使用v1.7.1和v1.8.0的实例：

<input id="btn1" type="button" value="Click to see jQuery v1.8.0 in use">
<br><input id="btn2" type="button" value="Click to see jQuery v1.7.1 in use">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
  // Custom v1.8.0 stuff
  (function($) {
    $("#btn1").click(function() {
      $("<p>jQuery version: " + $.fn.jquery + "</p>").appendTo(document.body);
    });
  })(jQuery);
</script>
<script>
  var jq180 = jQuery.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
  // Custom v1.7.1 stuff
  (function($) {
    $("#btn2").click(function() {
      $("<p>jQuery version: " + $.fn.jquery + "</p>").appendTo(document.body);
    });
  })(jQuery);
</script>
<script>
  var jq171 = jQuery.noConflict(true);
</script>