jquery resolves $ symbolic naming conflict _jquery

Source: Internet
Author: User

A few days ago, my friend asked me to help him solve a page of the jquery effect compatibility problem, think this is a very easy to ignore also very important point, especially in this record.

Friends gave the page to use three special effects, of which two effects can be displayed, the third has no effect. By looking at the referenced JS file, I found that the page not only introduced Jquery.js, but also introduced a file called Prototype.js. This prototype.js has not heard before, deliberately searched Baidu, originally it is also a JS class library, functions and jquery similar, but very powerful.

With a little bit of troubleshooting, I found that two of the effects that could be shown were referring to jquery, and the effect that wasn't shown was the prototype.js. A little analysis, finally found the key to the error: the $ in jquery and Prototype.js in the $ conflict, two class libraries are called by the $ symbol, but if you write this directly will not know who this $ belongs to, which class library to call the method to achieve the display of the effect.

Now that we have found the root of the problem, the problem is solved.

Method one: In jquery, there is a piece of code:

Expose jquery to the global object

window.jquery = window.$ = jquery;

In other words, we can use jquery instead of the $ symbol in Jquery.js to invoke, if you must declare:

JQuery = $;

So, the new problem comes up again. There are so many places in the page that use $, not only do I have to distinguish which $ is a jquery, but also replace these $ with the word jquery, and, more seriously, if you want to add new jquery effects to the page, I have to remind myself that when you call $, you use jquery instead , a little negligence, not only out of the desired effect, but also to modify the task of a large workload. It seems that this method is not workable.

Isn't there a way to make a clear distinction between the "right of ownership" of this $? Of course there is!

Method Two: Use jquery statement block to implement:

First, look at the format of the jquery statement block:

(function ($) { 
 .. $ (' #msg '). Show ()//is used in this statement block for the $.} defined in Jquery.js 


So, when we call the $ implementation effect display in jquery, just write this code in the statement block, and how to call the $ symbol. And the $ in Prototype.js is written in the statement block, the $ symbol is also how to call how to call, the two do not have any effect.

The above is the entire content of this article, I hope this method can also bring help to other people who have the same problem, and hope that we support the cloud-dwelling community a lot.

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.