jQuery解決$符號(hào)命名沖突
前些天朋友讓我?guī)退鉀Q一個(gè)頁(yè)面中jquery特效的兼容性問(wèn)題,覺(jué)得這是一個(gè)很容易忽略也很重要的一點(diǎn),特在此記錄一下。
朋友給的頁(yè)面中用到了三個(gè)特效,其中兩個(gè)特效可以顯示,第三個(gè)沒(méi)有效果。通過(guò)查看引用的js文件,我發(fā)現(xiàn)頁(yè)面中不光引入了jquery.js,還引入了一個(gè)名為prototype.js的文件。 這個(gè)prototype.js之前未曾聽(tīng)說(shuō)過(guò),特意在百度上搜了一下,原來(lái)它也是一個(gè)js類(lèi)庫(kù),功能和jquery差不多,而且很強(qiáng)大。
通過(guò)一點(diǎn)點(diǎn)的排查,我發(fā)現(xiàn)那兩個(gè)可以顯示的特效引用的是jquery,而不顯示的那個(gè)特效引用的是這個(gè)prototype.js。 稍一分析,終于找到了出錯(cuò)的關(guān)鍵:jquery中的$和prototype.js中的$沖突了,兩個(gè)類(lèi)庫(kù)中都是通過(guò)$符號(hào)來(lái)調(diào)用,然而如果直接這樣寫(xiě)的話(huà)就會(huì)不知道這個(gè)$是屬于誰(shuí)的,該調(diào)用哪個(gè)類(lèi)庫(kù)中的方法來(lái)實(shí)現(xiàn)特效的顯示。
既然找到了問(wèn)題的根結(jié)所在,那這個(gè)問(wèn)題也就好解決了。
方法一:在jquery中,有這樣一段代碼:
// Expose jQuery to the global object window.jQuery = window.$ = jQuery;
也就是說(shuō),我們可以通過(guò)jQuery來(lái)代替jquery.js中的$符號(hào)進(jìn)行調(diào)用,前提必須聲明一下:
jQuery = $;
那,新的問(wèn)題又出現(xiàn)了。頁(yè)面中有那么多地方用到了$,我不僅要區(qū)分到底哪些$是屬于jquery的,還要將這些$替換成jQuery這個(gè)單詞,更嚴(yán)重的是,如果該頁(yè)面中要增加新的jquery特效,我還要時(shí)刻的提醒自己,調(diào)用$的時(shí)候要用jQuery來(lái)代替,稍一疏忽,不僅出不來(lái)想要的效果,而且修改起來(lái)也是一個(gè)大工作量的任務(wù)。看來(lái),這種方法是行不通的。
難道就沒(méi)有一個(gè)一勞永逸的方法可以將這個(gè)$的"歸屬權(quán)"給明確的區(qū)分出來(lái)嗎?辦法當(dāng)然是有的!
方法二:使用jquery語(yǔ)句塊來(lái)實(shí)現(xiàn):
首先,來(lái)看一下jquery語(yǔ)句塊的格式:
(function($){
.....
$('#msg').show();//此時(shí)在這個(gè)語(yǔ)句塊中使用的都是jquery.js中定義的$.
})(JQuery)
這樣,我們?cè)谡{(diào)用jquery中的$實(shí)現(xiàn)特效顯示時(shí),只要把這段代碼寫(xiě)在這個(gè)語(yǔ)句塊中,$符號(hào)該怎么調(diào)用還怎么調(diào)用。而prototype.js中的$寫(xiě)在語(yǔ)句塊外,$符號(hào)也是該怎么調(diào)用怎么調(diào)用,兩者根本不會(huì)產(chǎn)生什么影響了。
以上就是本文的全部?jī)?nèi)容,希望這個(gè)方法也能給遇到相同問(wèn)題的其他人帶來(lái)幫助,也希望大家多多支持腳本之家。
- 解決jquery版本沖突的有效方法
- jQuery多個(gè)版本和其他js庫(kù)沖突的解決方法
- jquery插件沖突(jquery.noconflict)解決方法分享
- 解決jquery插件沖突的問(wèn)題
- 解決jQuery插件tipswindown與hintbox沖突
- jQuery中 $ 符號(hào)的沖突問(wèn)題及解決方案
- bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法
- 關(guān)于兩個(gè)jQuery(js)特效沖突的bug的解決辦法
- 完美解決jQuery符號(hào)$與其他javascript 庫(kù)、框架沖突的問(wèn)題
- 避免jQuery名字沖突 noConflict()方法
- jQuery $命名沖突解決方案匯總
- jQuery插件版本沖突的處理方法分析
相關(guān)文章
jquery通過(guò)擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法
這篇文章主要介紹了jquery通過(guò)擴(kuò)展select控件實(shí)現(xiàn)支持enter或focus選擇的方法,通過(guò)jQuery針對(duì)select空間增加enter及focus選擇功能分析了jQuery擴(kuò)展的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-11-11
JQuery 表單中textarea字?jǐn)?shù)限制實(shí)現(xiàn)代碼
textarea中的字?jǐn)?shù)的限制是在1000個(gè)之內(nèi),下面是具體的實(shí)現(xiàn)代碼,基本上會(huì)點(diǎn)jquery的能看懂,不懂的可以學(xué)習(xí)下jquery,當(dāng)期比較流行了,要不就落伍了。2009-12-12
JQuery實(shí)現(xiàn)用戶(hù)名無(wú)刷新驗(yàn)證的小例子
本人也是JQuery初學(xué)者,寫(xiě)了個(gè)用戶(hù)名無(wú)刷新驗(yàn)證的簡(jiǎn)單例子,拿來(lái)分享,共同學(xué)習(xí)一下吧。2013-03-03
jQuery控制cookie過(guò)期時(shí)間的方法
這篇文章主要介紹了jQuery控制cookie過(guò)期時(shí)間的方法,涉及jQuery操作cookie的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
增強(qiáng)用戶(hù)體驗(yàn)友好性之jquery easyui window 窗口關(guān)閉時(shí)的提示
在項(xiàng)目中,客戶(hù)提出這么個(gè)要求,就是在關(guān)閉彈出的窗口的時(shí)候,如果點(diǎn)擊 紅X 或 取消按鈕 則提示 ”確認(rèn)保存了當(dāng)前的操作“ 這么個(gè)信息,否則就不提示啦2012-06-06
jQuery Raty 一款不錯(cuò)的星級(jí)評(píng)分插件
一款不錯(cuò)的星級(jí)評(píng)分插件,這篇文章主要介紹了jQuery Raty星級(jí)評(píng)分插件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08

