Updated April 14, 2023
Introduction to jQuery noConflict
jQuery noConflict() method is an inbuilt method in jQuery which releases the control over the “$” shortcut identifier so as to make it available for other JS libraries to use. By applying the noConflict() method, jQuery tells other libraries that “$” shortcut does not belong to jQuery anymore. This method is of huge importance in case other JS libraries use the same “$” shortcut for their methods which may lead to a conflict in the code. It can also be used to specify a new custom name for the jQuery variables and functions. One can create his or her own alias or shortcut for jQuery using this method. The noConflict() method returns a reference to jQuery, that can be saved in a variable and used later in the code.
This method avoids conflicting scenario and makes it possible for the libraries to work in harmony.
Syntax:
$.noConflict(removeAll)Where removeAll is an optional parameter and returns a Boolean value which specifies whether or not to release jQuery’s control over all the jQuery variables.
Examples to Implement jQuery noConflict()
Below are the examples of JQuery noConflict:
Example #1
The following example illustrates the usage of the jQuery noConflict() method by creating a new custom alias.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
varjq = $.noConflict();
jq(document).ready(function(){
jq(".btn").click(function(){
jq("#divstyle").text("jQuery is working fine!");
});
});
</script>
<style>
#divstyle
{
background: #408080;
width: 400px;
height: 150px;
padding-top: 20px;
padding-left: 5px;
border-radius: 15px;
text-align: center;
padding:20px;
font-size:24px;
color:#fff;
}
.btn{
background-color:#2D3942;
border: #2e6da4;
font-size: 20px;
color: #fff;
letter-spacing: 1px;
padding: 10px 14px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration:none;
}
</style>
</head>
<body>
<div id ="divstyle"><br>Click the button to set a text in div using "jq" as an alias for jQuery.
<p>
<button class="btn">Click Me!</button>
</p>
</div>
</body>
</html>Output:
- Below screen displays when the above code gets executed.
- In this example, we are using the noConflict() method by creating a new custom identifier or alias to be used instead of “$”.
- Here we are using “jq” as an alias instead of “$”.
- Once the button is clicked, the text() method of jQuery executes that sets a text to the div element as shown below.
- We have simply declared a variable and the noConflict() method is assigned to it. Now, this variable name acts as an alias for the rest of the code.
Example #2
Here’s another example which uses “jQuery” rather instead of “$”.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function () {
jQuery(".btncls").click(function () {
jQuery("#divanimation").animate(
{
width: "toggle",
height: "toggle",
},
{
duration: 5000,
specialEasing: {
width: "easeInOutSine",
height: "easeInOutSine",
},
complete: function () {
alert("Animation complete!");
},
}
);
});
});
</script>
<style>
#divstyle {
background: #408080;
width: 240px;
height: 300px;
padding-top: 20px;
padding-left: 5px;
border-radius: 15px;
padding: 20px;
font-size: 24px;
color: #fff;
}
#divanimation {
padding: 8px;
padding-left: 30px;
padding-top: 30px;
background: yellowgreen;
width: 200px;
height: 200px;
box-shadow: 0 0 5px #aaa;
font-size: 18px;
text-align: center;
border-radius: 200px;
}
.btncls {
background-color: #2d3942;
border: #2e6da4;
margin-left: 12px;
font-size: 15px;
color: #fff;
letter-spacing: 1px;
padding: 8px 12px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration: none;
}
</style>
</head>
<body>
<div id="divstyle">
<div id="divanimation"></div>
<p><button class="btncls">Click to see the Animation</button></p>
</div>
</body>
</html>Output:
- Below screen displays when the above code gets executed.
- In this example, we have used “jQuery” instead of “$” with methods, button click, and animate.
- Once the button is clicked, the animation occurs.
- The above code will still work even if the noConflict() method is not used.
Example #3
The following example illustrates how conflict can be avoided using the noConflict() method.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery noConflict Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j("#jq").click(function () {
alert("jQuery is working fine with prototype.");
});
});
document.observe("dom:loaded", function () {
$("pro").observe("click", function (event) {
alert("Prototype is working fine with jQuery.");
});
});
</script>
<style>
.btn {
background-color: #2d3942;
border: #2e6da4;
font-size: 20px;
color: #fff;
letter-spacing: 1px;
padding: 10px 14px;
font-size: 14px;
font-weight: normal;
border-radius: 4px;
line-height: 1.5;
text-decoration: none;
}
#divstyle {
background: #408080;
width: 400px;
height: 200px;
margin-left: 400px;
margin-top: 100px;
padding-top: 20px;
padding-left: 5px;
border-radius: 15px;
text-align: center;
padding: 20px;
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<div id="divstyle">
<p>
Click the buttons to check whether the jQuery and Prototype JS libraries
are working without any conflict or not.
</p>
<hr />
<br />
<button type="button" class="btn" id="jq">Run jQuery Code</button>
<button type="button" class="btn" id="pro">Run Prototype Code</button>
</div>
</body>
</html>Output:
- Below screen displays when the above code is executed.
- In this example, we have used two JS libraries, jQuery, and prototype.
- Since both these libraries use “$” as an alias, to avoid conflict in the code, the noConflict() method is required here.
- By using noConflict() mode, jQuery releases its control over the “$” identifier and makes it available for the use of other libraries, here, prototype.
Immediately after the page is loaded, the jQuery goes into the noConflict mode and a new variable “j” is declared and assigned to replace the alias “$” so as to avoid conflicts with the prototype library.
Below screen displays when the button “ Run jQuery Code” gets clicked.
Below screen displays when the button “ Run Prototype Code” gets clicked.
Conclusion
- This article talked about the importance of noConflict feature in jQuery.
- jQuery noConflict() method is of great significance while working with different JS libraries or frameworks.
- This method ensures that there is no conflict arising due to the different libraries in use as because most of them use the “$” identifier as an alias.
- This method once applied simply means that the “$” identifier is no longer a shortcut for jQuery.
Recommended Articles
This is a guide to jQuery noConflict. Here we discuss a Brief Overview on jQuery noConflict and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
