个人中心
gpt4 book ai didi

javascript - 将 noConflict() 与 jquery 库一起使用

转载 作者：行者123 更新时间：2023-12-03 12:38:12 28 4
gpt4 key购买 nike

我使用 jquery 脚本作为下拉菜单，使用 jquery 脚本作为图像查看器。两个库冲突。

以下脚本是我的库，我注意到了两个冲突的脚本。第一个 block 位于我的脚本的标题中，第二个 block 位于我的标签之前(这是图像 slider 脚本工作的唯一方式)。 

      <!-- Drop down plugin (within the <head> tag -->
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/superfish.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/tms-0.4.1.js"></script>
        <link rel="stylesheet" type="text/css" href="jquery/css/custom-theme/jquery-ui-1.10.3.custom.css"/>

        <!-- Conflicting code  -->
        <script src="jquery/js/jquery-ui-1.10.3.custom.js"></script>
         <!-- Conflicting code ends  -->


    <!-- Content section <body> -->

    <!-- Image slider plug in (at the end of the <body> tag) -->

    <!-- Conflicting code  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
     <!-- conflicting code ends -->

    <script type="text/javascript" src="slider/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="slider/js/jquery.kinetic.min.js"></script>
    <script type="text/javascript" src="slider/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="slider/js/jquery.smoothdivscroll-1.3-min.js"></script>
    <script type="text/javascript">
            // Initialize the plugin with no custom options
            $(document).ready(function () {
                // None of the options are set
                $("div#makeMeScrollable").smoothDivScroll({
                    manualContinuousScrolling: true,
                    autoScrollingMode: "",
                    visibleHotSpotBackgrounds: "always"
                });
            });
        </script>

我尝试了以下两个脚本，第一个脚本没有解决冲突，第二个脚本导致页面无法加载(它是一个空白页面，仅显示背景颜色)。我可能错误地使用了脚本。

    <script src="prototype.js"></script>
    <script src="jquery.js"></script>
    <script>

    var $j = jQuery.noConflict();
    // $j is now an alias to the jQuery function; creating the new alias is optional.

    $j(document).ready(function() {
        $j( "div" ).hide();
    });

    // The $ variable now has the prototype meaning, which is a shortcut for
    // document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
    window.onload = function() {
        var mainDiv = $( "main" );
    }

    </script>

脚本2:

        <script src="prototype.js"></script>
        <script src="jquery.js"></script>
        <script>

        jQuery.noConflict();

        jQuery( document ).ready(function( $ ) {
            // You can use the locally-scoped $ in here as an alias to jQuery.
            $( "div" ).hide();
        });

        // The $ variable in the global scope has the prototype.js meaning.
        window.onload = function(){
            var mainDiv = $( "main" );
        }

        </script>

最佳答案

我不确定第一个示例中“不解决冲突”是什么意思。但在第二个例子中，您确定它实际上不能完美工作吗？您有代码可以在文档准备好后立即隐藏整个页面上的所有 div ( $( "div").hide(); )。这很可能会导致页面看起来除了背景颜色之外都是空的。

关于javascript - 将 noConflict() 与 jquery 库一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23634694/

28 4 0
文章推荐： javascript - 如何将嵌套的 SWF 文件缓存在 DOM 中？
文章推荐： javascript - 从字符串中清除 CDATA
文章推荐： javascript - famo.us 悬停不工作
文章推荐： javascript - constructor.name 上 ngSwitch 的替代方案？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com