¿Cómo evito los conflictos de la biblioteca jquery?

Question

¿Cómo evito los conflictos de la biblioteca jquery?

Alguien puede ayudarme por favor, soy nuevo en jquery. He agregado tres complementos de jquery para mi proyecto.

Quiero saber si es posible tener múltiples jquery en una sola página.

Dime qué hará este archivo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Explique claramente si estos archivos son iguales o no, y cuál es la diferencia entre bibliotecas y versiones. ¿Hay alguna diferencia?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">

1. Para rebote de pelota:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script>
  $(document).ready(function() {

$("ul.menu li,ul.social_media li").mouseenter(function () {
      $(this).effect("bounce", { times:2 }, 400);
});

  });
  </script>

2.para el contenido de la pestaña:

<script src="javascript/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="javascript/jquery.tabs.pack.js" type="text/javascript"></script>


        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen">

        <script type="text/javascript">
            $(function() {
              $('#container-5').tabs({ fxSlide: false, fxFade: false, fxSpeed: 'normal' });
            });
        </script>

3. para desplazamiento:

  <script src="js/jquery.thumbnailScroller.js"></script>
      <script src="js/jquery-ui-1.8.13.custom.min.js"></script>
      <link href="js/jquery.thumbnailScroller.css" rel="stylesheet" />

      <script>
