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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

jquery対立解決

この記事では、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 プログラミングのすべての人に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。