jQueryとprototype.jsを同時に使う際のコンフリクト回避方法。

JavaScriptライブラリとして2台勢力である「jQuery」と「prototype.js」。

この2つのライブラリを同時に使う場面は、ときどきあるかと思います。

jQuery、Prototype.jsともに、書式が似てるために、そのまま同時に読み込もうとするとお互いが『競合(コンフリクト)』してしまいます。

たとえば、こんな感じのコードを書いた場合など。

$('id_name');

これを回避するために、jQuery側の「$();」を違う名前に変えて使用します。

通常、headタグの中に下記を読ませて使用していますよね?

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

このあとに下記の2行のJavaScriptを追加するだけで、jQueryとPrototype.jsの競合を回避することができます。

<!--以下を追加-->
<script type="text/javascript">
 jQuery.noConflict();
 var j$ = jQuery;
</script>

読ませる順番も、下記の該当スクリプトの順になります。

  1. Prototype.jsの読み込み
  2. jQueryの読み込み
  3. コンフリクト回避のために接頭辞の変更

関連するWeb制作・開発Tips

関連リンク