jquery和原型没有冲突答案

【问题标题】：Jquery and prototype noconflictjquery和原型没有冲突
【发布时间】：2013-05-28 02:25:26
【问题描述】：

我遇到了 jquery 和原型之间的冲突。

HTML 

<!DOCTYPE html>
<html>
    <head>
        <title>Nor-Avetisyan</title>
        <link rel="stylesheet" type="text/css" href="views/css/style.css" />
        <link rel="stylesheet" href="views/css/calendarview.css">
        <script src="views/js/jquery-2.0.1.min.js"></script>
        <script>jQuery.noConflict();</script>
        <script src="views/js/prototype.js"></script>
        <script src="views/js/calendarview.js"></script>
        <script>
            function setupCalendars() {
                // Embedded Calendar
                Calendar.setup(
                        {
                            dateField: 'embeddedDateField',
                            parentElement: 'embeddedCalendar'
                        }
                )

                // Popup Calendar
                Calendar.setup(
                        {
                            dateField: 'popupDateField',
                            triggerElement: 'popupDateField'
                        }
                )
            }

            Event.observe(window, 'load', function() {
                setupCalendars()
            })
        </script>
    </head>
    <body>
        <div id="site-page">
            <div id="site-under-header">
                <a class="flag-arm" href="#"></a>
                <a class="flag-en" href="#"></a>
                <div class="clear"></div>
            </div>
            <div id="site-header">
                <div id="site-header-center"></div>
            </div>
            <div id="site-content-container">
                <div id="site-menu">
                    <a id="menu-glxavor" href="#"></a>
                    <a id="menu-mermasin" href="#"></a>
                    <a id="menu-usucich" href="#"></a>
                    <a id="menu-ashakert" href="#"></a>
                    <a id="menu-shrjanavartner" href="#"></a>
                    <a id="menu-norutyunner" href="#"></a>
                    <a id="menu-mankapartez" href="#"></a>
                    <a id="menu-nyuter" href="#"></a>
                    <a id="menu-bajanortagrvel" href="#"></a>
                </div>
                <div id="site-content">
                    <div id="site-content-left">
                        <h1>ՆՈՐ ԿԱՌՈՒՑՎՈՂ ԴՊՐՈՑԱՇԵՆՔ</h1>
                        <div id="site-content-dproc">
                            <div id="corner-calq"><div><a href="#">Ավելին</a></div></div>
                        </div>
                    </div>
                    <div id="site-content-right">
                        <div id="embeddedExample" style="">
                            <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
                            </div>
                        </div>
                        <div id="site-content-ushadrutyun">
                            Հատուկ ուշադրության 
                            արժանի
                            հայտարարությունների
                            նյութերի համար
                        </div>
                    </div>
                    <div style="clear:left;"></div>
                    <div id="site-content-news">
                        <h1>ՆՈՐՈՒԹՅՈՒՆՆԵՐ</h1>
                        <div class="site-news-grey">
                            1
                        </div>
                        <div class="site-news-grey">
                            2
                        </div>
                        <div class="clear"></div>
                        <div class="site-news-grey">
                            3
                        </div>
                        <div class="site-news-grey">
                            4
                        </div>
                    </div>
                    <div id="site-content-social">
                        <a id="social-twitter" href="#"></a>
                        <a id="social-youtube" href="#"></a>
                        <a id="social-facebook" href="#"></a>
                        <a id="social-google" href="#"></a>
                        <a id="social-dasaran" href="#"></a>
                    </div>
                </div>
                <div class="clear"></div>
                <a id="kap" href="#"></a>
                <div id="site-footer">
                    <div>
                        «Հայ կրթություն» կրթական հիմնադրամ
                        Երևան Հարավ-Արևմտյան Ա1 թաղամաս, Օհանով 20  Հեռ. 72 84 40
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#corner-calq').hide();
            $('#site-content-dproc').mouseover(function() {
                $('#corner-calq').fadeIn(1000);
            });
            $('#site-content-dproc').mouseout(function() {
                $('#corner-calq').fadeOut(1000);
            });
        </script>
    </body>
</html>

控制台错误：未捕获的类型错误：无法调用 null 的方法“隐藏”

我已经把 jQuery.noConflict();但没有效果。

您可以为此发布任何解决方案吗？

【问题讨论】：

标签： html prototypejs jquery

【解决方案1】：

jQuery.noConflict()不是某种神秘力量消除图书馆之间冲突的魔法尘埃。其目的非常明确：1) 恢复 $ 全局变量的原始值，并且，可选地，2) 引入另一个别名来代替 jQuery。

您可能需要执行以下操作：

<script src="views/js/prototype.js"></script>
<script src="views/js/jquery-2.0.1.min.js"></script>
<script>var jQ = jQuery.noConflict();</script>

然后你可以像使用$ 一样使用这个jQ 变量：

jQ('#corner-calq').hide();
jQ('#site-content-dproc').mouseover(function() {
    jQ('#corner-calq').fadeIn(1000);
});
jQ('#site-content-dproc').mouseout(function() {
    jQ('#corner-calq').fadeOut(1000);
});

虽然我可能更愿意保留代码原样，而是将其范围限定在自调用匿名函数中。

(function($) {
    $('#corner-calq').hide();
    $('#site-content-dproc').mouseover(function() {
        $('#corner-calq').fadeIn(1000);
    });
    $('#site-content-dproc').mouseout(function() {
        $('#corner-calq').fadeOut(1000);
    });
})(jQuery);

【讨论】：

现在我明白了没有冲突的情况。谢谢raina77ow！ :)