前些天朋友讓我?guī)退鉀Q一個(gè)頁面中jquery特效的兼容性問題，覺得這是一個(gè)很容易忽略也很重要的一點(diǎn)，特在此記錄一下。

　　朋友給的頁面中用到了三個(gè)特效，其中兩個(gè)特效可以顯示，第三個(gè)沒有效果。通過查看引用的js文件，我發(fā)現(xiàn)頁面中不光引入了jquery.js，還引入了一個(gè)名為prototype.js的文件。 這個(gè)prototype.js之前未曾聽說過，特意在百度上搜了一下，原來它也是一個(gè)js類庫，功能和jquery差不多，而且很強(qiáng)大。

　　通過一點(diǎn)點(diǎn)的排查，我發(fā)現(xiàn)那兩個(gè)可以顯示的特效引用的是jquery,而不顯示的那個(gè)特效引用的是這個(gè)prototype.js。 稍一分析，終于找到了出錯(cuò)的關(guān)鍵：jquery中的$和prototype.js中的$沖突了，兩個(gè)類庫中都是通過$符號(hào)來調(diào)用，然而如果直接這樣寫的話就會(huì)不知道這個(gè)$是屬于誰的，該調(diào)用哪個(gè)類庫中的方法來實(shí)現(xiàn)特效的顯示。

　　既然找到了問題的根結(jié)所在，那這個(gè)問題也就好解決了。

方法一：在jquery中，有這樣一段代碼：

// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;

　　也就是說，我們可以通過jQuery來代替jquery.js中的$符號(hào)進(jìn)行調(diào)用，前提必須聲明一下：

jQuery = $;

　　那，新的問題又出現(xiàn)了。頁面中有那么多地方用到了$,我不僅要區(qū)分到底哪些$是屬于jquery的，還要將這些$替換成jQuery這個(gè)單詞，更嚴(yán)重的是，如果該頁面中要增加新的jquery特效，我還要時(shí)刻的提醒自己，調(diào)用$的時(shí)候要用jQuery來代替，稍一疏忽，不僅出不來想要的效果，而且修改起來也是一個(gè)大工作量的任務(wù)?？磥恚@種方法是行不通的。

　　難道就沒有一個(gè)一勞永逸的方法可以將這個(gè)$的"歸屬權(quán)"給明確的區(qū)分出來嗎？辦法當(dāng)然是有的！

方法二：使用jquery語句塊來實(shí)現(xiàn)：

首先，來看一下jquery語句塊的格式：

(function($){ 
 ..... 
 $('#msg').show();//此時(shí)在這個(gè)語句塊中使用的都是jquery.js中定義的$. 

})(JQuery)

　　這樣，我們?cè)谡{(diào)用jquery中的$實(shí)現(xiàn)特效顯示時(shí)，只要把這段代碼寫在這個(gè)語句塊中，$符號(hào)該怎么調(diào)用還怎么調(diào)用。而prototype.js中的$寫在語句塊外，$符號(hào)也是該怎么調(diào)用怎么調(diào)用，兩者根本不會(huì)產(chǎn)生什么影響了。

以上就是本文的全部?jī)?nèi)容，希望這個(gè)方法也能給遇到相同問題的其他人帶來幫助，也希望大家多多支持腳本之家。

最新評(píng)論