JQuery的$和其它JS發(fā)生沖突的快速解決方法

本篇文章主要是對(duì)JQuery的$和其它JS發(fā)生沖突的快速解決方法進(jìn)行了介紹畜伐,需要的朋友可以過(guò)來(lái)參考下馍惹,希望對(duì)大家有所幫助

眾所周知,jQuery是目前最流行的JS封裝包玛界,簡(jiǎn)化了很多復(fù)雜的JS程序万矾,JQuery將瀏覽器DOM樹(shù)定義為$,通過(guò)$來(lái)獲取各個(gè)子節(jié)點(diǎn)慎框。

然后良狈,JS插件并非只有JQuery,還有prototype.js 等其它比較好的插件笨枯。它們也使用$薪丁。所以有時(shí)候同時(shí)使用這個(gè)兩個(gè)JS插件的時(shí)候遇西,就會(huì)出現(xiàn)$的使用權(quán)沖突問(wèn)題。現(xiàn)在我們來(lái)看看如何解決這個(gè)沖突問(wèn)題窥突。請(qǐng)看下文:

我們都知道JQuery有一個(gè)函數(shù)努溃,jquery.noConflict() 它的作用是講$的控制權(quán)轉(zhuǎn)讓出去硫嘶。然后我們可以通過(guò)jQuery代替$來(lái)獲取dom節(jié)點(diǎn)阻问。

第一種情況:先加載Prototype.js,再加載jQuery.js
jQuery noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識(shí)符的控制沦疾,這樣其他腳本就可以使用它了称近。
使用jQuery.noConflict();主要作用是在任何時(shí)候,只要在jQuery加載后就可以調(diào)用哮塞,將$符號(hào)的使用權(quán)返回給其它的js庫(kù)刨秆,jQuery在創(chuàng)建它自己的名字空間時(shí)就將其它庫(kù)的$保存在自己的一個(gè)變量當(dāng)中。

第二種情況:先加載jQuery.js忆畅,再加載Prototype.js
按照這樣的順序加載衡未,就不存在其它js庫(kù)的$符號(hào)被jQuery占用的問(wèn)題。

舉例:

</br>
方法一:
通過(guò)全名替代簡(jiǎn)寫(xiě)的方式來(lái)使用 jQuery

< script type = "text/javascript" >
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js
jQuery(function() { //使用jQuery
    jQuery("p").click(function() {
        alert(jQuery(this).text());
    });
});
$("pp").style.display = 'none'; //使用prototype
< /script>/

</br>
方法二:
可以創(chuàng)建自己的簡(jiǎn)寫(xiě)家凯,通過(guò)noConflict()函數(shù)來(lái)定義一個(gè)快捷方式用來(lái)獲取dom節(jié)點(diǎn)

< script type = "text/javascript" >
var $j = jQuery.noConflict(); //自定義一個(gè)比較短快捷方式
$j(function() { //使用jQuery
    $j("p").click(function() {
        alert($j(this).text());
    });
});
$("pp").style.display = 'none'; //使用prototype
< /script>/

缺點(diǎn):引入了這段代碼后缓醋,不僅是當(dāng)前的js文件,該html引用的所有js中绊诲,如果有用到j(luò)query中的$送粱,都得用$j來(lái)代替之前的$
</br>
方法三:
如果你的 jQuery 代碼塊使用 $ 簡(jiǎn)寫(xiě),并且您不愿意改變這個(gè)快捷方式掂之,那么您可以把 $ 符號(hào)作為變量傳遞給 ready 方法抗俄。這樣就可以在函數(shù)內(nèi)使用 $ 符號(hào)了 - 而在函數(shù)外,依舊不得不使用 "jQuery":

< script type = "text/javascript" > 
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js

//方法3-1
jQuery(document).ready(function($) {
    $("p").click(function() { //繼續(xù)使用 $ 方法
        alert($(this).text());
    });
});

//方法3-2
jQuery(function($) { //使用jQuery
    $("p").click(function() { //繼續(xù)使用 $ 方法
        alert($(this).text());
    });
});

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

方法3-1?缺點(diǎn):只對(duì)ready嵌套內(nèi)的代碼有效世舰,對(duì)嵌套外的代碼是無(wú)效的动雹。如果你所有的邏輯,都在寫(xiě)ready函數(shù)中跟压,那沒(méi)問(wèn)題胰蝠。但我們一般都會(huì)在ready函數(shù)之外寫(xiě)一些子函數(shù),然后ready函數(shù)再去調(diào)用這些函數(shù)裆馒。這個(gè)方案對(duì)這些函數(shù)是無(wú)效的姊氓,因此這套方案有局限性。

</br>
方法四:
使用語(yǔ)句塊

