天天看點

jquery中美元符号($)命名沖突

7在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery來替換,如$('#msg')等同于JQuery('#msg') 的寫法。然而,當我們引入多個js庫後,在另外一個js庫中也定義了$符号的話,那麼我們在使用$符号時就發生了沖突。下面以引入兩個庫檔案 jquery.js和prototype.js為例來進行說明。

第一種情況:jquery.js在prototype.js之後進行引入,如: < script src = " prototype.js " type = " text/javascript " />

< script src = " jquery.js " type = " text/javascript " />

在這種情況下,我們在自己的js代碼中如下寫的話:      

$( ' #msg ' ).hide();

$永遠代表的是jquery中定義的$符号,也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們在後面再介紹。      

第二種情況:jquery.js在prototype.js之前進行引入,如: < script src = " jquery.js " type = " text/javascript " />

< script src = " prototype.js " type = " text/javascript " />

在這種情況下,我們在自己的js代碼中如下寫的話:      

$此時代表的prototype.js中定義的$符号,如果我們想要調用jquery.js中的工廠選擇函數功能的話,隻能用全稱寫法JQuery('#msg').hide().

 下面先介紹在第一種引入js庫檔案順序的情況下,如何正确的使用不同的js庫中定義的$符号。

一.使用JQuery.noConflict()

該方法的作用就是讓Jquery放棄對$的所有權, 将$的控制權交還給prototype.js,因為jquery.js是後引入的,是以最後擁有$控制權的是jquery。它的傳回值是JQuery。當 在代碼中調用了該 方法以後,我們就不可以使用$來調用jquery的方法了,此時$就代表在prototype.js庫中定義的$了。如下: JQuery.noConflict();// 此處不可以再寫成$('#msg').hide(),此時的$代表prototype.js中定義的$符号。

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(); // 此時在整個ready事件的方法中使用的$都是jquery.js中定義的$. }); 或者使用如下語句塊:

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

如果在第二種引入js庫檔案順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法,如:

< script type = " text/javascript " >(function($){ $( ' #msg ' ).hide(); // 此時在這個語句塊中使用的都是jquery.js中定義的$. })(JQuery)

</ script >

 這種使用語句塊的方法非常有用,在我們自己寫jquery插件時,應該都使用這種寫法,因為我們不知道具體工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽沖突。

ps :jquery中特殊字元的含義:

#  訓示 id

.  訓示 class

*  全選

,  多選

空格 後代

>  子

~  兄弟

+  下一個

:  子(多功能)

()  函數式的過濾與查找

繼續閱讀