解決 jQuery 與 prototype衝突 jQuery與easyvalidation衝突

看以一篇解決方案，我測試沒成功http://www.blogjava.net/beansoft/archive/2008/07/03/212407.html

今天問了老師，得到了正解。

 

注意jQuery與prototype的載入順序。

其實這兩個架構衝突主要是$符號的衝突，在jQuery中將$引用的對象映射回原始的對象就可以解決了

 

匯入js

 

<mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script><br /><mce:script type="text/javascript"><!--<br />jQuery.noConflict();<br />// --></mce:script><br /><mce:script type="text/javascript" src="js/functions.js" mce_src="js/functions.js"></mce:script><br /><!-- begin easyvalidation --><br /><mce:script src="js/easyvalidation/prototype.js" mce_src="js/easyvalidation/prototype.js" type="text/javascript"></mce:script><br /><mce:script src="js/easyvalidation/effects.js" mce_src="js/easyvalidation/effects.js" type="text/javascript"></mce:script><br /><mce:script src="js/easyvalidation/validation_cn.js" mce_src="js/easyvalidation/validation_cn.js" type="text/javascript"></mce:script><br /><!-- 需要的樣式檔案 --><br /><link rel="stylesheet" type="text/css" href="css/easyvalidation/style_min.css" mce_href="css/easyvalidation/style_min.css" /><br /><!-- end easyvalidation --><br />

 

編寫代碼，

下面是一個自動綁定下拉式清單的函數，測試在有prototype環境中能過正常運行

function selectBind(selectId,valueStr){<br />//解決jQuery與prototype的衝突<br />var count = jQuery("#"+selectId+" option").length;<br />for(var i=0;i<count;i++){<br />if(jQuery("#"+selectId).get(0).options[i].value==valueStr){<br />jQuery("#"+selectId).get(0).options[i].selected=true;<br />break;<br />}<br />}<br />}

 

附錄：

jQuery.noConflict()

jQuery.noConflict()運行這個函數將變數$的控制權讓渡給第一個實現它的那個庫。

這有助於確保jQuery不會與其他庫的$對象發生衝突。

在運行這個函數後，就只能使用jQuery變數訪問jQuery對象。例如，在要用到$("div p")的地方，就必須換成jQuery("div
p")。

注意:

這個函數必須在你匯入jQuery檔案之後，並且在匯入另一個導致衝突的庫之前

使用。當然也應當在其他衝突的庫被使用之前，除非jQuery是最後一個匯入的。

Run this function to give control of the $ variable back to whichever
library first implemented it.

This helps to make sure that jQuery doesn't conflict with the $ object of
other libraries.

By using this function, you will only be able to access jQuery using the
'jQuery' variable. For example, where you used to do $("div p"), you now must do
jQuery("div p").

NOTE:

This function must be called after including the
jQuery javascript file, but before

including any other
conflicting library, and also before actually that other conflicting library
gets used, in case jQuery is included last.

傳回值

jQuery

樣本

將$引用的對象映射回原始的對象。

jQuery 代碼:

jQuery.noConflict();

// 使用 jQuery

jQuery("div
p").hide();

// 使用其他庫的 $()

$("content").style.display = 'none';

恢複使用別名$，然後建立並執行一個函數，在這個函數的範圍中仍然將$作為jQuery的別名來使用。在這個函數中，原來的$對象是無效的。這個函數對於大多數不依賴於其他庫的外掛程式都十分有效。

jQuery 代碼:

jQuery.noConflict();

(function($) {

  $(function()
{

    // 使用 $ 作為 jQuery 別名的代碼

  });

})(jQuery);

// 其他用 $ 作為別名的庫的代碼

建立一個新的別名用以在接下來的庫中使用jQuery對象。

jQuery 代碼:

var j = jQuery.noConflict();

// 基於 jQuery 的代碼

j("div
p").hide();

// 基於其他庫的 $() 代碼

$("content").style.display = 'none';