NoConflict in jQuery solves conflicts

The noConflict method can handle some conflict issues of tag usage (this is a practical use I think currently)

The jQuery. noConflict () function is used to give the jQuery library control over variable $ (and variable jQuery.

In general, in the jQuery library, the variable $ is the alias of the variable jQuery, and they are equivalent, such as jQuery ("p") and $ ("p ") is equivalent. Because the variable $ has only one character and has distinctive features, we are more accustomed to using $ to operate the jQuery library.

However, other JS libraries may also use the variable $ for operations, such as the Prototype library. At this time, the two databases may conflict with each other due to the control of variable $.

At this point, you can use this function to give the jQuery library control over the variable $ and hand over the variable to the previous JS library that implements it. Then we can only use the variable jQuery to operate the jQuery library.

In addition, this function allows you to control the variable $ and variable jQuery at the same time, so that multiple different versions of jQuery libraries can coexist (see the following example for details ).

This function is a global jQuery object.

$. NoConflict () can hand over control of $. If it is $. noConflict (true), jQuery and $ will disappear, and the value is assigned again, for example:

The code is as follows:	Copy code
Var $ = window. $. noConflict (true), jQuery = $

In this way, we can avoid conflict with the jQuery version that needs to be used locally.

JQuery noConflict () method

The noConflict () method releases the control of $ identifier, so that other scripts can use it.
Instance
Of course, you can still use jQuery by replacing the abbreviation with the full name:

 

The code is as follows:	Copy code
$. NoConflict (); JQuery (document). ready (function (){ JQuery ("button"). click (function (){ JQuery ("p"). text ("jQuery is still running! "); }); });

Instance
You can also create your own shorthand. NoConflict () returns a reference to jQuery. You can save it to a variable for later use. See this example:

 

The code is as follows:	Copy code
Var jq = $. noConflict (); Jq (document). ready (function (){ Jq ("button"). click (function (){ Jq ("p"). text ("jQuery is still running! "); }); });

Instance
If your jQuery code block uses the $ abbreviation and you do not want to change this shortcut, you can pass the $ symbol as a variable to the ready method. In this way, you can use the $ symbol in the function. In addition to the function, you still have to use "jQuery ":

 

The code is as follows:	Copy code
$. NoConflict (); JQuery (document). ready (function ($ ){ $ ("Button"). click (function (){ $ ("P"). text ("jQuery is still running! "); }); });

Load two versions of jQuery (this is not recommended). In the second version, call $. noConflict (true) to return the global jQuery variable to the first version.

The code is as follows:	Copy code
<Script type = "text/javascript" src = "other_lib.js"> </script> <Script type = "text/javascript" src = "jquery. js"> </script> <Script type = "text/javascript"> $. NoConflict (); // Code that uses other library's $ can follow here. </Script>

Here is a technique that is particularly useful for conflict resolution .. The ready () method can be used to get an alias for the jQuery object, so that it can be passed in. the internal use of the callback function of ready () $ Instead of worrying about conflicts (Yuen Wharf note: cause :. ready () is a closure ):

The code is as follows:	Copy code
<Script type = "text/javascript" src = "other_lib.js"> </script> <Script type = "text/javascript" src = "jquery. js"> </script> <Script type = "text/javascript"> $. NoConflict (); JQuery (document). ready (function ($ ){ // Code that uses jQuery's $ can follow here. }); // Code that uses other library's $ can follow here. </Script>

If necessary, we can release the jQuery name and pass true as a parameter to this method. This is not necessary. If we must do this (for example, if we use multiple jQuery libraries on the same page ), we must consider that most plug-ins rely on jQuery variables. In this case, the plug-in may not work properly.

Example:

Example: map $ referenced objects back to the original objects.

 

The code is as follows:	Copy code
JQuery. noConflict (); // Do something with jQuery JQuery ("div p"). hide (); // Do something with another library's $ () $ ("Content"). style. display = 'none ';

Example: 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.

 

The code is as follows:	Copy code
JQuery. noConflict (); (Function ($ ){ $ (Function (){ // More code using $ as alias to jQuery }); }) (JQuery ); // Other code using $ as an alias to the other library

Example: You can use jQuery. noConflict () ready to constrain a small piece of code.

The code is as follows:	Copy code
Var j = jQuery. noConflict (); // Do something with jQuery J ("div p"). hide (); // Do something with another library's $ () $ ("Content"). style. display = 'none ';

Example: create a new alias to use the jQuery object in the following Library.

The code is as follows:

Copy code

Var dom = {}; Dom. query = jQuery. noConflict (true ); Result: // Do something with the new jQuery Dom. query ("div p"). hide (); // Do something with another library's $ () $ ("Content"). style. display = 'none '; // Do something with another version of jQuery JQuery ("div> p"). hide (); Example: Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery. <! DOCTYPE html> <Html> <Head> <Script src = "http://code.jquery.com/jquery-latest.js"> </script> </Head> <Body>   <Div id = "log"> <H3> Before $. noConflict (true) </Div> <Script src = "http://code.jquery.com/jquery-1.6.2.js"> </script>   <Script> Var $ log = $ ("# log ");   $ Log. append ("2nd loaded jQuery version ($):" + $. fn. jquery + "<br> ");   /* Restore globally scoped jQuery variables to the first version loaded (The newer version) */ Jq162 = jQuery. noConflict (true );   $ Log. append ("$ Log. append ("1st loaded jQuery version ($):" + $. fn. jquery + "<br> "); $ Log. append ("2nd loaded jQuery version (jq162):" + jq162.fn. jquery + "<br> "); </Script>   </Body> </Html>