JQuery的$命名沖突詳細(xì)解析
在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來替換,如$('#msg')等同于JQuery('#msg')的寫法。然而,當(dāng)我們引入多個(gè)js庫后,在另外一個(gè)js庫中也定義了$符號(hào)的話,那么我們?cè)谑褂?符號(hào)時(shí)就發(fā)生了沖突。下面以引入兩個(gè)庫文件jquery.js和prototype.js為例來進(jìn)行說明。
第一種情況:jquery.js在prototype.js之后進(jìn)行引入,如:
<script src="prototype.js" type="text/javascript"/>
<script src="jquery.js" type="text/javascript"/>
在這種情況下,我們?cè)谧约旱膉s代碼中如下寫的話:
$('#msg').hide();
$永遠(yuǎn)代表的是jquery中定義的$符號(hào),也可以寫成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代碼中如下寫的話:
$('#msg').hide();
$此時(shí)代表的prototype.js中定義的$符號(hào),如果我們想要調(diào)用jquery.js中的工廠選擇函數(shù)功能的話,只能用全稱寫法JQuery('#msg').hide().
下面先介紹在第一種引入js庫文件順序的情況下,如何正確的使用不同的js庫中定義的$符號(hào)。
一.使用JQuery.noConflict()
該方法的作用就是讓Jquery放棄對(duì)$的所有權(quán),將$的控制權(quán)交還給prototype.js,因?yàn)閖query.js是后引入的,所以最后擁有$控制權(quán)的是jquery。它的返回值是JQuery。當(dāng)在代碼中調(diào)用了該 方法以后,我們就不可以使用$來調(diào)用jquery的方法了,此時(shí)$就代表在prototype.js庫中定義的$了。如下:
JQuery.noConflict();
//此處不可以再寫成$('#msg').hide(),此時(shí)的$代表prototype.js中定義的$符號(hào)。
JQuey('#msg').hide();
自此以后$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全稱JQuery了。
二.自定義JQuery的別名
如果覺得第一種方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全稱比較麻煩的話,我們還可以為JQuery重定義別名。如下:
var $j=JQuery.noConflict();
$j('#msg').hide();//此處$j就代表JQuery
自此以后$就代表prototype.js中定義的$,jquey.js中的$無法再使用,只能使用$j來作為jquey.js中JQuery的別名了。
三.使用語句塊,在語句塊中仍然使用jquery.js中定義的$,如下:
JQuery.noConflict();
JQuery(document).ready(function($){
$('#msg').hide();//此時(shí)在整個(gè)ready事件的方法中使用的$都是jquery.js中定義的$.
});
或者使用如下語句塊:
(function($){
.....
$('#msg').hide();//此時(shí)在這個(gè)語句塊中使用的都是jquery.js中定義的$.
})(JQuery)
如果在第二種引入js庫文件順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法,如:
<script src="jquery.js" type="text/javascript"/>
<script src="prototype.js" type="text/javascript"/>
<script type="text/javascript">
(function($){
.....
$('#msg').hide();//此時(shí)在這個(gè)語句塊中使用的都是jquery.js中定義的$.
})(JQuery)
</script>
這種使用語句塊的方法非常有用,在我們自己寫jquery插件時(shí),應(yīng)該都使用這種寫法,因?yàn)槲覀儾恢谰唧w工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽沖突。
(function($){})(jQuery)
1 首先(function(){})()這種寫法 是創(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è)寫法主要的作用還是保證jquery不與其他類庫或變量有沖突 首先是要保證jQuery這個(gè)變量名與外部沒有沖突(jquery內(nèi)部$與jQuery是同一個(gè)東西 有兩個(gè)名字的原因就是怕$與其他變量名有沖突二jQuery與其他變量沖突的幾率非常小)并傳入匿名對(duì)象,匿名對(duì)象給參數(shù)起名叫做$(其實(shí)和jquery內(nèi)部是一樣的) 然后你就可以自由的在(function($){})(jQuery)里寫你的插件而不需要考慮與外界變量是否存在沖突
相關(guān)文章
jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他
這篇文章主要介紹了jquery 自定義容器下雨效果可將下雨圖標(biāo)改為其他,需要的朋友可以參考下2014-04-04
Jquery知識(shí)點(diǎn)二 jquery下對(duì)數(shù)組的操作
眾所周知,Jquery是對(duì)JavaScript的一種高效的封裝,所以Jquery要操作的數(shù)組即是JavaScript中的數(shù)組,在JavaScript中我們使用for以及for-in進(jìn)行數(shù)組的操作,而在Jquery中則使用$.map()、$.each()來操作數(shù)組2011-01-01
jquery插件開發(fā)注意事項(xiàng)小結(jié)
Jquery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。它是輕量級(jí)的js庫(壓縮后只有21k) ,它兼容CSS3,還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)2013-06-06
jquery中$.post()方法的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery中$.post()方法的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02
Jquery之Ajax運(yùn)用 學(xué)習(xí)運(yùn)用篇
JQuery中Ajax的運(yùn)用相信很多人都已熟悉,本文主要是記錄下個(gè)人實(shí)踐中的應(yīng)用知識(shí),旨在加強(qiáng)記憶。2011-09-09
jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫效果,實(shí)例分析了animate方法實(shí)現(xiàn)動(dòng)畫效果的相關(guān)技巧,并備有較為詳盡的注釋供讀者學(xué)習(xí)參考,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
ASP.NET jQuery 實(shí)例17 通過使用jQuery validation插件校驗(yàn)ListBox
這節(jié)介紹jQuery validation插件一個(gè)新的校驗(yàn)規(guī)則屬性rangelength,通過數(shù)組方式賦值2012-02-02
jQuery插件jRumble實(shí)現(xiàn)網(wǎng)頁元素抖動(dòng)
jRumble是jquery的插件,可以讓你選擇的元素抖動(dòng)。 調(diào)用時(shí)只需一句代碼即可,有些抖動(dòng)效果還挺可愛,可自定義的抖動(dòng)效果,十分的炫酷,有需要的小伙伴可以參考下。2015-06-06

