Solve jquery plug-in conflicts _ javascript tips-js tutorial

This article mainly introduces how to solve the jquery plug-in conflict. If you need a friend, please refer to it. I hope to help you with the following example, the jquery and jquery plug-ins lightbox are used for image floating amplification, so there is no problem.

Then we added a navigation bar js, And the js of the structure navigation conflicts with the js of floating and magnified images,

Either only the js in the navigation bar is valid, or only the js with floating images is valid.

The results are searched online. The solutions are as follows:

JQuery. noConflict ()

Overview
Run this function to assign control of variable $ to the first database to implement 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 $ ("p"), you must replace it with jQuery ("p ").

'''Note: ''' this function must be used after you import the jQuery file and before you import another library that causes conflict. Of course, it should also be before other conflicting libraries are used, unless jQuery is the last imported. Example

Description:
Maps $ referenced objects back to the original objects.

JQuery code:
JQuery. noConflict ();
// Use jQuery
JQuery ("p"). hide ();
// Use $ () for other libraries ()
$ ("Content"). style. display = 'none ';

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

JQuery code:
JQuery. noConflict ();
(Function ($ ){
$ (Function (){
// Use $ as the jQuery alias code
});
}) (JQuery );
// Other code descriptions for libraries that use $ as an alias:
Create a new alias to use the jQuery object in the following library.

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

JQuery. noConflict ();
(Function ($ ){
$ (Function (){
// Use $ as the jQuery alias code. I can write the js Code of the navigation in the middle.
});
}) (JQuery );
// Other code of the database that uses $ as the alias