jQuery: Using noConflict() to use multiple versions of jQuery on the same page

jQuery-noConflicy.md

How to use multiple versions of jQuery on the same page

First, reference 'legacy' jQuery version:

<script src="jquery.1.10.2.js"></script>

Do any necessary legacy jQuery stuff, and anything that is not version-dependent:

// legacy jQuery functions; e.g.:
$(selector).live( 'click', function() {
  // handle click...
});

// version-independent jQuery functions; e.g.:
$(anotherSelector).hide();

Next, reference 'new' jQuery version:

<script src="jquery.3.2.1.js"></script>

Reference all jQuery plug-ins that explicitly use jQuery or $:

<script src="jquery.validate.js"></script>

Call noConflict(true) and assign to new variable (e.g. jQuery_noConflict):

var jQuery_noConflict = jQuery.noConflict(true);

From now on, ALL custom jQuery functions must use jQuery_noConflict, so for ease wrap all subsequent code in an anonymous IIFE:

(function($){
	// doc ready check first!
	
	$(selector).on( 'click', function() {
	  // handle click...
	});
})(jQuery_noConflict);

Complete example

<script src="jquery.1.10.2.js"></script>

<script>
    // legacy jQuery functions, e.g.:
	$(selector).live( 'click', function() {
	  // handle click...
	});

    // version-independent jQuery functions, e.g.:
	$(anotherSelector).hide();
</script>

<script src="jquery.3.2.1.js"></script>

<script src="jquery.validate.js"></script>

<script>
	var jQuery_noConflict = jQuery.noConflict(true);
	
	(function($){
		// DOM ready check first!
		
		$(selector).on( 'click', function() {
		  // handle click...
		});
	})(jQuery_noConflict);
</script>