如何避免jquery库和其它库的冲突

最新推荐文章于 2024-04-10 13:50:58 发布

davidwang456

最新推荐文章于 2024-04-10 13:50:58 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

分类专栏： js&jquery

本文链接：https://blog.youkuaiyun.com/davidwang456/article/details/9714673

js&jquery 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了解决jQuery与其他JavaScript库冲突的方法，包括使用命名空间、声明新变量替代$符号及为ready()方法添加参数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.产生原因：

默认情况下：jQuery使用 $ 作为jquery的快捷方式，如果别的js库也使用$的话，就可能产生冲突。为避免这种冲突，需要在把jquery引入页面后，使用jquery前把jquery设置为非冲突模式。

2.解决方法：

方法1：使用jquery的命名空间，当然就不会冲突了。

 1 <!-- Loading jQuery before other libraries -->
 2 <script src="jquery.js"></script>
 3 <script src="prototype.js"></script>
 4 <script>
 5  
 6     // Use full jQuery function name to reference jQuery
 7     jQuery(document).ready(function(){
 8      jQuery("div").hide();
 9    });
10  
11     // Use the $ variable as defined in prototype.js
12     window.onload = function() {
13    var mainDiv = $('main');
14   };
15  
16 </script>

方法2：声明一个新的变量，来代替$。

 1 <!-- Putting jQuery into no-conflict mode -->
 2 <script src="prototype.js"></script>
 3 <script src="jquery.js"></script>
 4 <script>
 5     // $j is now an alias to the jQuery function;
 6     // creating the new alias is optional
 7     var $j = jQuery.noConflict();
 8     $j(document).ready(function(){
 9        $j("div").hide();
10      });
11  
12     // The $ variable now has the prototype meaning,
13     // which is a shortcut for document.getElementById.
14     // mainDiv below is a DOM element, not a jQuery object
15     window.onload = function(){
16        var mainDiv = $('main');
17     }
18 </script>

方法3：给ready（）方法增加一个参数。比较常用此方法。

 1 <!-- Another way to put jQuery into no-conflict mode -->
 2 <script src="prototype.js"></script>
 3 <script src="jquery.js"></script>
 4 <script>
 5  
 6     jQuery.noConflict();
 7     jQuery(document).ready(function($){
 8        // You can use the locally-scoped $ in here as an alias to jQuery
 9        $("div").hide();
10      });
11  
12     // The $ variable in the global scope has the prototype.js meaning
13     window.onload = function(){
14        var mainDiv = $('main');
15     }
16  
17 </script>