前陣子工作遇到的問題趕緊記錄一下

情境：設計師在切版的時候使用了兩個版本會衝突的plugin分別是jquery.fixed.1.3.js和Feature Carousel, Version 1.3，這兩個plugin需要引入的jQuery有版本上的衝突

解決方法：使用jQuery.noConflict

一般來說，如果同一個頁面載入了多個jQuery，會依照順序覆蓋

<script src="https://code.jquery.com/jquery-1.10.2.js"></scrip>
<script>console.log($.fn.jquery);</scrip>

<script src="https://code.jquery.com/jquery-1.6.2.js"></scrip>
<script>console.log($.fn.jquery);</scrip>

執行結果會是：

1.10.2
1.6.2

若加上jQuery.noConflict(true)

<script src="https://code.jquery.com/jquery-1.10.2.js"></scrip>
<script>console.log($.fn.jquery);</scrip>
<script src="https://code.jquery.com/jquery-1.6.2.js"></scrip>
<script>jQuery.noConflict(true);</scrip>
<script>console.log($.fn.jquery);</scrip>

執行結果則為：

1.10.2
1.10.2

因為jQuery.noConflict()的作用是轉讓jQuery的$變數控制權

Relinquish jQuery’s control of the $ variable.

$.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

接收jQuery.noConflict(true)的return值

<script src="https://code.jquery.com/jquery-1.10.2.js"></scrip>
<script>console.log($.fn.jquery);</scrip>
<script src="https://code.jquery.com/jquery-1.6.2.js"></scrip>
<script>console.log($.fn.jquery);</scrip>
<script>
$jq162 = jQuery.noConflict( true );
console.log($jq162.fn.jquery);
console.log($.fn.jquery);
</scrip>

執行結果則為：

1.10.2
1.6.2
1.6.2
1.10.2

參考文件：https://api.jquery.com/jquery.noconflict/#jQuery-noConflict-removeAll

• javascript
• jquery