Solution jquery library and other libraries (such as prototype) conflict

Front-end development is easy to encounter scenes of conflict jQuery library and other libraries, such as libraries and prototype conflict.

In fact this conflict is because of the different third-party JS library scramble for control of the $ identifier caused.

Solution is to use jQuery.noConflict jQuery provided () method to control the release of $ identifier, so that other scripts can use the $ identifier without causing conflict.

More, jQuery.noConfilict () method returns a reference to jQuery, you can return to this reference stored in the variable, you can use this variable to call a method or an object jQuery library provides.

A page with multiple versions of jQuery conflict

<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true);</Script > 

< Script > 
( function ($) {
     // this case $-1.6.4 is the jQuery 
    $ ( ' # ' ); 
}) (jq164); 
</ Script > 
 
< Script > 
jq142 ( function ($) {
     // in this case $-1.4.2 is the jQuery 
    $ ( ' # ' ); 
}); 
</ Script >

jQuery library into lead to conflict after another library

1. Alternatively $ abbreviated by the fully qualified name is used jQuery jQuery

js, full name can not be called. the jQuery ( function () {






// Use the jQuery 
    the jQuery ( " P " ) .click ( function () { 
        Alert (the jQuery ( the this ) .text ()); 
    }); 
}); 
// where $ can no longer be written, in this case $ representatives prototype.js defined symbol $ 

$ ( " PP " ) .style.display =  ' none ' ;         // use the prototype 
</ Script >

2. Customize a shortcut (alias)

< Script type = "text / JavaScript" > 
var $ J = jQuery.noConflict ();   // custom a short shortcut 
$ J ( function () { // use the jQuery 
    $ J ( " P " ) .click ( function () { 
        Alert ($ J ( the this ) .text ()); 
    }); 
}); 

$ ( " PP " ) .style.display =  ' none ' ; // use the prototype 
</ Script >

3. The $ symbol as a function of the parameters passed to the interior

< Script type = "text / JavaScript" > 
jQuery.noConflict (); // the control symbol $ transferring to the prototype.js 
the jQuery (Document) .ready ( function ($) { 
    $ ( " P " ) .click ( function () { // continue to use the $ symbol 
        Alert ($ ( the this ) .text ()); 
    }); 
}); 
// or below 
the jQuery ( function ($) { // use the jQuery 
    $ ( " P " ) .click ( function () { // continue to use the $ symbol 
        Alert ($ ( the this).text() );
    });
});
</script>

< Script type = "text / JavaScript" > 
jQuery.noConflict (); // the control symbol $ transferring to the prototype.js 
( function ($) { // define anonymous functions and parameter set to $ 
    $ ( function () { // anonymous inner function $ are the jQuery 
        $ ( " P " ) .click ( function () { // continue $ method 
            Alert ($ ( the this ) .text ()); 
        }); 
    }); 
}) (the jQuery); // perform anonymous function arguments and pass the jQuery 

$ ( " PP " ) .style.display =  'none ' ; // use the prototype 
</ Script >

jQuery library into conflict triggered before other libraries

jQuery library before other library import, ownership of the $ default JavaScript library that go all the rearmost. You can use the [direct] jQuery jQuery to do some work.

At the same time, you can use the $ () method as a shortcut to other libraries, there is no need to call jQuery.noConflict () function.

<! - introducing the jQuery   -> 
< Script the src = "../../ scripts / jquery.js" type = "text / JavaScript" > </ Script > 
<! - the introduction of the prototype   -> 
< Script the src = "lib / the prototype.js" type = "text / JavaScript" > </ Script > 

< body > 
< P ID = "PP" > the Test-the prototype (to be hidden) </ P > 
< P > the Test-the jQuery ( You will be bound click event) </p>

<script type= "text / JavaScript" > 
the jQuery ( function () { // directly jQuery, not necessary to call "jQuery.noConflict ()" function of 
    the jQuery ( " P " ) .click ( function () {       
        Alert (the jQuery ( the this ). text ()); 
    }); 
}); 

$ ( " PP " ) .style.display =  ' none ' ; // use the prototype 
</ Script > 
</ body >

jQuery.noConflict () principle

The principle of this method will be able to know by looking at the source code.

var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

jQuery.extend({
    noConflict: function(deep) {
            if (window.$ === jQuery) {
                window.$ = _$;
            }
            if (deep && window.jQuery === jQuery) {
                window.jQuery = _jQuery;
            }
            return jQuery;
        }
});

First, when the jQuery load, access to current window.jQuery by _jQuery variables declared in advance, $ obtain the current window. $ _ By.

Then, jQuery.extend () mounted to the noConflict jQuery below. So we are calling jQuery.noConflict () such notes.

Then, when you call noConflict () made two judgments. Determining if the first control cross $ out; if the second determination at noConflict () parameter passing time to control cross jQuery out.

Finally, noConflict () returns the jQuery object, which receives a parameter, which parameter will have control over jQuery.

"I do not know in the end what the dedication, I just know I've been hard on yourself."

Solution jquery library and other libraries (such as prototype) conflict

Guess you like