jQueryライブラリの競合についてどうするか-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryライブラリの競合についてどうするか

小云云

Jan 11, 2018 pm 02:08 PM

jquery 対立何をするか

jQuery で開発する場合、Prototype などの他の JS ライブラリを使用することもできますが、複数のライブラリが共存すると競合が発生する可能性があります。この記事では主に jQuery ライブラリの競合に対する完璧な解決策を紹介します。必要な方は参考にしてください。以下をご覧ください。

私の考えは、デザインを依頼された場合は、デフォルト値の $ を使用することです。パラメーターが渡されない場合は、$ を使用します。最後に、パラメーターを渡すときは、$ を使用します。たとえば、「jq」と入力すると、それが window.jq にマウントされます。

var myControl="jq";
(function(name){
 var $=name ||"$"; //name存在$的值就是name的值，不存在或为null，$的值为字符串"$"
 console.log($);
 window[$]=function(){
 alert("123");
 }
})(myControl)
window[myControl]();

ログイン後にコピー

実際、これは競合を解決するための jQuery の方法ではありません。次に、jQuery が競合をどのように解決するかを見てみましょう。

jQuery の複数のバージョンまたは他の js ライブラリとの競合は、主に一般的に使用される $ 記号との競合です。

1. 競合の解決

1. 同じページ上の複数のバージョンの jQuery 間の競合を解決する方法

2. 他のライブラリの後に jQuery ライブラリをインポートします

jQuery noConflict() メソッドが制御を解放します。 $ identifier なので、他のスクリプトでもそれを使用できます。

1. jQuery の略語を正式名に置き換えることで使用できます

他のライブラリと jQuery ライブラリがロードされた後は、いつでも jQuery.noConflict() 関数を呼び出して、変数 $ の制御を他のライブラリに移すことができます。ライブラリ。その後、プログラム内で jQuery() 関数を jQuery オブジェクトの製造ファクトリーとして使用できます。

<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script>

<script>
(function($){
 //此时的$是jQuery-1.6.4
 $('#');
})(jq164);
</script>
 
<script>
jq142(function($){
 //此时的$是jQuery-1.4.2
 $('#');
});
</script>
 
</body>

ログイン後にコピー

2. ショートカットをカスタマイズする

noConflict() は、jQuery への参照を返すことができ、後で使用するために、jq、$J 変数などのカスタム名で保存できます。

これにより、カスタマイズされたショートカットの使用中に jQuery が他のライブラリと競合しないことが保証されます。

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

<p id="pp">test---prototype</p>
<p>test---jQuery</p>

<script type="text/javascript">
jQuery.noConflict();  //将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function(){   //使用jQuery
 jQuery("p").click(function(){
 alert( jQuery(this).text() );
 });
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。

$("pp").style.display = 'none'; //使用prototype
</script>

ログイン後にコピー

3. 競合がない場合は引き続き $ を使用します

jQuery コードブロックで $ 省略形を使用したいが、このショートカットを変更したくない場合は、$ 記号を変数として ready メソッドに渡すことができます。このように、関数内では $ 記号を使用できますが、関数の外では引き続き「jQuery」を使用する必要があります。

<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>

ログイン後にコピー

または、IEF ステートメントブロックを使用します。これは、最小限のコード変更で完全な互換性を実現できるため、最も理想的な方法です。

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

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
//或者如下
jQuery(function($){   //使用jQuery
 $("p").click(function(){ //继续使用 $ 方法
 alert( $(this).text() );
 });
});
</script>

ログイン後にコピー

3. jQuery ライブラリは他のライブラリよりも先にインポートされます。

$ の所有権は、デフォルトでは次の JavaScript ライブラリに属します。その後、「jQuery」を直接使用して jQuery の作業を行うことができます。

同時に、$() メソッドを他のライブラリへのショートカットとして使用できます。ここで jQuery.noConflict() 関数を呼び出す必要はありません。

<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>

ログイン後にコピー

2. 原則

1. ソースコード

ソースコード: ソースコードでどのように行われるかを見てください

<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>

<body>
<p id="pp">Test-prototype(将被隐藏)</p>
<p >Test-jQuery(将被绑定单击事件)</p>

<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
 jQuery("p").click(function(){  
  alert( jQuery(this).text() );
 });
});

$("pp").style.display = 'none'; //使用prototype
</script>
</body>

