他のライブラリとの競合を避けるために jQuery で $ を使用する方法_jquery

Jquery では、$ は JQuery のエイリアスです。たとえば、$('#msg') は JQuery('#msg') と同等です。ただし、複数の js ライブラリを導入し、別の js ライブラリでも $ 記号が定義されている場合、$ 記号を使用すると競合が発生します。以下はjquery.jsとprototype.jsという2つのライブラリファイルを導入する例です。
最初のケース: jquery.js は、prototype.js の後に導入されます。たとえば、

adf3c3edb2b5b3fb3dba6da0f754db51
この場合、js コードに次のように記述します:

$('#msg').hide(); 

$ は常に jquery で定義された $ 記号を表します。prototype.js で定義された $ を使用したい場合は、JQuery('#msg').hide(); と記述することもできます。

2 番目のケース: jquery.js が、prototype.js の前に導入されます (例:

)

<script src="jquery.js" type="text/javascript"/>
 <script src="prototype.js" type="text/javascript"/> 

この場合、js コードに次のように記述します。

$('#msg').hide(); 

$ は、現時点では、prototype.js で定義されている $ 記号を表します。jquery.js でファクトリ選択関数を呼び出したい場合は、フルネームの JQuery('#msg').hide() のみを使用できます。

以下では、まず、js ライブラリ ファイルを導入する最初のケースで、さまざまな js ライブラリで定義されている $ 記号を正しく使用する方法を紹介します。

1. JQuery.noConflict() を使用します
このメソッドの機能は、Jquery に $ の所有権を放棄させ、$ の制御をprototype.js に戻すことです。jquery.js は後から導入されたため、最終的に $ の制御を持つのは jquery です。戻り値はJQueryです。コード内でこのメソッドを呼び出した後、$ を使用して jquery メソッドを呼び出すことはできません。このとき、$ は、prototype.js ライブラリで定義された $ を表します。以下のように:

JQuery.noConflict();//ここでは $('#msg').hide() を書くことはできません。このときの $ は、prototype.js で定義されている $ 記号を表します。 JQuey('#msg').hide(); これ以降、$ は、prototype.js で定義された $ を表します。jquery.js の $ は、jquery.js、JQuery でのみ使用できます。
jQuery を競合なしモードに設定した後、$ のエイリアスを設定できます:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>

引き続き jQuery の $ を使用したい場合は、コードを自己実行関数に含める必要があります。これは、一部の jQuery プラグイン作成者の間でも一般的な方法です。これらの作成者は、他のライブラリがサポートされているかどうかを知りません。プロジェクト内で参照される:

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();

(function($) {
  // 这里依然可以继续使用 jQuery 的 $
})(jQuery);
</script>

2. JQuery エイリアスをカスタマイズする 最初のメソッドで JQuery.noConflict() メソッドを使用した後、JQuery の完全名のみを使用するのが面倒な場合は、JQuery のエイリアスを再定義することもできます。以下のように:

var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 

今後、$ は、prototype.js で定義された $ を表します。jquey.js の $ は、jquey.js の JQuery のエイリアスとしてのみ使用できます。

3. ステートメント ブロックを使用します。次のように、jquery.js で定義された $ をステートメント ブロック内でも使用します。

JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. }); 

または、次のステートメント ブロックを使用します:

(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) 

js ライブラリ ファイルの順序を導入する 2 番目のケース、jquery.js で $ を使用する方法の場合でも、次のような上記で紹介したステートメント ブロック メソッドを使用できます。

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> 

(function($){ 
..... 
$('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. 
})(JQuery) 
</script>

コード

<script src="jquery.js" type="text/javascript"/> 
<script src="prototype.js" type="text/javascript"/> 
<script type="text/javascript"> (function($){ ..... $('#msg').hide();
//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery) </script>

このステートメント ブロックを使用する方法は、jquery プラグインを自分で作成する場合、特定の作業プロセス中にさまざまな js ライブラリを順番に導入する方法がわからないため、この方法を使用する必要があります。この種のステートメントは、ブロック書き込み方式により競合を防ぐことができます。