ホームページ > 記事 > ウェブフロントエンド > jQuery プロトタイプの競合に対する 2 つの解決策 (デモ サンプルのダウンロード付き)_jquery
jQuery プロトタイプの競合に対する 2 つの解決策 (デモ サンプルのダウンロード付き)_jquery
- WBOYオリジナル
- 2016-05-16 15:19:061264ブラウズ
この記事では、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 プログラミングのすべての人に役立つことを願っています。