Home > Developer > Web Develop
There are two types of situations:
1. Load prototype first, then load jquery.
2. Load jquery First, then load prototype.
For Scenario 1: Load prototype first and then load jquery.
Method One: The jquery library and all its plugins are within the jquery namespace, including global variables that are also stored in the jquery namespace.
Use Jquery.noconflict (); The main function is at any time, as long as the jquery is loaded after the call, the use of the $ symbol to return to the other JS library, jquery in the creation of its own namespace when the other library's $ saved in one of its own variables.
<HTML> <Head> <Scriptsrc= "Prototype.js"></Script> <Scriptsrc= "Jquery.js"></Script> <Scripttype= "Text/javascript" > //The main conflict between the JS libraries is the $ conflict, this method is used to deal with this problemjquery.noconflict (); //using jquery instead of the jquery code sectionjQuery (document). Ready (function() {JQuery ("Div"). Hide (); }); //Use Prototype with $ (...), etc. $('Proto'). Hide (); </Script> </Head> <Body></Body> </HTML>
Method Two: If you still want to use a shorter character similar to $, you can assign the return value of Jquery.noconflict () to a variable. This variable is the new abbreviation for jquery, and of course you can use any string other than $, such as:
<HTML> <Head> <Scriptsrc= "Prototype.js"></Script> <Scriptsrc= "Jquery.js"></Script> <Scripttype= "Text/javascript" > //$j is the equivalent of jquery, the name you can define independentlyvar$j=jquery.noconflict (); //Use jQuery via $j (...) $j (document). Ready (function() {$j ("Div"). Hide (); }); //Use Prototype with $ (...), etc. $('Proto'). Hide (); </Script> </Head> <Body></Body> </HTML>
Method Three: If you still want to use $, but do not want to use other characters, it is also possible. And usually programmers prefer to do this because the code that does this is almost never replaced with the original $ symbol. That is to use the concept of namespaces to encapsulate all jquery code within the Ready event namespace of document, such as jquery (document). Ready (This is populated with jquery code)
<HTML> <Head> <Scriptsrc= "Prototype.js"></Script> <Scriptsrc= "Jquery.js"></Script> <Scripttype= "Text/javascript" >jquery.noconflict (); //Put all your code in your document ready areajQuery (document). Ready (function ($){ //This way you can use $ without worrying about conflicts within this range$("Div"). Hide (); }); //Use Prototype with $ (...), etc. $('Proto'). Hide (); </Script> </Head> <Body></Body> </HTML>
For the second case: Load jquery First, then load prototype.
Method Four: Loading in this order, there is no other JS library of the $ symbol is occupied by jquery. So the code for the other JS libraries can be changed without any modification, using $ as usual, and jquery can be used instead of $. Such as:
<HTML> <Head> <Scriptsrc= "Jquery.js"></Script> <Scriptsrc= "Prototype.js"></Script> <Scripttype= "Text/javascript" > //use jquery with jquery (...) jQuery (document). Ready (function() {JQuery ("Div"). Hide (); }); //when using Prototype, use $ (...),$('Someid'). Hide (); </Script> </Head> <Body></Body> </HTML>
Or if you don't want to write a long jquery character, you can do it in another way:
Method Five:
var $j = jQuery;
Multiple solutions to the compatibility and conflict of jquery and prototype
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