(function($){
window.onload=function(){   
    $("#tS1").thumbnailScroller({       
        scrollerType:"hoverAccelerate",     
        scrollerOrientation:"horizontal",       
        scrollEasing:"easeOutCirc",         
        scrollEasingAmount:400,         
        acceleration:2,         
        scrollSpeed:400,        
        noScrollCenterSpace:4,      
        autoScrolling:0,        
        autoScrollingSpeed:1000,        
        autoScrollingEasing:"easeInOutQuad",        
        autoScrollingDelay:20 
    });
    $("#tS2").thumbnailScroller({ 
        scrollerType:"clickButtons", 
        scrollerOrientation:"horizontal", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:600, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
    $("#tS3").thumbnailScroller({ 
        scrollerType:"hoverPrecise", 
        scrollerOrientation:"vertical", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:800, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
}
})(jQuery);
</script>

Este es mi código. Ayúdame a evitar conflictos en este código.

preguntado el 01 de junio de 12 a las 13:06

arun

¿Has intentado usar solo una versión de jquery? - jrummell

solo una versión significa cómo es posible que cada complemento tenga algunas versiones, cómo hacerlo, por favor explique: arun

Todos tus complementos tienes trabaje con la última versión de jQuery, así que intente eso: Timm

¡DIOS MÍO! Hay GRANDES diferencias entre 1.5 y 1.7. Lo mejor sería encontrar complementos actualizados e ir con la última versión. Incluso si pudiera ejecutar una resolución sin conflicto, eso no quiere decir que no causará más problemas más adelante y entre navegadores. Solo un pensamiento. > Ah, y la gran diferencia entre las dos bibliotecas que mencionas arriba es que una es en realidad jQuery, mientras que la otra es una biblioteca de extensión de interfaz para jQuery. Si usa la extensión jQueryUI, no olvide incluir el enlace CSS antes de los enlaces JS - SpYk3HH

gracias por tu respuesta estoy tratando de hacer lo que me dijiste - arun

1 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery jquery-ui jquery-plugins or haz tu propia pregunta.

¿Has intentado usar solo una versión de jquery? - jrummell
solo una versión significa cómo es posible que cada complemento tenga algunas versiones, cómo hacerlo, por favor explique: arun
Todos tus complementos tienes trabaje con la última versión de jQuery, así que intente eso: Timm
¡DIOS MÍO! Hay GRANDES diferencias entre 1.5 y 1.7. Lo mejor sería encontrar complementos actualizados e ir con la última versión. Incluso si pudiera ejecutar una resolución sin conflicto, eso no quiere decir que no causará más problemas más adelante y entre navegadores. Solo un pensamiento. > Ah, y la gran diferencia entre las dos bibliotecas que mencionas arriba es que una es en realidad jQuery, mientras que la otra es una biblioteca de extensión de interfaz para jQuery. Si usa la extensión jQueryUI, no olvide incluir el enlace CSS antes de los enlaces JS - SpYk3HH
gracias por tu respuesta estoy tratando de hacer lo que me dijiste - arun

SpYk3HH · Accepted Answer

Hay algunos MAJOR diferencias entre jQuery Lib Ver 1.5 (como se muestra en su pregunta) y la última Ver 1.72. Uno de los más importantes es la introducción de .on() que está destinado a reemplazar el siempre popular .live() y .delegate(). Estos métodos de jQuery vinculan eventos al documento y permiten un diseño más dinámico. Hay cierta confusión en cuanto a las diferencias, y no reinventaré la rueda. Mira esto Preguntas y respuestas de StackOverflow para más información. Además, echa un vistazo a la Notas de la versión de 1.7 para mayor información. En resumen, .on ha mejorado el rendimiento y requiere escribir un poco menos.

Según el primero real pregunta, las 2 bibliotecas jquery.min.js & jquery-ui.min.js, varían solo por propósito y diseño. El Nombre uno mencionado es el real Biblioteca jQuery, que proporciona toda la ayuda de estilo .Net que necesita para JavaScript. Es la Biblioteca principal la que debe incluirse para utilizar la otra.

El Segundo biblioteca mencionada es la Biblioteca jQueryUI, que es más un Interfaz de usuario Biblioteca para jQuery. Tambien es dependiente en un CO archivo (normalmente y mejor cargado en head ANTES se llaman las bibliotecas jQuery). El archivo CSS es lo que realmente resalta el Potenciar de las funciones que añade a la biblioteca jQuery. En realidad, se extiende mucho a la Biblioteca jQuery, por ejemplo, su "1. Para rebote de pelota:" ejemplo utiliza el .effect método que está algo limitado solo a través de jQuery, pero con jQueryUI, tiene la capacidad de usar diferentes flexibilizaciones y lograr lo más posible animaciones.

Llevándome a tu "2.para el contenido de la pestaña:". Esto está demasiado extendido porque ya ha incluido la biblioteca jQueryUI, por lo que no debería necesitar incluir el tabs.pack. También ha solicitado otra versión de jQuery. Encuentre más información sobre Pestañas jQueryUI aquí. No necesita complementos adicionales ni una biblioteca jQuery diferente.

Finalmente, en su último ejemplo, nuevamente ha incluido más de lo que necesariamente se necesita. Con los incluidos del Nombre ejemplo, no debería necesitar agregar jQuery nuevamente. A continuación, le mostraré una reescritura completa y trataré de incluir todo lo que tiene sin todo el extra "basura".

<!DOCTYPE html>
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
        <!--
            Key Note:
                The following implies that you HAVE downloaded the Thumbnail Scroller plugin and placed its CSS
                File in a directory named "css" on the project directory.
                As far as I can tell it only extends the CSS of jQueryUI and therefor
                should be inserted just after the link for jQueryUI's CSS.
        -->
        <link href="css/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <!--
            Key Note:
                The following link ALSO implies that you downloaded this library and placed it
                in a directory named "js" on your project directory's home.
                In his blog article he show you placing this at the end and adding no conflict.
                If you are not using other Library rivals of jQuery (Prototype, MooTools, etc...),
                you don't really need to include noConflict.
                Also, adding the "framework" at the end of your HTML is a common and OLD practice.
                It's no longer the most effecient way to handle your "framework".
                It may be good still, to include your exterior work (aka, everything not in a library)
                to the end, but the framework should be the first thing that loads now a days, unless
                you like seeing weird 2 second pauses as you page is "built" after it's loaded.
        -->
        <script src="js/jquery.thumbnailScroller.js"></script>

        <script type="text/javascript">
            $(function() {
                $(".menu li, .social_media li").mouseenter(function () {
                    // altho, i'm not sure this will achieve the effect you want,
                    // yoiu might consider wrapping your list objects in a div
                    // with a class to call like:
                    // <li><div class="bounce-me">content</div></li>
                    // then simply change the previous line too:
                    // $(".bounce-me").mouseenter(...
                    $(this).effect("bounce", { times:2 }, 400);
                });

                $('#container-5').tabs({
                    fx: [{ // this basically calls jQuery's .animate command each time a tab is clicked
                        //  see http://api.jquery.com/animate/ for more info
                        duration: 'normal'
                    }]
                });

                $("#tS1").thumbnailScroller({      
                    scrollerType:"hoverAccelerate",     
                    scrollerOrientation:"horizontal",       
                    scrollEasing:"easeOutCirc",         
                    scrollEasingAmount:400,         
                    acceleration:2,         
                    scrollSpeed:400,        
                    noScrollCenterSpace:4,      
                    autoScrolling:0,        
                    autoScrollingSpeed:1000,        
                    autoScrollingEasing:"easeInOutQuad",        
                    autoScrollingDelay:20 
                });
                $("#tS2").thumbnailScroller({
                    scrollerType:"clickButtons", 
                    scrollerOrientation:"horizontal", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:600, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
                $("#tS3").thumbnailScroller({
                    scrollerType:"hoverPrecise", 
                    scrollerOrientation:"vertical", 
                    scrollSpeed:2, 
                    scrollEasing:"easeOutCirc", 
                    scrollEasingAmount:800, 
                    acceleration:4, 
                    scrollSpeed:800, 
                    noScrollCenterSpace:10, 
                    autoScrolling:0, 
                    autoScrollingSpeed:2000, 
                    autoScrollingEasing:"easeInOutQuad", 
                    autoScrollingDelay:500 
                });
            });
        </script>
    </head>
    <body>
        <!-- CONTENT GOES HERE -->
    </body>
</html>

UN ÚLTIMO CONSEJO ÚTIL

Si tu "test" sus puntos de vista en Google Chrome, presione ctrl+shift+j para que aparezca la ventana de consola "similar a firebug" y asegúrese de que todo se cargue correctamente. Haga clic en la pestaña "Consola" para ver todos los mensajes de error y advertencias, así como para ejecutar su propia prueba como:

$(".click-me").click(function(e) { 
    // the following will show in console when an element 
    // having the class "click-me" is clicked
    console.log("I've been Clicked!"); 
});

En otros comentarios

Puede utilizar el Error y advertencia mensaje texto a "Google" para la respuesta a sus problemas. No solo en Google, sino que la próxima vez que se encuentre con un error, intente lo siguiente:

Lea lo siguiente hasta el final, ya que hay una pista muy útil al final.

Abra la consola de Google Chrome con Ctrl+Mayús+J
Haz clic en el botón Consolapestaña " para ver los mensajes de error
Resalta el texto del mensaje y presiona ctrl + c copiar
Ve a Google y haga clic en la barra de búsqueda
Press ctrl + v para pegar el mensaje en el campo de búsqueda
Poner un "espacio" al final de este texto y escriba "sitio:http://stackoverflow.com"
- ¡Esto permitirá que se busque su mensaje de error exacto solo en el sitio de StackOverflow, lo que le brindará muchas preguntas y respuestas sobre su error exacto!