解決query和其他庫之間的衝突

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

在其他庫和jQuery庫都加載完畢後，可在任何時候調用jQuery.noConflict()函數來將變量$的控制權移交給其他js庫如prototype.js，示例如下：

jQuery.noConfict();//將變量$的控制權移交給其他js框架（prototype.js）

jQuery(function() {//使用jquery
   jQuery("p").click(function(){
        alert(jQuery(this).text());
   }
}
$("pp").style.display='none';//使用prototype

自定義一個jQuery快捷方式：

var $j = jQuery.noConfict();//自定義一個jQuery快捷方式

$j(function() {//使用jquery自定義的快捷方式
   $j("p").click(function(){
        alert($j(this).text());
   }
}
$("pp").style.display='none';//使用prototype

不採用自定義名稱，仍想使用$而不管其他庫的$()方法，且不會衝突，可使用閉包方式

方式一

jQuery.noConflict()；//將變量$的控制權移交給prototype.js
jQuery(function($) {//使用jQuery設定界面加載時執行的函數
   $("p").click(function(){//在函數內部繼續使用$()方法
        alert($(this).text());
   }
}
$("pp").style.display='none';//使用prototype

方式二
jQuery.noConflict()；//將變量$的控制權移交給prototype.js
(function($){//定義匿名函數並設置形參爲$
    $(function() {//匿名函數內部的$均爲jQuery
    $("p").click(function(){//繼續使用$()方法
   alert($(this).text());
    }
   }
})(jQuery)//執行匿名函數且傳遞實參jQuery
$("pp").style.display='none';//使用prototype

 

2、jQuery庫在其他庫之前導入

 之前導入，可直接使用jQuery做一些jQuery工作。同時，可使用$()方法作爲其他庫的快捷方式。無需調用jQuery.noConfiict()函數。

jQuery(function() {//使用jquery
   jQuery("p").click(function(){
        alert(jQuery(this).text());
   }
}
$("pp").style.display='none';//使用prototype