Comment utiliser $ dans jQuery pour éviter les conflits avec d'autres bibliothèques_jquery

Dans Jquery, $ est un alias de JQuery. Tous les endroits où $ est utilisé peuvent également être remplacés par JQuery. Par exemple, $('#msg') est équivalent à JQuery('#msg'). Cependant, lorsque nous introduisons plusieurs bibliothèques js et que le symbole $ est également défini dans une autre bibliothèque js, il y aura alors un conflit lorsque nous utiliserons le symbole $. Ce qui suit est un exemple d'introduction de deux fichiers de bibliothèque jquery.js et prototype.js.
Le premier cas : jquery.js est introduit après prototype.js, tel que :

adf3c3edb2b5b3fb3dba6da0f754db51 c07feab95c3a7303446b1b85f12feab6 Dans ce cas, nous écrivons ce qui suit dans notre code js :

$('#msg').hide(); 

$ représente toujours le symbole $ défini dans jquery, qui peut également s'écrire sous la forme JQuery('#msg').hide(); si vous souhaitez utiliser le $ défini dans prototype.js, nous le présenterons plus tard.

Le deuxième cas : jquery.js est introduit avant prototype.js, tel que :

<script src="jquery.js" type="text/javascript"/>
 <script src="prototype.js" type="text/javascript"/> 

Dans ce cas, nous écrivons ce qui suit dans notre code js :

$('#msg').hide(); 

$ représente le symbole $ défini dans prototype.js à ce moment-là. Si nous voulons appeler la fonction de sélection d'usine dans jquery.js, nous ne pouvons utiliser que le nom complet JQuery('#msg').hide().

Ce qui suit présentera d'abord comment utiliser correctement le symbole $ défini dans différentes bibliothèques js dans le premier cas d'introduction des fichiers de bibliothèque js.

1. Utilisez JQuery.noConflict()
La fonction de cette méthode est de permettre à Jquery de renoncer à la propriété de $ et de rendre le contrôle de $ à prototype.js. Parce que jquery.js a été introduit plus tard, c'est jquery qui a finalement le contrôle de $. Sa valeur de retour est JQuery. Après avoir appelé cette méthode dans le code, nous ne pouvons pas utiliser $ pour appeler la méthode jquery. Pour le moment, $ représente le $ défini dans la bibliothèque prototype.js. Comme suit :

JQuery.noConflict();//Vous ne pouvez plus écrire $('#msg').hide() ici. Le $ représente actuellement le symbole $ défini dans prototype.js. JQuey('#msg').hide();

A partir de là, $ représente le $ défini dans prototype.js. Le $ dans jquery.js ne peut plus être utilisé. Vous ne pouvez utiliser que le nom complet de $ dans jquery.js, JQuery.
Après avoir défini jQuery en mode sans conflit, vous pouvez définir un alias pour $ :

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

Si vous souhaitez continuer à utiliser le $ de jQuery, vous devez inclure le code dans une fonction auto-exécutable. C'est également une pratique courante chez certains auteurs de plug-ins jQuery, car ces auteurs ne savent pas si d'autres bibliothèques le sont. référencé dans le projet :

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>

2. Personnaliser l'alias JQuery Si vous trouvez difficile d'utiliser uniquement le nom complet de JQuery après avoir utilisé la méthode JQuery.noConflict() dans la première méthode, nous pouvons également redéfinir l'alias de JQuery. Comme suit :

var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 

Désormais, $ représente le $ défini dans prototype.js. Le $ dans jquey.js ne peut plus être utilisé. Vous ne pouvez plus utiliser $j que comme alias pour JQuery dans jquey.js.

3. Utilisez des blocs d'instructions, utilisez toujours le $ défini dans jquery.js dans le bloc d'instructions, comme suit :

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 

Ou utilisez le bloc d'instructions suivant :

(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) 

Si dans le deuxième cas d'introduction de l'ordre des fichiers de la bibliothèque js, comment utiliser $ dans jquery.js, nous pouvons toujours utiliser la méthode de bloc d'instructions présentée ci-dessus, telle que :

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 

(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

Code

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> (function($){ ..... $('#msg').hide();
//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>

Cette méthode d'utilisation des blocs d'instructions est très utile. Lorsque nous écrivons nous-mêmes des plug-ins jquery, nous devons utiliser cette méthode d'écriture, car nous ne savons pas comment introduire séquentiellement diverses bibliothèques js au cours du processus de travail spécifique, et ce genre de déclaration La méthode d'écriture par blocs peut protéger les conflits.