Un proyecto en el que estoy trabajando requiere el uso de jQuery en las páginas web de los clientes. Los clientes insertarán un fragmento de código que proporcionaremos, que incluye algunos <script>elementos que compilan un widget en un <script>archivo creado <iframe>. Si aún no están utilizando la última versión de jQuery, esto también incluirá (muy probablemente) una <script>para la versión alojada de Google de jQuery.

El problema es que algunos clientes ya pueden tener instalada una versión anterior de jQuery. Si bien esto puede funcionar si es al menos una versión bastante reciente, nuestro código se basa en alguna funcionalidad recientemente introducida en la biblioteca jQuery, por lo que seguramente habrá casos en que la versión jQuery de un cliente sea demasiado antigua. No podemos exigir que actualicen a la última versión de jQuery.

¿Hay alguna forma de cargar una versión más nueva de jQuery para usar solo dentro del contexto de nuestro código, que no interfiera con, ni afecte, ningún código en la página del cliente? Idealmente, tal vez podríamos verificar la presencia de jQuery, detectar la versión y, si es demasiado antigua, cargar de alguna manera la versión más reciente para usarla en nuestro código.

Tuve la idea de cargar jQuery en un <iframe>dominio del cliente que también incluye nuestro <script>, lo que parece posible, pero espero que haya una forma más elegante de hacerlo (sin mencionar las penalizaciones de rendimiento y complejidad de extra <iframe>s).

Sí, es factible debido al modo sin conflicto de jQuery. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

Entonces, en lugar de $('#selector').function();, lo harías jQuery_1_3_2('#selector').function();o jQuery_1_1_3('#selector').function();.

Después de mirar esto y probarlo, descubrí que en realidad no permitía que se ejecutara más de una instancia de jquery a la vez. Después de buscar, descubrí que esto funcionaba bien y que era mucho menos código.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>var $j = jQuery.noConflict(true);</script>
    <script>
      $(document).ready(function(){
       console.log($().jquery); // This prints v1.4.2
       console.log($j().jquery); // This prints v1.9.1
      });
   </script>

Entonces, agregar la "j" después de "$" fue todo lo que necesitaba hacer.

$j(function () {
        $j('.button-pro').on('click', function () {
            var el = $('#cnt' + this.id.replace('btn', ''));
            $j('#contentnew > div').not(el).animate({
                height: "toggle",
                opacity: "toggle"
            }, 100).hide();
            el.toggle();
        });
    });

Tomado de http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page :

• La página original carga su "jquery.versionX.js" $y jQuerypertenece a versionX.
• Llamas a tu "jquery.versionY.js" - ahora $y jQueryperteneces a versionY, plus _$y _jQueryperteneces a versionX.
• my_jQuery = jQuery.noConflict(true);- ahora $y jQuerypertenece a la versión X, _$y _jQueryprobablemente sea nulo, y my_jQueryes la versiónY.

Puede tener tantas versiones diferentes de jQuery en su página como desee.

Uso jQuery.noConflict():

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
    var $i = jQuery.noConflict();
    alert($i.fn.jquery);
</script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var $j = jQuery.noConflict();
    alert($j.fn.jquery);
</script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var $k = jQuery.noConflict();
    alert($k.fn.jquery);
</script> 

DEMO | Fuente

Es posible cargar la segunda versión de jQuery, usarla y luego restaurarla a la original o conservar la segunda versión si no se cargó jQuery antes. Aquí hay un ejemplo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    var jQueryTemp = jQuery.noConflict(true);
    var jQueryOriginal = jQuery || jQueryTemp;
    if (window.jQuery){
        console.log('Original jQuery: ', jQuery.fn.jquery);
        console.log('Second jQuery: ', jQueryTemp.fn.jquery);
    }
    window.jQuery = window.$ = jQueryTemp;
</script>
<script type="text/javascript">
    console.log('Script using second: ', jQuery.fn.jquery);
</script>
<script type="text/javascript">
    // Restore original jQuery:
    window.jQuery = window.$ = jQueryOriginal;
    console.log('Script using original or the only version: ', jQuery.fn.jquery);
</script>

Me gustaría decir que siempre debe usar jQuery últimas o recientes versiones estables. Sin embargo, si necesita trabajar con otras versiones, puede agregar esa versión y cambiarle el $nombre por otro nombre. Por ejemplo

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>var $oldjQuery = $.noConflict(true);</script>

Mire aquí si escribe algo usando $y obtendrá la última versión. Pero si necesita hacer algo con viejo, simplemente use en $oldjQuerylugar de $.

Aquí hay un ejemplo

$(function(){console.log($.fn.jquery)});
$oldjQuery (function(){console.log($oldjQuery.fn.jquery)})

Manifestación

Por supuesto que sí. Este enlace contiene detalles sobre cómo puede lograrlo: https://api.jquery.com/jquery.noconflict/ .