Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Introduction to jQuery Hello, jQuery! The jQuery Object

Vic Mercier
Vic Mercier
3,276 Points
Posted by Vic Mercier
Vic Mercier
3,276 Points

A litle bit confusing about the noConflict method.

Fisrt question:Let's say I have linked my two files (one for the jQuery and one for an other library using $()), could I put all the code of these two libraries in the same JavaScript file?

Second question:If I do that : //In my Javacript file //jQuery code jQuery.noConflict(); $(this).text("clicked").fadeOut(400); //Code of the other library that I didn't learn Let's say the dollar sign is there

//If the two libraries are in the same file and I've used the .noConflict method, will I get some troubles?

2 Answers

Eric Butler
Eric Butler
33,512 Points

Hi Vic, Not totally sure I understand your question, but as you can see in jQuery's official documentation about the noConflict method, you can definitely include jQuery code and another library's code in the same .js file. You'd obviously first include each library's core code in their own separate files, such as:

<script src="js/jquery.min.js"></script>
<script src="js/other-library.min.js"></script>
<script src="js/my-custom-js.js"></script>

...just because it's an important idea to keep third-party code (which you don't want to edit) separate from your custom code (which you will edit).

Then, you can either: add your jQuery, then call $.noConflict(); and then start using the dollar sign to reference the other library's code -- or (better) you can encapsulate the dollar-sign within a jQuery function and not have to worry about the dollar-sign conflicting at all. Here's how you'd do that:

// File: /js/my-custom-js.js

// put whatever non-jQuery JavaScript you want here...

jQuery(document).ready(function( $ ){
  // Putting the dollar-sign as an argument
  // to this function encapsulates the dollar-sign
  // into this local variable scope. As a result,
  // all of your jQuery stuff can go in here
  // using the dollar sign with no worries
  // about conflicts. Such as:
  $('.my-class').fadeIn(1000);
}); // end ready function and jQuery block

// put whatever non-jQuery JavaScript you want here...

Hope that makes sense and helps you!

Vic Mercier
Vic Mercier
3,276 Points
Vic Mercier
Vic Mercier
3,276 Points

Where did you learn that?

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

  1. If I understand you correctly, then sure. However, I wouldn't recommend it unless you truly some great benefit from doing such.

  2. As long as $.noConflict() is used after your libraries, it will give control of the dollar sign to the other library. However, I'm not sure how this will work if you combine the libraries in one file. I assume if you put the code of the non-jQuery library at the top (before the jQuery) code begins, then there should be no problem as long as you call $.noConflict() at the very end of your jquery file, or in your main script file that comes after your jQuery file. When you consider that jQuery is nothing but a constructor function inside its file, then this seems plausible (though still unnecessary in my opinion).

The documentation on .noConflict() may help: https://api.jquery.com/jquery.noconflict/