jQuery noConflict
The $ symbol is used as a shorthand for jQuery. Other prominent JavaScript frameworks include Angular, Backbone, Ember, Knockout, and more. What if other JavaScript frameworks use the $ symbol as a shortcut as well? If two separate frameworks use the same shortcut, one of them may fail.
The jQuery team considered this and developed the noConflict() feature.
noConflict() Method
You simply assign a custom variable for JQuery to use instead of its default $. JQuery then wraps itself in a new function scope so $ no longer has a namespace conflict.
You can also create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("Tutorialstrend working!");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Test jQuery noConflict</button>
</body>
</html>Output
Now click on the button to check jQuery working fine.
Prev Next