jQuery和Mootools冲突解决办法

jQuery和Mootools冲突解决方法

闲余时间，写个博客，记录一下，最近的技术问题，O(∩_∩)O哈哈~

帮同学做一个网站，发现有人用mootools框架做了一个例子，觉的很不错，自己也尝试做一个Demo。我用mootools框架做了一个菜单，当我把这个菜单加载到其他页面的时候就会出现错误，独立的时候就没错，这个为什么呢，纠结我许久。最后发现原来是mootools 和jquery类库发生冲突啊，怎么可能会这个呢，但是实际就是这个的呀；一查看到一篇文章，最后就解决了这个问题，也就有了这篇日记了。 jQuery和Mootools冲突解决办法

对于jQuery来说我们可以使用

var jq=jQuery.noConflict();
//这个在你少量简单的代码可以用这个方法

这段代码将jQuery中的$全部转换为jq，但是这种方法使原有代码中需要修改的地方很多的话。

并且很多JS使用该方法后会出现一些问题，导致无法正常运行。
这个问题实质上是JS的命名空间问题，在所有基于jQuery的js中，我们在代码开头加上

(function($){ //在这里写你的代码吧
})(jQuery);

这样之后你不需要修改任何原有的代码，能够保证该JS能够正常运行。

同时Mootools不会受到干扰，因为现在原有的代码已经被限定在这个匿名函数中了。

(function($){})(jQuery);

这个写法主要的作用是保证jQuery不与其他类库或变量有冲突。

首先是要保证jQuery这个变量名与外部没有冲突（jQuery内部$与jQuery是同一个东西，有两个名字的原因就是怕$与其他变量名有冲突，jQuery与其他变量冲突的几率非常小）并传入匿名对象，匿名对象给参数起名叫做$(其实和jQuery内部是一样的)。
最后你就可以*的在(function($){})(jQuery);里写你的JS而不需要考虑与外界变量是否存在冲突。

ok,我也修改成功了。简单吧？顺便把我修改的代码贴出来吧

<link href="@Url.Content("~/CSS/Photo1.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/JS/Photo/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/JS/Photo/jquery.nivo.slider.js")" type="text/javascript"></script>
<div class="featured_slider">
    <div id="featured_slider_bg" class="featured_slider_pattern">
        <div id="slider-wrapper">
            <div id="slider" class="nivoSlider">
                <a href="#" title="Featured Slide" target="_blank">
                    <img src="images/1.jpg" alt="" title="介绍内容" />
                </a><a href="#" title="Slide With Caption" target="_blank">
                    <img src="images/2.jpg" alt="" title="介绍内容 " />
                </a><a href="#" title="Aenean sagittis aliquam leo ut aliquet" target="_blank">
                    <img src="images/3.jpg" alt="" title="介绍内容" />
                </a><a href="#" title="Lorem Ipsum" target="_blank">
                    <img src="images/4.jpg" alt="" title="介绍内容" />
                </a>
            </div>
            <div class="slider_border">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    jQuery.noConflict(); //释放jquery中$定义，并直接使用jQuery代替平时的$
    (function ($) {
        $(window).load(function () {
            $('#slider').nivoSlider({
                controlNav: false,
                effect: 'random', //Specify sets like: 'fold,fade,sliceDown'
                animSpeed: 500, //Slide transition speed
                captionOpacity: 0.9,
                directionNav: true, //Next &amp; Prev
                controlNav: true, // 1,2,3... navigation
                pauseTime: 3000, // How long each slide will show
                directionNavHide: true,
                pauseOnHover: true //Stop animation while hovering
            });
        });
    })(jQuery);
    // $('someid').style.display = 'none';  //原mootools中的$照旧使用
</script>

jQuery和Mootools冲突解决办法

相关推荐