jQuery プロトタイプの競合に対する 2 つの解決策 (デモサンプルのダウンロード付き)

jQuery プロトタイプの競合に対する 2 つの解決策 (デモサンプルのダウンロード付き)_jquery

WBOY

リリース： 2016-05-16 15:19:06

オリジナル

1276 人が閲覧しました

この記事では、jQuery プロトタイプの競合に対する 2 つの解決策を例とともに分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

jquery とプロトタイプはどのように競合するのでしょうか? 最終的には、両方が $ を使用し、同時に使用されるため、混乱が生じます。この問題は少なくとも 5 回は解決されており、毎回確認する必要があります。痛くないよ、ふふ。

方法 1. jquery のコアライブラリファイルにコードを追加します。

1. 通常は jquery.js または jquery.min.js で、バージョン番号が付いているものもあります。それがどのファイルであるかだけを知ってください。

})( window );
jQuery.noConflict(); //最后面，加上这一行。

ログイン後にコピー

2. テスト jquery とプロトタイプファイルをロードします

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="jquery.min.js"></script>

ログイン後にコピー

3. jsコードの書き方

<script type="text/javascript">
alert('prototype value : '+$('test').value); //prototype写法
jQuery(document).ready(function($){ //注意这里的，jQuery和$
  alert('jquery value : '+$('#test').val()); //jquery写法
});
</script>

ログイン後にコピー

この方法を推奨します。この方法はより効果的です。

完全なデモコードは次のとおりです:

<html>
<head>
<script type="text/javascript" src="./prototype.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<form>
<input id="test" type='text' name='test' value='test'/>
</form>
<script type="text/javascript">
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
 alert('jquery value : '+$('#test').val());
});
</script>
</body>
</html>

ログイン後にコピー

方法 2: jquery が呼び出される場所の競合を解決する

1. テスト jquery とプロトタイプファイルをロードします

//jquery和prototype，没有先后顺序，谁先谁后都一样。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>

ログイン後にコピー

2.jsコード

<script type="text/javascript">
jQuery.noConflict(); //解决冲突，这个一定要放在js代码的最前面，不然就会报错了。
alert('prototype value : '+$('test').value);
jQuery(document).ready(function($){
  alert('jquery value : '+$('#test').val());
});
</script>

ログイン後にコピー

この方法は、jquery のコアソースファイルが独自のサーバー上にない場合、または jquery コードが比較的小さい状況に適しています。サンプルデモここをクリックしてご覧ください。

完全なデモはここをクリックしてくださいこのサイトからダウンロードしてください。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。