ログイン後にコピー

jQuery がロードされると、現在の window.jQuery が _jQuery 変数を通じて取得されます事前に宣言し、_ $現在のウィンドウを取得します。$

jQuery.extend() を通じて noConflict を jQuery にマウントします。そのため、呼び出すときは常に jQuery.noConflict() をこのように調整します。

noConflict() を呼び出すときに 2 つの判断を行います

最初の if は $ の制御を渡します。

2 番目の if は、noConflict() がパラメーターを渡すときに jQuery の制御を渡します。

最後に、 noConflict() は jQuery オブジェクトを返します。そのオブジェクトを受け取るためにどのパラメーターが使用され、どのパラメーターが jQuery 制御を持ちますか。

2. 検証

var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,

// Map over the $ in case of overwrite
_$ = window.$,

jQuery.extend({
 noConflict: function( deep ) {
   if ( window.$ === jQuery ) {
    window.$ = _$;
   }

   if ( deep && window.jQuery === jQuery ) {
    window.jQuery = _jQuery;
   }

   return jQuery;
  }
});

ログイン後にコピー

競合を解決する

//冲突 
 var $ = 123; //假设其他库中$为123
 $(
   function () {
    console.log($); //报错Uncaught TypeError: $ is not a function
   }
 );

ログイン後にコピー

$コントロールを解放する例

//解决冲突
 var jq = $.noConflict();
 var $ = 123;
 jq(function () {
  alert($); //123
 });

ログイン後にコピー

jQueryコントロールを解放する例

パラメータ deep: deep の役割は、jQuery の外部インターフェイスを放棄するために使用されます。

以下のように、noConflict()はパラメータを書き込まず、コンストラクタとしてjQueryをポップアップします。

<script>
 var $ = 123; // window.$是123，存储在私有的_$上。

</script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();//当window.$===jQuery的时候，把_$赋给了window.$。
 jq(function () {
  alert($); //123
 });
</script>

ログイン後にコピー

パラメータtrueを書くと456が出てきます。

<script>
 var $ = 123;
 var jQuery=456;
</script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<body>
<p>aaa</p>
<script>
 var jq = $.noConflict();
 jq(function () {
  alert(jQuery); //构造函数
 });
</script>

ログイン後にコピー

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7705

Java チュートリアル

1640

CakePHP チュートリアル

1394

Laravel チュートリアル

1288

PHP チュートリアル

1231

Related knowledge

Ouyi ウォレットのニーモニックフレーズを忘れた場合はどうすればよいですか?まだ見つかるでしょうか？ Jul 19, 2024 pm 12:13 PM

Web3 の世界では、無料ではありますが、危険がいっぱいです。したがって、Ouyi ウォレットのセキュリティの第一歩は、秘密キーとニーモニックフレーズを保護することです。秘密キーの重要性は誰もが知っていますが、現在ではニーモニックが重視されています。ニーモニックフレーズは、秘密キーの別の形式の提示として理解できます。ニーモニックフレーズを持つことは、秘密キーを所有し、ウォレット資産を制御することと同等です。また、秘密鍵よりも存在感が低く、ユーザーが Ouyi Wallet の記憶フレーズを忘れてしまう可能性もあると考えられます。では、Ouyi Wallet のニーモニックフレーズを忘れた場合はどうすればよいでしょうか? Ouyi Wallet ニーモニックを忘れた場合でも取得できますか?ユーザーが注意する必要がある問題。一般に、ニーモニックフレーズを忘れた場合は取り戻すことはできませんが、関連するカスタマーサービス担当者に連絡して支援を求めてください。以下の編集者が詳しく説明します。 Ouyi ウォレットのニーモニックフレーズを忘れた場合はどうすればよいですか? Ouyi Wallet のニーモニックフレーズを忘れた場合は、もう一度思い出していただくか、弊社までご連絡ください。

ブロードバンドに接続しているのにインターネットにアクセスできない問題を解決する（トラブルシューティング） May 05, 2024 pm 06:01 PM

