jQuery和Mootools冲突解决方法

恋雨烟梦 2013-12-02

      闲余时间,写个博客,记录一下,最近的技术问题,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>

相关推荐