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

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

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

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

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

// Expose jQuery to the global object

window.jQuery = window.$ = jQuery;

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

jQuery = $;

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

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

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

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

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

})(JQuery)

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

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

最新評論