Solutions to conflicts between jquery and other libraries

Source: Internet
Author: User

Original source: http://www.jb51.net/article/24014.htm

In the jquery library, almost all plugins are limited to its namespace. Global objects are well stored in the jquery namespace, so when you use jquery with other JavaScript class libraries, it does not cause conflicts.

(Note: By default, jquery uses $ as its own abbreviation)
If the jquery class library conflicts with other class libraries, you can use the Jquerynoconflict () function to transfer control of the variable $ to other Javascipt libraries. Look at the little snippet code below.
<script type= "Text/javascript" src= ". /js/jscom.js "></script>
<script type= "Text/javascript" src= ". /jquery/jquery-1.3.2-vsdoc2.js "></script>
Suppose that there is such a function in the Jscom.js library

 1  function  2  if   (document.getElementById) {  return  eval (' document.getElementById ("' + objname + ') ' 4  }  5  else   { 6  return  eval ("document.all." +  objname)  7 } 

We all know that jquery is also a function like this, in order not to cause conflict, we will be the jquery variable $ control over to other JavaScript libraries

1 //  2var//3var//

Here you can use the jquery () function as a manufacturing facility for jquery objects.
Here are a few points to note  
1. When referencing the JavaScript class library, be sure to put the jquery reference on the last side, just as above, the Jscom.js reference is in front of the jquery reference (for specific reasons I don't know, but that's really necessary)
2. In particular, when jquery () replaces $ (), jquery is case-sensitive because JavaScript itself is case-sensitive (as if this is a bit redundant, but I hope you don't make that mistake)
Basically,
you can solve the conflict between jquery and other libraries based on the above method!
If you feel uncomfortable with the way above, and each time you have to play jquery instead of $ to increase the amount of work you hit the keyboard, then look.
In addition to the above, there is another option. If you want to make sure that jquery does not conflict with other libraries, but you want to customize a shortcut, you can do the following.

1 var //  2var//3var//

If you have other requirements, you want to continue to use the original $ (), but also need to do not conflict with other class libraries, there are two ways to resolve
One

JQuery ( function($) {$ ("P"). Click (function//{   Alert ($ (thisvar//

Second:

Jquery.noconflict ();//when handing over the control of a variable $ to another class library, use jquery ("#id") when using the $ symbol of the jquery class library;(function($) {//define an anonymous function and set the formal parameter to $$(function() {//inside the anonymous function, $ all is jquery$ ("div"). Click (function() {//continue using the $ () methodAlert ($ ( This). text ()); })}) (JQuery); //using anonymous functions and passing arguments to jqueryAlert ($ ("Cr"));//using 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!  
But if it's a new jquery code, I prefer to use the first one (Jquery.noconflict (), and then use jquery ("#id").
If your page is referring to the jquery class library and then introducing another class library, then we can use jquery directly to do some work, and you can use the $ () method as a shortcut to other libraries. There is no need to call the Jquery.noconflict () function, see the code below

<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 () {//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 with the operation: ");
}
})
})
Alert ($ ("Cr")); Using the $ () function in the Jscom.js class library

Well, look at the various ways to resolve the conflict above, you can rest assured that jquery is referenced in your project:)

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.