같은 페이지에서 여러 개의 다른 jQuery 버전을 사용해서 충돌하지 않는 방법

3744 단어 jquery
jQuery가 탄생한 이래 버전이 점점 많아지고 jQuery 홈페이지의 새로운 버전은 끊임없이 업데이트되고 발표되고 있다. 현재 1.6.4 버전에 이르렀지만 우리는 이전 프로젝트에서 이미 낡은 버전의 jQuery를 사용했다. 예를 들어 이미 출현한 것:1.3.X、1.4.X、1.5.X, 1.6.2 등등.
 
이전에 프론트 데스크톱 페이지를 수정할 때 이런 문제에 부딪힌 적이 있습니다. 저는 최신 jQuery 버전을 사용했습니다. 이전 프로그램은 오래된 jQuery 라이브러리를 사용했습니다. 이번에는 수정을 하는 것이지 다시 하는 것이 아니기 때문에 우리는 오랫동안 두 버전을 공존할 수 없었습니다. 마지막에 둘 중 하나를 선택할 수 밖에 없었습니다. 수정한 js는오늘 인터넷에서 서로 다른 jQuery 버전이 공존하고 충돌하지 않는 방법을 보고 공유해 봅시다.
 
사실, jQuery를 이용해서.noConflict () 특성은 jQuery를 다른 JS 라이브러리와 병존시킬 수 있을 뿐만 아니라, 예를 들어Prototype과 병존시킬 수 있습니다.jQuery 자체의 다른 버전과 충돌하지 않고 병존할 수도 있습니다.
 
예:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
      <head>
          <title>              jQuery  </title>
          <!--         jQuery     -->
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
          <script type="text/javascript">
              var jQuery_New = $.noConflict(true);
          </script>
         <!--   jQuery1.6.2   -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_6_2 = $.noConflict(true);
         </script>
         <!--   jQuery1.5.2   -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_5_2 = $.noConflict(true);
         </script>
         <!--   jQuery1.4.2   -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_4_2 = $.noConflict(true);
         </script>
         <!--   jQuery1.3.2   -->
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
         <script type="text/javascript">
             var jQuery_1_3_2 = $.noConflict(true);
         </script>
         <script type="text/javascript">
             alert(jQuery_New.fn.jquery);
             alert(jQuery_1_6_2.fn.jquery);
             alert(jQuery_1_5_2.fn.jquery);
             alert(jQuery_1_4_2.fn.jquery);
             alert(jQuery_1_3_2.fn.jquery);
             
             jQuery_New(function($){$('<p>     '+$.fn.jquery+'       。</p>').appendTo('body');});
             jQuery_1_6_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
             jQuery_1_5_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
             jQuery_1_4_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
             jQuery_1_3_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');});
         </script>
     </head>
     <body>
                       jQuery  
         <br>
     </body>
 </html>

좋은 웹페이지 즐겨찾기