JQuery的$命名沖突詳細(xì)解析
在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來(lái)替換,如$('#msg')等同于JQuery('#msg')的寫(xiě)法。然而,當(dāng)我們引入多個(gè)js庫(kù)后,在另外一個(gè)js庫(kù)中也定義了$符號(hào)的話(huà),那么我們?cè)谑褂?符號(hào)時(shí)就發(fā)生了沖突。下面以引入兩個(gè)庫(kù)文件jquery.js和prototype.js為例來(lái)進(jìn)行說(shuō)明。
第一種情況:jquery.js在prototype.js之后進(jìn)行引入,如:
<script src="prototype.js" type="text/javascript"/>
<script src="jquery.js" type="text/javascript"/>
在這種情況下,我們?cè)谧约旱膉s代碼中如下寫(xiě)的話(huà):
$('#msg').hide();
$永遠(yuǎn)代表的是jquery中定義的$符號(hào),也可以寫(xiě)成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們?cè)诤竺嬖俳榻B。
第二種情況:jquery.js在prototype.js之前進(jìn)行引入,如:
<script src="jquery.js" type="text/javascript"/>
<script src="prototype.js" type="text/javascript"/>
在這種情況下,我們?cè)谧约旱膉s代碼中如下寫(xiě)的話(huà):
$('#msg').hide();
$此時(shí)代表的prototype.js中定義的$符號(hào),如果我們想要調(diào)用jquery.js中的工廠選擇函數(shù)功能的話(huà),只能用全稱(chēng)寫(xiě)法JQuery('#msg').hide().
下面先介紹在第一種引入js庫(kù)文件順序的情況下,如何正確的使用不同的js庫(kù)中定義的$符號(hào)。
一.使用JQuery.noConflict()
該方法的作用就是讓Jquery放棄對(duì)$的所有權(quán),將$的控制權(quán)交還給prototype.js,因?yàn)閖query.js是后引入的,所以最后擁有$控制權(quán)的是jquery。它的返回值是JQuery。當(dāng)在代碼中調(diào)用了該 方法以后,我們就不可以使用$來(lái)調(diào)用jquery的方法了,此時(shí)$就代表在prototype.js庫(kù)中定義的$了。如下:
JQuery.noConflict();
//此處不可以再寫(xiě)成$('#msg').hide(),此時(shí)的$代表prototype.js中定義的$符號(hào)。
JQuey('#msg').hide();
自此以后$就代表prototype.js中定義的$,jquery.js中的$無(wú)法再使用,只能使用jquery.js中$的全稱(chēng)JQuery了。
二.自定義JQuery的別名
如果覺(jué)得第一種方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全稱(chēng)比較麻煩的話(huà),我們還可以為JQuery重定義別名。如下:
var $j=JQuery.noConflict();
$j('#msg').hide();//此處$j就代表JQuery
自此以后$就代表prototype.js中定義的$,jquey.js中的$無(wú)法再使用,只能使用$j來(lái)作為jquey.js中JQuery的別名了。
三.使用語(yǔ)句塊,在語(yǔ)句塊中仍然使用jquery.js中定義的$,如下:
JQuery.noConflict();
JQuery(document).ready(function($){
$('#msg').hide();//此時(shí)在整個(gè)ready事件的方法中使用的$都是jquery.js中定義的$.
});
或者使用如下語(yǔ)句塊:
(function($){
.....
$('#msg').hide();//此時(shí)在這個(gè)語(yǔ)句塊中使用的都是jquery.js中定義的$.
})(JQuery)
如果在第二種引入js庫(kù)文件順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語(yǔ)句塊的方法,如:
<script src="jquery.js" type="text/javascript"/>
<script src="prototype.js" type="text/javascript"/>
<script type="text/javascript">
(function($){
.....
$('#msg').hide();//此時(shí)在這個(gè)語(yǔ)句塊中使用的都是jquery.js中定義的$.
})(JQuery)
</script>
這種使用語(yǔ)句塊的方法非常有用,在我們自己寫(xiě)jquery插件時(shí),應(yīng)該都使用這種寫(xiě)法,因?yàn)槲覀儾恢谰唧w工作過(guò)程中是如何順序引入各種js庫(kù)的,而這種語(yǔ)句塊的寫(xiě)法卻能屏蔽沖突。
(function($){})(jQuery)
1 首先(function(){})()這種寫(xiě)法 是創(chuàng)建了一個(gè)匿名的方法并立即執(zhí)行(function(){})這個(gè)是匿名方法后面的括號(hào)就是立即調(diào)用了這個(gè)方法)。
這樣做可以創(chuàng)建一個(gè)作用域以保證內(nèi)部變量與外部變量不發(fā)生沖突,比如$ jQuery 等jquery內(nèi)部定義的變量。
2 (function($){})(jQuery) 這個(gè)寫(xiě)法主要的作用還是保證jquery不與其他類(lèi)庫(kù)或變量有沖突 首先是要保證jQuery這個(gè)變量名與外部沒(méi)有沖突(jquery內(nèi)部$與jQuery是同一個(gè)東西 有兩個(gè)名字的原因就是怕$與其他變量名有沖突二jQuery與其他變量沖突的幾率非常?。┎魅肽涿麑?duì)象,匿名對(duì)象給參數(shù)起名叫做$(其實(shí)和jquery內(nèi)部是一樣的) 然后你就可以自由的在(function($){})(jQuery)里寫(xiě)你的插件而不需要考慮與外界變量是否存在沖突
相關(guān)文章
基于jQuery實(shí)現(xiàn)最基本的淡入淡出效果實(shí)例
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)最基本的淡入淡出效果的方法,實(shí)例分析了jQuery中hide、show、toggle等函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02jQuery選擇器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
選擇器是jQuery的核心,一個(gè)選擇器寫(xiě)出來(lái)類(lèi)似$('#dom-id')。下面給大家分享jQuery選擇器的相關(guān)知識(shí),感興趣的朋友一起看看吧2017-07-07jQuery控制li上下循環(huán)滾動(dòng)插件用法實(shí)例(附demo源碼下載)
這篇文章主要介紹了jQuery控制li上下循環(huán)滾動(dòng)插件用法,結(jié)合實(shí)例形式分析了jQuery循環(huán)滾動(dòng)插件的實(shí)現(xiàn)技巧與使用方法,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05jquery列表拖動(dòng)排列(由項(xiàng)目提取相當(dāng)好用)
最好的jquery列表拖動(dòng)排列自定義拖動(dòng)層排列。當(dāng)點(diǎn)擊或拖動(dòng)列表時(shí),可以自定義隨意拖放列表模塊到相應(yīng)位置2014-06-06基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶(hù)名是否存在實(shí)例
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶(hù)名是否存在實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03