兩個js沖突怎么解決?試試這四個方法


  兩個js沖突很讓前端頭疼,雖然jquery是通用的,但調用不同經常會出問題。jQuery是目前流行的JS封裝包,簡化了很多復雜的JS程序,JQuery講瀏覽器DOM樹定義為$,通過$來獲取各個子節點。JS插件還有prototype.js 等,它們也算比較好的插件,也使用$。所以有時候同時使用這個兩個JS插件的時候,就會出現$的使用權沖突問題。兩個js沖突怎么解決?試試下面四個方法

  我們都知道JQuery有一個函數,jquery.noConflict() 它的作用是講$的控制權轉讓出去。然后我們可以通過jQuery代替$來獲取dom節點。

  方法一 

<script type="text/javascript">
jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

  方法二 ,我們可以通過noConflict()函數來定義一個快捷方式用來獲取dom節點

<script type="text/javascript">
var $j = jQuery.noConflict(); //自定義一個比較短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>

  方法三 

<script type="text/javascript">
jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert( $(this).text() );
});
}); 
$("pp").style.display = 'none'; //使用prototype
</script>

  方法四 

<script type="text/javascript">
jQuery.noConflict(); //將變量$的控制權讓渡給prototype.js
(function($){ //定義匿名函數並設置形參為$
$(function(){ //匿名函數內部的$均為jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執行匿名函數且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
</script>

  如果還出現錯誤,試一下調整js文件順序

  最后推薦一個開源jQuery插件SuperSlide,他在官網上的介紹是這樣的:SuperSlide 致力於解決網站大部分特效展示問題,使網站代碼規范整潔,方便維護更新。
  網站上常用的“焦點圖/幻燈片”“Tab標簽切換”“圖片滾動”“無縫滾動”等只需要一個SuperSlide即可解決!
  從此無需網上苦苦尋覓特效,無需加載n個插件,無需害怕代碼沖突,你需要的只是一個SuperSlide!
  還可以多個SuperSlide組合創造更多效果哦~

  下載鏈接在這


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM