By default, jQuery uses $ as a shortcut for jQuery. Many other JavaScript libraries (like prototype.js, MooTools, or YUI) also use $ as a function or variable name, just as jQuery does.Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery.
In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
Though it is not recommended to load two different versions of JQuery library, yet if due to some unavoidable reasons you have loaded them in your document, then calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Create a different alias instead of jQuery to use in the rest of the script:
When you put jQuery into no-conflict mode, you have the option of assigning a new variable name to replace the $ alias.
<script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
</script>
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
</script>
You'll still be able to use the full function name jQuery as well as the new alias j in the rest of your application. The new alias can be named anything you'd like: jq, $J, awesomeQuery, etc.
Using $ in JQuery code in no conflict mode:
If you don't want to define another alternative to the full jQuery function name, then there's still another approach you might try:
Simply add the $ as an argument passed to your jQuery( document ).ready() function. This is most frequently used in the case where you still want the benefits of really concise jQuery code, but don't want to cause conflicts with other libraries.
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Including jQuery Before Other Libraries:
If you include jQuery before other libraries, you may use jQuery when you do some work with jQuery, but the $ will have the meaning defined in the other library. There is no need to relinquish the $ alias by calling jQuery.noConflict().
<!-- Loading jQuery before other libraries. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script<
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>
<script src="jquery.js"></script>
<script src="prototype.js"></script<
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>