webcreator.me

全ての箇所で$をprototype.jsの動作をさせる場合

<script src="prototype.js"></script>
<script src="jquery.js"></script>
//ここの読み込みは必ずjQueryが後になるようにして下さい。

<script><!--
jQuery.noConflict();
jQuery(document).ready(function(){
  // ここでは、$はprototypeの動作をします。
  // jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。
});
//--></script>

ready内ではjQueryの動作をさせる場合

<script><!--
jQuery.noConflict();
jQuery(document).ready(function($){
  // ここでは、$はjQueryとして使えます。
});
// ここでは、$はprototype.jsの動作をします。
//--></script>

上記の2通りの方法で同時にprototype.jsとjQueryを使用できます。

どういうときにこの記述が必要になるかというと、jQueryの一番下に下記の記述がある場合、$が衝突しないように上記の書き方が必要になります。具体的にはデフォルトのWordPressのjQueryを読み込んでいるときなどが該当します。

https://saekosensei.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4

n.noConflict=function(b){return a.$===n&&(a.$=oc),b&&a.jQuery===n&&(a.jQuery=nc),n},b||(a.jQuery=a.$=n),n});
jQuery.noConflict();

参考サイト：

http://semooh.jp/jquery/ref/cont/with_prototype/