As jQuery do most of the JavaScript libraries use $ as a function or variable name. In jQuery's case, all functionality is available without using $ because it is just an alias for jQuery. In jQuery we can return control of $ back to the other library with a call to noConflict() if we are using another JavaScript library alongside jQuery. We can prevent a conflict by using use two different jQuery releases.

jQuery noConflict() can be used by below example. On the left side of the page the script is same. The changed scripts with additions/substitutions shown in red are on the right side. To these examples, your scripts will be different , but the meaning is the same. As shown below you have to insert lines of code. Scripts to noConflict only change the jQuery . Before changing anything please insure that your scripts function individually before changing anything.

To give control of the $ variable back to whichever library first implemented it will basically run $.noConflict() method . If we want that jQuery library doesn't conflict with other libraries we use the jQuery conflict method this gives the surety to us.

Normally we do like this.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

<script type='text/javascript'>

 

$(window).load(function(){

$(document).ready(function(){

      $('#article').width(250);

      $('#article').mouseover(function()

      {

         $(this).css("cursor","pointer");

         $(this).animate({width: "400px"}, 'slow');

      });

   $('#article').mouseout(function()

     {   

         $(this).animate({width: "400px"}, 'slow');

      });

  });

});  

</script>

Here $m variable is assigned within the script so that all the $ sign in the script are replaced by $m.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2 /jquery.min.js"></script>

 

<script type='text/javascript'>

var $j = jQuery.noConflict();

$j(window).load(function(){

$j(document).ready(function(){

      $j('#article').width(250);

      $j('#article').mouseover(function()

      {

         $j(this).css("cursor","pointer");

         $j(this).animate({width: "400px"}, 'slow');

      });

   $j('#article').mouseout(function()

     {   

         $j(this).animate({width: "400px"}, 'slow');

      });

  });

});  

</script>