JQuery's $naming conflicts are resolved in detail

In Jquery, $is an alias for Jquery, and all USES of $can be replaced with Jquery, such as $('# MSG ') is the same as Jquery ('# MSG '). However, when we introduce multiple js libraries and define a $sign in another js library, we run into a conflict when we use the $sign. Here is an example of introducing two library files, jquery. Js and prototype.js.

First case: jquery. Js is introduced after prototype.js, such as:
< Script SRC = "prototype. Js" type = "text/javascript / >"
< Script SRC = "jquery. Js" type = "text/javascript / >"

In this case, we write the following in our js code:

$(' # MSG). Hide ();

$always represents the $symbol defined in jquery, which can also be written as jquery ('# MSG ').hide(). If you want to use the $defined in prototype.js, we'll cover that later.

Second case: jquery. Js is introduced before prototype.js, such as:
< Script SRC = "jquery. Js" type = "text/javascript / >"
< Script SRC = "prototype. Js" type = "text/javascript / >"

In this case, we write the following in our js code:

$(' # MSG). Hide ();

If we want to call the factory selection function in jquery.js, we can only use the full name jquery ('# MSG ').hide().

Here's how to correctly use the $symbol defined in different js libraries in the first case where the js library file order is introduced.

1. Use JQuery. NoConflict ()
What this method does is make Jquery give up ownership of $and return control of $to prototype.js, because Jquery. Its return value is JQuery. When this method is called in our code, we cannot call jquery methods with $, which represents the $defined in the prototype.js library. As follows:

JQuery. Of noConflict ();

// this cannot be written as $('# MSG ').hide(), which represents the $symbol defined in prototype.js.
JQuey (' # MSG). Hide ();

Since then, $represents the $defined in prototype.js. The $in jquery.

Two. Custom JQuery alias
We can also redefine aliases for JQuery if we find it troublesome to use the full name of JQuery after using the jquery.noconflict () method in the first method. As follows:

Var $j = JQuery of noConflict ();
$j (' # MSG) hide (); // here $j stands for JQuery
Since then, $represents the $defined in prototype.js, and the $in jquey.js can no longer be used, so $j can only be used as the alias of JQuery in jquey.js.

Use the statement block. The $defined in jquery. Js is still used in the statement block, as follows:
JQuery. Of noConflict ();
JQuery (document). Ready (function ($) {
$(' # MSG). Hide (); // at this point the $used in the method for the entire ready event is the $defined in jquery.js.
});

Or use the following statement block:

(function ($) {
.
$(' # MSG). Hide (); // at this point, all the $defined in jquery.js is used in this statement block.
}) (JQuery)

If we want to use the $in jquery.js in the second case where the js library file order is introduced, we can still use the method of statement block described above, such as:

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 
(function($){ 
..... 
$('#msg').hide();//At this point, all the $defined in jquery.js is used in this statement block.
})(JQuery) 
</script>

This method of using statement blocks is very useful and should be used when writing our own jquery plug-ins, because we do not know exactly how the various js libraries are introduced in the order in which they are written, but it can be used to block out conflicts.

(function ($) {}) (jQuery)

Function (){})() creates an anonymous method and executes it immediately (function(){}).
This creates a scope to ensure that internal variables, such as $jQuery, are not in conflict with external variables.

2 (function ($) {}) (jQuery) the writing main role is to ensure the jQuery does not conflict with other libraries or variable first is to ensure that the jQuery variable name did not conflict with the external (jQuery internal $with jQuery is the same thing, there are two names of reason is the fear of $have conflicts with other variable names a small percentage of the jQuery conflict with other variables) and incoming anonymous objects, The anonymous object names the parameter $(which is the same as jquery internally) and you are free to write your plug-in in (function($){})(jquery) without having to worry about whether there is a conflict with the external variable