使用noConflict（）與jQuery庫

我正在使用一個jQuery腳本的下拉菜單和一個圖像查看器。兩個圖書館發生衝突。使用noConflict（）與jQuery庫

下面的腳本是我的庫，我注意到了2個衝突的腳本。第一個塊位於腳本的標題中，第二個塊位於我的標記之前（這是圖像滑塊腳本工作的唯一方式）。

 <!-- Drop down plugin (within the <head> tag --> 
     <script src="js/jquery-1.7.1.min.js"></script> 
     <script src="js/superfish.js"></script> 
     <script src="js/jquery.easing.1.3.js"></script> 
     <script src="js/tms-0.4.1.js"></script> 
     <link rel="stylesheet" type="text/css" href="jquery/css/custom-theme/jquery-ui-1.10.3.custom.css"/> 

     <!-- Conflicting code --> 
     <script src="jquery/js/jquery-ui-1.10.3.custom.js"></script> 
     <!-- Conflicting code ends --> 


    <!-- Content section <body> --> 

    <!-- Image slider plug in (at the end of the <body> tag) --> 

    <!-- Conflicting code --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> 
    <!-- conflicting code ends --> 

    <script type="text/javascript" src="slider/js/jquery-ui-1.10.3.custom.min.js"></script> 
    <script type="text/javascript" src="slider/js/jquery.kinetic.min.js"></script> 
    <script type="text/javascript" src="slider/js/jquery.mousewheel.min.js"></script> 
    <script type="text/javascript" src="slider/js/jquery.smoothdivscroll-1.3-min.js"></script> 
    <script type="text/javascript"> 
      // Initialize the plugin with no custom options 
      $(document).ready(function() { 
       // None of the options are set 
       $("div#makeMeScrollable").smoothDivScroll({ 
        manualContinuousScrolling: true, 
        autoScrollingMode: "", 
        visibleHotSpotBackgrounds: "always" 
       }); 
      }); 
     </script>

我曾嘗試以下2個腳本，第一個無助於解決衝突，第二個導致頁面無法加載（它僅與背景色顯示一個空白頁）。有可能我錯誤地使用了腳本。

<script src="prototype.js"></script> 
    <script src="jquery.js"></script> 
    <script> 

    var $j = jQuery.noConflict(); 
    // $j is now an alias to the jQuery function; creating the new alias is optional. 

    $j(document).ready(function() { 
     $j("div").hide(); 
    }); 

    // The $ variable now has the prototype meaning, which is a shortcut for 
    // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. 
    window.onload = function() { 
     var mainDiv = $("main"); 
    } 

    </script>

SCRIPT 2：

 <script src="prototype.js"></script> 
     <script src="jquery.js"></script> 
     <script> 

     jQuery.noConflict(); 

     jQuery(document).ready(function($) { 
      // You can use the locally-scoped $ in here as an alias to jQuery. 
      $("div").hide(); 
     }); 

     // The $ variable in the global scope has the prototype.js meaning. 
     window.onload = function(){ 
      var mainDiv = $("main"); 
     } 

     </script>

來源

2014-05-13 Tyler Richardson

這太可怕了，儘量保持最小的順序，而且你只需要包含jQuery一次。 – adeneo

您是否知道您包含完全相同版本的jQuery UI，兩次？ –

@ÁlvaroG.Vicario注意名稱中的'.custom.'。這可能是2個不同的「自定義」ui構建。你可以只包含你想要的組件。 –

我不知道你是什麼意思「無助於解決衝突」中的第一個例子。但在第二個例子中，你確定它不是完美的嗎？只要文檔已準備就緒（$("div").hide();），您就有代碼隱藏整個頁面上的所有div。這可能會導致頁面看起來爲空，除了背景顏色。

來源

2014-05-13 15:10:50 tmcgill

我從網站抓住了noConflict（）代碼，我實際上不知道它是幹什麼的。你能向我解釋腳本中發生了什麼，以及如何改變它來創建兩個庫一起工作，而不是使一切消失？ –

啊，我明白了。noConflict（）函數刪除它與變量「$」的關聯，以便您可以使用其他一些試圖分配一些的庫轉換爲「$」（或者，您可以在同一頁面上使用多個jQuery版本，但不建議這樣做）。 – tmcgill

因此，您可以使用函數的返回值來分配新變量而不是$，或者只要使用「$」就可以使用「jQuery」。或者，如示例代碼所示，您可以使用本地作用域，將jQuery對象作爲「$」傳遞給方法。但是，在使用noConflict（）時，我寧願不使用$作爲變量，因爲它使得閱讀代碼非常困惑 - 人們傾向於期望「$」總是引用jQuery對象，而不是改變整個地方的含義。 – tmcgill

使用noConflict（）與jQuery庫

回答

相關問題