JQuery的$和其它JS發生衝突的快速解決方案

來源:互聯網
上載者:User

 本篇文章主要是對JQuery的$和其它JS發生衝突的快速解決方案進行了介紹,需要的朋友可以過來參考下,希望對大家有所協助

眾所周知,jQuery是目前最流行的JS封裝包,簡化了很多複雜的JS程式,JQuery講瀏覽器DOM樹定義為$,通過$來擷取各個子節點。 然後,JS外掛程式並非只有JQuery,還有prototype.js 等其它比較好的外掛程式。它們也使用$。所以有時候同時使用這個兩個JS外掛程式的時候,就會出現$的使用權衝突問題。現在我們來看看如何解決這個衝突問題。請看下文: 我們都知道JQuery有一個函數,jquery.noConflict() 它的作用是講$的控制權轉讓出去。然後我們可以通過jQuery代替$來擷取dom節點 舉例: 方法一: 代碼如下:<script type="text/javascript">jQuery.noConflict(); //將變數$的控制權讓渡給prototype.jsjQuery(function(){ //使用jQueryjQuery("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.jsjQuery(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> 
相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。