Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use multiple versions of jQuery on the same page?
Yes, you can use multiple versions of jQuery on the same page. To avoid any kind of conflict, use the jQuery.noConflict() method. jQuery.noConflict() method allows you to use multiple frameworks, while using jQuery. Other JavaScript frameworks include Ember, Angular, Backbone, etc.
The $ sign is used for jQuery, but what if other frameworks also use the same $ sign; this may create issues and conflict. To avoid this, jQuery issued the noConflict() method. The method releases the $ sign to be used by other JavaScript frameworks. Use jQuery with the name, jQuery.
With this, you can also use multiple versions of jQuery on the same page. The key is to call jQuery.noConflict() after loading each jQuery version and assign it to a unique variable name.
Example
You can try to run the following code to learn how to use multiple versions of jQuery on the same web page ?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var $x = jQuery.noConflict();
console.log("Version 1: " + $x.fn.jquery);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var $y = jQuery.noConflict();
console.log("Version 2: " + $y.fn.jquery);
</script>
</head>
<body>
<h1>Multiple jQuery Versions Demo</h1>
<p id="demo1">This will be modified by jQuery 3.2.1</p>
<p id="demo2">This will be modified by jQuery 1.9.1</p>
<script>
// Using jQuery 3.2.1
$x(document).ready(function(){
$x("#demo1").css("color", "blue");
});
// Using jQuery 1.9.1
$y(document).ready(function(){
$y("#demo2").css("color", "red");
});
</script>
</body>
</html>
The output of the above code is ?
Version 1: 3.2.1 Version 2: 1.9.1
In this example, $x represents jQuery version 3.2.1 and $y represents jQuery version 1.9.1. Both versions can coexist and be used independently without conflicts.
Conclusion
Using jQuery.noConflict() allows multiple jQuery versions to work together on the same page by assigning each version to a unique variable. This prevents conflicts and enables you to leverage different jQuery features from various versions simultaneously.
5K+ Views
