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

Source: Internet
Author: User

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!



$ 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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.