Here I am going to tell you how you can avoid namespace collision on the DOM (Document Object Model) page. You can load jQuery either via CDN (Content Delivery Network) link or by downloading the jQuery from the website and put it into your application and include in your web page.

So whatever method you follow to use the jQuery library (CDN or local), this introduces the $, as a global variable, an alias for the jQuery function and namespace.

You use the following code to check when the document is ready and execute the function.

$(document).ready(function() { ... });

You can also use the shorthand version of the same code snippets given above as below:

$(function() { ... });

Therefore the DOM is detected to be “ready” by any of the above code snippets.

Let’s say you have a div with id value msg on your page and you are writing text to this div using the following jQuery code:

$(document).ready(function() {
	$('#msg').text('Hello, World!');
});

In the above code snippets, once the DOM is ready the callback function gets executed. Inside this function, it first selects the element with id value msg and set the text Hello, World! to the element using text() function.

Till now I have given you a basic idea of how to load jQuery library and how to use it. So let’s look at the $ variable.

Probably you are thinking that you are using only jQuery library in your application and why do you need to care about namespace. Yes, you should not. But when you want to use multiple JavaScript (JS) framework then you need to think about it. Or even when you want to use multiple versions of jQuery libraries to meet your requirements.

If you are using multiple JS frameworks then if other framework also uses the same variable ($) then conflict occurs and here is how you should avoid conflicts. To release $ for use with other libraries you can use the following line of code:

jQuery.noConflict();

Once you call the above function $ is no longer an alias for jQuery and you can use jQuery to access the jQuery functions. For example, you can set the text to the element with id value msg as follows:

jQuery('#msg').text('Hello, World!');

If you want to use different variable instead jQuery then you can assign noConflict() to a variable:

var j = jQuery.noConflict();

Now you can set the text to the element using the following code:

j('#msg').text('Hello, World!');

You can also prevent other libraries from interfering with jQuery by wrapping the jQuery code into immediate function expression and pass jQuery as an argument.

(function($) {
	$(document).ready(function() {
		$('#msg').text('Hello, World!');
	});
})(jQuery);

In the above function $ is an alias for jQuery only. Probably this kind of code you will find in WordPress Plugins or Widgets where jQuery is used.

The above code can be written as shown below:

jQuery(function( $ ) {
	$('#msg').text('Hello, World!');
});

Let’s consider the below example,

var $j = jQuery.noConflict(true)

This results in neither $ nor jQuery referring to jQuery, the only variable is $j which you have to use. This is useful when you want to load multiple versions of jQuery on the same page. You can read example on using multiple versions of jQuery on web page.

That’s all about how to avoid namespace collisions while using jQuery in web page.