< script type = "text/javascript" > 
jQuery.noConflict(); //將變量$的控制權(quán)讓渡給prototype.js
(function($) { //定義匿名函數(shù)并設(shè)置形參為$
    $(function() { //匿名函數(shù)內(nèi)部的$均為jQuery
        $("p").click(function() { //繼續(xù)使用 $ 方法
            alert($(this).text());
        });
    });
})(jQuery); //執(zhí)行匿名函數(shù)且傳遞實(shí)參jQuery
$("pp").style.display = 'none'; //使用prototype
< /script>

這種使用語(yǔ)句塊的方法非常有用喷好,在我們自己寫(xiě)jquery插件時(shí),應(yīng)該都使用這種寫(xiě)法翔横,因?yàn)槲覀儾恢谰唧w工作過(guò)程中是如何順序引入各種js庫(kù)的,而這種語(yǔ)句塊的寫(xiě)法卻能屏蔽沖突。
</br>

推薦方法三(3-2)梗搅,方法四禾唁,特別是開(kāi)發(fā)js插件時(shí):

這兩個(gè)方法效览,沒(méi)有上面兩個(gè)方法的缺點(diǎn),只會(huì)影響到被包在jQuery(function($){}中的代碼荡短。 不會(huì)影響到其他js代碼丐枉,這一點(diǎn)很重要。試想一下掘托,假如你寫(xiě)了一個(gè)js公共組件瘦锹,該組件需要用到j(luò)query,為了提高魯棒性闪盔,需考慮$符號(hào)沖突問(wèn)題弯院。如果使用方案二,那么別人在使用時(shí)泪掀,還得遵守你的約定听绳,把自己js代碼中的$改成$j,而如果使用方案三(3-2),方案四异赫,既能避免$沖突對(duì)該組件的影響椅挣,又無(wú)需要求使用公共組件的人修改自己的代碼。

</br>


注意:
1.引用javascript類(lèi)庫(kù)時(shí)塔拳,把jQuery引用放在最后面鼠证,可以避免沖突。
2.特別要注意jQuery()代替$()時(shí)蝙斜,jQuery是區(qū)分大小寫(xiě)的名惩,因?yàn)閖avascript本身就是區(qū)分大小寫(xiě)的。

整理來(lái)源:http://www.jb51.net/article/46152.htm
????? http://www.jb51.net/article/90293.htm
??????http://www.jb51.net/article/47028.htm

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末孕荠,一起剝皮案震驚了整個(gè)濱河市娩鹉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌稚伍,老刑警劉巖弯予,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異个曙,居然都是意外死亡锈嫩,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)垦搬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)呼寸,“玉大人,你說(shuō)我怎么就攤上這事猴贰《匝” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵米绕,是天一觀的道長(zhǎng)瑟捣。 經(jīng)常有香客問(wèn)我馋艺,道長(zhǎng),這世上最難降的妖魔是什么迈套? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任捐祠,我火速辦了婚禮,結(jié)果婚禮上桑李,老公的妹妹穿的比我還像新娘踱蛀。我一直安慰自己,他們只是感情好芙扎,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布星岗。 她就那樣靜靜地躺著填大,像睡著了一般戒洼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上允华,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天圈浇,我揣著相機(jī)與錄音,去河邊找鬼靴寂。 笑死磷蜀,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的百炬。 我是一名探鬼主播褐隆,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼剖踊!你這毒婦竟也來(lái)了庶弃?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤德澈,失蹤者是張志新(化名)和其女友劉穎歇攻,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體梆造,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡缴守,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了镇辉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屡穗。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖忽肛,靈堂內(nèi)的尸體忽然破棺而出村砂,到底是詐尸還是另有隱情,我是刑警寧澤麻裁,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布箍镜,位于F島的核電站源祈,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏色迂。R本人自食惡果不足惜香缺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望歇僧。 院中可真熱鬧图张,春花似錦、人聲如沸诈悍。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)侥钳。三九已至适袜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間舷夺,已是汗流浹背苦酱。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留给猾,地道東北人疫萤。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像敢伸,于是被迫代替她去往敵國(guó)和親扯饶。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 通過(guò)jQuery池颈,您可以選任残颉(查詢,query)HTML元素饶辙,并對(duì)它們執(zhí)行“操作”(actions)蹲诀。 jQuer...
    枇杷樹(shù)8824閱讀 659評(píng)論 0 3
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性弃揽。 1....
    LaBaby_閱讀 1,182評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式脯爪。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,349評(píng)論 0 2
  • 請(qǐng)記得在進(jìn)行JQuery類(lèi)庫(kù)的運(yùn)用時(shí)矿微,加入JQuery類(lèi)庫(kù)痕慢,并且要保證先寫(xiě)文檔就緒函數(shù) $(document).r...
    Sunshinemm閱讀 2,914評(píng)論 1 40
  • 當(dāng)用WebView加載URL時(shí)因?yàn)閡rl中包含#號(hào),所以WebView只是顯示一片空白涌矢,而沒(méi)有正常加載所需要的內(nèi)容...
    wangmf閱讀 6,194評(píng)論 3 2