Deux solutions aux conflits de prototypes jQuery (avec téléchargement d'un exemple de démonstration)

Deux solutions aux conflits de prototypes jQuery (avec téléchargement d'un exemple de démonstration)_jquery

WBOY

Libérer： 2016-05-16 15:19:06

original

1295 Les gens l'ont consulté

Cet article analyse deux solutions aux conflits de prototypes jQuery avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Comment jquery et prototype peuvent-ils entrer en conflit ? En dernière analyse, c'est parce que les deux utilisent $, et qu'ils sont utilisés en même temps, ce qui prête à confusion. Ce problème a été résolu pas moins de 5 fois, et je dois le vérifier à chaque fois. Ça ne fait pas mal, hehe.

Méthode 1. Ajoutez du code au fichier de bibliothèque principale de jquery.

1. Il s'agit généralement de jquery.js, ou jquery.min.js, certains avec des numéros de version. Sachez simplement de quel fichier il s'agit.

})( window );
jQuery.noConflict(); //最后面，加上这一行。

Copier après la connexion

2. Charger les fichiers jquery et prototypes de test

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="jquery.min.js"></script>

Copier après la connexion

3. Comment écrire du code js

<script type="text/javascript">
alert('prototype value : '+$('test').value); //prototype写法
jQuery(document).ready(function($){ //注意这里的，jQuery和$
  alert('jquery value : '+$('#test').val()); //jquery写法
});
</script>

Copier après la connexion

J'ai recommandé cette méthode, cette méthode est plus efficace une fois pour toutes

Le code de démonstration complet est le suivant :

<html>
<head>
<script type="text/javascript" src="./prototype.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<form>
<input id="test" type='text' name='test' value='test'/>
</form>
<script type="text/javascript">
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
 alert('jquery value : '+$('#test').val());
});
</script>
</body>
</html>

Copier après la connexion

Méthode 2 : Résoudre le conflit où jquery est appelé

1. Charger les fichiers jquery et prototypes de test

//jquery和prototype，没有先后顺序，谁先谁后都一样。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>

Copier après la connexion

2.code js

<script type="text/javascript">
jQuery.noConflict(); //解决冲突，这个一定要放在js代码的最前面，不然就会报错了。
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
  alert('jquery value : '+$('#test').val());
});
</script>

Copier après la connexion

Cette méthode est plus adaptée aux situations où les fichiers sources principaux de jquery ne se trouvent pas sur votre propre serveur ou où le code jquery est relativement petit. L'exemple de démoCliquez ici pour voir.

La démo complète peut être cliqué iciTélécharger depuis ce site.

J'espère que cet article sera utile à tous ceux qui programment jQuery.