How to resolve multiple versions of jquery and other JS library conflicts _jquery

jquery multiple versions or and other JS library conflicts are mainly commonly used in the $ symbol of the problem, this problem jquery early on to give us reservations processing methods, the following to see the solution.

1. Multiple versions of jquery or conflict resolution for the same page.

<! DOCTYPE html>
 
 

2. Same page jquery and other JS Library conflict resolution method

JQuery noconflict () method

The Noconflict () method frees up the control of the $ identifier so that other scripts can use it.

Jquery.js are introduced before prototype.js, such as:

<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "prototype.js" type= "text/" JavaScript "></script>
<p id=" pp ">test---prototype</p>

2.1 Of course, you can still use JQuery with your full name instead of shorthand:

<script type= "Text/javascript" >
jquery.noconflict ()//Transfer control of variable $ to prototype.js, full name can not be invoked.
jquery (function () {//using jquery
jquery ("P"). Click (function () {
alert (jquery (this). text ());
}
) ;
This can no longer be written as $, when $ represents the $ symbol defined in Prototype.js.
$ ("pp"). style.display = ' none ';//Use prototype

2.2 You can also create your own shorthand. Noconflict () can return a reference to JQuery, which you can deposit into a variable for later use. Take a look at this example:

<script type= "Text/javascript" >
var $j = jquery.noconflict ()//Customize a relatively short shortcut
$j (function () {//Use JQuery
$j ("P"). Click (function () {
alert ($j (this). text ());
}
); $ ("pp"). style.display = ' None '; Using prototype

2.3 If your JQuery code block uses $ shorthand, and you don't want to change the shortcut, you can pass the $ symbol as a variable to the Ready method. This allows you to use the $ symbol within the function-and, beyond the function, you still have to use JQuery:

<script type= "Text/javascript" >
jquery.noconflict ()//control of variable $ to prototype.js
jQuery (document). Ready (function ($) {
$ ("P"). Click (function () {//Continue using $ method
Alert ($ (this). text ());
}
); jquery (function ($) {//Use jquery
$ ("P"). Click (function () {//Continue using $ method
Alert ($ (this). text ());
});

2.4 Using statement blocks:

<script type= "Text/javascript" >
jquery.noconflict ()//Transfer control of variable $ to prototype.js
(function ($) {// Defines an anonymous function and sets the parameter to $ $
(the $ for function () {//anonymous function) is jquery
$ ("P"). Click (function () {//Continue to use $ method
Alert ($ (this). Text ());
});
});
}) (JQuery); Executes an anonymous function and passes the argument jquery
$ ("pp"). style.display = ' none ';//Use prototype

This use of block method is very useful, in our own jquery plug-in, should be used in this way, because we do not know how the specific work process is the sequence of the introduction of a variety of JS library, and this sentence block writing can shield conflict.

Attention:

1. When referencing a JavaScript class library, you can avoid conflicts by putting the jquery reference on the last side.

2. In particular, when jquery () is substituted for $ (), jquery is case-sensitive because JavaScript itself is case-sensitive.

The above is a small set of jquery to introduce many versions and other JS library Conflict resolution method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!