How to solve the $ naming conflict between the Jquery Library and other libraries

Last Update:2013-10-22 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, we should know that in jquery, $ (dollar sign) is the alias of jquery, that is, $ is the same as jquery. In many cases, it is because of this $. For example, although $ ('# xmlas') and JQuery ('# xmlas') are different in writing, they are actually exactly the same.

To solve this conflict, the simplest way is to use different names or make the Execution Code think it is a different namespace.

1. The jQuery library is imported before other libraries, and the jQuery (callback) method is used directly as follows:

Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<! -- Import jQuery first -->
<Script src = ".../scripts/jquery-1.3.1.js" type = "text/javascript"> </script>
<! -- Import other databases -->
<Script src = "prototype-1.6.0.3.js" type = "text/javascript"> </script>
</Head>
<Body>
<P id = "pp"> test --- prototype </p>
<P> test --- jQuery </p>

<Script type = "text/javascript">
JQuery (function () {// directly use jQuery, there is no need to call the "jQuery. noConflict ()" function.
JQuery ("p"). click (function (){
Alert (jQuery (this). text ());
});
});

$ ("Pp"). style. display = 'none'; // use prototype
</Script>
</Body>
</Html>

2. The jQuery library is imported after other libraries. The jQuery. noConflict () method is used to transfer the control of variable $ to other libraries. The following methods are available:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery. noConflict (); // assign control of variable $ to prototype. js
JQuery (function () {// use jQuery
JQuery ("p"). click (function (){
Alert (jQuery (this). text ());
});
});

$ ("Pp"). style. display = 'none'; // use prototype
</Script>

Code 2

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var $ j = jQuery. noConflict (); // customize a short shortcut
$ J (function () {// use jQuery
$ J ("p"). click (function (){
Alert ($ j (this). text ());
});
});

$ ("Pp"). style. display = 'none'; // use prototype
</Script>

Code 3

Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery. noConflict (); // assign control of variable $ to prototype. js
JQuery (function ($) {// use jQuery
$ ("P"). click (function () {// continue to use the $ Method
Alert ($ (this). text ());
});
});

$ ("Pp"). style. display = 'none'; // use prototype
</Script>

Code 4

Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery. noConflict (); // assign control of variable $ to prototype. js
(Function ($) {// defines an anonymous function and sets the parameter to $
$ (Function () {// $ inside the anonymous function is jQuery
$ ("P"). click (function () {// continue to use the $ Method
Alert ($ (this). text ());
});
});
}) (JQuery); // executes an anonymous function and passes the real parameter jQuery

$ ("Pp"). style. display = 'none'; // use prototype

/*************************************** ******************************/
JQuery (document). ready (function () {// when loading the page, the permission is granted.
JQuery. noConflict ();
});
</Script>

In addition to the above method, we can also use the second method to solve the conflict problem, that is, the most stupid but most effective solution: Use a custom namespace to avoid conflicts.
For example, if the project name is xmlas, the original code is as follows:

Copy codeThe Code is as follows:
$ ('Contentregion'). show ()

You can write it as follows:

Copy codeThe Code is as follows:
XMLAS ('contentregion'). show ()

3. In jquery code, we can use the $ symbol in case of a conflict. We need to add the following code in the ready event:

Copy codeThe Code is as follows:
JQuery (document). ready (function ($ ){
// You can safely use $ here
});

You can also enter the following format:

Copy codeThe Code is as follows:
JQuery (function ($ ){
// The $ code is used here.
});

Therefore, the complete code implemented based on the first method is as follows:

Copy codeThe Code is as follows:
// Complete solution to conflicts between the jquery Library and other libraries
<Script type = "text/javascript" src = "photolist. js"> </script>
<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript">
$. NoConflict ();
JQuery (function ($ ){
// $ Jquery code is used
});
// Here is your other js library code
</Script>

You can also simplify the complete code as follows:
Copy codeThe Code is as follows:
// Simplified code
$. NoConflict () (function (){
// Here is your $ jquery code
});
// Code of other libraries

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

How to solve the $ naming conflict between the Jquery Library and other libraries

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support