ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery $naming 競合解決策 summary_jquery

jQuery $naming 競合解決策 summary_jquery

WBOY
WBOYオリジナル
2016-05-16 16:31:361455ブラウズ

最近、jquery ライブラリと別の js ライブラリを同時に参照したときに問題が発生しました。 $XX を使用して js ライブラリ関数を呼び出したところ、失敗したことがわかりました。そこで情報を探したところ、jquery の名前の競合であることがわかりました。多くの JavaScript ライブラリは $ を関数名または変数名として使用するため、jquery も同様に機能します。実際、$ は jquery の単なるエイリアスです。jquery 以外の別の js ライブラリを使用する必要がある場合は、$.noConflict() を呼び出すことで制御をライブラリに戻すことができます。以下に、この問題に対する 5 つの解決策をまとめました。そのうちの 1 つは役に立つでしょう。

例 1:

コードをコピーします コードは次のとおりです:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >


紛争解決 1


テスト---プロトタイプ


テスト---jQuery


<スクリプトタイプ="text/javascript"> jQuery.noConflict(); //変数$の制御をprototype.jsに移す
jQuery(function(){ jQuery("p").click(function(){
アラート( jQuery(this).text() ); });
});
$("pp").style.display = 'none' //プロトタイプを使用
;





例 2:




コードをコピーします

コードは次のとおりです:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 紛争解決 2

テスト---プロトタイプ

テスト---jQuery

<スクリプトタイプ="text/javascript"> var $j = jQuery.noConflict() //短いショートカットをカスタマイズします
$ j(function(){ $j("p").click(function(){
アラート( $j(this).text() ); });
});
$("pp").style.display = 'none' //プロトタイプを使用
;





例 3:





コードをコピー


コードは次のとおりです:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >


紛争解決 3


テスト---プロトタイプ


テスト---jQuery


<スクリプトタイプ="text/javascript"> jQuery.noConflict(); //変数$の制御をprototype.jsに移す
jQuery(function($){ $("p").click(function(){ //引き続き $ メソッドを使用します
アラート( $(this).text() ); });
});
$("pp").style.display = 'none' //プロトタイプを使用
;





例 4:




コードをコピーします

コードは次のとおりです:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 紛争解決 4

テスト---プロトタイプ

テスト---jQuery

<スクリプトタイプ="text/javascript"> jQuery.noConflict(); //変数$の制御をprototype.jsに移す
(function($){ $(function(){ //匿名関数内の $ はすべて jQuery
$ ("P") をクリック (Function () {// 引き続き $ メソッドを使用します
アラート($(this).text()); });
});
})(jQuery); $("pp").style.display = 'none' //プロトタイプを使用
;





例 5:





コードをコピー


コードは次のとおりです:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >



冲突解决5






テスト---プロトタイプ


テスト---jQuery


<スクリプトタイプ="text/javascript">
jQuery(function(){ // jQuery を直接使用します。「jQuery.noConflict()」関数を使用する必要はありません。
    jQuery("p").click(function(){
        alert( jQuery(this).text() ); 
    }); 
}); 
$("pp").style.display = 'なし'; // プロトタイプを使用



ご覧ください、原始的な問題を解決する方法は、必要な小さな協力者が必要な場合にのみ実行できます

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。