为什么在这种情况下要向JQuery添加两个链接

Question

我对Javascript和JQuery没有任何经验，但我在本文档中都使用过。

第一个是支持IE进行CSS3转换，取自CSS3悬停转换。使用的代码是

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.hoverTransition.js"></script>

第二个是幻灯片库，取自幻灯片库，代码为

<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.galleriffic.js"></script>
<script type="text/javascript" src="scripts/jquery.opacityrollover.js"></script>

可以看出，前CSS3 Transitions链接到jquery 1.6.1，而后幻灯片库链接到jquery 1.3.2。我必须同时查阅这两份文件吗？

我试着删除一个链接和另一个链接，但如果其中一个链接被删除，CSS3悬停过渡和Slideshow Glaery都不起作用。如果我把上面的元素放在我的头脑中，它们就不起作用了。只有当我把它们放在页脚之后和body元素之前的底部时，它们才有效。

以下是我的头标签。（用于幻灯片库）

<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>

下面是底部。（用于幻灯片库）

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');
            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });
            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
                delay:                     5500,
                numThumbs:                 15,
                preloadAhead:              10,
                enableTopPager:            true,
                enableBottomPager:         true,
                maxPagesToShow:            7,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play',
                pauseLinkText:             'Pause',
                prevLinkText:              'Previous',
                nextLinkText:              'Next',
                nextPageLinkText:          'Next &rsaquo;',
                prevPageLinkText:          '&lsaquo; Prev',
                enableHistory:             false,
                autoStart:                 true,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 0.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                }
            });
        });
    </script>

Answer 1

将两个不同版本的jQuery放在同一页面中既复杂又不可取。您的第一个目标是完全避免这种情况——您宁愿页面中只有更新版本的jQuery。

因此，您的首要任务是对您正在使用的jQuery插件进行一些研究，看看它们是否都能与通用版本的jQuery一起工作。

如果您确定它们都可以使用通用版本的jQuery，那么只需在插件之前将jQuery包含在页面中，并在使用它们的代码之前将插件包含在内。jQuery代码可以放在HEAD部分或BODY部分，只要它在任何试图使用它的东西之前。插件代码可能会放在jQuery代码之后的任何地方，但你必须查阅插件文档才能确定。

如果您确定必须有两个不同版本的jQuery，那么您需要弄清楚如何做到这一点。这里有一个关于如何做到这一点的相关问题：我可以在同一个页面上使用多个版本的jQuery吗？。

当使用两个版本的jQuery时，您最终必须定义一个唯一的符号，该符号表示使用jQuery.noConflict()（而不是jQuery和$）的jQuery的特定版本，然后使用该插件的所有代码都必须使用该唯一符号。