解決jQuery和其它庫的衝突

在jQuery庫中,幾乎全部的插件都被限制在它的命名空間裏。全局的對象都很好地存儲在jQuery命名空間裏,所以當把jQuery和其它javascript類庫一塊兒使用時,不會引發衝突.(注意:默認狀況下,jQuery用$做爲自身的縮寫而以) javascript

若是jQuery類庫和別的類庫衝突的話,可使用jQuerynoConflict()函數來將變量$的控制權移交出給其它的javaScipt庫。看下面小片段代碼
 <script type="text/javascript" src="../JS/JsCOM.js"></script>
 <script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
假設JsCOM.js庫中,有這樣一個函數
function $(objName) {
    if (document.getElementById) {
        return eval('document.getElementById("' + objName + '")')
    }
    else {
        return eval("document.all." + objName)
    }
你們都知道jQuery裏面也一個這樣的函數,爲了避免引發衝突,咱們將jQuery的變量$的控制權移交出給別的javascript庫
jQuery.noConflict();    //將變量$的控制權移交給JsCOM.js
var $cr = jQuery("#cr");  //照樣使用jQuery類庫,只是用jQuery代替了原來的$而以。
var JsCOM_cr = $("cr");   //使用JsCOM.js類庫 java

在這裏能夠把jQuery()函數做爲jQuery對象的製造工廠. jquery

在這裏要注意幾點
1.引用javascript類庫時,必定要把jQuery引用放在最後面,就像上面同樣,JsCOM.js的引用在jQuery引用的前面(具體緣由我也不知,不過確實須要這樣)
2.特別要注意jQuery()代替$()時,jQuery是區分大小寫的,由於javascript自己就是區分大小寫的(好像說這個有點多餘,不過仍是但願你們不要犯這種錯誤)

基本上根據上面的方法就能夠解決jQuery和其它庫的衝突問題了! 函數

若是你以爲上面的方式不爽,每次都要打jQuery來代替$增長了您敲鍵盤的工做量,那請接着看。。
除上面以外,還有另外一種選擇。若是想確保jQuery不會與其它庫衝突,但又想自定義一個快捷方式,能夠進行以下操做;
var $j = jQuery.noConflict();  //自定一個快捷方式
var $cr = $j("#cr");           //使用jQuery類庫,得用自定義快捷方式----$j;
var JsCOM_cr = $("cr");        //和上一段代碼同樣,使用的是JsCOM.js類庫 this

若是您還有別的要求,想繼續使用原先的$(),同時還須要與別的類庫不衝突的話,還有兩種解決方法
其一:
   jQuery.noConflict();    //將變量$的控制權讓給JsCOM.js
   jQuery(function($)
   {
     $("p").click(function()   //在函數內繼續可使用jquery類庫的$()方法
      {
         alert($(this).text());
      })
   }) 插件

   var JsCOM_cr = $("cr");   // 在函數外面,照樣可使用JsCOM.js的$()方法 對象

其二:
       jQuery.noConflict(); //將變量$的控件權移交給別的類庫,使用jquery類庫的$符號時,請使用jQuery("#id");
        (function($) {       //定義匿名函數並設置形參爲$
            $(function() {   //匿名函數內部的$均爲jQuery
                $("div").click(function() {//繼續使用$()方法
                alert($(this).text());
                })
            })
        })
        (jQuery);           //使用匿名函數且傳遞實參jQUery
        alert($("cr"));   //使用的是jsCOM.js類庫中的$()函數 ip

第二種方法應該是兼容舊的代碼最好的方式,修改的代碼是最少的!
不過若是是新寫的jQuery代碼,我仍是比較喜歡使用剛開始講的那種(jQuery.noConflict(),而後就使用jQuery("#id"),這種方式)

若是您的頁面是先引用jQuery類庫再引入別的類庫的話,那麼咱們能夠直接使用jQuery來作一些工做,同時,可使用$()方法做爲其它庫的快捷方式。這裏無需調用jQuery.noConflict()函數,請看下面代碼
 <script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
 <script type="text/javascript" src="../JS/JsCOM.js"></script>
              jQuery().ready(function() {     //無需調用jQuery.noConflict()函數
                    var $cr = jQuery("#cr");
                    $cr.click(function() {
                        if ($cr.is(":checked")) {
                            alert("感謝你的支持!你能夠繼續操做了..");
                        }
                    })
                })
            alert($("cr"));   //使用的是jsCOM.js類庫中的$()函數

好了,看了上面這麼多種方法來解決衝突,這下你能夠放心的在您的項目中引用jQuery了吧 :) ci

相關文章
相關標籤/搜索