Solve the problem of dollar sign naming conflict in jquery

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: < < / span> Script SRC = "prototype.js" type = "text/javascript" />
< < / span> 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: < < / span> Script SRC = "jquery.js" type = "text/javascript" />
< < / span> 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: the 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 of the entire ready event is the $.} defined in jquery.js); Or use the following statement block:
(function($){$(' # MSG ').hide(); // at this point in the statement block are used in jquery.js defined in $.})(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:
< < / span> Script SRC = "jquery.js" type = "text/javascript" />
< < / span> Script SRC = "prototype.js" type = "text/javascript" />
< < / span> Script type = "text/javascript" >
(function($){$(' # MSG ').hide(); // at this point in the statement block are used in jquery.js defined in $.})(jquery)
< / < / span> 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.

Ps: the meaning of special characters in jquery:
Id # instructions
. Indicate the class
* all
To choose more
Space offspring
> The child
Brother ~
+ the next
: sub (multi-function)
() function of the filter and search