当包含外部js库和js代码文件时，使用jquery no冲突函数

Question

是否需要在以下内容中使用jQueryno冲突()方法

情况。

`<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>`

在上述情况下，我们在单个页面中使用不同的jquery库，并加载具有特定于上面提到的库的自定义代码的外部文件。

如果确实需要使用jQueryno冲突方法，请展示如何使用它。

这里，jq180customcode和jq171customcode外部javascript文件包含脚本函数，这些脚本函数的编写要考虑到外部库jq-1.8.0和jq-1.7.1库，即"jq180customcode.js“包含根据"jq-1.8.0.js”创建的特定于html页面的函数，"jq171customcode.js“包含根据"jq-1.7.1.js”创建的特定于html页面的函数。我特别想知道是否需要在这些“定制代码”文件中使用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>

现在，jq171用于jQuery v1.7.1，jQuery或$用于jQuery v1.8.0。

下面是一个使用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>

​