在同一個頁面使用多個不一樣的jQuery版本，讓它們並存而不衝突

時間 2019-11-09

標籤同一個頁面使用多個不一樣 jquery 版本它們衝突欄目 JQuery 简体版

原文原文鏈接

jQuery自誕生以來，版本愈來愈多，並且jQuery官網的新版本還在不斷的更新和發佈中，現已經達到了1.6.4版本，可是咱們在之前的項目中就已經使用了舊版本的jQuery，好比已經出現的：1.3.X、1.4.X、1.5.X、1.6.2等等。javascript

　　因爲項目的須要，必然也須要不斷的使用較新版的jQuery，但對於原來就已經存在並已經採用了的舊jQuery版本，咱們如何讓多個不一樣的jQuery版本在同一個頁面並存而不衝突呢？html

　　其實，利用jQuery.noConflict()特性，咱們不只能夠讓jQuery與其餘的JS庫並存，好比Prototype。也能夠與jQuery自己的其餘不一樣版本並存而不衝突。java

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3     <head> 4         <title>在同一個頁面中加載多個不一樣的jQuery版本</title> 5         <!-- 從谷歌服務器加載jQuery最新版本 --> 6         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 7         <script type="text/javascript"> 8             var jQuery_New = $.noConflict(true); 9         </script>10         <!-- 加載jQuery1.6.2版本 -->11         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>12         <script type="text/javascript">13             var jQuery_1_6_2 = $.noConflict(true);14         </script>15         <!-- 加載jQuery1.5.2版本 -->16         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>17         <script type="text/javascript">18             var jQuery_1_5_2 = $.noConflict(true);19         </script>20         <!-- 加載jQuery1.4.2版本 -->21         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>22         <script type="text/javascript">23             var jQuery_1_4_2 = $.noConflict(true);24         </script>25         <!-- 加載jQuery1.3.2版本 -->26         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>27         <script type="text/javascript">28             var jQuery_1_3_2 = $.noConflict(true);29         </script>30         <script type="text/javascript">31             alert(jQuery_New.fn.jquery);32             alert(jQuery_1_6_2.fn.jquery);33             alert(jQuery_1_5_2.fn.jquery);34             alert(jQuery_1_4_2.fn.jquery);35             alert(jQuery_1_3_2.fn.jquery);36             37             jQuery_New(function($){$('<p>我是最新的'+$.fn.jquery+'版本添加進來的。</p>').appendTo('body');});38             jQuery_1_6_2(function($){$('<p>我是'+$.fn.jquery+'版本添加進來的。</p>').appendTo('body');});39             jQuery_1_5_2(function($){$('<p>我是'+$.fn.jquery+'版本添加進來的。</p>').appendTo('body');});40             jQuery_1_4_2(function($){$('<p>我是'+$.fn.jquery+'版本添加進來的。</p>').appendTo('body');});41             jQuery_1_3_2(function($){$('<p>我是'+$.fn.jquery+'版本添加進來的。</p>').appendTo('body');});42         </script>43     </head>44     <body>45         在同一個頁面中加載多個不一樣的jQuery版本46         <br>47     </body>48 </html>