The first question you may ask yourself is why on earth would I need to run multiple jQuery versions on the same page. It’s quite rare that you will need to, but a common in case is if you are trying to update legacy code to a newer version of jQuery and are worrying about breakage in your code. By running two different version of jQuery we can upgrade slowly and port our code into a new version of jQuery while not worrying about potentially breaking old code.
The great thing is that jQuery already comes packaged with a method for this called $.noConflict(). Generally this method is used in case you have two separate libraries altogether and both use $ as an entry point to the library. But if we want to load two separate versions of jQuery we can just do something like this:
<script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/jquery-1.6.2.js"></script> jq162 = jQuery.noConflict(true);
In this case we could then use the aliases $ and jq162 to make calls to the library. For instance $('#element) and jq162('#element').
However having a bunch of aliases can also be a bit confusing and having the $ alias is usually preferable. The easy way around this is to wrap your code in a namespace and pass in the jQuery object into a function. Don’t forget the $.noConflict() call at the top.
jQuery.noConflict();
(function($) {
var $el = $('#element);
})(jQuery);
This way even if the $ alias get’s overwritten it will still be the same $ within that scope.