今日の情報化時代において、インターネットは人々の生活に欠かせないものとなっています。しかし、インターネットに接続できなかったり、トラブルが発生したりすることもあります。ただし、たとえば、ブロードバンドはすでに接続されています。この場合、問題を段階的にトラブルシューティングしてネットワーク接続を復元する必要があります。デバイスの接続状態を確認する: 携帯電話やその他のデバイスがブロードバンドネットワークに正しく接続されているかどうか、コンピュータをチェックして、無線ネットワークまたは有線ネットワーク接続が正常であることを確認します。 2. ブロードバンドデバイスを再起動します。デバイスをリセットして接続を再確立し、数分待ってから再びオンにします。ブロードバンドルーターまたはモデムの電源をオフにしてみてください。 3. ブロードバンドアカウント番号とパスワードを確認します。アカウントまたはパスワードが間違っているためにインターネットにアクセスできなくなることを避けるために、入力したブロードバンドアカウント番号とパスワードが正しいことを確認してください。 4. チェックD

テレビに雪の結晶が表示された場合の対処方法 (テレビに雪の結晶が表示される問題を解決する実用的な方法) Jun 01, 2024 pm 09:44 PM

私たちの日常生活では、重要なエンターテイメント機器であるテレビに雪の結晶が発生することが多く、視聴体験に影響を与えます。この記事では、テレビの雪の問題を解決し、テレビ番組をより楽しむための実践的な方法を紹介します。 1. 雪の結晶の問題の原因の分析テレビに現れる雪の結晶は、通常、信号干渉、アンテナの問題、または TV 信号源によって引き起こされます。 2. アンテナの接続が緩んでいないか確認します。まず、テレビとアンテナの接続がしっかりしているかどうかを確認してください。緩んでいる場合は、もう一度接続してください。 3. 適切なアンテナを選択し、アンテナの位置と方向が正しいことを確認します。性能の良いアンテナを選択すると、信号の受信品質が向上します。 4. アンテナの方向を調整します。アンテナを回転または角度を調整して、最適な信号受信方向を見つけます。 5. 屋内アンテナ信号を使用する

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエストメソッドを使用した具体的なコード例です。まず、jQuery ライブラリファイルが含まれていることを確認してから、$.ajax({u

テレビ再生時のカサカサ音を解決する方法（テレビのカサカサ音を解消） Jul 21, 2024 pm 03:29 PM

テクノロジーの進歩と、ハイビジョン画質に対する人々の需要の高まりに伴い、テレビはホームエンターテイメントに欠かせない要素となっています。しかし、テレビ視聴中に「ガサガサ」という不快な音が聞こえる場合があり、視聴に影響を与えるだけでなく、テレビの故障の原因となる場合もあります。この記事では、より高画質な動画視聴をお楽しみいただくために、テレビ再生時のカサカサ音を解決する方法をご紹介します。 1: 音声ケーブルの接続が緩んでいないか確認します。テレビの再生中にカサカサ音がする場合は、まず音声ケーブルの接続がしっかりしているかどうかを確認してください。オーディオケーブルの両端が正しいコネクタに差し込まれていることを確認し、接続が緩んでいたり接続不良がないか確認してください。 2: テレビの音量とオーディオデバイスの設定を調整するテレビの音量とオーディオデバイスの設定を適切に調整すると、カサカサ音を解消できます。試す

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキストコンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキストコンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキストコンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンクタグ (タグ) のテキストコンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

パソコンにBluetoothがない場合の解決方法（Bluetooth機能をすぐに追加する方法と注意点） Jun 29, 2024 pm 06:57 PM

現代社会において、Bluetoothは日常生活に欠かせない技術となっています。ただし、一部の古いコンピュータでは、Bluetooth 機能が組み込まれていない場合があります。コンピュータに Bluetooth が搭載されていない場合に、Bluetooth デバイスを使用したい場合はどうすればよいでしょうか?この記事では、Bluetooth機能をすぐに追加するためのいくつかの方法と注意点を紹介します。 1. Bluetooth アダプターを使用する - Bluetooth アダプターは、USB インターフェイスを介してコンピューターに接続できる外部デバイスです。 -互換性のある Bluetooth アダプターを購入し、指示に従ってドライバーをインストールします。 -Bluetooth アダプタをコンピュータの USB ポートに接続し、システムがドライバを自動的にインストールするまで待ちます。 2. ドライバーを確認します。 1. コンピューターに Bluetooth デバイスがあるかどうかを確認します。デバイスマネージャーを開き、Bluetooth デバイスがあるかどうかを確認します。そうでない場合

See all articles

jQueryライブラリの競合についてどうするか

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック