Online Snippets Library

Use multiple jQuery versions on same page in jQuery

To call multiple jQuery versions on same page we will use jQuery.noConflict() of jQuery.

jQuery uses the $ sign as a alias for jQuery.If you want to use another JavaScript library or jQuery versions on same page ,to do so we need return control of $ back to the other library with a call to $.noConflict().

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

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var $j = jQuery.noConflict(true);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>var $k = jQuery.noConflict(true);</script>    
<title>Use multiple jQuery versions on same page in jQuery</title>
</head>
</html>
Javascript
$(document).ready(function(){
alert('jQuery '+$().jquery+' loaded'); 
alert('jQuery '+$j().jquery+' loaded'); 
alert('jQuery '+$k().jquery+' loaded'); 
 });