Resolves multiple versions of jquery and conflicts with other JS libraries

Source: Internet
Author: User

jquery multiple versions or conflicts with other JS libraries are mostly commonly used in the $ sign problem, this problem jquery early on to give us a reservation processing method, the following to see the solution.

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

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "Utf-8" />    <title>jquery test Page</title></Head><Body><!--introduction of the 1.6.4 version of JQ -<Scriptsrc= "Http://"></Script><Script> varjq164=Jquery.noconflict (true); </Script><!--introduction of the 1.4.2 version of JQ -<Scriptsrc= "Http://"></Script><Script> varjq142=Jquery.noconflict (true); </Script>
<Script>(function($){ //at this time the $ is jQuery-1.6.4 $('#');}) (jq164);</Script> <Script>jq142 (function($){ //at this time the $ is jQuery-1.4.2 $('#');});</Script> </Body></HTML>

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

JQuery noconflict () method
The Noconflict () method frees the control of the $ identifier so that other scripts can use it.
Jquery.js is introduced before prototype.js, such as:

<Scriptsrc= "Jquery.js"type= "Text/javascript"></Script><Scriptsrc= "Prototype.js"type= "Text/javascript"></Script><PID= "pp">Test---Prototype</P><P>Test---JQuery</P>

2.1 Of course, you can still use JQuery by using the full name instead of shorthand:

<Scripttype= "Text/javascript">jquery.noconflict (); //The control of the variable $ is passed to Prototype.js, and the full name can not be called. JQuery (function(){                    //using jqueryJQuery ("P"). Click (function() {alert (JQuery ( This). text ()); });});//This can no longer be written as $, at which time the $ represents the $ symbol defined in Prototype.js. $("pp"). Style.display= 'None'; //using prototype</Script>

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

<Scripttype= "Text/javascript">var$j=jquery.noconflict (); //Customizing a short shortcut$j (function(){                        //using jquery$j ("P"). Click (function() {alert ($j ( This). text ()); });}); $("pp"). Style.display= 'None'; //using prototype</Script>

2.3 If your JQuery code block uses $ shorthand and you do not want to change the shortcut, you can pass the $ symbol as a variable to the Ready method. This makes it possible to use the $ symbol within a function-and, outside of the function, you still have to use "jQuery":

<Scripttype= "Text/javascript">jquery.noconflict (); //Assign control of variable $ to prototype.jsjQuery (document). Ready (function($){    $("P"). Click (function(){        //continue using the $ methodAlert ($ ( This). text ()); });}); JQuery (function($){                    //using jquery    $("P"). Click (function(){        //continue using the $ methodAlert ($ ( This). text ()); });});</Script>

2.4 Using statement blocks:

<Scripttype= "Text/javascript">jquery.noconflict (); //Assign control of variable $ to prototype.js(function($){                        //define an anonymous function and set the formal parameter to $    $(function(){                    //inside the anonymous function, $ all is jquery        $("P"). Click (function(){    //continue using the $ methodAlert ($ ( This). text ());    }); });})                            (JQuery); //Execute anonymous function and pass argument jquery$("pp"). Style.display= 'None'; //using prototype</Script>

This method of using the block of statements is very useful, we should use this when we write the jquery plugin, because we do not know how the specific work process in the sequence of the introduction of the various JS libraries, and this block of syntax can be used to mask the conflict.

1. When referencing a JavaScript class library, it is possible to avoid conflicts by putting jquery references on the last side.
2. In particular, when jquery () replaces $ (), jquery is case-sensitive because JavaScript itself is case-sensitive.

Resolves multiple versions of jquery and conflicts with other JS libraries

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.