兩個jQuery衝突了怎麼辦

本篇文章主要是對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>javascript

相關文章
相關標籤/搜索