Как избежать конфликтов библиотеки jquery?

Question

Может ли кто-нибудь помочь мне, пожалуйста, я новичок в jquery. Я добавил три модуля jquery для моего проекта.

Я хочу знать, возможно ли иметь несколько jquery на одной странице?

Скажи мне, что этот файл будет делать:

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

Пожалуйста, объясните четко ли эти файлы одинаковы или нет, и в чем разница между библиотеками и версиями? Есть ли разница?

<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.for отскок мяча:

<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.for Вкладка Содержание:

<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.for пролистайте:

<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> 

Этот мой код. Помогите мне избежать конфликтов в этом коде.

Answer 1

У вас есть несколько отличия между jQuery Lib Ver 1.5 (как показано на вашем ответе) и последние Ver 1.72. Одним из самых больших было введение .on(), которое предназначено для замены когда-либо популярных .live() и .delegate(). Эти методы jQuery связывают события с документом и позволяют использовать более динамичный макет. Существует некоторая путаница в отношении различий, и я не буду изобретать велосипед. Посмотрите на это StackOverflow Q&A для получения дополнительной информации. Кроме того, ознакомьтесь с 1.7 Release Notes для получения дополнительной информации. Короче говоря, он обладает улучшенной производительностью и требует немного меньшего набора текста.

В соответствии с первым реального вопроса, то 2 библиотеки jquery.min.js & jquery-ui.min.js, различаются только по назначению и конструкции. Первый, упомянутый здесь , действительныйjQuery Library, который предоставляет всю необходимую вам помощь в стиле. Net. Это основная библиотека, которая должна быть включена для использования другой.

Второй библиотека упоминается это jQueryUI Library, который больше пользовательского интерфейса библиотеки для JQuery. Также зависит от на CSS файл (обычно и лучше всего загружается в головной ДО). Библиотеки jQuery называются). Файл CSS - это то, что действительно выводит Power функций, которые он добавляет в библиотеку jQuery. Это фактически распространяется на библиотеку jQuery, например, ваш «1.for ball bounce:» пример использует метод .effect, который несколько ограничен только jQuery, но с jQueryUI вам предоставляется возможность использовать разные easings и достичь более возможного анимации.

Приведение меня к вашему "2. на вкладке:". Это чрезвычайно сложно, поскольку вы уже включили библиотеку jQueryUI, поэтому вам не нужно включать tabs.pack. Вы также вызвали еще одну версию jQuery. Более подробную информацию о jQueryUI Tabs Here. Вам не нужны никакие дополнительные плагины или другая библиотека jQuery.

Наконец, в вашем последнем примере вы снова включили более чем то, что обязательно необходимо. Если включить Первый пример, вам не нужно будет снова добавлять jQuery. Ниже я покажу вам полную переписку и постараюсь включить все, что у вас есть, без лишних «мусора».

<!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> 

ONE LAST ПОЛЕЗНЫЙ СОВЕТ

Если вы "тест" Ваше отношение в Google Chrome, нажмите Ctrl + Shift + J, чтобы вызвать "поджигатель типа" окно консоли и убедитесь, что все правильно загружено. Перейдите на вкладку «Console», чтобы увидеть все сообщения об ошибках и предупреждения, а также запустить свой собственный тест, как:

$(".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!"); 
}); 

На стороне записки

Вы можете использовать Error и Предупреждение сообщение текст на «Google» для ответа на ваши проблемы. Не только в Google, но в следующий раз, когда вы озадачены с ошибкой, попробуйте следующее:

Прочитайте следующий весь путь до конца, поскольку есть очень полезный намек в конце

• Открыть Google Консоль Chrome с Ctrl + Shift + J
• Перейдите на вкладку "консоли", чтобы увидеть сообщения об ошибках
• Выделите текст сообщения и нажмите CTRL + C скопировать
• Перейти к Google и нажмите на панель поиска
• Нажмите Ctrl + V, чтобы вставить сообщение в поле поиска
• поставить «пространство» в конце этого текста и введите «сайт: http://stackoverflow.com»
  • Это позволит ваше точное сообщение об ошибке будет искать только на сайте StackOverflow, таким образом, давая вам множество Q & А на ваш точный Er ROR!