The aim of this example is to present you with an important method of jQuery, the noConflict() method. As you already know, jQuery uses the $ sign as a shortcut for jQuery.
There are many other popular JavaScript frameworks like: Angular, Backbone, Ember, Knockout, and more. What if other JavaScript frameworks also use the $ sign as a shortcut?
If two different frameworks are using the same shortcut, one of them might stop working. The jQuery team have already thought about this, and implemented the noConflict() method.
That means you can add as many libraries as you want into your web projects as long as they do not interefere with each-other.
1. Basic Document Setup
To begin, create a new HTML document and add the following basic syntax inside:
<!DOCTYPE html> <html> <head> <title>jQuery noConflict Example</title> </head> <body> <!-- HTML SECTION --> <!-- JAVASCRIPT SECTION --> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> </script> </body>
Note that jQuery library is linked locally, so you need to download and link it too, by clicking here.
2. Appying noConflict()
The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. You can of course still use jQuery, simply by writing the full name instead of the shortcut:
<!-- HTML SECTION --> <p>Just a paragraph here!</p> <button>jQuery Test</button>
In the JS section, we apply the noConflict method to the $ sign that is by default equal to jQuery. Then, we use jQuery to select DOM elements, just like we did with $.
<!-- JAVASCRIPT SECTION -->
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery is still working!");
});
});
</script>
We’d normally get the same functionality:
3. A Closer Look on Ways to Reference the jQuery Function
This is a set of ways you can reference the jQuery function when the presence of another library creates a conflict over the use of the $ variable:
3.1 Create a new Alias
The jQuery.noConflict() method returns a reference to the jQuery function, so you can capture it in whatever variable:
<!-- JAVASCRIPT SECTION --> <script type="text/javascript"> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> // Give $ back to prototype.js; create new alias to jQuery. var $j = jQuery.noConflict(); </script>
Clearly, this created a new alias to the jQuery function, $j and the $ sign has now the prototype.js meaning. Now see how we can reference these two libraries now:
<script src="prototype.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<!-- JAVASCRIPT SECTION -->
<!-- Putting jQuery into no-conflict mode. -->
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>
3.2 Use an Immediately Invoked Function Expression
You can continue to use the standard $ by wrapping your code in an immediately invoked function expression; this is also a standard pattern for jQuery plugin authoring, where the author cannot know whether another library has taken over the $.
<!-- JAVASCRIPT SECTION -->
<!-- Using the $ inside an immediately-invoked function expression. -->
<script src="prototype.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script>
3.3 Use the Argument Passed to the jQuery(document).ready() Function
Alternatively, you can also use a specific sign like the $ inside the ready function of jQuery, and obviously, you can refer to jQuery code using whatever argument you set in the function. That only means you can use it inside the function, because outside of that, the scope is different and so is (might be) the $ selector interpreted.
<!-- JAVASCRIPT SECTION -->
<script src="prototype.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function( $ ) {
// Your jQuery code here, using $ to refer to jQuery.
});
</script>
4. Conclusion
To conclude, you can follow one of the three ways to reference libraries without conflicts. You can, in addition, completely move jQuery to a new namespace in another object like this: var dom = {}; dom.query = jQuery.noConflict( true ); and then use dom.query to reference jQuery in this case.
If you want to see some examples of using these custom ways to reference liraries using .noConflict(), have a look here.
5. Download
You can download the full source code of this example here: jQuery noConflict
