Home > Article > Web Front-end > Share the usage of noConflict() in jQuery
This article mainly introduces the usage of noConflict() in jQuery, and analyzes the function, definition and related usage skills of noConflict() with examples. Friends in need can refer to this article
The example describes the usage of noConflict() in jQuery. Share it with everyone for your reference. The specific analysis is as follows:
jQuery uses the "$"operator by default. The $ symbol is just a reference to the window.jQuery object, jQuery.noConflict(), this function takes control of the variable $ Yield to the first library to implement it. This helps ensure that jQuery doesn't conflict with other libraries' $objects. After running this function, you can only access jQuery objects using jQuery variables. For example, where $("p p") is used, it must be replaced by jQuery("p p").
1. "$" operator
1. jQuery uses the "$" operator by default, and other frameworks such as prototype also use "$", so if jQuery is introduced after other libraries, then jQuery will get the "$" usage rights. This situation is easy to understand, after all, JS is executed from top to bottom.
2. If jQuery is introduced before other libraries that use "$", then jQuery will not occupy "$".
Tip: This method is useful when other JavaScript libraries use $ for their functions.
We will use $ when getting variables in jquery, but there are many plug-ins that can use the $ symbol. If we want to reference it at the same time, it will cause problems. In order to prevent this from happening, jquery Noconflict() is introduced
2. The definition of jQuery.noConflict
The jQuery.noConflict method contains an optional Boolean parameter to determine the handover of the $ reference At the same time, whether to transfer the jQuery object itself:
##
jQuery.noConflict([removeAll])Description of the function: By default, executing noConflict will take control of the variable $ Transfer to the first library that generates $; when removeAll is set to true, executing noConflict will transfer all control of $ and the jQuery object itself to the first library that generates them.
3. jQuery.noConflict source code analysis
At the beginning of the jQuery source code, the first thing to do is this:
// Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$,It is easy to understand that jQuery maps the jQuery and $ objects in the window environment through two private variables to prevent the variables from being forcibly overwritten. Once the noConflict method is called, the difference between _jQuery, _$, jQuery, $ is used to determine the transfer method of control. The specific code is as follows:
##
noConflict: function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery; }
1. Map the object referenced by $ back to the original object:
jQuery.noConflict(); jQuery("p p").hide(); // 使用 jQuery $("content").style.display = "none"; // 使用其他库的 $()
jQuery.noConflict(); (function($) { $(function() { // 使用 $ 作为 jQuery 别名的代码 }); })(jQuery); ... // 其他用 $ 作为别名的库的代码
jQuery.noConflict()(function(){ // 使用 jQuery 的代码 }); ... // 其他库使用 $ 做别名的代码
var j = jQuery.noConflict(); j("p p").hide(); // 基于 jQuery 的代码 $("content").style.display = "none";// 基于其他库的 $() 代码
var dom = {}; dom.query = jQuery.noConflict(true); //结果: dom.query("p p").hide(); // 新 jQuery 的代码 $("content").style.display = "none"; // 另一个库 $() 的代码 jQuery("p > p").hide(); // 另一个版本 jQuery 的代码
The above is the detailed content of Share the usage of noConflict() in jQuery. For more information, please follow other related articles on the PHP Chinese website!