The main reason JS library conflict: the jQuery library, many JS libraries use the '$' symbol as its symbol. Therefore, the introduction of multiple pages in a JS library, and use the '$' as a code, which does not recognize the library (this is my own interpretation of their representatives, but the deeper reason it is necessary to go deep into the jQuery source code to analyze the therefore temporarily depth discussion paper).
solution:
JS library to resolve the conflict altogether can be divided into the following methods:
Transferring ① '$' identifiers, as used jQuery jQuery object identifier (alias).
Alternatively ② alias '$' and jQuery identifier, such as the following $ J (any name may be taken).
var $j=jQuery.noConflict(); $j("#div").hide();
③ use anonymous functions
jQuery.noConflict(); (function($) { $ ( Function () { // use as jQuery alias code $ }); })(jQuery); ... // code for other use $ as an alias library
Case 1: If the jQuery library into the library after the other
Method: In this case, how to use the '$' as an identifier other libraries will be employed jQuery.noConflict () jQuery controlled release '$' identifiers, it ( '$') gave way to the first a realization of its library.
E.g:
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script> <script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script> <Script type = "text / JavaScript"> $ .noConflict (); // transferring $ its first implemented library. jQuery ( "#div") hide ();. // used as an identifier jQuery library jQuery $ ( "#div") hide ();. // use of another library code $ </ script>
You can also use the second method, namely using an alias. E.g:
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script> <script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script> <script type="text/javascript"> var $ $ noConflict J = ();. // transferring $ its first implemented library. $ j ( "#div") hide ();. // used as an identifier $ j jQuery library $ ( "#div") hide ();. // use of another library code $ </ script>
Or a third method, i.e., anonymous function using for example:
jQuery.noConflict(); ( Function ($) { // anonymous function with '$' as a parameter $ ( function () { // use as jQuery alias code $ }); }) (jQuery); // passed as a parameter value jQuery ... // Code $ alias with other library
Case 2: If you import the jQuery library before other
Method: In this case, without using jQuery.noConflict () method of transferring '$' identifier. E.g:
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script> <script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script> <script type="text/javascript"> jQuery ( "#div") hide ();. // used as an identifier jQuery library jQuery $ ( "#div") hide ();. // use of another library code $ </ script>
So here's a question: Why is not necessary to use jQuery to import jQuery.noConflict () before other libraries, and after the other will have to use import libraries jQuery.noConflict ()?
Further, jQuery.noConflict () method may also be provided with a boolean type parameter. The action parameters are: completely jQuery to a new namespace (Completely move jQuery to a new namespace in another object.)
This parameter is mainly for use when you need to import a different version of jQuery on the same page, that is, to create a new space pointing jQuery. ( This is not very clear. )
E.g:
where they = {}; dom.query = jQuery.noConflict(true); result: dom.query ( "the p-div") hide ();. // new jQuery code $ ( "Content"). style.display = "none";. // another library $ () code jQuery ( "div> . the p-") hide (); // another version of jQuery code
Summary: JS library for jQuery conflict, I only know how to solve. And I do not know the specific details of the reasons, and specific technical knowledge is not clear, so the next step is to efforts to find a solution. For the jQuery library conflict, I have a question still remained:
① Why jQuery import without having to use jQuery.noConflict () before other libraries, and after the other will have to use import libraries jQuery.noConflict ()?
② on the settlement of the introduction of different versions of the jQuery library on the same page, using the details jQuery.noConflict (true) to solve? (Such as: the introduction of the library whether the order will lead to different solutions, etc.?)
③ Why the introduction of multiple JS libraries on the same page will cause an error, what specific reason?
Reproduced in: https: //www.cnblogs.com/JoannaQ/p/3387184.html