jQuery中實現2個或3個庫同時存在

jQuery 中的 noConflict()屬性
該函數屬於全局的jQuery對象
jQuery.noConflict()函數用於讓出jQuery庫對變量$(對變量jQuery)的控制權
也可用於爲 jQuery 變量規定新的自定義名稱
:在其他的JavaScript庫中也使用$時 此方法存在
可以防止庫之間的衝突 非常有用
使用的語法如下:
jQuery.noConflict( [ removeAll ] )
參數removeAll:是否徹底移交對變量jQuery的控制權 可以傳入Boolean值 默認值爲false
如果省略了參數removeAll或該參數不爲true 則表示只讓出對變量$的控制權 如果該參數爲true 則表示同時讓出對變量$和jQuery的控制權
返回值:
函數的返回值是jQuery類型 返回變量jQuery的引用
jQuery.noConflict()方法的幾種使用方法
1)將$引用的對象映射回原始的對象
代碼如下:
jQuery.noConflict();jQuery("div p").hide();
// 使用 jQuery$("content").style.display = "none";
// 使用其他庫的 $()
2)恢復使用別名 $,然後創建並執行一個函數,在這個函數的作用域中仍然將 $ 作爲 jQuery 的別名來使用。在這個函數中,原來的 $ 對象是無效的。這個函數對於大多數不依賴於其他庫的插件都十分有效:
jQuery.noConflict();(function($) { $(function() { // 使用 $ 作爲 jQuery 別名的代碼 });})(jQuery);... // 其他用 $ 作爲別名的庫的代碼
此方法應該是最理想的方法 因爲可以通過改變最少的代碼來實現全面的兼容性
3)可以將 jQuery.noConflict() 與簡寫的 ready 結合,使代碼更緊湊:
jQuery.noConflict()(function(){ // 使用 jQuery 的代碼});... // 其他庫使用 $ 做別名的代碼
4)創建一個新的別名用以在接下來的庫中使用 jQuery 對象:
var j = jQuery.noConflict();j("div p").hide(); // 基於 jQuery 的代碼$("content").style.display = "none"; // 基於其他庫的 $() 代碼
5)完全將 jQuery 移到一個新的命名空間:
var dom = {};dom.query = jQuery.noConflict(true);
結果:
dom.query("div p").hide(); // 新 jQuery 的代碼$("content").style.display = "none"; // 另一個庫 $() 的代碼jQuery("div > p").hide(); // 另一個版本 jQuery 的代碼
6)如果jQuery庫在其他庫之前就導入了 那麼可以直接使用‘jQuery’來做一些jQuery的工作 同時 可以使用$()方法作爲其他庫的快捷方式 這裏無需調用jQuery。noConflict()函數
如下代碼:
<p id="pp">Test-prototype(將被隱藏)</p>
<p>Test-jQuery(將被綁定點擊事件)</p>
<!--先導入jQuery-->
<script src="../../script/jquery.js" type="text/javascript"></script>
<!--後導入其他庫-->
<script src="lib/prototype.js" type="text/javascript"></script>
<script language="javascript">
jQuery(function(){
jQuery("p").click(function(){
alert(jQuery(this).text());
})
})
$("pp").style.display = "none";
</script>



如果要實現兩個版本的jQuery庫共存,我們可以編寫如下代碼:
<script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">// 讓出jQuery-1.11.1對變量$和變量jQuery的控制權var j = jQuery.noConflict( true );document.writeln( j.fn.jquery ); // 1.11.1document.writeln( $.fn.jquery ); // 1.4.2document.writeln( jQuery.fn.jquery ); // 1.4.2/* * 如果前面的jQuery.noConflict()沒有傳入參數true, * 也就是說只讓出變量$的控制,則$表示1.4.2,jQuery表示1.11.1 * 此時,jQuery.fn.jquery爲1.11.1 */ </script>
三個版本的jQuery庫共存,對應的jQuery示例代碼如下:
<script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">// 讓出jQuery-1.11.1對變量$和變量jQuery的控制權,使用變量j來控制var j = jQuery.noConflict( true );// 讓出jQuery-1.8.3對變量$的控制權jQuery.noConflict();document.writeln( j.fn.jquery ); // 1.11.1document.writeln( jQuery.fn.jquery ); // 1.8.3document.writeln( $.fn.jquery ); // 1.4.2</script>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章