jquery版本不兼容问题

在使用imgbox.js是出现的jquery版本不兼容问题，之后了解到jQuery.noConflict()的用法

jQuery.noConflict()的存在只有一个目的：它允许你在同一个页面加载多个jQuery实例，尤其是不同版本的jQuery。

code

    <link rel="stylesheet" href={% static '/css/bootstrap.min.css'%}>
    <link href={% static '/css/bootstrap.min.css'%} rel="stylesheet" />
    <link href={% static '/css/font-awesome.min.css'%} rel="stylesheet" />
    <link href={% static '/css/ggtooltip.css'%} rel="stylesheet" />
    <link href={% static '/css/layui.css'%} rel="stylesheet" />
    
    <script src={% static '/js/jquery-3.3.1.min.js'%}></script>
    <script src={% static '/js/bootstrap.min.js'%}></script>
    <script src={% static '/js/ggtooltip.js'%}></script>
    <script src={% static '/js/gg.app.ui.js'%}></script>


    <link rel="stylesheet" href={% static '/css/lrtk.css'%} />
    <script type="text/javascript" src={% static '/js/jquery.min.js'%}></script>
    <script type="text/javascript">
        var j$ = $;//jquery.min.js的$重命名为j$
        jQuery.noConflict();
    </script>


    <script type="text/javascript" src={% static '/js/jquery.imgbox.pack.js'%}></script>


    <script type="text/javascript">
        j$(document).ready(function() {
            j$("#example1-1").imgbox();


            j$("#example1-2").imgbox({
                'zoomOpacity'    : true,
                'alignment'        : 'center'
            });


            j$("#example1-3").imgbox({
                'speedIn'        : 0,
                'speedOut'        : 0
            });


            j$("#example2-1, #example2-2").imgbox({
                'speedIn'        : 0,
                'speedOut'        : 0,
                'alignment'        : 'center',
                'overlayShow'    : true,
                'allowMultiple'    : false
            });
        });
    </script>