jQuery的$命名衝突

大家知道以下兩種寫法是等同的，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$("#thediv").width();
jQuery("#thediv").width();

也就是說$是jQuery的別稱，但如果不僅引入jQuery庫，也引入了其他的庫，並且也定義了$符號的話，就有可能會導致衝突的現象，例如prototype.js同樣定義了$，下面就以此為例介紹一下如何防止出現此現象。

解決方式一:

在prototype.js庫之後引入jquery.js檔案，這樣就可以$就是jQuery的別稱，當然prototype.js中的就不再有效。

[HTML] 純文字檢視 複製程式碼
<script src="prototype.js" type="text/javascript"/> 
<script src="jquery.js" type="text/javascript"/>

但是prototype.js中的$就不再有效，下面介紹一如何解決此問題。

1.使用jQuery全名:

因為jquery.js庫在prototype.js後面引用的，儘管$在jQuery中有效，但是prototype.js中的$就不起作用了。但是執行jQuery.noConflict()函式之後，jQuery就會將$的控制權讓渡給prototype，於是prototype.js就可以使用$，但是jQuery中就不能再使用$，那麼這個使用可以使用全稱jQuery，例如:

[JavaScript] 純文字檢視 複製程式碼
jQuery("#thediv").width();

2.使用自定義別名:

在上面的介紹中，在執行了jQuery.noConflict()函式之後就不能使用$，只能夠使用jQuery，這樣可能不夠靈活，那麼我們可以自定義一個jQuery的別稱，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var newJquery=JQuery.noConflict(); 
newJquery("#thediv").width();

解決方式二:

在prototype.js庫之前引入jquery.js檔案的情況:

[HTML] 純文字檢視 複製程式碼
<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/>

先看下面的程式碼:

[JavaScript] 純文字檢視 複製程式碼
$("#thediv").width();

以上程式碼中的$不再代表jQuery，而是prototype.js中宣告的符號。

在這種情況下可以使用全稱jQuery而不是使用別稱$來獲取元素，如下:

[JavaScript] 純文字檢視 複製程式碼
jQuery("#thediv").width();

也可以使用匿名函式的方式實現:

[JavaScript] 純文字檢視 複製程式碼
(function($){
  //程式碼
})(jQuery)

以上程式碼建立並執行一個匿名函式，此函式的引數是jQuery，這樣在保證不和jQuery衝突的前提下，就可以在匿名函式內部繼續使用$了，因為函式建立了一個新的作用域，和外部不相沖突。