Plutôt adepte de JQuery, je me retrouve parfois confronté à l’utilisation de JQuery et de MooTools simultanément.
Ceci posera a coup sur des problèmes si l’on n’y prend pas garde du fait des grandes similitudes de notations comme l’appel à la fonction $.

Il existe bien évidement un contournement de ce genre de problèmes que voici :

Tout d’abord il faut respecter l’ordre de déclaration des scripts :

  1. jquery.js
  2. Vos autres scripts JQuery
  3. mootools.js
  4. Vos autres scripts MooTools

Ensuite il faut dans la partie JQuery commencer par déclarer :

    jQuery.noConflict();

Puis penser à remplacer dans tous les scripts JQuery les appels $() par jQuery()

    // On remplace par exemple 
    //     $(document.body).css('background-color', 'lightblue'); 
    // par :
    jQuery(document.body).css('background-color', 'lightblue');

Voila si vous n’êtes pas certains d’avoir tout compris je vous propose un exemple super simple illustrant ce qu’il faut faire :

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Test JQuery et MooTools</title>
    </head>
    <body>
        <h1> Ceci est un test </h1>
        <!-- // DEBUT SCRIPTS JS -->
        <script language="Javascript" type="text/javascript" src="js/jquery.js"></script>
        <script language="Javascript" type="text/javascript">
            // JQuery
            jQuery.noConflict();
            jQuery(document.body).css('background-color', 'lightblue');
        </script>
        <!-- Déclarer MooTools et les scripts MooTools après JQuery et les scripts JQuery -->
        <script language="Javascript" type="text/javascript" src="js/mootools.js"></script>
        <script language="Javascript" type="text/javascript">
            // MooTools
            var bodyElement = $(document.body);
            bodyElement.setStyle('color', 'darkgreen');
        </script>
        <!-- // FIN SCRIPTS JS -->
    </body>
</html>