pradeep-dani/Understanding jQuery Conflict in page context.htm

## Understanding jQuery Conflict in page context.htm
<!-- source of inspiration: source fo inspiration: https://stackoverflow.com/questions/10131268/jquery-no-conflict-still-conflicts-with-other-version-of-jquery#answer-10131373 -->
<html>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>

<head>
    <script>
      console.log('THUMB Rule 1: $ variable will hold version which is before conflict version');
      console.log('THUMB Rule 2: jQuery variable will hold latest version unless it is conflicted with passing true as an argument');
      jQ_v1_7_2 = jQuery.noConflict();
      console.log('*******************************************************************');
      console.log('SCENARIO 1:');
      console.log('*******************************************************************');
      console.log('Loaded only 1.7.2 & Added jQ_v1_7_2 = jQuery.noConflict()');
      console.log('$ is_________________'+$);
      console.log('jQuery is____________'+jQuery.fn.jquery);
      console.log('jQ_v1_7_2 is_________'+jQ_v1_7_2.fn.jquery);
      console.log('*******************************************************************');
    </script>
</head>

<body>
    <p id="container_1">Hello World</p>
    <p id="container_2">Hello World</p>
</body>

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>
      jQ_v1_10_2 = jQuery.noConflict();
      console.log('SCENARIO 2:');
      console.log('*******************************************************************');
      console.log('Along with 1.7.2, loaded 3 more 1.8.3 -> 2.0.3 -> 1.10.2');
      console.log('& added jQ_v1_10_2 = jQuery.noConflict();');
      console.log('$ is_________________'+$.fn.jquery);
      console.log('jQuery is____________'+jQuery.fn.jquery);
      console.log('jQ_v1_7_2 is_________'+jQ_v1_7_2.fn.jquery);
      console.log('jQ_v1_10_2 is________'+jQ_v1_10_2.fn.jquery);
      console.log('*******************************************************************');
</script>

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<script>
    jQ_v2_2_4 = jQuery.noConflict(true); //Passing true argument will store "jQuery" version to get previously to latest loaded jQuery
</script>

<script>
      console.log('SCENARIO 3:');
      console.log('*******************************************************************');
      console.log('Along with previously loaded jQuery libraries, ');
      console.log('loaded 3 more 3.0.0 -> 2.1.4 -> 2.2.4');
      console.log('& added jQ_v2_2_4 = jQuery.noConflict(true);');
      console.log('$ is_________________'+$.fn.jquery);
      console.log('jQuery is____________'+jQuery.fn.jquery);
      console.log('jQ_v1_7_2 is_________'+jQ_v1_7_2.fn.jquery);
      console.log('jQ_v1_10_2 is________'+jQ_v1_10_2.fn.jquery);
      console.log('jQ_v2_2_4 is_________'+jQ_v2_2_4.fn.jquery);
      console.log('*******************************************************************');
</script>

  <!-- OUTPUT
  THUMB Rule 1: $ variable will hold version which is before conflict version
  THUMB Rule 2: jQuery variable will hold latest version unless it is conflicted with passing true as an argument
  *******************************************************************
  SCENARIO 1:
  *******************************************************************
  Loaded only 1.7.2 & Added jQ_v1_7_2 = jQuery.noConflict()
  $ is_________________undefined
  jQuery is____________1.7.2
  jQ_v1_7_2 is_________1.7.2
  *******************************************************************
  SCENARIO 2:
  *******************************************************************
  Along with 1.7.2, loaded 3 more 1.8.3 -> 2.0.3 -> 1.10.2
  & added jQ_v1_10_2 = jQuery.noConflict();
  $ is_________________2.0.3
  jQuery is____________1.10.2
  jQ_v1_7_2 is_________1.7.2
  jQ_v1_10_2 is________1.10.2
  *******************************************************************
  SCENARIO 3:
  *******************************************************************
  Along with previously loaded jQuery libraries,
  loaded 3 more 3.0.0 -> 2.1.4 -> 2.2.4
  & added jQ_v2_2_4 = jQuery.noConflict(true);
  $ is_________________2.1.4
  jQuery is____________2.1.4
  jQ_v1_7_2 is_________1.7.2
  jQ_v1_10_2 is________1.10.2
  jQ_v2_2_4 is_________2.2.4
  *******************************************************************-->

</html>