3.4 解决jQuery和其他库的冲突_jQuery从入门到精通（软件开发视频大讲堂）-QQ阅读男生历史网

书名：jQuery从入门到精通（软件开发视频大讲堂）
作者名：明日科技
本章字数：614字
更新时间：2020-11-28 23:47:20

3.4 解决jQuery和其他库的冲突

在使用jQuery开发的时候，还可能会用到其他的JavaScript库，比如Prototype、MooTools等。但多库共存时可能会发生冲突，若发生冲突，可以通过以下方案进行解决。

3.4.1 jQuery库在其他库之前导入

jQuery库在其他库之前导入，可直接使用jQuery(callback)方法。

如果jQuery库在其他库之前导入，可以直接使用“jQuery”来做一些jQuery的工作，而使用$()方法作为其他库的快捷方式。例如：

        <html>
        <head>
            <title>jQuery库在其他库之前导入</title>
        <!—先导入jQuery →
            <script src="js/jquery.js" type="text/javascript"></script>
        <!—后导入prototype→
            <script src="js/prototype.js" type="text/javascript"></script>
        </head>
        <body>
        <p id="prototypepp">prototype</p>
        <p>jQuery（将被绑定click事件）</p>
        <script type="text/javascript">
            jQuery(function(){  //在这里直接使用jQuery代替$符号
              jQuery("p").click(function(){
                  alert(jQuery(this).html());           //获取p节点的内容
              });
            });
            $("prototypepp").style.display='none';            //使用prototype
        </script>
        </body>
        </html>

3.4.2 jQuery库在其他库之后导入

jQuery库在其他库之后导入，使用jQuery.noConflick()方法将变量$的控制权让给其他库。

具体有以下几种方式：

（1）使用jQuery.noConflick()方法之后，将jQuery()函数作为jQuery对象的制造工厂。

        <html>
        <head>
            <title>jQuery库在其他库之后导入</title>
        <!—先导入prototype→
            <script src="js/prototype.js" type="text/javascript"></script>
        <!—后导入jQuery →
            <script src="js/jquery.js" type="text/javascript"></script>
        </head>
        <body>
        <p id="prototypepp">prototype</p>
        <p>jQuery（将被绑定click事件）</p>
        <script type="text/javascript">
            jQuery.noConflict();                          //将变量$的控制权交给prototype.js
            jQuery(function(){//使用jQuery
              jQuery("p").click(function(){
                  alert(jQuery(this).text());
              })
            })
            $("prototypepp").style.display='none';        //使用prototype
        </script>
        </body>
        </html>

（2）自定义一个快捷方式，例如$jq、$j、$m等，代码如下：

        var$m=jQuery.noConflict();                        //自定义一个快捷方式
            $m(function(){                                //利用自定义的快捷方式$m
              $m("p").click(function(){
                  alert($m(this).text());
              })
            })
            $("prototypepp").style.display='none';        //使用prototype

（3）如果不想给jQuery自定义名称，又想使用$，同时又不想与其他库相冲突，那么可以尝试使用以下两种方法：

        jQuery.noConflict();                              //将变量的控制权交给prototype.js
            jQuery(function($){                           //使用jQuery，设定页面加载时执行的函数
              $("p").click(function(){                    //在函数内部可以继续使用$()方法
                  alert($(this).text());
              })
            })
            $("prototypepp").style.display='none';        //使用prototype

或者：

            jQuery.noConflict();                          //将变量$的控制权交给prototype.js
            (function($){                                 //定义匿名函数并设置形参为$
                $(function(){                             //匿名函数内部的$都是jQuery
                  $("p").click(function(){                //继续使用$()方法
                      alert(jQuery(this).text());
                  })
                })
            })(jQuery)
            $("prototypepp").style.display='none';        //使用prototype

说明

如果参数中调用的是数组，有可能在调用过程中并不是按照数组的key值进行替换，所以在调用之前需要将数组重新排列ksort()。