Resolving jquery plug in conflicts

  • 2020-03-30 01:26:01
  • OfStack

Today I did an example, using jquery and jquery plug-in lightbox to make the image floating magnification effect, without any problems.

Then add a navigation bar js, the structure of the navigation js and image floating zoom js conflict,

Either only the navigation bar js is valid, or only the image floating js is valid.

The results of the Internet search, the solution is as follows

JQuery. Of noConflict ()

An overview of the
Running this function transfers control of the variable $to the library that first implemented it.

This helps ensure that jQuery does not conflict with $objects in other libraries.

After running this function, you can only access jQuery objects using jQuery variables. For example, where you want to use $("div p"), you must replace it with jQuery("div p").

Note: this function must be used after you import jQuery files and before you import another library that causes collisions. Of course, you should also do this before other conflicting libraries are used, unless jQuery is the last to be imported. The sample

Description:
Map the object referenced by $back to the original object.

JQuery code:
JQuery. Of noConflict ();
/ / using jQuery
JQuery (" div p "). Hide ();
// $() using other libraries
$(" content "). Style. The display = 'none';

Description:
Restore the alias $, and then create and execute a function that still USES $as an alias for jQuery in its scope. In this function, the original $object is invalid. This function works well for most plug-ins that do not depend on other libraries.

JQuery code:
JQuery. Of noConflict ();
(function ($) {
  $(function () {
      // the code that USES $as the jQuery alias
  });
}) (jQuery);
// code description of other libraries with $as alias:
Create a new alias to use the jQuery object in the following library.

JQuery code:
Var j = jQuery of noConflict ();
// jquery-based code
J (" div "p) hide ();
// $() code based on other libraries
$(" content "). Style. The display = 'none';


JQuery. Of noConflict ();
(function ($) {
  $(function () {
      // code that USES $as jQuery alias   I'll just put the navigation js code in the middle here
  });
}) (jQuery);
// other code for libraries that use $as an alias


Related articles: