Google News
logo
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 :