Méthode jQuery noConflict()


Méthode jQuery - noConflict()


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


jQuery et autres frameworks JavaScript

Comme vous le savez déjà, jQuery utilise le signe $ comme abréviation de 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().


Méthode jQuery noConflict()

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

Bien sûr, vous pouvez toujours utiliser jQuery en remplaçant l'abréviation par le nom complet :

Instance

<!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>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour voir l'exemple en ligne

Vous pouvez également créer votre propre abréviation. noConflict() renvoie une référence à jQuery que vous pouvez stocker dans une variable pour une utilisation ultérieure. Veuillez consulter cet exemple :

Instance

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

<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher le instance en ligne

Si votre bloc de code jQuery utilise l'abréviation $ 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" :

Instance

<!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("jQuery 仍然在工作!");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<button>点我</button>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne