Méthode noConflict() de jQuery

Comment utiliser jQuery et d'autres frameworks sur une page en même temps ?

jQuery et d'autres frameworks JavaScript

Comme vous avez déjà compris, jQuery utilise le symbole $ comme abréviation de jQuery.

Que faire si d'autres frameworks JavaScript utilisent également le symbole $ comme raccourci ?

D'autres frameworks JavaScript incluent : MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, Google Closure, Ember, Batman et Ext JS.

Certaines autres frameworks JavaScript utilisent également le symbole $ comme raccourci (comme jQuery), si vous utilisez deux frameworks différents qui utilisent le même raccourci, cela pourrait entraîner l'arrêt du script.

L'équipe de jQuery a pris en compte ce problème et a mis en œuvre la méthode noConflict().

Méthode noConflict() de jQuery

La méthode noConflict() libère le contrôle de l'identifier $, ce qui permet à d'autres scripts de l'utiliser.

Exemple

Bien sûr, vous pouvez toujours utiliser le nom complet pour remplacer le raccourci et utiliser jQuery :

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery est toujours en cours d'exécution !");
  );
);

Essayez-le vous-même

Exemple

Vous pouvez également créer vos propres raccourcis. La méthode noConflict() renvoie une référence à jQuery, que vous pouvez stocker dans une variable pour l'utiliser plus tard. Voir cet exemple :

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery est toujours en cours d'exécution !");
  );
);

Essayez-le vous-même

Exemple

Si votre bloc de code jQuery utilise le raccourci $ et que vous ne souhaitez pas changer ce raccourci, vous pouvez transmettre le symbole $ en tant que variable à la méthode ready. De cette manière, vous pouvez utiliser le symbole $ à l'intérieur de la fonction - et à l'extérieur, vous devrez toujours utiliser "jQuery" :

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery est toujours en cours d'exécution !");
  );
);

Essayez-le vous-même

Manuel de référence principal de jQuery

Pour une vue d'ensemble complète des méthodes centrales de jQuery, veuillez visiter notre Manuel de référence principal de jQuery.