Open In App

What is jQuery.noConflict ?

Improve
Improve
Like Article
Like
Save
Share
Report

In Jquery, the $ sign is just an alias for JQuery. It means $(“p”) and JQuery.(“p”), both are totally same. We can use either. This $ sign is used by many Javascript libraries as function names or variable names. At the time of development, it is obvious that we are going to use many libraries along with JQuery. There may be a chance that any other libraries are also using $ sign. In this case, when two frameworks are using the same $ sign, one might stop working.

To solve this problem, JQuery implemented the noConflict() method. The noConflict() method returns the control of $, so that other framework/libraries can use it.

Syntax:

$.noConflict();

Parameter: It does not accept any parameter.

Return Value: It returns a reference to jQuery.

Example 1: jQuery code to show the working of noConflict() method

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Using jquery library -->
    <script src=
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
</head>
 
<body>
    <p>para-1</p>
 
    <p>para-2</p>
 
    <p>para-3</p>
 
    <p>para-4</p>
 
    <p>para-5</p>
 
 
    <script>
        // Calling with $ sign
        console.log($("p").length)
 
        // Releasing the control of $
        $.noConflict();
 
        // Calling again with $ sign
        console.log($("p").length)
    </script>
</body>
 
</html>


Output: Here, you can see that after releasing the control of the $ sign, We can’t use the $ sign anymore. That’s why we received an error when we again called length property with $ sign. So basically, after calling the noConflict() method, we have to use jQuery instead of $ sign. And $ sign will be used by other libraries.

 

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- using jquery library -->
    <script src=
    </script>
</head>
 
<body>
  <p>para-1</p>
 
  <p>para-2</p>
 
  <p>para-3</p>
 
  <p>para-4</p>
 
  <p>para-5</p>
 
  <script>
      $.noConflict();
      console.log(jQuery("p").length);
      // Code that uses other library's $ can follow here.
  </script>
</body>
 
</html>


Output: Ok, Due to the presence of other libraries in our code, we can’t use $ sign for JQuery code, and we are very lazy, so we don’t want to write jQuery in every line. So why not, create our own alias for jQuery.

5

Create alias forjQuery: The noConflict() method returns a reference to jQuery, and we can store this in a variable for future use.

Example 3:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
   <!-- using jquery library -->
   <script src=
   </script>
</head>
 
<body>
  <p>para-1</p>
 
  <p>para-2</p>
 
  <p>para-3</p>
 
  <p>para-4</p>
 
  <p>para-5</p>
 
  <script>
      console.log($("p").length)
      let gk = $.noConflict();
      console.log(gk("p").length);
  </script>
</body>
 
</html>


Output:

5
5

Case: Rohan is doing his school project using jQuery, and he has written around 100 lines of jQuery code. He is about to complete his project, but then he thought to add some more features to his project. So he added some javascript libraries which are also using $ sign, so he uses the noConflict() method. But as he added the noconflict() method, he realized that he has to replace all previous $ sign with jQuery. 

No… we don’t need to change every $ sign with jQuery.

Using $ sign inside a function: If we have a function where $ sign is used, we can pass $ sign as a parameter to that function. This will allows us to use the $ sign inside that function but still, we have to use jQuery outside the function.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- using jquery library -->
    <script src=
    </script>
</head>
 
<body>
  <p>para-1</p>
 
  <p>para-2</p>
 
  <p>para-3</p>
 
  <p>para-4</p>
 
  <p>para-5</p>
 
  <script>
    $.noConflict();
    jQuery(document).ready(function ($) {
      console.log($("p").length);
    });
  </script>
</body>
 
</html>


Output:

5


Last Updated : 15 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads