分類  >  Web前端 >

jQuery和Mootools衝突解決辦法

tags:    時間:2013-12-09 23:14:29
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 &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>

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網