What about the $ naming conflict between jquery libraries and other libraries

Source: Internet
Author: User
Tags anonymous continue jquery library

First of all, we should know that in jquery, $ (dollar sign) is the alias of jquery, which means that using $ is the same as using jquery, and that in many cases we namespace, it is because of this $ that conflicts arise. For example, the $ (' #xmlas ') and jquery (' #xmlas '), though different in writing, are actually identical in practice.

The easiest way to resolve this conflict is to use a different name, or to have the execution code think of a different namespace.

First, the jquery library is imported before other libraries, directly using the jquery (callback) method such as:

The code is as follows

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<!--first import jquery-->
<script src= ". /.. /scripts/jquery-1.3.1.js "type=" Text/javascript "></script>
Import other libraries after <!---->
<script src= "Prototype-1.6.0.3.js" type= "Text/javascript" ></script>
<body>
<p id= "pp" >test---prototype</p>
<p >test---jquery</p>

<script type= "Text/javascript" >
jquery (function () {//directly using jquery, there is no need to invoke the Jquery.noconflict () function.
JQuery ("P"). Click (function () {
Alert (JQuery (this). text ());
});
});

$ ("pp"). style.display = ' None '; Using prototype
</script>
</body>

Second, the jquery library after other libraries import, using the Jquery.noconflict () method to transfer the control of the variable $ to other libraries, there are several ways:

The code is as follows

<script type= "Text/javascript" >
Jquery.noconflict (); Transfer the control of the variable $ to prototype.js
jquery (function () {//using jquery
JQuery ("P"). Click (function () {
Alert (JQuery (this). text ());
});
});

$ ("pp"). style.display = ' None '; Using prototype
</script>

Code two

The code is as follows

<script type= "Text/javascript" >
var $j = jquery.noconflict (); Customize a shorter shortcut
$j (function () {//using jquery
$j ("P"). Click (function () {
Alert ($j (this). text ());
});
});

$ ("pp"). style.display = ' None '; Using prototype
</script>

Code Three

The code is as follows

<script type= "Text/javascript" >
Jquery.noconflict (); Transfer the control of the variable $ to prototype.js
jquery (function ($) {//using jquery
$ ("P"). Click (function () {//continue to use the $ method
Alert ($ (this). text ());
});
});

$ ("pp"). style.display = ' None '; Using prototype
</script>

Generation//Code four

The code is as follows

<script type= "Text/javascript" >
Jquery.noconflict (); Transfer the control of the variable $ to prototype.js
(function ($) {///define anonymous function and set parameter to $
$ (function () {//The inside of the anonymous function is all jquery
$ ("P"). Click (function () {//continue to use the $ method
Alert ($ (this). text ());
});
});
}) (JQuery); Execute an anonymous function and pass the argument jquery

$ ("pp"). style.display = ' None '; Using prototype

/*********************************************************************/
JQuery (document). Ready (function () {//The right to get out when a page is loaded
Jquery.noconflict ();
});
</script>


In addition to the above methods, we can use the second method to solve the problem of conflict, that is the most stupid but most effective solution: Use a custom namespace to avoid conflicts.
For example, the project name required is Xmlas, then our original code:

The code is as follows

$ (' Contentarea '). Show ()

It can be written in the following form:

The code is as follows

Xmlas (' Contentarea '). Show ()

3. In the jquery code, we can use the $ symbol when encountering a conflict, which requires us to add the following code to the Ready event:

The code is as follows

JQuery (document). Ready (function ($) {
You can safely use $ in here.
});

Of course, you can also write Jane in the following form:

The code is as follows

JQuery (function ($) {
Here's the code for using $
});

Thus, the complete code that is implemented according to the first method is as follows:

The code is as follows

A complete solution to the conflicts between jquery libraries 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 ($) {
Using the $ jquery code
});
Here is your other JS library code
</script>

Of course, you can also simplify the complete code, simplifying the code as follows:

The code is as follows

Simplified code
$.noconflict () (function () {
Here is your jquery code with $
});
This is the code for the other libraries.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.