jquery.noConflict() を使用して、jquery ライブラリと他のライブラリ間の競合の問題を解決します。

巴扎黑
リリース: 2017-06-20 15:16:58
オリジナル
1796 人が閲覧しました

jQuery を使用して開発する場合、Prototype などの他の JS ライブラリを使用することもできますが、複数のライブラリが共存すると競合が発生する可能性があります。競合が発生した場合は、次の解決策で解決できます。 1. jQuery ライブラリ他のライブラリの前にインポートされ、jQuery (コールバック) メソッドが直接使用されます
例:




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


テスト---jQuery


2.

jQuery ライブラリは他のライブラリの後にインポートされ、jQuery.noConflict() メソッドを使用して制御を転送します。変数 $ を他のライブラリに渡すには、いくつかの方法があります:

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
       jQuery("p").click(function(){
              alert( jQuery(this).text() );
       });
});
$("pp").style.display = &#39;none&#39;; //使用prototype
</script>
//代码二
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
       $j("p").click(function(){
       alert( $j(this).text() );
       });
});
$("pp").style.display = &#39;none&#39;; //使用prototype
</script>
//代码三
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
       $("p").click(function(){ //继续使用 $ 方法
       alert( $(this).text() );
       });
});
$("pp").style.display = &#39;none&#39;; //使用prototype
</script>
//代码四
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
       $(function(){ //匿名函数内部的$均为jQuery
              $("p").click(function(){ //继续使用 $ 方法
                     alert($(this).text());
              });
       });
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = &#39;none&#39;; //使用prototype
/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去 
       jQuery.noConflict(); 
});
</script>
ログイン後にコピー

以上がjquery.noConflict() を使用して、jquery ライブラリと他のライブラリ間の競合の問題を解決します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート