小猪小猪pg

書名： 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()。

官术网_书友最值得收藏!

jQuery從入門到精通 （軟件開發視頻大講堂）

3.4 解決jQuery和其他庫的沖突

3.4.1 jQuery庫在其他庫之前導入

3.4.2 jQuery庫在其他庫之后導入

jQuery從入門到精通（軟件開發視頻大講堂）