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 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(). Méthode
jQuery noConflict() La méthode
noConflict() libère le contrôle de l'identifiant $ afin que d'autres scripts puissent l'utiliser.
Bien sûr, vous pouvez toujours remplacer l'abréviation par le nom complet en utilisant 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(){ jQuery("button").click(function(){ jQuery("p").text("恭喜发财!"); }); }); </script> </head> <body> <p>我要变身了!</p> <button>点我有惊喜哦</button> </body> </html>
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. Jetez un œil à cet exemple :
<!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("哪来这么多惊喜,好好学习了!"); }); }); </script> </head> <body> <p>我要变身了!</p> <button>点我有惊喜哦</button> </body> </html>
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>