Home > Web Front-end > JS Tutorial > How to resolve $naming conflicts between Jquery library and other libraries_jquery

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

WBOY
Release: 2016-05-16 17:22:30
Original
1249 people have browsed it

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:





< script src="../../scripts/jquery-1.3.1.js" type="text/javascript">




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


test---jQuery




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
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template