jQuery noConflict() method releases the control of the $ variable. You might have seen many JavaScript libraries which uses $ variable. In jQuery $ is used as an alias for jQuery. If you want to use the $ variable of other libraries, jQuery have to release the control over the $ variable by calling it’s noconflict method.
jQuery noConflict
Here is the general syntax for using the jQuery noConflict method:
|
1 2 3 4 5 |
$.noConflict() <!-- OR --> jQuery.noConflict() |
jQuery noConflict example
Following examples demonstrate the use of jQuery noConflict method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script> $.noConflict(); $(document).ready(function(){ $("button").click(function(){ $("div").fadeToggle("slow"); // This won’t work }); }); </script> <style> .divBlock{ width: 100px; height: 50px; padding: 15px; margin: 15px; background-color: red; } </style> </head> <body> <div class="divBlock"></div> <button>Test</button> </body> </html> |
In the above example fade and toggle effect applied to <div> element.
You will not get the desired output because it uses $.noConflict() method above the $(document).ready() function. If you remove the $.noConflict() method, the above code will give you the appropriate result.
In the example below, you can see that $.noconflict() is used and the full name jQuery is used instead of $ variable in ready function and all other methods. This code will work even though the noConflict() method is used.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script> $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("div").fadeToggle("slow"); // This is working }); }); </script> <style> .divBlock{ width: 100px; height: 50px; padding: 15px; margin: 15px; background-color: red; } </style> </head> <body> <div class="divBlock"></div> <button>Test</button> </body> </html> |
jQuery noConflict alias
In the below example you can see that $.noConflict() method is used with a custom alias name ‘jq‘. This code will also give you the proper output.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script> jq = $.noConflict(); jq (document).ready(function(){ jq ("button").click(function(){ jq ("div").fadeToggle("slow"); // this is still working }); }); </script> <style> .divBlock{ width: 100px; height: 50px; padding: 15px; margin: 15px; background-color: red; } </style> </head> <body> <div class="divBlock"></div> <button>Test</button> </body> </html> |
jQuery uses noConflict() method to avoid the conflict of using $ variable with other JavaScript variables. The above examples will give you an idea about the usage of noConflict method in jQuery.
Reference: API Doc