jQuery库冲突

原因

在某些情况下，可能有必要在同一个页面中使用多个JavaScript库。但是很多库都使用了“$”这个符号（因为它简短方便），这时就需要用一种方式来避免名称的冲突了。

jQuery.noConflict()

在jQuery中，我们可以使用jQuery.noConflict()方法来把“$”符号的控制器过渡给其他库。其中，jQuery.noConflict()方法的一般使用模式如下。

<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { console.log($); jQuery.noConflict(); console.log($); }) </script> </head> <body> <div></div> </body> 
</html>

在这里插入图片描述

说明：使用jQuery.noConflict()方法前，$还是指向jQuery对象，使用方法后，$就不再指向jQuery对象了。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.12.4.min.js"></script><script>$(function() {console.log(jQuery);jQuery.noConflict();console.log(jQuery);})</script></head><body><div></div></body>
</html>

在这里插入图片描述

从输出结果可以看出，不管是否使用jQuery.noConflict()方法，jQuery这个变量始终指向的是jQuery对象本身。

如还想使用$可以这么做

使用了jQuery.noConflict()方法之后，如果还想继续让“ $” 指向 j Q u ery 对象，我们可以使用一个立即执行函数来建立一个封闭环境，使得在函数内部中， “$ ”指向jQuery对象。这样，就不会与外部的“$”冲突了。

<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/prototype.min.js"></script> <script src="js/jquery-1.12.4.min.js"></script> <script> jQuery.noConflict(); //这里之后可以把“$”交给prototype库使用 </script> <script> (function ($) { $(function () { $("div").html("<strong>hello</strong>"); }) })(jQuery) </script> </head> <body> <div></div> </body> 
</html>