二、jQuery和其他庫衝突

默認情況下,jQuery用$作爲自身的快捷方式。

如同時導入jQuery和prototype庫。


一、jQuery庫在其他庫之後導入

1、移交控制權

jQuery.noConflict();//將變量$的控制權讓渡給prototype.js

jQuery(function(){//使用jQuery

jQuery("p").click(function(){

});

});

$("pp").style.display = 'none'; //使用prototype


2、自定義快捷方式

var $j = jQuery.noConflict();//自定義一個比較短快捷方式

$j(function(){//使用jQuery

$j("p").click(function(){

});

});

$("pp").style.display = 'none'; //使用prototype


3、移交控制權後,內部繼續使用$

(a):

jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js

jQuery(function($){ //使用jQuery

$("p").click(function(){ //繼續使用 $ 方法

});

});

$("pp").style.display = 'none'; //使用prototype


(b):最理想方式,改變最少代碼實現全面的兼容性

jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js

(function($){ //定義匿名函數並設置形參爲$

$(function(){ //匿名函數內部的$均爲jQuery

$("p").click(function(){ //繼續使用 $ 方法

alert($(this).text());

});

});

})(jQuery); //執行匿名函數且傳遞實參jQuery


$("pp").style.display = 'none'; //使用prototype



二、jQuery在其他庫之前導入

jQuery(function(){   //直接使用 jQuery ,沒有必要調用"jQuery.noConflict()"函數。

jQuery("p").click(function(){      

alert( jQuery(this).text() );

});

});

$("pp").style.display = 'none'; //使用prototype


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