jquery initial loading method conflict

For front-end developers, jQuery has become an indispensable tool. I believe everyone has their own set of usage habits and methods. However, you may also encounter some problems at work. Today I will talk about how to solve jQuery initial loading method conflicts.

Problem Description

When using jQuery to build a website, we usually introduce the jQuery library file when the page is loaded and perform initial jQuery operations. However, in some cases, we will find that some components or plug-ins on the page cannot operate properly, and the console reports the following error:

Uncaught TypeError: $(...).methodName is not a function

This is because there is a conflict in the initialization method of the jQuery library file, resulting in the inability to call it correctly. A matter of method.

Solution

1. Use jQuery.noConflict()

jQuery.noConflict() is a method provided by jQuery that can be used to eliminate conflicts between two different versions of the jQuery library. We only need to introduce the first jQuery library into the page, then call the noConflict() method to assign it to a variable and reference the component, as follows:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
  $j('#example').datepicker();
});
</script>

This method is suitable for two jQuery scripts that need to be used at the same time. Calling situation, but it should be noted that if multiple components are referenced in different js files, the problem of using the noConflict() method multiple times may occur.

2. Self-executing functions

Using self-executing functions can isolate code in a separate scope, so that the code cannot affect other codes. By using a self-executing function, we can limit the methods in the jQuery library file to the scope of the function, for example:

(function($){
  $(document).ready(function(){
    $('#example').datepicker();
  });
})(jQuery);

This ensures that the $ in the jQuery library file only exists in the self-executing function, Will not conflict with other library files.

3. Use jQuery() instead of $()

In the jQuery library file, $() is a shortcut for jQuery, which is also the cause of conflict problems. In order to prevent conflicts, we can use jQuery() instead of $(), for example:

jQuery(document).ready(function(){
  jQuery('#example').datepicker();
});

This method can not only avoid conflict problems, but also make the code easier to read and understand.

Summary

When using jQuery to develop a website, we need to pay special attention to the conflict of its initialization methods. This problem can be effectively avoided by using jQuery.noConflict(), self-executing functions, or using jQuery() instead of $(). At the same time, during development, we should pay attention to improving the readability and maintainability of the code.

The above is the detailed content of jquery initial loading method conflict. For more information, please follow other related articles on the PHP Chinese website!