jQuery - méthode 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 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>

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(){ jQuery("button").click(function(){ jQuery("p").text("恭喜发财！"); }); }); </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]