包括外部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>`

上面的情况是当我们在单个页面中使用不同的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>

现在，您jq171 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>