jquery
jQuery noConflict() Method
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.


The jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
Basic Syntaxes

<script type="text/javascript">
     $.noConflict();
     // Code that uses other library's $ can follow here.
</script>

This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within the .ready() we can use $ if we wish without fear of conflicts later :

<script type="text/javascript">
       $.noConflict();
       jQuery( document ).ready(function( $ ) {
           // some content
      });
</script>

jQuery noConflict() Examples :
<!DOCTYPE html>
<html>
<head>
<title>jQuery noConflict() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("h3").text("www.freetimelearning.com");
$("h4").text("www.freetimelearn.com");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>

<body>
 
<h3>Free Time Learning</h3>
<h4>Free Time Learning</h4>
<button type="button" class="btn">Click Here</button>
 
</body>
</html>
Output :

Another jQuery noConflict() Example :

Syntax

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("h3").text("www.freetimelearning.com");
        jQuery("h4").text("www.freetimelearn.com");
    });
});
</script>

<!DOCTYPE html>
<html>
<head>
<title>jQuery noConflict() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("h3").text("www.freetimelearning.com");
        jQuery("h4").text("www.freetimelearn.com");
    });
  });
</script>
<style type="text/css">
    .btn{ padding:6px 15px;}
</style>
</head>

<body>
 
<h3>Free Time Learning</h3>
<h4>Free Time Learning</h4>
<button type="button" class="btn">Click Here</button>
 
</body>
</html>
Output :

You can create own noConflict() method. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use. Here is an example :

Syntax

<script type="text/javascript">
var FTL = $.noConflict();
jQuery(document).ready(function(){
    FTL("button").click(function(){
        FTL("h3").text("www.freetimelearning.com");
FTL("h4").text("www.freetimelearn.com");
    });
});
</script>

<!DOCTYPE html>
<html>
<head>
<title>jQuery noConflict() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
  var FTL = $.noConflict();
  jQuery(document).ready(function(){
    FTL("button").click(function(){
        FTL("h3").text("www.freetimelearning.com");
        FTL("h4").text("www.freetimelearn.com");
    });
  });
</script>

<style type="text/css">
     .btn{ padding:6px 15px;}
</style>
</head>
 
<body>
 
<h3>Free Time Learning</h3>
<h4>Free Time Learning</h4>
<button type="button" class="btn">Click Here</button>
 
</body>
</html>
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.