jQuery和Mootools冲突解决方法
闲余时间,写个博客,记录一下,最近的技术问题,O(∩_∩)O哈哈~
帮同学做一个网站,发现有人用mootools框架做了一个例子,觉的很不错,自己也尝试做一个Demo。我用mootools框架做了一个菜单,当我把这个菜单加载到其他页面的时候就会出现错误,独立的时候就没错,这个为什么呢,纠结我许久。最后发现原来是mootools 和jquery类库发生冲突啊,怎么可能会这个呢,但是实际就是这个的呀;一查看到一篇文章,最后就解决了这个问题,也就有了这篇日记了。
对于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 & 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>