jQuery版本衝突問題解決與分析
最近在寫項目的時候，在網上搜索了一個時間選擇器的插件，想要添加到原先的項目中，但是在調試的過程中，卻出現時間選擇器若是能使用，則我的其他比如導航欄的特效就不能使用，若導航欄能夠使用，則時間選擇器就無法使用了，兩者出現了衝突。
出現這樣的問題，思路
由於是特效即腳本實現的，所以判斷是腳本的問題，所以，直接註釋掉原先中腳本文件代碼，很塊就發現是兩個jQuery文件的引用出現了衝突，下面列出來
<script src="..//bootstrap-3.3.5-dist/bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>然後，請教度娘，發現網上一大片說，jQuery版本衝突的問題，說用noConflict()方法來解決。。然後就沒有然後，沒一個說的清的，完全不知道該怎麼搞。
還是乖乖去W3school上看一下jQuery的介紹，發現$是jQuery的縮寫（jQuery uses the $ sign
as a shortcut for jQuery.）
看了幾個實例，再看下w3school上對於noConflict()的方法解釋，都是些啥啊。還是沒有看懂。
直接進入測試吧，大家在細細體會,大家多使用該方式來測試代碼！
測試一:
試驗有兩個jQuery文件，這兩個文件都能使用$.("p").hide(); 和$.("p").show()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1).click(function(){
$("p").hide);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#button2).click(function(){
$("p").show);
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id='button1'>Click me1</button><br>
<button type"button" id="button2"> click me2 </button>
</body>
</html> 先猜測結果，從代碼可以看出，版本問題依舊會存在的，其實該代碼存在的問題就是我們項目中存在的問題，瀏覽器無法區分$ 表示的是那種jQuery。（代碼中有兩個jQuery文件）
上面測試結果，點擊click me1 ，上面文字消失，點擊click me2 ，文字並沒有像代碼寫的一樣出現。
現在我們將代碼進行修改進行第二個測試。
測試二：
我們將第一個JS塊中的$使用noConflict()方法。
<script type="text/javascript">
var jq1=$.noConflict();
jq1(document).ready(function(){
jq1("#button1").click(function(){
jq1("p").hide();
});
});
</script>在這裏我們使用jq1作爲新的jQuery簡稱，進行一個區分，讓第一個button1使用第一個jQuery。
但是，這裏要考慮一個文件順序問題，在第一個<script>腳本1</script>代碼是使用的第一個jQuery文件，這個沒什麼爭議；但是第二個<script>腳本2</script>塊，使用的是第一個還是二個jQuery文件。
所以測試三，直接將第二個jQuery文件刪除。
測試三：
將第二個jQuery文件刪除，再運行
測試結果，點擊點擊click me1 ，上面文字消失，點擊click me2 ，文字沒有出現，
<del><script src="/jquery/jquery-1.11.1.min.js"></script></del>則通過測試二/三，可以說明在第一個<script>腳本1</script>代碼是使用的第一個jQuery文件，第二個<script>腳本2</script>代碼塊使用第二個jQuery文件。
到這裏，其實問題解決了，但是還要測試一些東西。
測試四:
將兩個<script>腳本1 2</script>塊合併，猜想，這樣的話是不是將只會使用唯一的Jquery文件。
測試結果：點擊click me1 ，上面文字消失，點擊click me2 ，文字出現（正確結果）
對比測試五
將第二個jQuery文件刪除
測試結果，點擊click me1 ，上面文字消失，點擊click me2 ，文字沒有出現。
則通過測試四/五,說明jQuery文件的選擇並不和JS代碼塊的分合有關係，關係只是順序關係。
最後兩個測試（由三個JS腳本來測試）
先由$來引用jQuery，再由noConflict()來定義另一個引用，
之後的jQuery可以隨意使用各個引用，來調用不同的版本的文件內容。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("p").hide();
});
});
var jq1=$.noConflict();
jq1(document).ready(function(){
jq1("#button2").click(function(){
jq1("p").show();
});
});
$(document).ready(function(){
$("#button3").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button" id='button1'>Click me1</button><br>
<button type"button" id="button2"> click me2 </button><br>
<button type"button" id="button3"> click me3 </button>
</body>
</html> 在上述代碼中，
jq1 爲第二個jQuery的簡稱，再使用時，將所有的$換成jq1就OK了
$ 爲第一個jQuery的簡稱，哪裏需要用第一個jQuery就使用 $
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
var jq1=$.noConflict();
jq1(document).ready(function(){
jq1("#button1").click(function(){
jq1("p").hide();
});
});
$(document).ready(function(){
$("#button2").click(function(){
$("p").show();
});
});
jq1(document).ready(function(){
jq1("#button3").click(function(){
jq1("p").hide();
});
});
</script>
</head>在上述代碼中，
$ 爲第二個jQuery的簡稱，哪裏需要用第二個jQuery就使用 $
jq1 爲第一個jQuery的簡稱，再使用時，將所有的$換成jq1就OK了
總結:
（一般需要給新增的jQuery，創建一個新的變量來代替 $ ，這樣原先的代碼都不需要修改 ）
在存有多種jQuery版本的頁面中，如果要正確使用各個版本，就使用var gjq=$.noConflict();爲各個版本創建新定義個jQuery引用變量，其實就是創建新的 $ 的代號（簡稱shortcut）。
在此代碼之後，使用原先的jQuery文件的時候，就使用 $ ,(因爲在這之前，原先的 $ 存在的環境爲正常唯一jQuery環境，而noConflict方法改變是新的jQuery的簡稱，所以原先的腳本使用 $ 就可以調用)。
請注意，將新添加的jQuery順序與定義 $ 簡稱的順序保持一致!!!!（否則，系統認爲的 $ 簡稱與jQuery版本的對應關係與編碼者不一致，這簡直太糟糕了！！！）