Jquery では、$ は JQuery のエイリアスです。たとえば、$('#msg') は JQuery('#msg') と同等です。ただし、複数の js ライブラリを導入し、別の js ライブラリでも $ 記号が定義されている場合、$ 記号を使用すると競合が発生します。以下はjquery.jsとprototype.jsという2つのライブラリファイルを導入する例です。
最初のケース: jquery.js は、prototype.js の後に導入されます。たとえば、
この場合、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>
<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
3. ステートメント ブロックを使用します。次のように、jquery.js で定義された $ をステートメント ブロック内でも使用します。
JQuery.noConflict(); JQuery(document).ready(function($){ $('#msg').hide();
//此时在整个ready事件的方法中使用的$都是jquery.js中定义的$. });
(function($){ ..... $('#msg').hide();//此时在这个语句块中使用的都是jquery.js中定义的$. })(JQuery)
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
