JQuery的$和其它JS發生沖突的快速解決方法


眾所周知,jQuery是目前最流行的JS封裝包,簡化了很多復雜的JS程序,JQuery講瀏覽器DOM樹定義為$,通過$來獲取各個子節點。

然后,JS插件並非只有JQuery,還有prototype.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> 

 

 
 


免責聲明!

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



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