$.noConflict()
. Old references of $ are saved during jQuery initialization; noConflict()
simply restores them.$.noConflict( true )
from the second version will return the globally scoped jQuery variables to those of the first version.
.ready()
method's ability to alias the jQuery object, as within the .ready()
we can use $ if we wish without fear of conflicts later :
<!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>
<!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>
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 :
<!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>