Examples of noConflict () usage in jQuery

Examples of noConflict () usage in jQuery

This article mainly introduces the usage of noConflict () in jQuery. The example analyzes the functions, definitions, and related usage skills of noConflict (). For more information, see

 

 

This article describes the usage of noConflict () in jQuery. Share it with you for your reference. The specific analysis is as follows:

JQuery uses the "$" operator by default. The $ symbol is only window. A reference of the jQuery object, jQuery. noConflict (), which transfers control of variable $ to the first database that implements it. This helps ensure that jQuery does not conflict with $ objects in other libraries. After running this function, you can only use jQuery variables to access jQuery objects. For example, to use $ ("div p"), you must replace it with jQuery ("div p ").

I. "$" Operator

1. jQuery uses the "$" operator by default. Other frameworks such as prototype also use "$". Therefore, if jQuery is introduced after other libraries, jQuery will get the "$" permission. This situation is easy to understand. After all, JavaScript is executed from top to bottom.

2. If jQuery is introduced before other libraries that use "$", jQuery will not use "$ ".

Tip: This method is useful when other JavaScript libraries use $ for their functions.

$ Is used for getting variables in jquery, but there are still many plug-ins that can use the $ symbol. If we want to reference the variable at the same time, a problem will occur, jquery introduces noconflict () to prevent such a problem ()

Ii. jQuery. noConflict Definition

The jQuery. noConflict method contains an optional Boolean parameter to determine whether to hand over the jQuery object itself while transferring the $ reference:

 

1	JQuery. noConflict ([removeAll])

Function Description:

By default, executing noConflict will hand over control of variable $ to the first database that generates $. When removeAll is set to true, executing noConflict will hand over all the control of $ and jQuery object to the first one to generate their libraries.

Iii. jQuery. noConflict source code analysis

At the beginning of jQuery source code, the first thing we do is:

 

1 2 3 4

// 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 jQuery and $ objects in the window environment through two private variables to prevent variables from being forcibly overwritten. Once the noConflict method is called, the transfer method of control is determined by the difference between _ jQuery, _ $, jQuery, and $. The specific code is as follows:

 

1 2 3 4 5 6 7 8 9

NoConflict: function (deep ){ If (window. $ === jQuery ){ Window. $ =_$; } If (deep & window. jQuery === jQuery ){ Window. jQuery = _ jQuery; } Return jQuery; }

Let's take a look at the parameter setting problem mentioned above. If deep is not set, _ $ overwrites window. $. At this time, jQuery alias $ is invalid, but jQuery itself is intact. If another class library or Code redefined the $ variable, its control is completely handed over. If deep is set to true, _ jQuery overwrites window. jQuery, and $ and jQuery both expire.
The advantage of this operation is that, whether the frameworks are mixed or multiple versions of jQuery coexist in a highly conflicting execution environment, due to the transfer mechanism provided by the noConflict method and the unoverwritten jQuery object returned by itself, it can completely resolve conflicts by means of variable ing.

Iv. jQuery. noConflict instance

1. Map $ referenced objects back to the original objects:

 

1 2 3

JQuery. noConflict (); JQuery ("div p"). hide (); // use jQuery $ ("Content"). style. display = "none"; // use the $ ()

2. Restore the alias $, create and execute a function, and use $ as the alias of jQuery in the function scope. In this function, the original $ object is invalid. This function is very effective for most plug-ins that do not depend on other libraries:

 

1 2 3 4 5 6 7

JQuery. noConflict (); (Function ($ ){ $ (Function (){ // Use $ as the jQuery alias code }); }) (JQuery ); ... // Other code of the database that uses $ as the alias

3. jQuery. noConflict () can be combined with the abbreviated ready to make the code more compact:

 

1 2 3 4

JQuery. noConflict () (function (){ // Use jQuery code }); ... // Code for alias using $ in other libraries

4. Create a new alias to use the jQuery object in the following Library:

 

1 2 3

Var j = jQuery. noConflict (); J ("div p"). hide (); // jQuery-based code $ ("Content"). style. display = "none"; // $ () code based on other libraries

5. Completely move jQuery to a new namespace:

 

1 2 3 4 5 6

Var dom = {}; Dom. query = jQuery. noConflict (true ); // Result: Dom. query ("div p"). hide (); // new jQuery code $ ("Content"). style. display = "none"; // code of another library $ () JQuery ("div> p"). hide (); // code of jQuery of another version

I hope this article will help you with jQuery programming.