How to resolve $naming conflicts between Jquery library and other libraries_jquery

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. In many cases, when we namespace, it is precisely because of this $ conflict occurs. For example: although $('#xmlas') and JQuery('#xmlas') are written differently, they are actually completely equivalent.

To resolve this conflict, the easiest way is to name it with a different name, or let the executing code think it is a different namespace.

1. Import the jQuery library before other libraries, and directly use the jQuery (callback) method such as:

Copy code The code is as follows:

< ;p id="pp">test---prototype

test---jQuery

$("pp").style.display = 'none'; //Use prototype

2. Import the jQuery library after other libraries, and use the jQuery.noConflict() method to transfer control of the variable $ to other libraries. There are several ways:

Copy code The code is as follows:

Code 2

Copy code The code is as follows:

Code 3

Copy code The code is as follows:

Code 4

Copy code The code is as follows:

In addition to the above method, we can also use the second method to solve the conflict problem, which is the stupidest but most effective solution: use a custom namespace to avoid conflicts.
For example, if the required project name is xmlas, then our original code:

Copy code The code is as follows:

$('contentArea').show()

can be written in the following form:

Copy code The code is as follows:

XMLAS('contentArea').show()

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

Copy code The code is as follows:

jQuery(document).ready(function($) {
//You can use $ with confidence here
});

Of course, you can also abbreviate it in the following form:

Copy code The code is as follows:

jQuery(function($){
// Here is the code using $
});

From this, the complete code implemented according to the first method is as follows:

Copy code The code is as follows:

//Complete solution to conflicts between jquery library and other libraries

Of course, you can also simplify the complete code above. The simplified code is as follows:

Copy the code The code is as follows :

//Simplified code
$.noConflict()(function(){
//Here is your jquery code with $
});
//Here are the codes of other libraries