How to resolve conflicts between jQuery and other libraries

Source: Internet
Author: User

(Note: by default, jQuery uses $ as its abbreviation)
If the jQuery class library conflicts with other class libraries, you can use the jQuerynoConflict () function to hand over the control of variable $ to other javaScipt libraries. See the following code snippet.
<Script type = "text/javascript" src = "../JS/JsCOM. js"> </script>
<Script type = "text/javascript" src = "../jQuery/jquery-1.3.2-vsdoc2.js"> </script>
Assume that the JsCOM. js library contains such a function.
Copy codeThe Code is as follows:
Function $ (objName ){
If (document. getElementById ){
Return eval ('document. getElementById ("'+ objName + '")')
}
Else {
Return eval ("document. all." + objName)
}

Everyone knows that jQuery also has such a function. In order not to cause conflicts, we hand over the control of jQuery variable $ to other javascript libraries.
Copy codeThe Code is as follows:
JQuery. noConflict (); // hand over control of variable $ to JsCOM. js
Var $ cr = jQuery ("# cr"); // still use the jQuery class library, just replace the original $ with jQuery.
Var JsCOM_cr = $ ("cr"); // use the JsCOM. js class library

Here, the jQuery () function can be used as the manufacturing factory of jQuery objects.
Pay attention to the following points:
1. when referencing a javascript class library, you must put jQuery reference at the end, just like above, JsCOM. js references are prior to jQuery references (I do not know the specific reason, but I do need to do so)
2. when jQuery () is used instead of $ (), jQuery is case sensitive, because javascript itself is case sensitive (it seems redundant, but I hope you will not make such mistakes)
Basically, according to the above
The method can solve the conflict between jQuery and other libraries!
If you think that the above method is not satisfactory, you need to use jQuery to replace $ to increase the workload for you to press the keyboard ..
In addition to the above, there is another option. If you want to ensure that jQuery does not conflict with other libraries, but want to customize a shortcut, you can perform the following operations;
Copy codeThe Code is as follows:
Var $ j = jQuery. noConflict (); // customize a shortcut
Var $ cr = $ j ("# cr"); // use the jQuery class library and customize shortcuts ---- $ j;
Var JsCOM_cr = $ ("cr"); // same as the previous code, the JsCOM. js class library is used.

If you want to continue using the original $ () without conflict with other class libraries, there are two solutions.
1:
Copy codeThe Code is as follows:
JQuery. noConflict (); // give control of variable $ to JsCOM. js
JQuery (function ($)
{
$ ("P"). click (function () // you can continue using the $ () method of the jquery class library within the function.
{
Alert ($ (this). text ());
})
})
Var JsCOM_cr = $ ("cr"); // outside the function, you can still use the $ () method of JsCOM. js.

Second:
Copy codeThe Code is as follows:
JQuery. noConflict (); // hand over the control permission of variable $ to another class library. When using the $ symbol of the jquery class library, use jQuery ("# id ");
(Function ($) {// defines an anonymous function and sets the parameter to $
$ (Function () {// $ inside the anonymous function is jQuery
$ ("Div"). click (function () {// continue to use the $ () method
Alert ($ (this). text ());
})
})
})
(JQuery); // use an anonymous function and pass the real parameter jQUery
Alert ($ ("cr"); // use the $ () function in the jsCOM. js class library.

The second method should be the best way to be compatible with the old code, and the modified Code is the least!
However, if it is a newly written jQuery code, I prefer to use the one I just mentioned (jQuery. noConflict () and then use jQuery ("# id)
If your page references the jQuery class library and then introduces other class libraries, you can directly use jQuery to do some work. At the same time, you can use the $ () method as a shortcut for other libraries. You do not need to call the jQuery. noConflict () function here. Please refer to the following code:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "../jQuery/jquery-1.3.2-vsdoc2.js"> </script>
<Script type = "text/javascript" src = "../JS/JsCOM. js"> </script>
JQuery (). ready (function () {// you do not need to call the jQuery. noConflict () function
Var $ cr = jQuery ("# cr ");
$ Cr. click (function (){
If ($ cr. is (": checked ")){
Alert ("thank you for your support! You can continue to operate ..");
}
})
})
Alert ($ ("cr"); // use the $ () function in the jsCOM. js class library.

Now, after reading the above methods to solve the conflict, You can reference jQuery in your project with confidence :)

Related Article

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.