jQuery - méthode noConflict()

jQuery utilise le symbole $ comme raccourci pour jQuery.

Et si d'autres frameworks JavaScript utilisaient également le symbole $ comme raccourci ?

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

Certains de ces frameworks utilisent également le symbole $ comme raccourci (tout comme jQuery). Si vous utilisez deux frameworks différents qui utilisent le même symbole raccourci, cela peut entraîner l'arrêt du script.

L'équipe jQuery a pris en compte ce problème et a implémenté la méthode noConflict().

Le rôle de noConflict()

noConflict() n'existe que dans un seul but : il permet de charger plusieurs instances jQuery sur la même page, notamment Différentes versions de jQuery. Vous vous demandez peut-être pourquoi avez-vous besoin de charger/utiliser plusieurs versions différentes d'objets jQuery sur une seule page ? De manière générale, il existe deux situations. Dans le premier cas, votre code métier utilise la dernière version de la bibliothèque jQuery et le plug-in tiers que vous choisissez s'appuie sur une version antérieure de la bibliothèque jQuery ; dans le second cas, vous gérez un système qui dispose déjà de cette version. business Pour diverses raisons, le code fait référence à une ancienne version de la bibliothèque jQuery et votre module nouvellement développé utilise d'autres versions de la bibliothèque jQuery. Dans les deux cas, vous devez faire face au problème des conflits objet/méthode jQuery. Heureusement, jQuery.noConflict() vous aide à résoudre ce problème.

Méthode jQuery noConflict() La méthode

noConflict() libère le contrôle de l'identifiant $ afin que d'autres scripts puissent l'utiliser.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery在工作!");
      });
    });
</script>
</head>
<body>
    <p>看我的变化</p>
    <button>点我</button>
</body>
</html>

Utilisez jQuery en remplaçant l'abréviation par le nom complet.

Vous pouvez créer votre propre abréviation :

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

Si votre bloc de code jQuery utilise le raccourci $ et que vous ne souhaitez pas modifier ce raccourci, vous pouvez transmettre le symbole $ en tant que variable à la méthode ready. De cette façon, vous pouvez utiliser le symbole $ à l'intérieur de la fonction - mais en dehors de la fonction, vous devez toujours utiliser "jQuery" :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $.noConflict();
    jQuery(document).ready(function($){
      $("button").click(function(){
        $("p").text("这是覆盖的文字");
      });
    });
</script>
</head>
<body>
    <p>这是一段文字</p>
    <button>点击显示</button>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-size":"30px"}); }); }); </script> </head> <body> <p>查看背景颜色变化</p> <button>点击</button> </body> </html>

soumettre Réinitialiser le code

Opération automatique

jQuery - méthode noConflict()

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]