Home > Developer > JavaScript
Since the birth of jQuery, there have been more and more versions, and the new versions on the jQuery official website are still being updated and released, and have now reached version 1.6.4, however, we have used the old version of jQuery in previous projects, such as 1.3.X, 1.4.X, 1.5.X, and 1.6.2.
Because of the needs of the project, it is necessary to constantly use newer versions of jQuery, but for the old jQuery version that already exists and has been used, how can we make different jQuery versions coexist on the same page without conflict?
In fact, using the jQuery. noConflict () feature, we can not only make jQuery coexist with other JS libraries, such as Prototype. It can also coexist with other versions of jQuery without conflict.
1 <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
2
3
4 <title> load multiple jQuery versions on the same page </title>
5 <! -- Load the latest jQuery version from the Google server -->
6 <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script>
7 <script type = "text/javascript">
8 var jQuery_New = $. noConflict (true );
9 </script>
10 <! -- Load jQuery1.6.2 -->
11 <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
12 <script type = "text/javascript">
13 var jquery_00006_2 = $. noConflict (true );
14 </script>
15 <! -- Load jQuery1.5.2 -->
16 <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> </script>
17 <script type = "text/javascript">
18 var jquery_rj5_2 = $. noConflict (true );
19 </script>
20 <! -- Load jQuery1.4.2 -->
21 <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
22 <script type = "text/javascript">
23 var jquery_00004_2 = $. noConflict (true );
24 </script>
25 <! -- Load jQuery1.3.2 -->
26 <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
27 <script type = "text/javascript">
28 var jQuery_1_3_2 = $. noConflict (true );
29 </script>
30 <script type = "text/javascript">
31 alert (jQuery_New.fn.jquery );
32 alert (jquery_rj6_2.fn.jquery );
33 alert (jquery_rj5_2.fn.jquery );
34 alert (jquery_rj4_2.fn.jquery );
35 alert (jQuery_1_3_2.fn.jquery );
36
37 jQuery_New (function ($) {$ ('<p> I am the latest' + $. fn. jquery + 'version added. </P> '). appendTo ('body ');});
38 jquery_00006_2 (function ($) {$ ('<p> I added it in' + $. fn. jquery +. </P> '). appendTo ('body ');});
39 jquery_00005_2 (function ($) {$ ('<p> I added it in' + $. fn. jquery +. </P> '). appendTo ('body ');});
40 jquery_00004_2 (function ($) {$ ('<p> I added it in' + $. fn. jquery +. </P> '). appendTo ('body ');});
41 jQuery_1_3_2 (function ($) {$ ('<p> I added it in' + $. fn. jquery +. </P> '). appendTo ('body ');});
42 </script>
43
44 <body>
45. Load multiple different jQuery versions on the same page
46 <br>
47 </body>
48
From: Li shangwang
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
