JQuery: My "$" is the name conflict of Jquery's $:

A friend asked me to help him solve the compatibility problem of jquery special effects on the page a few days ago. I think it is easy to ignore and important. I would like to record it here.

Three special effects are used on the page provided by a friend, two of which can be displayed, and the third has no effect. By viewing the referenced js file, I found that not only jquery. js is introduced in the page, but a file named prototype. js is also introduced. This prototype. js has never been heard of before. It was specially searched on Baidu. It was originally a js class library with similar functions and powerful jquery.

After a little troubleshooting, I found that the two effects that can be displayed reference jquery, and those that are not displayed reference prototype. js. After a brief analysis, we finally found the key to the error: $ and prototype in jquery. $ conflicts in js. Both class libraries are called using the $ symbol. However, if you write this Code directly, you will not know who the $ belongs, which class library does this call to display special effects.

Since the root cause of the problem is found, the problem will be well solved.

Method 1: In jquery, there is such a piece of code:

// Expose jQuery to the global object

Window. jQuery = window. $ = jQuery;

That is to say, we can use jQuery to replace the $ symbol in jquery. js for calling. The premise must be declared as follows:

JQuery =$;

Then, a new problem emerges. There are so many places on the page that $ is used. I should not only distinguish which $ belongs to jquery, but also replace these $ with the word jQuery. More seriously, if you want to add new jquery effects to the page, I also need to remind myself that jQuery should be used to call $, with a slight negligence, not only seeking for the desired effect, the modification is also a big workload task. It seems that this method does not work.

Isn't there a permanent way to clearly distinguish this $ "permission? Of course there are some solutions!

Method 2: Use jquery statement blocks for implementation:

First, let's take a look at the format of the jquery statement block:

(Function ($ ){
.....
$ ('# Msg'). show (); // In this statement block, $. is defined in jquery. js.

}) (JQuery)

In this way, when we call $ in jquery to implement special effect display, we only need to write this code in this statement block and how to call the $ symbol. In prototype. js, $ is written outside the statement block, and the $ symbol is also how to call the code. The two will not have any impact at all.

I hope this method can help others who encounter the same problem!

Appendix:

Refer:

$ Naming conflict of Jquery:

 

Links to prototype. js knowledge:

Prototype. js 1.4 developer Manual (highly recommended)

Details about prototype in js

Common prototype. js Functions